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

Add universal border radius for form elements and components (https://github.com/woocommerce/woocommerce-blocks/pull/11193) 

* Add universal border radius

* Apply radius to checkbox and dropdown
This commit is contained in:
Mike Jolley 2023-10-11 17:04:45 +01:00 committed by GitHub
parent 055e1a11ef
commit 0c2f042886
27 changed files with 51 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-blocks/assets/css/abstracts/_variables.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/css/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/style.scss
View File

@ -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;

4
plugins/woocommerce-blocks/assets/js/base/components/combobox/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss
View File

@ -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;

8
plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
View File

@ -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;
}
}

2
plugins/woocommerce-blocks/assets/js/base/components/skeleton/style.scss
View File

@ -11,7 +11,7 @@
width: 100%;
position: relative;
background: $universal-border-light;
border-radius: 2px;
border-radius: $universal-border-radius;
&:last-child {
width: 80%;

2
plugins/woocommerce-blocks/assets/js/base/components/textarea/style.scss
View File

@ -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.

17
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
View File

@ -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 {

12
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
View File

@ -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);

2
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
View File

@ -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,

2
plugins/woocommerce-blocks/assets/js/blocks/classic-shortcode/editor.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/additional-information/style.scss
View File

@ -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;
}

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/billing-address/style.scss
View File

@ -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,

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/downloads/style.scss
View File

@ -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;

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/shipping-address/style.scss
View File

@ -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,

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss
View File

@ -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 {

2
plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/totals/style.scss
View File

@ -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 {

2
plugins/woocommerce-blocks/assets/js/blocks/price-filter/style.scss
View File

@ -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,

2
plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss
View File

@ -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);

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

@ -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.