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

80 lines
1.5 KiB
SCSS
Raw Normal View History

.wc-block-components-sidebar-layout {
display: flex;
flex-wrap: wrap;
margin: 0 auto $gap;
position: relative;
.wc-block-must-login-prompt {
display: block;
}
.wc-block-components-main {
box-sizing: border-box;
margin: 0;
padding-right: math.percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
width: 65%;
}
}
.wc-block-components-sidebar {
box-sizing: border-box;
margin: 0;
padding-left: math.percentage(math.div($gap-large, 1060px));
width: 35%;
.wc-block-components-panel > h2 {
@include font-size(regular);
@include reset-box();
}
}
.is-medium,
.is-small,
.is-mobile {
&.wc-block-components-sidebar-layout {
flex-direction: column;
margin: 0 auto $gap;
.wc-block-components-main {
padding: 0;
width: 100%;
}
.wc-block-components-sidebar {
padding: 0;
width: 100%;
}
}
}
.is-large {
.wc-block-components-sidebar {
.wc-block-components-totals-item,
.wc-block-components-totals-coupon-link,
.wc-block-components-panel {
padding-left: $gap;
padding-right: $gap;
}
.wc-block-components-panel {
.wc-block-components-totals-item {
padding: 0;
}
}
}
}
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
.wc-block-components-sidebar .wc-block-components-panel > h2 {
@include reset-typography();
.wc-block-components-panel__button {
font-weight: 400;
}
}
// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty {
.wc-block-components-sidebar .wc-block-components-panel > h2 {
@include font-size(large);
@include reset-box();
}
}