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:
parent
055e1a11ef
commit
0c2f042886
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,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.
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue