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

93 lines
2.1 KiB
SCSS
Raw Normal View History

Refactor Cart and Checkout Page Templates (https://github.com/woocommerce/woocommerce-blocks/pull/10773) * Rename checkout template slug * Remove redirect and custom title * Classic shortcode block for checkout * Empty title * WIP placeholder * Change blockified template * Prefix cart and checkout templates with "Page: " * Template migration routine * Apply same treatment to cart template * Notices * Update placeholder text * Classic shortcodes block * Page content wrapper for templates * Update default * Do not save attributes * Update templates * Remove cart classic template * Reverted endpoints for Cart & Checkout templates. This reverts PR 9406 * Migrate page content wrapper. * Removed useless method arg. Minor tweaks. * Skip migration if the theme has a template file for this page. * Removed impossible condition. * Migrate page content wrapper. * Remove TemplateNotice in favour of DefaultNotice * Documentation links in shortcode placeholder * Hide cart and checkout page selector when using block themes * Unused var * Add tests for template changes * Revert changes to classic-template * Allow frontend redirect * Unused file * Bump version for updater * Support x template naming as well as page-x * Need to add item to cart to test checkout * Fix header test by fixing utility for adding to cart * Remove permalink tests * Click body * Wait for content to finish loading * Wait for add to cart response when adding to cart without item name * Wait for save before visiting frontend * Set content instead of inserting block * Perform test in site editor rather than page editor * Prevent notice to set the default cart/checkout page from showing on the site editor. --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2023-09-19 09:58:18 +00:00
:where(.wp-block-woocommerce-classic-shortcode) {
margin-left: auto;
margin-right: auto;
}
.wp-block-woocommerce-classic-shortcode__placeholder-warning {
border-left: 5px solid #2181d2;
padding-left: em(40px);
}
.wp-block-woocommerce-classic-shortcode__placeholder .components-placeholder__fieldset {
display: grid;
grid-template-columns: 1fr;
}
.wp-block-woocommerce-classic-shortcode__placeholder-wireframe,
.wp-block-woocommerce-classic-shortcode__placeholder-copy {
grid-row-start: 1;
grid-column-start: 1;
transition: 0.3s all ease;
}
.wp-block-woocommerce-classic-shortcode__placeholder-copy {
border: 1px solid $gray-900;
background-color: #fff;
padding: $gap-large $gap-larger;
border-radius: $universal-border-radius;
Refactor Cart and Checkout Page Templates (https://github.com/woocommerce/woocommerce-blocks/pull/10773) * Rename checkout template slug * Remove redirect and custom title * Classic shortcode block for checkout * Empty title * WIP placeholder * Change blockified template * Prefix cart and checkout templates with "Page: " * Template migration routine * Apply same treatment to cart template * Notices * Update placeholder text * Classic shortcodes block * Page content wrapper for templates * Update default * Do not save attributes * Update templates * Remove cart classic template * Reverted endpoints for Cart & Checkout templates. This reverts PR 9406 * Migrate page content wrapper. * Removed useless method arg. Minor tweaks. * Skip migration if the theme has a template file for this page. * Removed impossible condition. * Migrate page content wrapper. * Remove TemplateNotice in favour of DefaultNotice * Documentation links in shortcode placeholder * Hide cart and checkout page selector when using block themes * Unused var * Add tests for template changes * Revert changes to classic-template * Allow frontend redirect * Unused file * Bump version for updater * Support x template naming as well as page-x * Need to add item to cart to test checkout * Fix header test by fixing utility for adding to cart * Remove permalink tests * Click body * Wait for content to finish loading * Wait for add to cart response when adding to cart without item name * Wait for save before visiting frontend * Set content instead of inserting block * Perform test in site editor rather than page editor * Prevent notice to set the default cart/checkout page from showing on the site editor. --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2023-09-19 09:58:18 +00:00
display: flex;
flex-direction: column;
max-width: 900px;
width: 400px;
margin: auto;
opacity: 0;
z-index: 10;
.wp-block-woocommerce-classic-shortcode__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-shortcode__placeholder-migration-button-container {
justify-content: center;
margin: $gap 0;
}
}
.wp-block-woocommerce-classic-shortcode__placeholder-wireframe {
pointer-events: none;
// Image based placeholders should fill horizontal width.
> img {
width: 100%;
}
}
.wp-block-woocommerce-classic-shortcode {
.components-placeholder {
box-shadow: none;
padding: 0;
}
}
.is-selected .wp-block-woocommerce-classic-shortcode,
.is-hovered .wp-block-woocommerce-classic-shortcode,
.wp-block-woocommerce-classic-shortcode.is-selected,
.wp-block-woocommerce-classic-shortcode.is-hovered {
.wp-block-woocommerce-classic-shortcode__placeholder-wireframe {
filter: blur(3px);
opacity: 0.5;
* {
color: $gray-200 !important;
border-color: $gray-200 !important;
}
}
.wp-block-woocommerce-classic-shortcode__placeholder-copy {
opacity: 1;
}
.components-placeholder {
box-shadow: inherit;
}
}