Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Add universal border radius
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikejolley
mikejolley committed Oct 10, 2023
1 parent 2d1dd79 commit e624f79
Show file tree
Hide file tree
Showing 26 changed files with 48 additions and 36 deletions.
3 changes: 3 additions & 0 deletions assets/css/abstracts/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion assets/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/atomic/blocks/product-elements/add-to-cart/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/atomic/blocks/product-elements/product-details/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion assets/js/atomic/blocks/product-elements/sale-badge/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/cart-checkout/product-badge/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/combobox/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
white-space: nowrap;
width: 100%;
opacity: initial;
border-radius: 4px;
border-radius: $universal-border-radius;

&[aria-expanded="true"],
&:focus {
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/notice-banner/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions assets/js/base/components/quantity-selector/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -21,7 +21,7 @@
width: 107px;

&::after {
border-radius: 4px;
border-radius: $universal-border-radius;
border: 1px solid currentColor;
bottom: 0;
content: "";
Expand Down Expand Up @@ -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;
}
}
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/skeleton/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
width: 100%;
position: relative;
background: $universal-border-light;
border-radius: 2px;
border-radius: $universal-border-radius;

&:last-child {
width: 80%;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/base/components/textarea/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
17 changes: 8 additions & 9 deletions assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
$border-width: 1px;
$border-radius: 5px;

.wc-block-components-express-payment {
margin: auto;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
12 changes: 11 additions & 1 deletion assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/checkout/address-card/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/classic-shortcode/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/classic-template/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/additional-information/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/billing-address/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/downloads/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/shipping-address/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/summary/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/order-confirmation/totals/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion assets/js/blocks/price-filter/style.scss
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/checkout/components/text-input/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit e624f79

Please sign in to comment.