瀏覽代碼

Varia: Add bottom margin to column cells for mobile

Takashi Irie 6 年之前
父節點
當前提交
ef26c42f41
共有 3 個文件被更改,包括 59 次插入15 次删除
  1. 17 5
      varia/sass/blocks/columns/_style.scss
  2. 21 5
      varia/style-rtl.css
  3. 21 5
      varia/style.css

+ 17 - 5
varia/sass/blocks/columns/_style.scss

@@ -1,12 +1,7 @@
 .wp-block-columns {
 .wp-block-columns {
 
 
 	.wp-block-column {
 	.wp-block-column {
-
-		/* Resetting margins to match _block-container.scss */
-		margin-bottom: 0;
-
 		& > * {
 		& > * {
-
 			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
 
 
@@ -23,6 +18,23 @@
 				margin-bottom: 0;
 				margin-bottom: 0;
 			}
 			}
 		}
 		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.wp-block-column:not(:last-child) {
+		margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+
+		@include media(mobile) {
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		}
+
+		@include media(laptop) {
+			/* Resetting margins to match _block-container.scss */
+			margin-bottom: 0;
+		}
 	}
 	}
 
 
 	/**
 	/**

+ 21 - 5
varia/style-rtl.css

@@ -1127,11 +1127,6 @@ input.has-focus[type="submit"],
 	 */
 	 */
 }
 }
 
 
-.wp-block-columns .wp-block-column {
-	/* Resetting margins to match _block-container.scss */
-	margin-bottom: 0;
-}
-
 .wp-block-columns .wp-block-column > * {
 .wp-block-columns .wp-block-column > * {
 	margin-top: 21.312px;
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
 	margin-bottom: 21.312px;
@@ -1152,6 +1147,27 @@ input.has-focus[type="submit"],
 	margin-bottom: 0;
 	margin-bottom: 0;
 }
 }
 
 
+.wp-block-columns .wp-block-column:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-columns .wp-block-column:not(:last-child) {
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-columns .wp-block-column:not(:last-child) {
+		margin-bottom: 32px;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-columns .wp-block-column:not(:last-child) {
+		/* Resetting margins to match _block-container.scss */
+		margin-bottom: 0;
+	}
+}
+
 .wp-block-columns.alignfull {
 .wp-block-columns.alignfull {
 	padding-right: 16px;
 	padding-right: 16px;
 	padding-left: 16px;
 	padding-left: 16px;

+ 21 - 5
varia/style.css

@@ -1127,11 +1127,6 @@ input.has-focus[type="submit"],
 	 */
 	 */
 }
 }
 
 
-.wp-block-columns .wp-block-column {
-	/* Resetting margins to match _block-container.scss */
-	margin-bottom: 0;
-}
-
 .wp-block-columns .wp-block-column > * {
 .wp-block-columns .wp-block-column > * {
 	margin-top: 21.312px;
 	margin-top: 21.312px;
 	margin-bottom: 21.312px;
 	margin-bottom: 21.312px;
@@ -1152,6 +1147,27 @@ input.has-focus[type="submit"],
 	margin-bottom: 0;
 	margin-bottom: 0;
 }
 }
 
 
+.wp-block-columns .wp-block-column:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-columns .wp-block-column:not(:last-child) {
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-columns .wp-block-column:not(:last-child) {
+		margin-bottom: 32px;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.wp-block-columns .wp-block-column:not(:last-child) {
+		/* Resetting margins to match _block-container.scss */
+		margin-bottom: 0;
+	}
+}
+
 .wp-block-columns.alignfull {
 .wp-block-columns.alignfull {
 	padding-left: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-right: 16px;