Make delivery date and description stack vertically

This commit is contained in:
Thomas Roberts 2024-10-04 18:05:08 +01:00
parent 78504d5d0f
commit 71b0bac94d
No known key found for this signature in database
GPG Key ID: 0262BEBCBE336365
1 changed files with 13 additions and 1 deletions

View File

@ -40,12 +40,24 @@
} }
.wc-block-components-radio-control__description-group { .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. // Use balance as this is not a good candidate for pretty. Pretty is intended for body copy which this is not.
text-wrap: balance; text-wrap: balance;
// This targets the rate *description* and prevents the rules applying to the delivery_time. // This targets the rate *description* and prevents the rules applying to the delivery_time.
.wc-block-components-radio-control__description { .wc-block-components-radio-control__description {
padding-right: $gap-small; 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;
} }
} }