diff --git a/patterns-data/_scss/_vk-cols.scss b/patterns-data/_scss/_vk-cols.scss index a7ae6ac..4c6a251 100644 --- a/patterns-data/_scss/_vk-cols.scss +++ b/patterns-data/_scss/_vk-cols.scss @@ -49,8 +49,8 @@ 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) { @@ -58,45 +58,47 @@ } } } - &, - &: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 (min-width: 782px){ - .block-editor-block-list__block.wp-block-column:not(:first-child), - & > .wp-block-column:not(:first-child) { - margin-left: 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 (min-width: 600px) and (max-width: 781px){ - .wp-block-column:nth-child(2n) { - 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; + } } - .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; + } } } } diff --git a/patterns-data/style.css b/patterns-data/style.css index 830d1e2..ff59229 100755 --- a/patterns-data/style.css +++ b/patterns-data/style.css @@ -1 +1 @@ -.vk-cols--reverse{flex-direction:row-reverse}@media(min-width: 600px){.vk-cols--reverse .wp-block-column{margin-left:1em}.vk-cols--reverse .wp-block-column:last-child{margin-right:1em;margin-left:0}.vk-cols--reverse.vk-cols--fit .wp-block-column{margin-right:0;margin-left:0}}@media(min-width: 782px){.vk-cols--reverse.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--reverse.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n){margin-left:0}}.vk-cols--hasbtn{margin-bottom:0}.vk-cols--hasbtn>.row>.vk_gridColumn_item,.vk-cols--hasbtn>.wp-block-column{position:relative;padding-bottom:3em;margin-bottom:var(--vk-margin-block-bottom)}.vk-cols--hasbtn>.row>.vk_gridColumn_item>.wp-block-buttons,.vk-cols--hasbtn>.row>.vk_gridColumn_item>.vk_button,.vk-cols--hasbtn>.wp-block-column>.wp-block-buttons,.vk-cols--hasbtn>.wp-block-column>.vk_button{position:absolute;bottom:0;width:calc(100% - 15px - 15px)}.vk-cols--fit.wp-block-columns--gap1{gap:1px}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit.wp-block-columns--gap1 .wp-block-column:not(:only-child){flex-basis:calc(50% - 1px) !important}}.vk-cols--fit.wp-block-columns,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile){margin-top:0;margin-bottom:0;justify-content:space-between}.vk-cols--fit.wp-block-columns>.wp-block-column *:last-child,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column *:last-child{margin-bottom:0}.vk-cols--fit.wp-block-columns>.wp-block-column>.wp-block-cover,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column>.wp-block-cover{margin-top:0}.vk-cols--fit.wp-block-columns.has-background,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile).has-background{padding:0}@media(max-width: 599px){.vk-cols--fit.wp-block-columns:not(.has-background)>.wp-block-column:not(.has-background),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile):not(.has-background)>.wp-block-column:not(.has-background){padding-left:0 !important;padding-right:0 !important}}@media(min-width: 782px){.vk-cols--fit.wp-block-columns .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns>.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit.wp-block-columns .wp-block-column:nth-child(2n),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:nth-child(2n){margin-left:0}.vk-cols--fit.wp-block-columns .wp-block-column:not(:only-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:not(:only-child){flex-basis:50% !important}}.vk-cols--fit.vk-cols--grid>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:50%}@media(max-width: 599px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{width:100vw;margin-right:calc((100% - 100vw)/2);margin-left:calc((100% - 100vw)/2)}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{margin-right:calc(100% - 50vw);width:50vw}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column{margin-left:0;margin-right:0}.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover{margin-left:calc(100% - 50vw)}}.vk-cols--menu h2,.vk-cols--menu h3,.vk-cols--menu h4,.vk-cols--menu h5{margin-bottom:.2em;text-shadow:#000 0 0 10px}.vk-cols--menu h2:first-child,.vk-cols--menu h3:first-child,.vk-cols--menu h4:first-child,.vk-cols--menu h5:first-child{margin-top:0}.vk-cols--menu p{margin-bottom:1rem;text-shadow:#000 0 0 10px}.vk-cols--menu .wp-block-cover__inner-container:last-child{margin-bottom:0}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover img{filter:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover{background-color:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover .wp-block-cover__image-background{filter:unset !important}.vk-cols--fitbnrs .wp-block-cover__inner-container{position:absolute;height:100%;width:100%}.vk-cols--fitbnrs .vk_button{height:100%;margin:0}.vk-cols--fitbnrs .vk_button .vk_button_btn,.vk-cols--fitbnrs .vk_button .btn{height:100%;width:100%;border:none;box-shadow:none;background-color:unset;transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:hover,.vk-cols--fitbnrs .vk_button .btn:hover{transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:after,.vk-cols--fitbnrs .vk_button .btn:after{border:none}.vk-cols--fitbnrs .vk_button .vk_button_link_txt{width:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);font-size:2rem;text-shadow:#000 0 0 10px}.vk-cols--fitbnrs .vk_button .vk_button_link_subCaption{width:100%;position:absolute;top:calc(50% + 2.2em);left:50%;transform:translateY(-50%) translateX(-50%);text-shadow:#000 0 0 10px}.vk-cols--media .wp-block-column:not(:first-child) .wp-block-image,.vk-cols--media .wp-block-column:not(:first-child) figure{margin-bottom:0}@media(min-width: 600px){.vk-cols--media.vk-cols--reverse .wp-block-column:first-child{margin-left:0}}@media(min-width: 782px){.vk-cols--media .wp-block-column:not(:first-child){margin-left:3rem}.vk-cols--media.vk-cols--reverse .wp-block-column:not(:first-child){margin-right:3rem;margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--media.vk-cols--reverse .wp-block-column:not(:first-child){margin-right:2rem;margin-left:0}}.vk-fit-map iframe{position:relative;margin-bottom:0;display:block;max-height:400px;width:100vw}.no-margin{margin:0}@media(max-width: 599px){.wp-block-image.vk-aligncenter--mobile>.alignright{float:none;margin-left:auto;margin-right:auto}.vk-no-padding-horizontal--mobile{padding-left:0 !important;padding-right:0 !important}} +.vk-cols--reverse{flex-direction:row-reverse}@media(min-width: 600px){.vk-cols--reverse .wp-block-column{margin-left:1em}.vk-cols--reverse .wp-block-column:last-child{margin-right:1em;margin-left:0}.vk-cols--reverse.vk-cols--fit .wp-block-column{margin-right:0;margin-left:0}}@media(min-width: 782px){.vk-cols--reverse.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--reverse.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n){margin-left:0}}.vk-cols--hasbtn{margin-bottom:0}.vk-cols--hasbtn>.row>.vk_gridColumn_item,.vk-cols--hasbtn>.wp-block-column{position:relative;padding-bottom:3em;margin-bottom:var(--vk-margin-block-bottom)}.vk-cols--hasbtn>.row>.vk_gridColumn_item>.wp-block-buttons,.vk-cols--hasbtn>.row>.vk_gridColumn_item>.vk_button,.vk-cols--hasbtn>.wp-block-column>.wp-block-buttons,.vk-cols--hasbtn>.wp-block-column>.vk_button{position:absolute;bottom:0;width:calc(100% - 15px - 15px)}.vk-cols--fit--gap1.wp-block-columns{gap:1px}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit--gap1.wp-block-columns .wp-block-column:not(:only-child){flex-basis:calc(50% - 1px) !important}}.vk-cols--fit.wp-block-columns,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile){margin-top:0;margin-bottom:0;justify-content:space-between}.vk-cols--fit.wp-block-columns>.wp-block-column *:last-child,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column *:last-child{margin-bottom:0}.vk-cols--fit.wp-block-columns>.wp-block-column>.wp-block-cover,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column>.wp-block-cover{margin-top:0}.vk-cols--fit.wp-block-columns.has-background,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile).has-background{padding:0}@media(max-width: 599px){.vk-cols--fit.wp-block-columns:not(.has-background)>.wp-block-column:not(.has-background),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile):not(.has-background)>.wp-block-column:not(.has-background){padding-left:0 !important;padding-right:0 !important}}@media(min-width: 782px){.vk-cols--fit.wp-block-columns .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns>.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit.wp-block-columns .wp-block-column:nth-child(2n),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:nth-child(2n){margin-left:0}.vk-cols--fit.wp-block-columns .wp-block-column:not(:only-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:not(:only-child){flex-basis:50% !important}}.vk-cols--fit.vk-cols--grid>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:50%}@media(max-width: 599px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{width:100vw;margin-right:calc((100% - 100vw)/2);margin-left:calc((100% - 100vw)/2)}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{margin-right:calc(100% - 50vw);width:50vw}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column{margin-left:0;margin-right:0}.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover{margin-left:calc(100% - 50vw)}}.vk-cols--menu h2,.vk-cols--menu h3,.vk-cols--menu h4,.vk-cols--menu h5{margin-bottom:.2em;text-shadow:#000 0 0 10px}.vk-cols--menu h2:first-child,.vk-cols--menu h3:first-child,.vk-cols--menu h4:first-child,.vk-cols--menu h5:first-child{margin-top:0}.vk-cols--menu p{margin-bottom:1rem;text-shadow:#000 0 0 10px}.vk-cols--menu .wp-block-cover__inner-container:last-child{margin-bottom:0}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover img{filter:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover{background-color:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover .wp-block-cover__image-background{filter:unset !important}.vk-cols--fitbnrs .wp-block-cover__inner-container{position:absolute;height:100%;width:100%}.vk-cols--fitbnrs .vk_button{height:100%;margin:0}.vk-cols--fitbnrs .vk_button .vk_button_btn,.vk-cols--fitbnrs .vk_button .btn{height:100%;width:100%;border:none;box-shadow:none;background-color:unset;transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:hover,.vk-cols--fitbnrs .vk_button .btn:hover{transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:after,.vk-cols--fitbnrs .vk_button .btn:after{border:none}.vk-cols--fitbnrs .vk_button .vk_button_link_txt{width:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);font-size:2rem;text-shadow:#000 0 0 10px}.vk-cols--fitbnrs .vk_button .vk_button_link_subCaption{width:100%;position:absolute;top:calc(50% + 2.2em);left:50%;transform:translateY(-50%) translateX(-50%);text-shadow:#000 0 0 10px}.vk-cols--media .wp-block-column:not(:first-child) .wp-block-image,.vk-cols--media .wp-block-column:not(:first-child) figure{margin-bottom:0}@media(min-width: 600px){.vk-cols--media.vk-cols--reverse .wp-block-column:first-child{margin-left:0}}@media(min-width: 782px){.vk-cols--media .wp-block-column:not(:first-child){margin-left:3rem}.vk-cols--media.vk-cols--reverse .wp-block-column:not(:first-child){margin-right:3rem;margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--media.vk-cols--reverse .wp-block-column:not(:first-child){margin-right:2rem;margin-left:0}}.vk-fit-map iframe{position:relative;margin-bottom:0;display:block;max-height:400px;width:100vw}.no-margin{margin:0}@media(max-width: 599px){.wp-block-image.vk-aligncenter--mobile>.alignright{float:none;margin-left:auto;margin-right:auto}.vk-no-padding-horizontal--mobile{padding-left:0 !important;padding-right:0 !important}}