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

Prevent checkout step heading text overlapping actual heading on small viewports (https://github.com/woocommerce/woocommerce-blocks/pull/3425) 

* Change style rules for checkout step headings

This is required because when the checkout heading text is too long it collided and overlapped the heading content due to its absolute position. In this commit we add a grey line to the left of the checkout step heading to ensure consistency with the checkout step container's styling.

* Remove position rule from checkout-step heading content

This was no longer needed as it nothing relied on the position of this element.
This commit is contained in:
opr 2020-11-20 10:44:24 +00:00 committed by GitHub
parent caaf9e14c2
commit 897abcb73a
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
View File

@ -12,6 +12,16 @@
.is-large & {
padding-right: $gap-large;
}
.wc-block-components-checkout-step__heading::after {
content: "";
border-left: 1px solid;
opacity: 0.3;
position: absolute;
left: -$gap-larger/2;
top: 2.5em;
bottom: em($gap) * -1;
}
}
.wc-block-components-checkout-step__container {
@ -33,6 +43,8 @@
flex-wrap: wrap;
margin: em($gap-small) 0 em($gap);
position: relative;
align-items: center;
gap: em($gap);
}
.wc-block-components-checkout-step:first-child .wc-block-components-checkout-step__heading {
@ -45,8 +57,6 @@
.wc-block-components-checkout-step__heading-content {
@include font-size(smaller);
position: absolute;
right: 0;
a {
font-weight: bold;