From b920d2184b8a3d5895c8bc08ed2d379e5b3b1aa9 Mon Sep 17 00:00:00 2001 From: Mike Jolley Date: Wed, 11 Oct 2023 12:59:13 +0100 Subject: [PATCH] Spacing values --- assets/css/abstracts/_colors.scss | 1 + .../cart-checkout/form-step/style.scss | 4 +- .../shipping-rates-control-package/style.scss | 4 -- assets/js/base/components/combobox/style.scss | 27 +++++---- .../base/components/country-input/style.scss | 2 +- .../js/base/components/state-input/style.scss | 2 +- .../blocks/checkout/address-card/style.scss | 2 +- .../checkout-fields-block/style.scss | 2 +- .../components/checkbox-control/style.scss | 1 + .../checkout/components/text-input/style.scss | 56 +++++++++---------- 10 files changed, 51 insertions(+), 50 deletions(-) diff --git a/assets/css/abstracts/_colors.scss b/assets/css/abstracts/_colors.scss index a304fda0b20..e2dcdb79729 100644 --- a/assets/css/abstracts/_colors.scss +++ b/assets/css/abstracts/_colors.scss @@ -19,3 +19,4 @@ $image-placeholder-border-color: #f2f2f2; // Universal colors for use on the frontend, currently being applied to checkout blocks. $universal-border: rgba(17, 17, 17, 0.3); // Used for form step borders. $universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white. +$universal-body-low-emphasis: rgba(17, 17, 17, 0.5); // Used for low emphasis text such as input labels. diff --git a/assets/js/base/components/cart-checkout/form-step/style.scss b/assets/js/base/components/cart-checkout/form-step/style.scss index 7a6c42a9c0c..eb0aadf4317 100644 --- a/assets/js/base/components/cart-checkout/form-step/style.scss +++ b/assets/js/base/components/cart-checkout/form-step/style.scss @@ -29,11 +29,11 @@ } .wc-block-components-checkout-step__content > * { - margin-bottom: em($gap); + margin-bottom: $gap; } .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content > :last-child { margin-bottom: 0; - padding-bottom: em($gap-large); + padding-bottom: $gap; } .wc-block-components-checkout-step__heading { diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss index eed01d3975c..a6955405c47 100644 --- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss +++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss @@ -25,10 +25,6 @@ padding-bottom: em($gap-small); } - .wc-block-components-radio-control { - margin-bottom: em($gap-small); - } - .wc-block-components-radio-control, .wc-block-components-radio-control__option-layout { padding-bottom: 0; diff --git a/assets/js/base/components/combobox/style.scss b/assets/js/base/components/combobox/style.scss index 06f2eed09b0..fb2fdb89517 100644 --- a/assets/js/base/components/combobox/style.scss +++ b/assets/js/base/components/combobox/style.scss @@ -6,6 +6,7 @@ .components-base-control__field { @include reset-box(); + position: relative; } .components-combobox-control__suggestions-container { @include reset-typography(); @@ -15,7 +16,8 @@ input.components-combobox-control__input { @include reset-typography(); @include font-size(regular); - + padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller); + line-height: em($gap); box-sizing: border-box; outline: inherit; border: 1px solid $input-border-gray; @@ -24,10 +26,7 @@ color: $input-text-active; font-family: inherit; font-weight: normal; - height: 3em; letter-spacing: inherit; - line-height: 1; - padding: em($gap-large) $gap em($gap-smallest); text-align: left; text-overflow: ellipsis; text-transform: none; @@ -67,7 +66,7 @@ background-color: $select-dropdown-light; border: 1px solid $input-border-gray; border-top: 0; - margin: 3em 0 0 0; + margin: 3em 0 0 -1px; padding: 0; max-height: 300px; min-width: 100%; @@ -110,14 +109,16 @@ label.components-base-control__label { @include reset-typography(); @include font-size(regular); - line-height: 1.375; // =22px when font-size is 16px. position: absolute; - transform: translateY(0.75em); + transform: translateY(em($gap)); + line-height: 1.25; // =20px when font-size is 16px. + left: em($gap-smaller); + top: 0; transform-origin: top left; transition: all 200ms ease; - color: $gray-700; + color: $universal-body-low-emphasis; z-index: 1; - margin: 0 0 0 #{$gap + 1px}; + margin: 0; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - #{2 * $gap}); @@ -132,10 +133,16 @@ } } + .wc-block-components-combobox-control:has(input:-webkit-autofill) { + label { + transform: translateY(em($gap-smaller)) scale(0.875); + } + } + &.is-active, &:focus-within { .wc-block-components-combobox-control label.components-base-control__label { - transform: translateY(#{$gap-smallest}) scale(0.75); + transform: translateY(em($gap-smaller)) scale(0.875); } } diff --git a/assets/js/base/components/country-input/style.scss b/assets/js/base/components/country-input/style.scss index 75184add33a..f6bee67990a 100644 --- a/assets/js/base/components/country-input/style.scss +++ b/assets/js/base/components/country-input/style.scss @@ -3,7 +3,7 @@ @import "node_modules/wordpress-components/src/combobox-control/style"; .wc-block-components-country-input { - margin-top: em($gap-large); + margin-top: $gap; // Fixes width in the editor. .components-flex { diff --git a/assets/js/base/components/state-input/style.scss b/assets/js/base/components/state-input/style.scss index ddb7d33ea47..088f4154a29 100644 --- a/assets/js/base/components/state-input/style.scss +++ b/assets/js/base/components/state-input/style.scss @@ -1,5 +1,5 @@ .wc-block-components-state-input { - margin-top: em($gap-large); + margin-top: $gap; // Fixes width in the editor. .components-flex { diff --git a/assets/js/blocks/checkout/address-card/style.scss b/assets/js/blocks/checkout/address-card/style.scss index ee5beccbbfa..3020cf930b9 100644 --- a/assets/js/blocks/checkout/address-card/style.scss +++ b/assets/js/blocks/checkout/address-card/style.scss @@ -1,7 +1,7 @@ .wc-block-components-address-card { border: 1px solid $universal-border; @include font-size(regular); - padding: $gap; + padding: em($gap); margin: 0; border-radius: $universal-border-radius; display: flex; diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss index c4a6a9e3647..81f2689ad14 100644 --- a/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss +++ b/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss @@ -22,7 +22,7 @@ .wc-block-components-text-input, .wc-block-components-country-input, .wc-block-components-state-input { - flex: 0 0 calc(50% - #{$gap-small}); + flex: 0 0 calc(50% - #{$gap-smaller}); box-sizing: border-box; &:nth-of-type(2), diff --git a/packages/checkout/components/checkbox-control/style.scss b/packages/checkout/components/checkbox-control/style.scss index 894f1bd59d0..82c5446f35a 100644 --- a/packages/checkout/components/checkbox-control/style.scss +++ b/packages/checkout/components/checkbox-control/style.scss @@ -9,6 +9,7 @@ position: relative; cursor: pointer; @include font-size(small); + margin-bottom: 0 !important; input[type="checkbox"] { cursor: inherit; diff --git a/packages/checkout/components/text-input/style.scss b/packages/checkout/components/text-input/style.scss index c4c6be6c4b2..4ddb4816445 100644 --- a/packages/checkout/components/text-input/style.scss +++ b/packages/checkout/components/text-input/style.scss @@ -1,7 +1,7 @@ .wc-block-components-form .wc-block-components-text-input, .wc-block-components-text-input { position: relative; - margin-top: em($gap-large); + margin-top: $gap; white-space: nowrap; label { @@ -9,14 +9,14 @@ @include reset-typography(); @include font-size(regular); position: absolute; - transform: translateY(0.75em); - left: 0; + transform: translateY(em($gap)); + line-height: 1.25; // =20px when font-size is 16px. + left: em($gap-smaller + 1px); top: 0; transform-origin: top left; - line-height: 1.375; // =22px when font-size is 16px. - color: $gray-700; - transition: transform 200ms ease; - margin: 0 0 0 #{$gap + 1px}; + color: $universal-body-low-emphasis; + transition: all 200ms ease; + margin: 0; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - #{2 * $gap}); @@ -30,12 +30,13 @@ } } - input:-webkit-autofill + label { - transform: translateY(#{$gap-smallest}) scale(0.75); - } - - &.is-active label { - transform: translateY(#{$gap-smallest}) scale(0.75); + input[type="number"] { + -moz-appearance: textfield; + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + appearance: none; + margin: 0; + } } input[type="tel"], @@ -44,18 +45,16 @@ input[type="number"], input[type="email"] { @include font-size(regular); - background-color: #fff; - padding: em($gap-small) 0; - text-indent: $gap; + padding: em($gap); + line-height: em($gap); + width: 100%; border-radius: $universal-border-radius; border: 1px solid $input-border-gray; - width: 100%; - line-height: 1.375; // =22px when font-size is 16px. font-family: inherit; margin: 0; box-sizing: border-box; - height: 3em; min-height: 0; + background-color: #fff; color: $input-text-active; &:focus { @@ -78,22 +77,18 @@ } } - input[type="number"] { - -moz-appearance: textfield; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - appearance: none; - margin: 0; - } - } - + input:-webkit-autofill, &.is-active input[type="tel"], &.is-active input[type="url"], &.is-active input[type="text"], &.is-active input[type="number"], &.is-active input[type="email"] { - padding: em($gap-large) 0 em($gap-smallest); + padding: em($gap + $gap-smaller) em($gap-smaller) em($gap-smaller); + } + + &.is-active label, + input:-webkit-autofill + label { + transform: translateY(em($gap-smaller)) scale(0.875); } &.has-error input { @@ -121,6 +116,7 @@ &.has-error label { color: $alert-red; + opacity: 1; .has-dark-controls & { color: color.adjust($alert-red, $lightness: 30%);