61 lines
1.0 KiB
SCSS
61 lines
1.0 KiB
SCSS
// Import the woocommerce components stylesheet
|
|
@import "~@woocommerce/components/build-style/style.css";
|
|
|
|
// Hack to hide preview overflow.
|
|
.editor-block-preview__content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Align the block icons in edit mode
|
|
.components-placeholder__label .gridicon,
|
|
.components-placeholder__label .material-icon {
|
|
margin-right: 1ch;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.wc-block-products-grid {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
|
|
&.is-loading,
|
|
&.is-not-found,
|
|
&.cols-1 {
|
|
display: block;
|
|
}
|
|
|
|
.wc-product-preview {
|
|
flex: 1;
|
|
padding: $gap/2;
|
|
}
|
|
|
|
@for $i from 2 to 7 {
|
|
&.cols-#{$i} .wc-product-preview {
|
|
max-width: calc(#{ 100% / $i });
|
|
min-width: calc(#{ 100% / $i });
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
&.components-placeholder {
|
|
padding: 2em 1em;
|
|
}
|
|
|
|
// Styles for "resuable block" preview.
|
|
.editor-block-preview & {
|
|
min-width: 5em;
|
|
|
|
@for $i from 1 to 7 {
|
|
&.cols-#{$i} {
|
|
min-width: $i * 5em;
|
|
}
|
|
}
|
|
|
|
&.is-loading,
|
|
&.is-not-found {
|
|
min-width: auto;
|
|
}
|
|
}
|
|
}
|