woocommerce/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss

89 lines
1.9 KiB
SCSS

:where(.wp-block-woocommerce-legacy-template) {
margin-left: auto;
margin-right: auto;
}
.wp-block-woocommerce-classic-template__placeholder-warning {
border-left: 5px solid #2181d2;
padding-left: em(40px);
}
.wp-block-woocommerce-classic-template__placeholder .components-placeholder__fieldset {
display: grid;
grid-template-columns: 1fr;
}
.wp-block-woocommerce-classic-template__placeholder-wireframe,
.wp-block-woocommerce-classic-template__placeholder-copy {
grid-row-start: 1;
grid-column-start: 1;
transition: 0.3s all ease;
}
.wp-block-woocommerce-classic-template__placeholder-copy {
border: 1px solid $gray-900;
background-color: #fff;
padding: $gap-large $gap-larger;
border-radius: 3px;
display: flex;
flex-direction: column;
max-width: 900px;
width: 400px;
margin: auto;
opacity: 0;
z-index: 10;
.wp-block-woocommerce-classic-template__placeholder-copy__icon-container {
margin: 0 0 $gap;
span {
@include font-size(larger);
display: block;
}
.woo-icon {
color: #{$studio-woocommerce-purple};
@include font-size(large);
svg {
vertical-align: middle;
}
}
}
p {
margin: 0 0 $gap;
}
.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
justify-content: center;
margin: $gap 0;
}
}
.wp-block-woocommerce-classic-template__placeholder-wireframe {
pointer-events: none;
// Image based placeholders should fill horizontal width.
> img {
width: 100%;
}
}
.wp-block-woocommerce-legacy-template {
.components-placeholder {
box-shadow: none;
padding: 0;
}
}
.wp-block-woocommerce-legacy-template.is-selected {
.wp-block-woocommerce-classic-template__placeholder-wireframe {
filter: blur(3px);
opacity: 0.5;
* {
color: $gray-200 !important;
border-color: $gray-200 !important;
}
}
.wp-block-woocommerce-classic-template__placeholder-copy {
opacity: 1;
}
.components-placeholder {
box-shadow: inherit;
}
}