75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
|
.wc-block-components-sidebar-layout {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin: 0 auto $gap;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.wc-block-components-main {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding-right: percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-block-components-sidebar {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding-left: percentage(math.div($gap-large, 1060px));
|
||
|
|
width: 35%;
|
||
|
|
|
||
|
|
.wc-block-components-panel > h2 {
|
||
|
|
@include font-size(regular);
|
||
|
|
@include reset-box();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-medium,
|
||
|
|
.is-small,
|
||
|
|
.is-mobile {
|
||
|
|
&.wc-block-components-sidebar-layout {
|
||
|
|
flex-direction: column;
|
||
|
|
margin: 0 auto $gap;
|
||
|
|
|
||
|
|
.wc-block-components-main {
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.wc-block-components-sidebar {
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.is-large {
|
||
|
|
.wc-block-components-sidebar {
|
||
|
|
.wc-block-components-totals-item,
|
||
|
|
.wc-block-components-panel {
|
||
|
|
padding-left: $gap;
|
||
|
|
padding-right: $gap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-block-components-panel {
|
||
|
|
.wc-block-components-totals-item {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wc-block-components-sidebar .wc-block-components-panel > h2 {
|
||
|
|
@include reset-typography();
|
||
|
|
.wc-block-components-panel__button {
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// For Twenty Twenty we need to increase specificity a bit more.
|
||
|
|
.theme-twentytwenty {
|
||
|
|
.wc-block-components-sidebar .wc-block-components-panel > h2 {
|
||
|
|
@include font-size(large);
|
||
|
|
@include reset-box();
|
||
|
|
}
|
||
|
|
}
|