diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss index d87faff9f57..e9cfecfb7b7 100644 --- a/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss +++ b/plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss @@ -8,3 +8,6 @@ $gap: 2 * $grid-unit; // 16px $gap-small: 1.5 * $grid-unit; // 12px $gap-smaller: 1 * $grid-unit; // 8px $gap-smallest: 0.5 * $grid-unit; // 4px + +// Standard border radius for forms. +$universal-border-radius: 4px; diff --git a/plugins/woocommerce-blocks/assets/css/style.scss b/plugins/woocommerce-blocks/assets/css/style.scss index f024fe53caf..827a016b6b2 100644 --- a/plugins/woocommerce-blocks/assets/css/style.scss +++ b/plugins/woocommerce-blocks/assets/css/style.scss @@ -146,7 +146,7 @@ display: inline-block; width: auto; border: 1px solid #43454b; - border-radius: 3px; + border-radius: $universal-border-radius; color: #43454b; background: #fff; text-align: center; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss index b0dff932edd..686d216aff6 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss @@ -25,7 +25,7 @@ padding: 0.618em; background: $white; border: 1px solid #ccc; - border-radius: 2px; + border-radius: $universal-border-radius; color: #43454b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125); text-align: center; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss index 9e20b096c78..6e6405d4392 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss @@ -12,7 +12,7 @@ display: inline-block; position: relative; z-index: 0; - border-radius: 4px 4px 0 0; + border-radius: $universal-border-radius $universal-border-radius 0 0; margin: 0; padding: 0.5em 1em; diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss index 092397b3cab..22b8db197e6 100644 --- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss +++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss @@ -9,7 +9,7 @@ display: inline-block; width: fit-content; border: 1px solid #43454b; - border-radius: 3px; + border-radius: $universal-border-radius; box-sizing: border-box; color: #43454b; background: #fff; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss index 1b5c3957d3a..67768259589 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss @@ -1,6 +1,6 @@ .wc-block-components-product-badge { @include font-size(smaller); - border-radius: 2px; + border-radius: $universal-border-radius; border: 1px solid; display: inline-block; font-weight: 600; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/combobox/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/combobox/style.scss index 02c5d27029b..06f2eed09b0 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/combobox/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/combobox/style.scss @@ -34,7 +34,7 @@ white-space: nowrap; width: 100%; opacity: initial; - border-radius: 4px; + border-radius: $universal-border-radius; &[aria-expanded="true"], &:focus { @@ -73,6 +73,8 @@ min-width: 100%; overflow: auto; color: $input-text-active; + border-bottom-left-radius: $universal-border-radius; + border-bottom-right-radius: $universal-border-radius; .has-dark-controls & { background-color: $select-dropdown-dark; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss index b3a9bc9f5de..45a757f419d 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss @@ -6,7 +6,7 @@ padding: $gap !important; gap: $gap-small; margin: $gap 0; - border-radius: 4px; + border-radius: $universal-border-radius; border-color: $gray-800; font-weight: 400; line-height: 1.5; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss index c6de2458122..e3f488b4ea3 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss @@ -12,7 +12,7 @@ } .wc-block-components-quantity-selector { - border-radius: 4px; + border-radius: $universal-border-radius; // needed so that buttons fill the container. box-sizing: content-box; display: flex; @@ -21,7 +21,7 @@ width: 107px; &::after { - border-radius: 4px; + border-radius: $universal-border-radius; border: 1px solid currentColor; bottom: 0; content: ""; @@ -89,12 +89,12 @@ } > .wc-block-components-quantity-selector__button--minus { - border-radius: 4px 0 0 4px; + border-radius: $universal-border-radius 0 0 $universal-border-radius; order: 1; } > .wc-block-components-quantity-selector__button--plus { - border-radius: 0 4px 4px 0; + border-radius: 0 $universal-border-radius $universal-border-radius 0; order: 3; } } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss index 08ea064c6d8..a19cfec013e 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss @@ -11,7 +11,7 @@ width: 100%; position: relative; background: $universal-border-light; - border-radius: 2px; + border-radius: $universal-border-radius; &:last-child { width: 80%; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/textarea/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/textarea/style.scss index 7469fdfe6ac..4e60346277c 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/textarea/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/textarea/style.scss @@ -2,7 +2,7 @@ @include font-size(regular); background-color: #fff; border: 1px solid $input-border-gray; - border-radius: 4px; + border-radius: $universal-border-radius; color: $input-text-active; font-family: inherit; line-height: 1.375; // =22px when font-size is 16px. diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss index 9fac0bd0e15..a61279ede8c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss @@ -1,5 +1,4 @@ $border-width: 1px; -$border-radius: 5px; .wc-block-components-express-payment { margin: auto; @@ -26,7 +25,7 @@ $border-radius: 5px; .wc-block-components-express-payment--checkout { /* stylelint-disable-next-line function-calc-no-unspaced-operator */ - margin-top: calc($border-radius * 3); + margin-top: calc($universal-border-radius * 3); .wc-block-components-express-payment__event-buttons { list-style: none; @@ -45,17 +44,17 @@ $border-radius: 5px; left: 0; position: absolute; right: 0; - top: -$border-radius; + top: -$universal-border-radius; vertical-align: middle; // Pseudo-elements used to show the border before and after the title. &::before { border-left: $border-width solid currentColor; border-top: $border-width solid currentColor; - border-radius: $border-radius 0 0 0; + border-radius: $universal-border-radius 0 0 0; content: ""; display: block; - height: $border-radius - $border-width; + height: $universal-border-radius - $border-width; margin-right: $gap-small; opacity: 0.3; pointer-events: none; @@ -65,10 +64,10 @@ $border-radius: 5px; &::after { border-right: $border-width solid currentColor; border-top: $border-width solid currentColor; - border-radius: 0 $border-radius 0 0; + border-radius: 0 $universal-border-radius 0 0; content: ""; display: block; - height: $border-radius - $border-width; + height: $universal-border-radius - $border-width; margin-left: $gap-small; opacity: 0.3; pointer-events: none; @@ -83,10 +82,10 @@ $border-radius: 5px; .wc-block-components-express-payment__content { @include with-translucent-border(0 $border-width $border-width); - padding: #{$gap-large - $border-radius} $gap-large $gap-large; + padding: #{$gap-large - $universal-border-radius} $gap-large $gap-large; &::after { - border-radius: 0 0 $border-radius $border-radius; + border-radius: 0 0 $universal-border-radius $universal-border-radius; } > p { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss index f17411e9cb5..6546a0d6f47 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss @@ -39,7 +39,7 @@ line-height: 1.375; // =22px when font-size is 16px. background-color: #fff; padding: em($gap-small) 0 em($gap-small) $gap; - border-radius: 4px; + border-radius: $universal-border-radius; border: 1px solid $input-border-gray; width: 100%; font-family: inherit; @@ -201,6 +201,16 @@ @include with-translucent-border(1px 1px 0 1px); } + .wc-block-components-radio-control-accordion-option:first-child::after { + border-top-left-radius: $universal-border-radius; + border-top-right-radius: $universal-border-radius; + } + + .wc-block-components-radio-control-accordion-option:last-child::after { + border-bottom-left-radius: $universal-border-radius; + border-bottom-right-radius: $universal-border-radius; + } + .wc-block-components-radio-control__option:last-child::after, .wc-block-components-radio-control-accordion-option:last-child::after { border-width: 1px; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss index 08712b78e67..ee5beccbbfa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss @@ -3,7 +3,7 @@ @include font-size(regular); padding: $gap; margin: 0; - border-radius: 4px; + border-radius: $universal-border-radius; display: flex; justify-content: flex-start; align-items: flex-start; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss index 17803be8eed..1215c024e42 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss @@ -42,7 +42,7 @@ width: 100%; box-sizing: border-box; background-color: $gray-100; - border-radius: 4px; + border-radius: $universal-border-radius; padding: 1px em($gap-small); margin-top: em($gap-smaller); @include font-size(regular); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss index b92b6644fba..57162be16b8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss @@ -22,7 +22,7 @@ border: none; box-shadow: none !important; outline: 1px solid currentColor; - border-radius: 0 !important; + border-radius: $universal-border-radius; &.components-button:hover:not(:disabled), &.components-button:focus:not(:disabled), &:focus, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-shortcode/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/classic-shortcode/editor.scss index 523b3389c89..8abecb65ce7 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-shortcode/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-shortcode/editor.scss @@ -21,7 +21,7 @@ border: 1px solid $gray-900; background-color: #fff; padding: $gap-large $gap-larger; - border-radius: 3px; + border-radius: $universal-border-radius; display: flex; flex-direction: column; max-width: 900px; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss index 232285a91d5..0d621a82175 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss @@ -21,7 +21,7 @@ border: 1px solid $gray-900; background-color: #fff; padding: $gap-large $gap-larger; - border-radius: 3px; + border-radius: $universal-border-radius; display: flex; flex-direction: column; max-width: 900px; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/additional-information/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/additional-information/style.scss index d39cb2b9cf0..d16d321942e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/additional-information/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/additional-information/style.scss @@ -2,5 +2,5 @@ .wc-block-order-confirmation-additional-information { margin-top: $gap-largest; margin-bottom: $gap-largest; - border-radius: 2px; + border-radius: $universal-border-radius; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/billing-address/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/billing-address/style.scss index e4c808cf14a..bb746d7e97f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/billing-address/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/billing-address/style.scss @@ -16,7 +16,7 @@ } .wc-block-order-confirmation-billing-address { border: 1px solid $universal-border-light; - border-radius: 2px; + border-radius: $universal-border-radius; padding: $gap; address, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads/style.scss index 00966d4fec0..60e544be149 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads/style.scss @@ -7,7 +7,7 @@ width: 100%; border: 1px solid $universal-border-light; border-spacing: 0; - border-radius: 2px; + border-radius: $universal-border-radius; th, td { border: 1px solid $universal-border-light; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/shipping-address/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/shipping-address/style.scss index 9a0281ed993..5b34d493156 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/shipping-address/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/shipping-address/style.scss @@ -16,7 +16,7 @@ } .wc-block-order-confirmation-shipping-address { border: 1px solid $universal-border-light; - border-radius: 2px; + border-radius: $universal-border-radius; padding: $gap; address, diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss index 775d76e3f83..f5f113d1cfb 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss @@ -2,7 +2,7 @@ .wc-block-order-confirmation-summary { margin-top: $gap-largest; margin-bottom: $gap-largest; - border-radius: 2px; + border-radius: $universal-border-radius; } .wc-block-order-confirmation-summary { ul { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss index dd3b5c9e814..0baffc3c20a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss @@ -7,7 +7,7 @@ width: 100%; border: 1px solid $universal-border-light; border-spacing: 0; - border-radius: 2px; + border-radius: $universal-border-radius; border-collapse: collapse; th, td { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss index 1aa0bc92f67..77bfdabfddb 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss @@ -1,6 +1,6 @@ .wp-block-woocommerce-price-filter { border-color: $gray-700; - border-radius: 4px; + border-radius: $universal-border-radius; border-style: none !important; h1, diff --git a/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss index 47843f0c52c..894f1bd59d0 100644 --- a/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss +++ b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss @@ -19,7 +19,7 @@ font-size: 1em; appearance: none; border: 2px solid $input-border-gray; - border-radius: 2px; + border-radius: $universal-border-radius; box-sizing: border-box; height: em(24px); width: em(24px); diff --git a/plugins/woocommerce-blocks/packages/checkout/components/text-input/style.scss b/plugins/woocommerce-blocks/packages/checkout/components/text-input/style.scss index 56854396832..c4c6be6c4b2 100644 --- a/plugins/woocommerce-blocks/packages/checkout/components/text-input/style.scss +++ b/plugins/woocommerce-blocks/packages/checkout/components/text-input/style.scss @@ -47,7 +47,7 @@ background-color: #fff; padding: em($gap-small) 0; text-indent: $gap; - border-radius: 4px; + border-radius: $universal-border-radius; border: 1px solid $input-border-gray; width: 100%; line-height: 1.375; // =22px when font-size is 16px.