89 lines
1.9 KiB
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: $universal-border-radius;
|
|
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;
|
|
}
|
|
}
|