Add Cart and Checkout block styles (#1412)

* Add custom styles for the Cart and Checkout blocks

* Change component button colors to button_alt

* Add button component state styles
This commit is contained in:
Albert Juhé Lluveras 2020-08-01 17:21:12 +02:00 committed by GitHub
parent 69f189bc9c
commit 0a6f6092d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 13 deletions

View file

@ -805,6 +805,38 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
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 ) . ';