Add CSS resets for better theme compatibility (https://github.com/woocommerce/woocommerce-blocks/pull/2478)
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
a5a62359d7
commit
11981947c5
|
|
@ -57,24 +57,43 @@
|
|||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
// Reset <button> style so we can use link style for action buttons.
|
||||
@mixin link-button() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@mixin reset-box() {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
@mixin reset-typography() {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: underline;
|
||||
text-transform: none;
|
||||
vertical-align: baseline;
|
||||
line-height: inherit;
|
||||
text-decoration: inherit;
|
||||
text-transform: inherit;
|
||||
}
|
||||
|
||||
// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
|
||||
@mixin text-heading() {
|
||||
@include reset-box();
|
||||
@include reset-typography();
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
|
||||
@mixin text-button() {
|
||||
@include reset-box();
|
||||
@include reset-typography();
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display: inline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
@ -82,6 +101,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Reset <button> style so we can use link style for action buttons.
|
||||
@mixin link-button() {
|
||||
@include text-button();
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Makes sure long words are broken if they overflow the container.
|
||||
@mixin wrap-break-word() {
|
||||
// This is the current standard, works in most browsers.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
display: flex;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
height: 3em; // 16px * 3em = 48px, same height as text-input
|
||||
min-height: rem(48px); // 16px * 3 = 48px, same height as text-input
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0 $gap-small;
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@ $line-offset-from-circle-size: 8px;
|
|||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $gap-smaller;
|
||||
}
|
||||
|
||||
.wc-block-checkout-step__title {
|
||||
@include font-size(16px);
|
||||
line-height: 1.5;
|
||||
color: $gray-80;
|
||||
font-weight: 400;
|
||||
margin: 0 $gap-small 0 0;
|
||||
.wc-block-checkout-step__title {
|
||||
@include font-size(16px);
|
||||
line-height: 1.5;
|
||||
color: $gray-80;
|
||||
font-weight: 400;
|
||||
margin: 0 $gap-small 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-checkout-step__heading-content {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
line-height: 1;
|
||||
margin: $gap-large 0;
|
||||
}
|
||||
|
||||
.wc-block-components-checkout-policies__item {
|
||||
list-style: none outside;
|
||||
display: inline-block;
|
||||
|
|
@ -16,9 +17,8 @@
|
|||
border-left: 1px solid $gray-10;
|
||||
}
|
||||
|
||||
a {
|
||||
> a {
|
||||
color: inherit;
|
||||
padding: 0 0.25em;
|
||||
text-decoration: underline;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.wc-block-components-checkout-return-to-cart-button {
|
||||
box-shadow: none;
|
||||
color: $gray-60;
|
||||
padding-left: calc(24px + 0.25em);
|
||||
position: relative;
|
||||
text-decoration: none !important;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
}
|
||||
|
||||
.wc-block-shipping-rates-control__package-item {
|
||||
@include wrap-break-word();
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,35 @@
|
|||
// Added extra class and label for specificity.
|
||||
.wc-block-shipping-totals fieldset.wc-block-shipping-totals__fieldset {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wc-block-shipping-totals__options {
|
||||
.wc-block-radio-control__label,
|
||||
.wc-block-radio-control__description,
|
||||
.wc-block-radio-control__secondary-label,
|
||||
.wc-block-radio-control__secondary-description {
|
||||
flex-basis: 100%;
|
||||
text-align: left;
|
||||
.wc-block-shipping-totals {
|
||||
// Added extra label for specificity.
|
||||
fieldset.wc-block-shipping-totals__fieldset {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wc-block-radio-control__option {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
.wc-block-shipping-totals__options {
|
||||
.wc-block-radio-control__label,
|
||||
.wc-block-radio-control__description,
|
||||
.wc-block-radio-control__secondary-label,
|
||||
.wc-block-radio-control__secondary-description {
|
||||
flex-basis: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wc-block-radio-control__option {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-shipping-totals__change-address-button {
|
||||
@include link-button();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-shipping-totals__change-address-button {
|
||||
@include link-button();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.wc-block-checkbox {
|
||||
@include reset-typography();
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
|
||||
.wc-block-dropdown-selector__list {
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
margin: -1px 0 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
|
@ -160,10 +160,10 @@
|
|||
}
|
||||
|
||||
.wc-block-dropdown-selector__list-item {
|
||||
background-color: #fff;
|
||||
color: $core-grey-dark-600;
|
||||
cursor: default;
|
||||
font-size: 0.8em;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 $gap-smallest;
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@
|
|||
}
|
||||
|
||||
label {
|
||||
@include reset-typography();
|
||||
@include font-size(16px, 22px);
|
||||
position: absolute;
|
||||
transform: translateY(0.75em);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
.wc-block-grid__products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 (-$gap/2) $gap;
|
||||
background-clip: padding-box;
|
||||
|
|
@ -53,6 +52,7 @@
|
|||
border-left: $gap/2 solid transparent;
|
||||
border-right: $gap/2 solid transparent;
|
||||
border-bottom: $gap solid transparent;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Extra specificity to avoid editor styles on linked images.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
background: none transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $core-grey-light-600;
|
||||
|
|
@ -18,6 +19,7 @@
|
|||
|
||||
// Extra label for specificity needed in the editor.
|
||||
input.wc-block-quantity-selector__input {
|
||||
@include font-size(16px);
|
||||
order: 2;
|
||||
min-width: 40px;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -47,11 +49,11 @@
|
|||
}
|
||||
.wc-block-quantity-selector__button {
|
||||
@include reset-button;
|
||||
@include font-size(16px);
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
color: $core-grey-dark-700;
|
||||
font-style: normal;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@mixin radio-control-styles {
|
||||
.wc-block-radio-control__option {
|
||||
@include reset-typography();
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
display: block;
|
||||
padding: $gap-small $gap-small 0 #{$gap-larger * 2};
|
||||
|
|
@ -56,47 +57,50 @@
|
|||
}
|
||||
|
||||
@mixin radio-control-input-styles {
|
||||
.wc-block-radio-control__input {
|
||||
appearance: none;
|
||||
background: #fff;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 1.25rem;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
width: 1.25rem;
|
||||
|
||||
&:checked::before {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0.625em;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.625em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( ">782px" ) {
|
||||
// Extra class for specificity.
|
||||
.wc-block-radio-control {
|
||||
.wc-block-radio-control__input {
|
||||
height: 1rem;
|
||||
margin-top: 2px;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
width: 1rem;
|
||||
appearance: none;
|
||||
background: #fff;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 1.25rem;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
width: 1.25rem;
|
||||
|
||||
&:checked::before {
|
||||
height: 0.5em;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
width: 0.5em;
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0.625em;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.625em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( ">782px" ) {
|
||||
.wc-block-radio-control__input {
|
||||
height: 1rem;
|
||||
margin-top: 2px;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
width: 1rem;
|
||||
|
||||
&:checked::before {
|
||||
height: 0.5em;
|
||||
min-height: 8px;
|
||||
min-width: 8px;
|
||||
width: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.wc-block-select {
|
||||
height: 3em;
|
||||
height: rem(48px);
|
||||
position: relative;
|
||||
margin-bottom: $gap-large;
|
||||
margin-bottom: rem($gap-large);
|
||||
|
||||
label {
|
||||
@include reset-typography();
|
||||
@include font-size(16px, 22px);
|
||||
position: absolute;
|
||||
transform: translateY(0.75em);
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
color: $input-text-active;
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
height: 3em;
|
||||
height: rem(48px);
|
||||
letter-spacing: inherit;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
&.is-opened {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
|
||||
> .components-panel__body-title {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -33,26 +34,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.components-panel__body-title,
|
||||
.components-panel__body-toggle {
|
||||
&,
|
||||
.components-panel__body-title {
|
||||
@include text-heading();
|
||||
background: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.components-panel__body-toggle {
|
||||
@include reset-typography();
|
||||
background: transparent;
|
||||
font-weight: normal;
|
||||
font-size: inherit;
|
||||
padding-left: 0;
|
||||
padding-right: 36px;
|
||||
|
||||
&.components-button,
|
||||
&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.components-panel__arrow {
|
||||
|
|
@ -66,7 +70,7 @@
|
|||
.is-mobile {
|
||||
&.wc-block-sidebar-layout {
|
||||
flex-direction: column;
|
||||
margin: 0 0 $gap;
|
||||
margin: 0 auto $gap;
|
||||
|
||||
.wc-block-main {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -7,3 +7,7 @@
|
|||
display: inline-block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wc-block-sort-select__select {
|
||||
width: max-content;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
outline: 1px dotted $gray-60;
|
||||
}
|
||||
.wc-block-components-tabs__item-content {
|
||||
@include font-size(16px, 16px);
|
||||
width: fit-content;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
|
||||
> img,
|
||||
> svg {
|
||||
|
|
@ -50,5 +50,6 @@
|
|||
}
|
||||
.wc-block-components-tabs__content {
|
||||
padding: $gap 0;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.wc-block-text-input {
|
||||
position: relative;
|
||||
margin-bottom: $gap-large;
|
||||
margin-bottom: rem($gap-large);
|
||||
white-space: nowrap;
|
||||
|
||||
label {
|
||||
@include reset-typography();
|
||||
@include font-size(16px);
|
||||
position: absolute;
|
||||
transform: translateY(0.75em);
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
input[type="email"] {
|
||||
@include font-size(16px);
|
||||
background-color: #fff;
|
||||
padding: $gap-small $gap;
|
||||
padding: rem($gap-small) $gap;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $input-border-gray;
|
||||
width: 100%;
|
||||
|
|
@ -45,7 +46,8 @@
|
|||
font-family: inherit;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
height: 3em;
|
||||
height: rem(48px);
|
||||
min-height: 0;
|
||||
color: $input-text-active;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
&.is-active input[type="url"],
|
||||
&.is-active input[type="text"],
|
||||
&.is-active input[type="email"] {
|
||||
padding: rem($gap-large) $gap rem($gap-smallest);
|
||||
padding: rem($gap-large) 0 rem($gap-smallest) $gap;
|
||||
}
|
||||
|
||||
&.has-error input {
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@
|
|||
// This distinguishes it from the product image.
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
display: flex;
|
||||
line-height: 1;
|
||||
min-height: 22px;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue