Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: stack coupon fields on smaller screens (#48623) 

* Wrap button and input using flexbox

* Use basis instead of size

* changelog
This commit is contained in:
Mike Jolley 2024-06-25 16:19:49 +01:00 committed by GitHub
parent ccb3d589d6
commit c2783847c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/style.scss
View File

@ -13,23 +13,23 @@
display: flex;
width: 100%;
margin-bottom: 0;
gap: $gap-smaller;
flex-wrap: wrap;
.wc-block-components-totals-coupon__input,
.wc-block-components-totals-coupon__button {
margin: 0;
}
.wc-block-components-totals-coupon__input {
margin-bottom: 0;
margin-top: 0;
flex-grow: 1;
flex: 3 1 120px;
}
.wc-block-components-totals-coupon__button {
flex-shrink: 0;
margin-left: $gap-smaller;
padding-left: $gap-large;
padding-right: $gap-large;
padding-left: $gap;
padding-right: $gap;
white-space: nowrap;
}
.wc-block-components-totals-coupon__button.no-margin {
margin: 0;
flex: 1 1 auto;
}
}

6
plugins/woocommerce-blocks/packages/components/text-input/style.scss
View File

@ -9,7 +9,7 @@
@include font-size(regular);
position: absolute;
transform: translateY(em($gap));
line-height: 1.25; // =20px when font-size is 16px.
line-height: 1;
left: em($gap-smaller + 1px);
top: 0;
transform-origin: top left;
@ -44,7 +44,7 @@
input[type="number"],
input[type="email"] {
@include font-size(regular);
padding: em($gap);
padding: em($gap) em($gap-smaller);
line-height: em($gap);
width: 100%;
border-radius: $universal-border-radius;
@ -54,7 +54,7 @@
margin: 0;
box-sizing: border-box;
min-height: 0;
max-height: 50px;
max-height: 52px;
background-color: #fff;
color: currentColor;

4
plugins/woocommerce/changelog/fix-47655-stack-coupon-fields Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Made coupon fields during block checkout stack on smaller screen sizes