Merge pull request #72 from vektor-inc/develop

[ Change version ] 1.14.0
vektor-inc · Mar 18, 2022 · 18f0400 · 18f0400
2 parents a532536 + 239f589
commit 18f0400
Show file tree

Hide file tree

Showing 11 changed files with 1,399 additions and 1,001 deletions.
diff --git a/patterns-data/_scss/_vk-cols.scss b/patterns-data/_scss/_vk-cols.scss
@@ -49,54 +49,56 @@
     Fit : 余白のないカラム
     2カラムだけでなく3カラムや4カラムでも使用される想定
 /* ----------------------------------- */
-.vk-cols--fit.wp-block-columns {
-	&--gap1 {
+.vk-cols--fit {
+	&--gap1.wp-block-columns {
 		gap:1px;
 		@media (min-width: 600px) and (max-width: 781px) {
 			.wp-block-column:not(:only-child) {
 				flex-basis: calc(50% - 1px)!important;
 			}
 		}
 	}
-	&,
-	&:not(.is-not-stacked-on-mobile){
-		margin-top:0;
-		margin-bottom:0;
-		justify-content: space-between;
-		& > .wp-block-column {
-			*:last-child{
-				margin-bottom:0;
+	&.wp-block-columns {
+		&,
+		&:not(.is-not-stacked-on-mobile){
+			margin-top:0;
+			margin-bottom:0;
+			justify-content: space-between;
+			& > .wp-block-column {
+				*:last-child{
+					margin-bottom:0;
+				}
+				// 編集画面用
+				& > .wp-block-cover{
+					margin-top:0;
+				}
 			}
-			// 編集画面用
-			& > .wp-block-cover{
-				margin-top:0;
+			&.has-background {
+				// .has-background に対してコアが付与する余白を付与
+				padding: 0;
 			}
-		}
-		&.has-background {
-			// .has-background に対してコアが付与する余白を付与
-			padding: 0;
-		}
-		@media (max-width: 599px){
-			// アウター＆インナー両方背景指定がない場合
-			&:not(.has-background) > .wp-block-column:not(.has-background){
-				// padding-top:0 !important; カラムを積んだ時に上のカラムとくっついてしまう
-				padding-left:0 !important;
-				padding-right:0 !important;
+			@media (max-width: 599px){
+				// アウター＆インナー両方背景指定がない場合
+				&:not(.has-background) > .wp-block-column:not(.has-background){
+					// padding-top:0 !important; カラムを積んだ時に上のカラムとくっついてしまう
+					padding-left:0 !important;
+					padding-right:0 !important;
+				}
 			}
-		}
-		// コアのカラムブロックの余白打ち消し
-		@media (min-width: 782px){
-			.block-editor-block-list__block.wp-block-column:not(:first-child),
-			& > .wp-block-column:not(:first-child) {
-				margin-left: 0;
+			// コアのカラムブロックの余白打ち消し
+			@media (min-width: 782px){
+				.block-editor-block-list__block.wp-block-column:not(:first-child),
+				& > .wp-block-column:not(:first-child) {
+					margin-left: 0;
+				}
 			}
-		}
-		@media (min-width: 600px) and (max-width: 781px){
-			.wp-block-column:nth-child(2n) {
-				margin-left: 0;
-			}
-			.wp-block-column:not(:only-child) {
-				flex-basis: 50% !important;
+			@media (min-width: 600px) and (max-width: 781px){
+				.wp-block-column:nth-child(2n) {
+					margin-left: 0;
+				}
+				.wp-block-column:not(:only-child) {
+					flex-basis: 50% !important;
+				}
 			}
 		}
 	}
@@ -225,6 +227,7 @@
     メディアカラム
 /* ----------------------------------- */
 .vk-cols--media{
+
     .wp-block-column:not(:first-child) {
         .wp-block-image,
         figure {
@@ -241,6 +244,7 @@
     }
     @media (min-width: 782px) {
         .wp-block-column:not(:first-child) {
+			--wp--style--block-gap : 3rem;
             margin-left: 3rem;
         }
         &.vk-cols--reverse .wp-block-column:not(:first-child) {
@@ -249,6 +253,7 @@
         }
     }
     @media (min-width: 600px) and (max-width: 781px) {
+		--wp--style--block-gap : 2rem;
         &.vk-cols--reverse .wp-block-column:not(:first-child) {
             margin-right: 2rem;
             margin-left: 0;