Make loading placeholder colors match the current font color (https://github.com/woocommerce/woocommerce-blocks/pull/7658)
* Make loading placeholder colors match the current font color Currently, the loading placeholder effect has a default gray color. However, since users can modify their themes with the Site Editor and choose a different set of colors for their websites, it would be interesting to make those placeholders match the color palette. In this commit, the idea was to modify the `placeholder` mixin to replace the transparent font color with the current color and also modify the background-color and the linear-gradient to match the current font color. Furthermore, transparency was added to the middle color of the linear-gradient so we can keep the loading animation close to what it currently is. * Add opacity to placeholder mixin Before our changes, when the font color was dark, we had a lighter placeholder background color. After the changes the color is currently darker than before so the idea for this commit is to change the opacity of the placeholder in a way that the current color blends with the background color set for the theme. * Change placeholder mixin opacity After testing different combinations of colors, we decided to change the opacity to 0.15 so when the font color is darker the placeholder will have a lighter background color. * bot: update checkstyle.xml Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
parent
bf8d56ec72
commit
da594b87a4
|
@ -32,8 +32,8 @@ $fontSizes: (
|
||||||
@mixin placeholder($include-border-radius: true) {
|
@mixin placeholder($include-border-radius: true) {
|
||||||
outline: 0 !important;
|
outline: 0 !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
background-color: #ebebeb !important;
|
background-color: currentColor !important;
|
||||||
color: transparent !important;
|
color: currentColor !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@if $include-border-radius == true {
|
@if $include-border-radius == true {
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
|
@ -46,6 +46,7 @@ $fontSizes: (
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
|
z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
|
||||||
|
opacity: 0.15;
|
||||||
|
|
||||||
// Forces direct descendants to keep layout but lose visibility.
|
// Forces direct descendants to keep layout but lose visibility.
|
||||||
> * {
|
> * {
|
||||||
|
@ -61,7 +62,7 @@ $fontSizes: (
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb);
|
background-image: linear-gradient(90deg, currentColor, #f5f5f54d, currentColor);
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
animation: loading__animation 1.5s ease-in-out infinite;
|
animation: loading__animation 1.5s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.wc-block-filter-title-placeholder {
|
.wc-block-filter-title-placeholder {
|
||||||
@include placeholder();
|
@include placeholder();
|
||||||
background-color: $gray-400 !important;
|
|
||||||
border-radius: em(26px);
|
border-radius: em(26px);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
|
@ -8,10 +7,6 @@
|
||||||
margin-bottom: $gap-small;
|
margin-bottom: $gap-small;
|
||||||
max-width: max-content !important;
|
max-width: max-content !important;
|
||||||
|
|
||||||
&::after {
|
|
||||||
background-image: linear-gradient(90deg, $gray-400, $gray-200, $gray-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wc-block-stock-filter__title,
|
.wc-block-stock-filter__title,
|
||||||
.wc-block-price-filter__title,
|
.wc-block-price-filter__title,
|
||||||
.wc-block-active-filters__title,
|
.wc-block-active-filters__title,
|
||||||
|
|
|
@ -1419,9 +1419,6 @@
|
||||||
Type 'Readonly<{}>' is not assignable to type 'Record<string, unknown> & { className: string; }'.
|
Type 'Readonly<{}>' is not assignable to type 'Record<string, unknown> & { className: string; }'.
|
||||||
Property 'className' is missing in type 'Readonly<{}>' but required in type '{ className: string; }'." source="TS2322" />
|
Property 'className' is missing in type 'Readonly<{}>' but required in type '{ className: string; }'." source="TS2322" />
|
||||||
</file>
|
</file>
|
||||||
<file name="assets/js/atomic/blocks/product-elements/stock-indicator/edit.js">
|
|
||||||
<error line="15" column="18" severity="error" message="Binding element 'attributes' implicitly has an 'any' type." source="TS7031" />
|
|
||||||
</file>
|
|
||||||
<file name="assets/js/atomic/blocks/product-elements/add-to-cart/edit.js">
|
<file name="assets/js/atomic/blocks/product-elements/add-to-cart/edit.js">
|
||||||
<error line="25" column="18" severity="error" message="Binding element 'attributes' implicitly has an 'any' type." source="TS7031" />
|
<error line="25" column="18" severity="error" message="Binding element 'attributes' implicitly has an 'any' type." source="TS7031" />
|
||||||
<error line="25" column="30" severity="error" message="Binding element 'setAttributes' implicitly has an 'any' type." source="TS7031" />
|
<error line="25" column="30" severity="error" message="Binding element 'setAttributes' implicitly has an 'any' type." source="TS7031" />
|
||||||
|
|
Loading…
Reference in New Issue