Use @wordpress/base-styles and @automattic/color-studio as a base for our styles (https://github.com/woocommerce/woocommerce-blocks/pull/3300)
* Use colors variables instead of hardcoded values when possible * Update WC colors from @automattic/color-studio * Decrease specificity of price-slider CSS selectors * Update colors to WC purple * Update bright colors * Update grays * Update blacks and whites * Add @todo comment * Remove unnecessary blank line * Remove purple color from price slider handle * Fix colors not shown in SVG background * Remove unnecessary box-shadow declaration * Add theming docs * Refactor/remove SCSS variables * Add @todo comment to breakpoints * Update package-lock.json
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
9b5e436cc7
commit
10ceda5851
|
|
@ -8,6 +8,8 @@
|
|||
// See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
|
||||
$breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
|
||||
|
||||
// @todo refactor breakpoints so they use the mixins from Gutenberg
|
||||
// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
|
||||
@mixin breakpoint( $sizes... ) {
|
||||
@each $size in $sizes {
|
||||
@if type-of( $size ) == string {
|
||||
|
|
|
|||
|
|
@ -1,54 +1,22 @@
|
|||
@import "node_modules/@wordpress/base-styles/colors";
|
||||
@import "node_modules/@automattic/color-studio/dist/color-variables";
|
||||
|
||||
// @todo remove when `@woocommerce/base-styles` is updated.
|
||||
// Greys
|
||||
$core-grey-light-100: #f8f9f9;
|
||||
$core-grey-light-200: #f3f4f5;
|
||||
$core-grey-light-300: #edeff0;
|
||||
$core-grey-light-400: #e8eaeb;
|
||||
$core-grey-light-500: #e2e4e7;
|
||||
$core-grey-light-600: #d7dade;
|
||||
$core-grey-light-700: #ccd0d4;
|
||||
$core-grey-light-800: #b5bcc2;
|
||||
$core-grey-light-900: #a2aab2;
|
||||
$core-grey-dark-100: #86909b;
|
||||
$core-grey-dark-200: #78848f;
|
||||
$core-grey-dark-300: #6c7781; // This & below have 4.5+ contrast against white
|
||||
$core-grey-dark-400: #606a73;
|
||||
$core-grey-dark-500: #555d66;
|
||||
$core-grey-dark-600: #40464d;
|
||||
$core-grey-dark-700: #32373c;
|
||||
$core-grey-dark-800: #23282d;
|
||||
$core-grey-dark-900: #191e23;
|
||||
|
||||
$gray-text: $core-grey-dark-500;
|
||||
|
||||
// WooCommerce Purples
|
||||
$woocommerce-100: #ffd7ff;
|
||||
$woocommerce-200: #e2a5d7;
|
||||
$woocommerce-300: #c88bbd;
|
||||
$woocommerce-400: #af72a4;
|
||||
$woocommerce-500: #95588a;
|
||||
$woocommerce-600: #7c3f71;
|
||||
$woocommerce-700: #622557;
|
||||
$woocommerce-800: #490c3e;
|
||||
$woocommerce-900: #2f0024;
|
||||
$woocommerce: $woocommerce-500;
|
||||
|
||||
$wp-admin-background: #f1f1f1;
|
||||
$black: #24292d; // same as wp-admin sidebar
|
||||
|
||||
$black: #000; // Use only when you truly need pure black. For UI, use $gray-900.
|
||||
$gray-100: #f0f0f0; // Used for light gray backgrounds.
|
||||
$gray-200: #e0e0e0; // Used sparingly for light borders.
|
||||
$gray-300: #ddd; // Used for most borders.
|
||||
$gray-400: #ccc;
|
||||
$gray-600: #949494; // Meets 3:1 UI or large text contrast against white.
|
||||
$gray-700: #757575; // Meets 4.6:1 text contrast against white.
|
||||
$gray-900: #1e1e1e;
|
||||
$white: #fff;
|
||||
|
||||
// Bright colors
|
||||
$valid-green: #4ab866;
|
||||
$notice-yellow: #ffb900;
|
||||
$error-red: #d94f4f;
|
||||
$box-shadow-blue: #5b9dd9;
|
||||
$core-orange: #ca4a1f;
|
||||
|
||||
$gray-10: #c3c4c7;
|
||||
$gray-20: #a7aaad;
|
||||
$gray-50: #646970;
|
||||
$gray-60: #50575e;
|
||||
$gray-80: #2c3338;
|
||||
$no-stock-color: $alert-red;
|
||||
$low-stock-color: $alert-yellow;
|
||||
$in-stock-color: $alert-green;
|
||||
|
||||
$input-border-gray: #8d96a0;
|
||||
$input-border-dark: rgba(255, 255, 255, 0.4);
|
||||
|
|
@ -61,4 +29,3 @@ $input-background-dark: rgba(0, 0, 0, 0.1);
|
|||
$select-dropdown-dark: #1e1e1e;
|
||||
$select-dropdown-light: #fff;
|
||||
$select-item-dark: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ $fontSizes: (
|
|||
// Adds animation to placeholder section
|
||||
@mixin placeholder() {
|
||||
animation: loading-fade 1.2s ease-in-out infinite;
|
||||
background-color: $core-grey-light-500 !important;
|
||||
border-color: $core-grey-light-500 !important;
|
||||
color: $core-grey-light-500 !important;
|
||||
background-color: $gray-200 !important;
|
||||
border-color: $gray-200 !important;
|
||||
color: $gray-200 !important;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -147,3 +147,13 @@ $fontSizes: (
|
|||
@function em($size, $base: 16px) {
|
||||
@return $size / $base * 1em;
|
||||
}
|
||||
|
||||
// Encodes hex colors so they can be used in URL content.
|
||||
@function encode-color($color) {
|
||||
@if type-of($color) != "color" or str-index(#{$color}, "#") != 1 {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
$hex: str-slice(ie-hex-str($color), 4);
|
||||
@return "%23" + unquote("#{$hex}");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,14 @@
|
|||
$gap-largest: 40px;
|
||||
@import "node_modules/@wordpress/base-styles/variables";
|
||||
|
||||
// @todo replace with $grid-unit values when `@woocommerce/base-styles` is updated.
|
||||
// see: https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36
|
||||
$gap-largest: 40px; // $grid-unit-50
|
||||
$gap-larger: 36px;
|
||||
$gap-large: 24px;
|
||||
$gap: 16px;
|
||||
$gap-small: 12px;
|
||||
$gap-smaller: 8px;
|
||||
$gap-smallest: 4px;
|
||||
|
||||
// Variables pulled from Gutenberg.
|
||||
// Editor Widths
|
||||
$sidebar-width: 280px;
|
||||
$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.
|
||||
|
||||
// Blocks
|
||||
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
|
||||
$block-spacing: 4px; // Vertical space between blocks.
|
||||
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
|
||||
$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
|
||||
$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
|
||||
$gap-large: 24px; // $grid-unit-30
|
||||
$gap: 16px; // $grid-unit-20
|
||||
$gap-small: 12px; // $grid-unit-15
|
||||
$gap-smaller: 8px; // $grid-unit-10
|
||||
$gap-smallest: 4px; // $grid-unit-05
|
||||
|
||||
// Cart block
|
||||
$cart-image-width: 5rem;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
// Adds border to placeholder lists, so they can be distinguished from the white background.
|
||||
.components-placeholder .woocommerce-search-list__list {
|
||||
border: 1px solid $core-grey-light-500;
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
// Work-around to make the SearchList component work fine with the last versions of @wordpress/components.
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
margin-bottom: $gap-large;
|
||||
|
||||
select {
|
||||
border-color: $error-red;
|
||||
border-color: $alert-red;
|
||||
&:focus {
|
||||
outline-color: $error-red;
|
||||
outline-color: $alert-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
.wc-atomic-blocks-product__edit-card {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e2e4e7;
|
||||
border-top: 1px solid $gray-200;
|
||||
|
||||
.wc-atomic-blocks-product__edit-card-title {
|
||||
margin: 0 0 $gap;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
@include font-size(small);
|
||||
|
||||
&--in-stock {
|
||||
color: $valid-green;
|
||||
color: $in-stock-color;
|
||||
}
|
||||
&--out-of-stock {
|
||||
color: $error-red;
|
||||
color: $no-stock-color;
|
||||
}
|
||||
&--low-stock,
|
||||
&--available-on-backorder {
|
||||
color: $notice-yellow;
|
||||
color: $low-stock-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.wc-block-components-button:not(.is-link) {
|
||||
@include reset-typography();
|
||||
align-items: center;
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
display: inline-flex;
|
||||
font-weight: bold;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
margin: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid $gray-10;
|
||||
border-left: 1px solid $gray-400;
|
||||
}
|
||||
|
||||
> a {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $core-grey-light-500;
|
||||
color: $core-grey-dark-800;
|
||||
background: $gray-200;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
&.wc-block-components-chip--radius-small {
|
||||
|
|
@ -55,11 +55,11 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
|
|||
button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
|
||||
.wc-block-components-chip__remove:hover,
|
||||
.wc-block-components-chip__remove:focus {
|
||||
fill: #d94f4f;
|
||||
fill: $alert-red;
|
||||
}
|
||||
|
||||
button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
|
||||
.wc-block-components-chip__remove:disabled {
|
||||
fill: $core-grey-dark-100;
|
||||
fill: $gray-600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ $dropdown-selector-line-height: 18/14;
|
|||
padding: 2px $gap-smaller;
|
||||
|
||||
.is-disabled & {
|
||||
background-color: $core-grey-light-500;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
.is-multiple.has-checked > & {
|
||||
|
|
@ -102,7 +102,7 @@ $dropdown-selector-line-height: 18/14;
|
|||
.wc-block-components-dropdown-selector__selected-value {
|
||||
@include font-size(small);
|
||||
align-items: center;
|
||||
color: $core-grey-dark-600;
|
||||
color: $gray-700;
|
||||
display: inline-flex;
|
||||
margin: em($gap-small/4) 0;
|
||||
padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75);
|
||||
|
|
@ -155,14 +155,14 @@ $dropdown-selector-line-height: 18/14;
|
|||
|
||||
.wc-block-components-dropdown-selector__list-item {
|
||||
@include font-size(small);
|
||||
color: $core-grey-dark-600;
|
||||
color: $gray-700;
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 $gap-smallest;
|
||||
|
||||
&.is-selected {
|
||||
background-color: $core-grey-light-600;
|
||||
background-color: $gray-300;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: block;
|
||||
|
||||
.components-button {
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
transform-origin: top left;
|
||||
color: $gray-50;
|
||||
color: $gray-700;
|
||||
transition: transform 200ms ease;
|
||||
margin: 0 0 0 #{$gap + 1px};
|
||||
overflow: hidden;
|
||||
|
|
@ -109,14 +109,14 @@
|
|||
}
|
||||
|
||||
.wc-block-gateway-input.has-error {
|
||||
border-color: $error-red;
|
||||
border-color: $alert-red;
|
||||
&:focus {
|
||||
outline-color: $error-red;
|
||||
outline-color: $alert-red;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-gateway-input.has-error + label {
|
||||
color: $error-red;
|
||||
color: $alert-red;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
cursor: pointer;
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='%2395588A' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%2395588A' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='%2395588A' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='%2395588A' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='#{encode-color($gray-700)}' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='#{encode-color($gray-700)}' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='#{encode-color($gray-700)}' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='#{encode-color($gray-700)}' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='#{encode-color($gray-700)}' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='#{encode-color($gray-700)}' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
transition: transform .2s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -49,6 +49,36 @@
|
|||
.wc-block-components-price-slider {
|
||||
margin-bottom: $gap-large;
|
||||
|
||||
&.wc-block-components-price-slider--has-filter-button {
|
||||
.wc-block-components-price-slider__controls {
|
||||
justify-content: flex-end;
|
||||
|
||||
.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-disabled {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
@include placeholder();
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled:not(.is-loading) {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
@include reset;
|
||||
height: 9px;
|
||||
|
|
@ -57,6 +87,7 @@
|
|||
box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.1);
|
||||
background: #e1e1e1;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
height: 9px;
|
||||
|
|
@ -65,11 +96,10 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
|
||||
--range-color: #a8739d;
|
||||
--range-color: #{$studio-woocommerce-purple-30};
|
||||
/*rtl:ignore*/
|
||||
background: var(--track-background);
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-price-slider__controls {
|
||||
display: flex;
|
||||
|
|
@ -89,16 +119,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.wc-block-components-price-slider--has-filter-button {
|
||||
.wc-block-components-price-slider__controls {
|
||||
justify-content: flex-end;
|
||||
|
||||
.wc-block-components-price-slider__amount.wc-block-components-price-slider__amount--max {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider__range-input {
|
||||
@include reset;
|
||||
width: 100%;
|
||||
|
|
@ -181,47 +201,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is-loading,
|
||||
&.is-disabled {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
@include placeholder();
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled:not(.is-loading) {
|
||||
.wc-block-components-price-slider__range-input-wrapper,
|
||||
.wc-block-components-price-slider__amount,
|
||||
.wc-block-components-price-slider__button {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.wc-block-components-price-slider .wc-block-components-price-slider__range-input-wrapper .wc-block-components-price-slider__range-input-progress {
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
--track-background: linear-gradient(to left, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 100% / 100% 100%;
|
||||
--range-color: #a8739d;
|
||||
--range-color: #{$studio-woocommerce-purple-30};
|
||||
background: var(--track-background);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ie {
|
||||
.wc-block-components-price-slider {
|
||||
.wc-block-components-price-slider__range-input-wrapper {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
background: #a8739d;
|
||||
box-shadow: 0 0 0 1px inset #95588a;
|
||||
background: #{$studio-woocommerce-purple-30};
|
||||
width: 100%;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
.wc-block-components-price-slider__range-input {
|
||||
height: 24px;
|
||||
pointer-events: auto;
|
||||
|
|
@ -279,7 +277,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* IE 11 will not support multi-range slider due to poor pointer-events support on the thumb. Reverts to 2 sliders. */
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $core-grey-light-600;
|
||||
outline: 2px solid $gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-quantity-selector {
|
||||
display: flex;
|
||||
min-width: 100px;
|
||||
border: 1px solid $core-grey-light-600;
|
||||
border: 1px solid $gray-300;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
// needed so that buttons fill the container.
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
-moz-appearance: textfield;
|
||||
|
||||
&:focus {
|
||||
background: $core-grey-light-200;
|
||||
outline: 1px solid $core-grey-light-600;
|
||||
background: $gray-100;
|
||||
outline: 1px solid $gray-300;
|
||||
}
|
||||
&:disabled {
|
||||
color: $core-grey-dark-100;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.has-dark-controls & {
|
||||
|
|
@ -71,17 +71,17 @@
|
|||
@include font-size(regular);
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
color: $core-grey-dark-700;
|
||||
color: $gray-900;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include reset-button;
|
||||
color: $core-grey-dark-900;
|
||||
color: $gray-900;
|
||||
}
|
||||
&:disabled {
|
||||
color: $core-grey-dark-100;
|
||||
color: $gray-600;
|
||||
cursor: default;
|
||||
@include reset-button;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
transform: translateY(0.75em);
|
||||
transform-origin: top left;
|
||||
transition: all 200ms ease;
|
||||
color: $gray-50;
|
||||
color: $gray-700;
|
||||
z-index: 1;
|
||||
margin: 0 0 0 #{$gap + 1px};
|
||||
overflow: hidden;
|
||||
|
|
@ -36,17 +36,17 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $error-red;
|
||||
border-color: $alert-red;
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted $error-red;
|
||||
outline: 1px dotted $alert-red;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error label {
|
||||
color: $error-red;
|
||||
color: $alert-red;
|
||||
}
|
||||
|
||||
.components-custom-select-control__button {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
top: 0;
|
||||
transform-origin: top left;
|
||||
line-height: 1.375; // =22px when font-size is 16px.
|
||||
color: $gray-50;
|
||||
color: $gray-700;
|
||||
transition: transform 200ms ease;
|
||||
margin: 0 0 0 #{$gap + 1px};
|
||||
overflow: hidden;
|
||||
|
|
@ -76,16 +76,16 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $error-red;
|
||||
border-color: $alert-red;
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted $error-red;
|
||||
outline: 1px dotted $alert-red;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-error label {
|
||||
color: $error-red;
|
||||
color: $alert-red;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wc-block-components-validation-error {
|
||||
@include font-size(smaller);
|
||||
color: $error-red;
|
||||
color: $alert-red;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: calc(100% - 1px);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
&::before {
|
||||
box-shadow: 0 -10px 20px 10px currentColor;
|
||||
color: transparentize($core-grey-light-700, 0.5);
|
||||
color: transparentize($gray-400, 0.5);
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: block;
|
||||
|
||||
.components-button {
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wc-block-featured-category {
|
||||
position: relative;
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wc-block-featured-product {
|
||||
position: relative;
|
||||
background-color: $black;
|
||||
background-color: $gray-900;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 0 0.5em;
|
||||
color: #555d66;
|
||||
color: $gray-700;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.25em;
|
||||
|
|
@ -89,21 +89,21 @@
|
|||
}
|
||||
&:focus:enabled {
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
&:not(:disabled):not([aria-disabled="true"]):hover {
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
|
||||
}
|
||||
&:not(:disabled):not([aria-disabled="true"]):active {
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px #fff;
|
||||
}
|
||||
&[aria-disabled="true"]:focus,
|
||||
&:disabled:focus {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
cursor: pointer;
|
||||
background: none;
|
||||
padding: 0 0.5em;
|
||||
color: #555d66;
|
||||
color: $gray-700;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.25em;
|
||||
|
|
@ -37,21 +37,21 @@
|
|||
}
|
||||
&:focus:enabled {
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px #fff;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
&:not(:disabled):not([aria-disabled="true"]):hover {
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #e2e4e7, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2);
|
||||
}
|
||||
&:not(:disabled):not([aria-disabled="true"]):active {
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
color: #191e23;
|
||||
box-shadow: inset 0 0 0 1px #ccd0d4, inset 0 0 0 2px #fff;
|
||||
color: $gray-900;
|
||||
box-shadow: inset 0 0 0 1px $gray-900, inset 0 0 0 2px #fff;
|
||||
}
|
||||
&[aria-disabled="true"]:focus,
|
||||
&:disabled:focus {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
.wc-block-all-products-grid-item-template {
|
||||
border-top: 1px solid #e2e4e7;
|
||||
border-top: 1px solid $gray-200;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
background: #e2e4e7;
|
||||
background: $gray-200;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
.wc-block-single-product__edit-card {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e2e4e7;
|
||||
border-top: 1px solid $gray-200;
|
||||
|
||||
.wc-block-single-product__edit-card-title {
|
||||
margin: 0 0 $gap;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wc-block-feedback-prompt {
|
||||
background-color: #f7f7f7;
|
||||
border-top: 1px solid #e2e4e7;
|
||||
border-top: 1px solid $gray-200;
|
||||
margin: 0 -16px 0;
|
||||
padding: $gap-large;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -49,14 +49,14 @@
|
|||
content: "";
|
||||
height: $gap-large;
|
||||
width: $gap-large;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="{$core-grey-dark-300}" /></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.depth-0[aria-expanded="true"]::after {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="{$core-grey-dark-300}" /></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||
}
|
||||
|
||||
&[disabled].depth-0::after {
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
content: "";
|
||||
height: $gap-large;
|
||||
width: $gap-large;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="{$core-grey-dark-300}" /></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.depth-0.is-variable[aria-expanded="true"]::after {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="{$core-grey-dark-300}" /></svg>');
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
&.is-toggled,
|
||||
&.is-toggled:focus {
|
||||
background: $core-grey-dark-500;
|
||||
background: $gray-700;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
box-shadow: 0 0 0 13px #f0f2f3;
|
||||
margin: 0 0 27px;
|
||||
visibility: hidden;
|
||||
color: #555d66;
|
||||
color: $gray-700;
|
||||
}
|
||||
.has-child-selected,
|
||||
.is-selected {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { SVG } from 'wordpress-components';
|
|||
const radioUnselected = (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="#6C7781"
|
||||
fill="#757575"
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
|
||||
/>
|
||||
</SVG>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. H
|
|||
|
||||
## Blocks
|
||||
|
||||
- [All Products & filters](./all-products-and-filters.md)
|
||||
- [Cart and Checkout](./cart-and-checkout.md)
|
||||
|
||||
## Other docs
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
# All Products and filters
|
||||
|
||||
## Price slider accent color
|
||||
|
||||
The Filter Products by Price block includes a price slider which uses an accent color to show the selected range.
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/3616980/96570001-2053f900-12ca-11eb-8a75-8a54f243bda3.png" alt="Price filter screenshot" width="286" />
|
||||
|
||||
By default, it uses the WooCommerce purple shade, but it can be easily modified by themes with the following code:
|
||||
|
||||
```CSS
|
||||
.wc-block-components-price-slider__range-input-progress,
|
||||
.rtl .wc-block-components-price-slider__range-input-progress {
|
||||
--range-color: #ee6948;
|
||||
}
|
||||
```
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/3616980/96569858-f0a4f100-12c9-11eb-8011-05227bb60277.png" alt="Price filter screenshot with custom styles" width="286" />
|
||||
|
||||
Notice the code snippet above uses a CSS custom property, so the default color might still be available in some browsers that don't support it like Internet Explorer 11. If your theme supports IE11, you can add the following lines to target it:
|
||||
|
||||
```CSS
|
||||
/* Target only IE11 */
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.wc-block-components-price-slider__range-input-progress {
|
||||
background: #ee6948;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -4,6 +4,12 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@automattic/color-studio": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@automattic/color-studio/-/color-studio-2.3.1.tgz",
|
||||
"integrity": "sha512-EukCyI4mJu7pMob/xLrply5LPVQQmpWD4y5JtTn/Vvni78Ax6654I82Ute/Yu9Buvj4MS3sIXasHlhECA7lSEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/cli": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.12.1.tgz",
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
"wp-env:config": "./bin/wp-env-pre-config.sh"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@automattic/color-studio": "2.3.1",
|
||||
"@babel/cli": "7.12.1",
|
||||
"@babel/core": "7.12.3",
|
||||
"@babel/plugin-proposal-class-properties": "7.12.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue