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

Add CSS resets for better theme compatibility (https://github.com/woocommerce/woocommerce-blocks/pull/2478)

This commit is contained in:
Albert Juhé Lluveras 2020-05-14 11:07:21 +02:00 committed by GitHub
parent a5a62359d7
commit 11981947c5
19 changed files with 158 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
View File

@ -57,24 +57,43 @@
word-wrap: normal !important; word-wrap: normal !important;
} }
// Reset <button> style so we can use link style for action buttons. @mixin reset-box() {
@mixin link-button() {
margin: 0;
padding: 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
box-shadow: none; @mixin reset-typography() {
display: inline; color: inherit;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
letter-spacing: inherit; letter-spacing: inherit;
text-decoration: underline; line-height: inherit;
text-transform: none; text-decoration: inherit;
vertical-align: baseline; 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; 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, &:hover,
&:focus, &:focus,
&:active { &: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. // Makes sure long words are broken if they overflow the container.
@mixin wrap-break-word() { @mixin wrap-break-word() {
// This is the current standard, works in most browsers. // This is the current standard, works in most browsers.

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

@ -5,7 +5,7 @@
display: flex; display: flex;
font-size: inherit; font-size: inherit;
font-weight: bold; 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; justify-content: center;
line-height: 1; line-height: 1;
padding: 0 $gap-small; padding: 0 $gap-small;

14
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
View File

@ -27,14 +27,14 @@ $line-offset-from-circle-size: 8px;
align-content: center; align-content: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: $gap-smaller; margin-bottom: $gap-smaller;
}
.wc-block-checkout-step__title { .wc-block-checkout-step__title {
@include font-size(16px); @include font-size(16px);
line-height: 1.5; line-height: 1.5;
color: $gray-80; color: $gray-80;
font-weight: 400; font-weight: 400;
margin: 0 $gap-small 0 0; margin: 0 $gap-small 0 0;
}
} }
.wc-block-checkout-step__heading-content { .wc-block-checkout-step__heading-content {

6
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss
View File

@ -6,6 +6,7 @@
line-height: 1; line-height: 1;
margin: $gap-large 0; margin: $gap-large 0;
} }
.wc-block-components-checkout-policies__item { .wc-block-components-checkout-policies__item {
list-style: none outside; list-style: none outside;
display: inline-block; display: inline-block;
@ -16,9 +17,8 @@
border-left: 1px solid $gray-10; border-left: 1px solid $gray-10;
} }
a { > a {
color: inherit;
padding: 0 0.25em; padding: 0 0.25em;
text-decoration: underline;
color: $black;
} }
} }

3
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
View File

@ -1,8 +1,9 @@
.wc-block-components-checkout-return-to-cart-button { .wc-block-components-checkout-return-to-cart-button {
box-shadow: none;
color: $gray-60; color: $gray-60;
padding-left: calc(24px + 0.25em); padding-left: calc(24px + 0.25em);
position: relative; position: relative;
text-decoration: none !important; text-decoration: none;
svg { svg {
left: 0; left: 0;

1
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss
View File

@ -12,6 +12,7 @@
} }
.wc-block-shipping-rates-control__package-item { .wc-block-shipping-rates-control__package-item {
@include wrap-break-word();
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;

58
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss
View File

@ -1,33 +1,35 @@
// Added extra class and label for specificity. .wc-block-shipping-totals {
.wc-block-shipping-totals fieldset.wc-block-shipping-totals__fieldset { // Added extra label for specificity.
background-color: transparent; fieldset.wc-block-shipping-totals__fieldset {
margin: 0; background-color: transparent;
padding: 0; margin: 0;
border: 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-radio-control__option { .wc-block-shipping-totals__options {
&:last-child { .wc-block-radio-control__label,
border-bottom: none; .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
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
View File

@ -1,4 +1,5 @@
.wc-block-checkbox { .wc-block-checkbox {
@include reset-typography();
display: block; display: block;
position: relative; position: relative;

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

@ -143,7 +143,7 @@
} }
.wc-block-dropdown-selector__list { .wc-block-dropdown-selector__list {
list-style: none; background-color: #fff;
margin: -1px 0 0; margin: -1px 0 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
@ -160,10 +160,10 @@
} }
.wc-block-dropdown-selector__list-item { .wc-block-dropdown-selector__list-item {
background-color: #fff;
color: $core-grey-dark-600; color: $core-grey-dark-600;
cursor: default; cursor: default;
font-size: 0.8em; font-size: 0.8em;
list-style: none;
margin: 0; margin: 0;
padding: 0 $gap-smallest; padding: 0 $gap-smallest;

1
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
View File

@ -91,6 +91,7 @@
} }
label { label {
@include reset-typography();
@include font-size(16px, 22px); @include font-size(16px, 22px);
position: absolute; position: absolute;
transform: translateY(0.75em); transform: translateY(0.75em);

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

@ -36,7 +36,6 @@
.wc-block-grid__products { .wc-block-grid__products {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none;
padding: 0; padding: 0;
margin: 0 (-$gap/2) $gap; margin: 0 (-$gap/2) $gap;
background-clip: padding-box; background-clip: padding-box;
@ -53,6 +52,7 @@
border-left: $gap/2 solid transparent; border-left: $gap/2 solid transparent;
border-right: $gap/2 solid transparent; border-right: $gap/2 solid transparent;
border-bottom: $gap solid transparent; border-bottom: $gap solid transparent;
list-style: none;
} }
// Extra specificity to avoid editor styles on linked images. // Extra specificity to avoid editor styles on linked images.

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

@ -3,6 +3,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
background: none transparent; background: none transparent;
box-shadow: none;
&:focus { &:focus {
outline: 2px solid $core-grey-light-600; outline: 2px solid $core-grey-light-600;
@ -18,6 +19,7 @@
// Extra label for specificity needed in the editor. // Extra label for specificity needed in the editor.
input.wc-block-quantity-selector__input { input.wc-block-quantity-selector__input {
@include font-size(16px);
order: 2; order: 2;
min-width: 40px; min-width: 40px;
flex: 1 1 auto; flex: 1 1 auto;
@ -47,11 +49,11 @@
} }
.wc-block-quantity-selector__button { .wc-block-quantity-selector__button {
@include reset-button; @include reset-button;
@include font-size(16px);
min-width: 30px; min-width: 30px;
cursor: pointer; cursor: pointer;
color: $core-grey-dark-700; color: $core-grey-dark-700;
font-style: normal; font-style: normal;
font-size: 1em;
text-align: center; text-align: center;
&:hover, &:hover,

80
plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
View File

@ -1,5 +1,6 @@
@mixin radio-control-styles { @mixin radio-control-styles {
.wc-block-radio-control__option { .wc-block-radio-control__option {
@include reset-typography();
border-bottom: 1px solid $core-grey-light-600; border-bottom: 1px solid $core-grey-light-600;
display: block; display: block;
padding: $gap-small $gap-small 0 #{$gap-larger * 2}; padding: $gap-small $gap-small 0 #{$gap-larger * 2};
@ -56,47 +57,50 @@
} }
@mixin radio-control-input-styles { @mixin radio-control-input-styles {
.wc-block-radio-control__input { // Extra class for specificity.
appearance: none; .wc-block-radio-control {
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" ) {
.wc-block-radio-control__input { .wc-block-radio-control__input {
height: 1rem; appearance: none;
margin-top: 2px; background: #fff;
min-height: 16px; border: 2px solid currentColor;
min-width: 16px; border-radius: 50%;
width: 1rem; display: inline-block;
height: 1.25rem;
min-height: 20px;
min-width: 20px;
width: 1.25rem;
&:checked::before { &:checked::before {
height: 0.5em; background: currentColor;
min-height: 8px; border-radius: 50%;
min-width: 8px; content: "";
width: 0.5em; 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;
}
} }
} }
} }

7
plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
View File

@ -1,9 +1,10 @@
.wc-block-select { .wc-block-select {
height: 3em; height: rem(48px);
position: relative; position: relative;
margin-bottom: $gap-large; margin-bottom: rem($gap-large);
label { label {
@include reset-typography();
@include font-size(16px, 22px); @include font-size(16px, 22px);
position: absolute; position: absolute;
transform: translateY(0.75em); transform: translateY(0.75em);
@ -43,7 +44,7 @@
color: $input-text-active; color: $input-text-active;
font-family: inherit; font-family: inherit;
font-weight: normal; font-weight: normal;
height: 3em; height: rem(48px);
letter-spacing: inherit; letter-spacing: inherit;
line-height: 1; line-height: 1;
overflow: hidden; overflow: hidden;

22
plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
View File

@ -24,6 +24,7 @@
&.is-opened { &.is-opened {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 0;
> .components-panel__body-title { > .components-panel__body-title {
margin-bottom: 0; margin-bottom: 0;
@ -33,26 +34,29 @@
} }
} }
.components-panel__body-title, .components-panel__body-title {
.components-panel__body-toggle { @include text-heading();
&, background: transparent;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: transparent; background: transparent;
color: inherit;
} }
} }
.components-panel__body-toggle { .components-panel__body-toggle {
@include reset-typography();
background: transparent;
font-weight: normal; font-weight: normal;
font-size: inherit; font-size: inherit;
padding-left: 0; padding-left: 0;
padding-right: 36px; padding-right: 36px;
&.components-button, &:hover,
&.components-button:focus:not(:disabled):not([aria-disabled="true"]) { &:focus,
color: inherit; &:active {
background: transparent;
} }
.components-panel__arrow { .components-panel__arrow {
@ -66,7 +70,7 @@
.is-mobile { .is-mobile {
&.wc-block-sidebar-layout { &.wc-block-sidebar-layout {
flex-direction: column; flex-direction: column;
margin: 0 0 $gap; margin: 0 auto $gap;
.wc-block-main { .wc-block-main {
padding: 0; padding: 0;

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

@ -7,3 +7,7 @@
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
} }
.wc-block-sort-select__select {
width: max-content;
}

3
plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
View File

@ -25,10 +25,10 @@
outline: 1px dotted $gray-60; outline: 1px dotted $gray-60;
} }
.wc-block-components-tabs__item-content { .wc-block-components-tabs__item-content {
@include font-size(16px, 16px);
width: fit-content; width: fit-content;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
line-height: 1em;
> img, > img,
> svg { > svg {
@ -50,5 +50,6 @@
} }
.wc-block-components-tabs__content { .wc-block-components-tabs__content {
padding: $gap 0; padding: $gap 0;
text-transform: none;
} }
} }

10
plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
View File

@ -1,9 +1,10 @@
.wc-block-text-input { .wc-block-text-input {
position: relative; position: relative;
margin-bottom: $gap-large; margin-bottom: rem($gap-large);
white-space: nowrap; white-space: nowrap;
label { label {
@include reset-typography();
@include font-size(16px); @include font-size(16px);
position: absolute; position: absolute;
transform: translateY(0.75em); transform: translateY(0.75em);
@ -37,7 +38,7 @@
input[type="email"] { input[type="email"] {
@include font-size(16px); @include font-size(16px);
background-color: #fff; background-color: #fff;
padding: $gap-small $gap; padding: rem($gap-small) $gap;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-gray; border: 1px solid $input-border-gray;
width: 100%; width: 100%;
@ -45,7 +46,8 @@
font-family: inherit; font-family: inherit;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
height: 3em; height: rem(48px);
min-height: 0;
color: $input-text-active; color: $input-text-active;
&:focus { &:focus {
@ -57,7 +59,7 @@
&.is-active input[type="url"], &.is-active input[type="url"],
&.is-active input[type="text"], &.is-active input[type="text"],
&.is-active input[type="email"] { &.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 { &.has-error input {

1
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
View File

@ -93,6 +93,7 @@
// This distinguishes it from the product image. // This distinguishes it from the product image.
box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px #fff;
display: flex; display: flex;
line-height: 1;
min-height: 22px; min-height: 22px;
position: absolute; position: absolute;
justify-content: center; justify-content: center;