woocommerce/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss

62 lines
1.2 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($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($gap-large / 1060px);
width: 35%;
.wc-blocks-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-blocks-components-panel {
padding-left: $gap;
padding-right: $gap;
}
}
}
// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty {
.wc-block-components-sidebar .wc-blocks-components-panel > h2 {
@include font-size(large);
@include reset-box();
}
}