From 71b0bac94dbd9e5e8355d052cd98187407774233 Mon Sep 17 00:00:00 2001 From: Thomas Roberts Date: Fri, 4 Oct 2024 18:05:08 +0100 Subject: [PATCH] Make delivery date and description stack vertically --- .../shipping-rates-control-package/style.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss index f7f86c978da..4d9ab19f32e 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss @@ -40,12 +40,24 @@ } .wc-block-components-radio-control__description-group { - @include font-size(smaller); + // Display in a column so the delivery time can render first. + display: flex; + flex-direction: column; + // Use balance as this is not a good candidate for pretty. Pretty is intended for body copy which this is not. text-wrap: balance; // This targets the rate *description* and prevents the rules applying to the delivery_time. .wc-block-components-radio-control__description { padding-right: $gap-small; + order: 2; + } + + .wc-block-components-radio-control__secondary-description { + order: 1; + text-align: left; + width: auto; + font-size: 0.825em; + margin-top: 3px; } }