woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss

160 lines
3.1 KiB
SCSS
Raw Normal View History

.wp-block-woocommerce-checkout .with-scroll-to-top__scroll-point {
top: -96px;
}
.wc-block-checkout__sidebar {
.wc-block-components-product-name {
Add subtotal and sale badge filters - PR to correct branch (https://github.com/woocommerce/woocommerce-blocks/pull/3826) * Replace filters with an extendibility API to hook into Cart and Checkout blocks * Update docs * Add a validate argument * Add docs comments * Add tests * Add validation function * Prefix validateElementOrString with __experimental * Update experimental docs * Typo * Update comment * Update JS docs * Use an object for applyCheckoutFilter args * Args doesn't need to be an object * Wrap validation function execution in a try/catch block * Only accept strings for the totalLabel filter * Change applyCheckoutFilter signature * Apply filters for subtotal and sale badge in CartLineItemRow * Append suffix to prices and SaleBadge if passed in as a prop * Add subtotal filter to OrderSummaryItem * Add tests for OrderSummaryItem and ProductPrice * Rename test for ProductPrice * Update checkout filter registration plugin name * Remove obsolete snapshop * Remove suffix and change to format This is because we want to make the entire price string editable, not just the part after it. * Change formatting on SaleBadge to use createInterpolateElement * Remove tests that are no longer needed. * Update ProductPrice tests to reflect changes to format prop * Check that subtotalPriceFormat contains <price/> in OrderSummaryItem * Fix cart block styling to stop badges overflowing the container * Add <price/> placeholder in OrderSummaryItem price filter Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2021-02-10 17:12:47 +00:00
display: block;
color: inherit;
flex-grow: 1;
// Required by IE11.
flex-basis: 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-totals-taxes,
.wc-block-components-totals-footer-item {
@include with-translucent-border(1px 0 0);
margin: 0;
padding: em($gap-small) 0;
}
}
.wc-block-checkout__actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 9px;
.wc-block-components-checkout-place-order-button {
width: 50%;
padding: 1em;
height: auto;
.wc-block-components-button__text {
line-height: 24px;
> svg {
fill: $white;
vertical-align: top;
}
}
}
}
// Loading placeholder state.
.wc-block-checkout--is-loading {
.wc-block-components-express-payment,
.wc-block-checkout__actions button {
@include placeholder();
@include force-content();
}
.wc-block-components-express-payment {
min-height: 150px;
}
.wc-block-components-express-payment-continue-rule > span {
@include placeholder();
@include force-content();
width: 150px;
}
.wc-block-checkout__form {
.wc-block-components-checkout-step__title {
@include placeholder();
@include force-content();
display: block;
width: 10em;
&::before {
@include placeholder();
@include force-content();
border-radius: 50%;
display: block;
height: 100%;
width: 1.5em;
}
}
.wc-block-components-checkout-step__container::after {
@include placeholder();
}
.wc-block-components-checkout-step__content > span {
@include placeholder();
@include force-content();
display: block;
min-height: 100px;
}
.wc-block-components-checkout-step::before,
.wc-block-components-checkout-step::after {
@include placeholder();
}
}
.wc-block-checkout__sidebar .components-card {
@include placeholder();
@include force-content();
min-height: 460px;
}
}
.wc-block-components-sidebar-layout.wc-block-checkout--skeleton {
display: none;
}
.is-loading + .wc-block-components-sidebar-layout.wc-block-checkout--skeleton {
display: flex;
}
.wc-block-checkout-empty,
.wc-block-checkout-error {
padding: $gap-largest;
text-align: center;
width: 100%;
.wc-block-checkout-empty__image,
.wc-block-checkout-error__image {
max-width: 150px;
margin: 0 auto 1em;
display: block;
color: inherit;
}
.wc-block-checkout-empty__title,
.wc-block-checkout-error__title {
display: block;
margin: 0;
font-weight: bold;
}
.wc-block-checkout-empty__description,
.wc-block-checkout-error__description {
display: block;
margin: 0.25em 0 1em 0;
}
}
.is-mobile {
.wc-block-checkout__actions {
.wc-block-components-checkout-return-to-cart-button {
display: none;
}
.wc-block-components-checkout-place-order-button {
width: 100%;
}
}
}
.is-mobile,
.is-small,
.is-medium {
.wc-block-checkout__main {
order: 1;
}
.wc-block-checkout__sidebar {
margin-bottom: $gap-largest;
order: 0;
}
}
.is-large {
.wc-block-checkout__actions {
@include with-translucent-border(1px 0 0);
margin-right: $gap-large;
padding-top: em($gap-large);
}
}