Add accent color to WC Blocks price slider (#1508)

* Add accent color to WC Blocks price slider * Add IE11 styles * Fix WC Blocks styles not visible in the editor
woocommerce · Nov 2, 2020 · 85402b4 · 85402b4
1 parent 76dbf00
commit 85402b4
Showing 1 changed file with 44 additions and 32 deletions.
diff --git a/inc/customizer/class-storefront-customizer.php b/inc/customizer/class-storefront-customizer.php
@@ -870,38 +870,6 @@ public function get_css() {
 				color: ' . $storefront_theme_mods['hero_text_color'] . ';
 			}
 
-			.wc-block-components-button:not(.is-link) {
-				background-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
-				color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
-			}
-
-			.wc-block-components-button:not(.is-link):hover,
-			.wc-block-components-button:not(.is-link):focus,
-			.wc-block-components-button:not(.is-link):active {
-				background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_alt_background_color'], $darken_factor ) . ';
-				color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
-			}
-
-			.wc-block-components-button:not(.is-link):disabled {
-				background-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
-				color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
-			}
-
-			.wc-block-cart__submit-container {
-				background-color: ' . $storefront_theme_mods['background_color'] . ';
-			}
-
-			.wc-block-cart__submit-container::before {
-				color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], is_color_light( $storefront_theme_mods['background_color'] ) ? -35 : 70, 0.5 ) . ';
-			}
-
-			.wc-block-components-order-summary-item__quantity {
-				background-color: ' . $storefront_theme_mods['background_color'] . ';
-				border-color: ' . $storefront_theme_mods['text_color'] . ';
-				box-shadow: 0 0 0 2px ' . $storefront_theme_mods['background_color'] . ';
-				color: ' . $storefront_theme_mods['text_color'] . ';
-			}
-
 			@media screen and ( min-width: 768px ) {
 				.secondary-navigation ul.menu a:hover {
 					color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_text_color'], $brighten_factor ) . ';
@@ -1007,6 +975,50 @@ public function gutenberg_get_css() {
 				.wp-block-cover .wp-block-cover__inner-container h6:not(.has-text-color) {
 					color: ' . $storefront_theme_mods['hero_heading_color'] . ';
 				}
+
+				.wc-block-components-price-slider__range-input-progress,
+				.rtl .wc-block-components-price-slider__range-input-progress {
+					--range-color: ' . $storefront_theme_mods['accent_color'] . ';
+				}
+
+				/* Target only IE11 */
+				@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+					.wc-block-components-price-slider__range-input-progress {
+						background: ' . $storefront_theme_mods['accent_color'] . ';
+					}
+				}
+
+				.wc-block-components-button:not(.is-link) {
+					background-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
+					color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
+				}
+
+				.wc-block-components-button:not(.is-link):hover,
+				.wc-block-components-button:not(.is-link):focus,
+				.wc-block-components-button:not(.is-link):active {
+					background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['button_alt_background_color'], $darken_factor ) . ';
+					color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
+				}
+
+				.wc-block-components-button:not(.is-link):disabled {
+					background-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
+					color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
+				}
+
+				.wc-block-cart__submit-container {
+					background-color: ' . $storefront_theme_mods['background_color'] . ';
+				}
+
+				.wc-block-cart__submit-container::before {
+					color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], is_color_light( $storefront_theme_mods['background_color'] ) ? -35 : 70, 0.5 ) . ';
+				}
+
+				.wc-block-components-order-summary-item__quantity {
+					background-color: ' . $storefront_theme_mods['background_color'] . ';
+					border-color: ' . $storefront_theme_mods['text_color'] . ';
+					box-shadow: 0 0 0 2px ' . $storefront_theme_mods['background_color'] . ';
+					color: ' . $storefront_theme_mods['text_color'] . ';
+				}
 			';
 
 			return apply_filters( 'storefront_gutenberg_customizer_css', $styles );