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

83 lines
1.4 KiB
SCSS
Raw Normal View History

.wc-block-sidebar-layout {
display: flex;
flex-wrap: wrap;
margin: 0 (-$gap) $gap;
.wc-block-main {
margin: 0;
padding: 0 $gap;
width: 65%;
}
}
.wc-block-sidebar {
margin: 0;
padding: 0 $gap;
width: 35%;
// Reset Gutenberg <Panel> styles when used in the sidebar.
.components-panel__body {
border-top: 1px solid $core-grey-light-600;
border-bottom: 1px solid $core-grey-light-600;
&.is-opened {
padding-left: 0;
padding-right: 0;
> .components-panel__body-title {
margin-left: 0;
margin-right: 0;
}
}
> .components-panel__body-title,
.components-panel__body-toggle {
&,
&:hover,
&:focus,
&:active {
background-color: transparent;
color: inherit;
}
}
.components-panel__body-toggle {
font-weight: normal;
font-size: inherit;
padding-left: 0;
padding-right: 36px;
&.components-button,
&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
color: inherit;
}
}
}
}
@include breakpoint( "<782px" ) {
.wc-block-sidebar-layout {
flex-direction: column;
margin: 0 0 $gap;
.wc-block-main {
padding: 0;
width: 100%;
}
.wc-block-sidebar {
padding: 0;
width: 100%;
// Reset (remove) totals "card" styling on mobile.
.components-card {
box-shadow: none;
border: none;
}
.components-card__body {
border: none;
padding: 0;
}
}
}
}