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

Mini Cart drawer close button: inherit text color and improve alignment (https://github.com/woocommerce/woocommerce-blocks/pull/8605) 

* Make Mini Cart drawer close button inherit the color

* Fix Mini Cart drawer close button alignment

* Increase opacity when Mini Cart drawer close icon is hover, focused or active
This commit is contained in:
Albert Juhé Lluveras 2023-03-09 09:28:55 +01:00 committed by GitHub
parent 0acbeb4770
commit f65a1afe15
2 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss
View File

@ -116,13 +116,22 @@ $drawer-width-mobile: 100vw;
.components-button { .components-button {
@include reset-box(); @include reset-box();
background: transparent; background: transparent;
color: inherit;
position: absolute; position: absolute;
right: 0; opacity: 0.6;
// The SVG has some white spacing around, thus we have to set this magic number.
right: 8px;
top: 0; top: 0;
// Increase clickable area. // Increase clickable area.
padding: 1em; padding: 1em;
margin: -1em; margin: -1em;
&:hover,
&:focus,
&:active {
opacity: 1;
}
> span { > span {
@include visually-hidden(); @include visually-hidden();
} }

14
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
View File

@ -49,11 +49,6 @@
.wc-block-mini-cart__drawer { .wc-block-mini-cart__drawer {
font-size: 1rem; font-size: 1rem;
.components-modal__content .components-modal__header .components-button {
padding: unset;
margin: unset;
}
.wp-block-woocommerce-mini-cart-contents { .wp-block-woocommerce-mini-cart-contents {
.wc-block-components-notices { .wc-block-components-notices {
margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap}; margin: #{$gap} #{$gap-largest} -#{$gap} #{$gap};
@ -127,7 +122,7 @@
h2.wc-block-mini-cart__title { h2.wc-block-mini-cart__title {
@include font-size(larger); @include font-size(larger);
margin: $gap-largest $gap 0; margin: $gap $gap 0;
} }
.wc-block-mini-cart__items { .wc-block-mini-cart__items {
@ -223,10 +218,3 @@ h2.wc-block-mini-cart__title {
.admin-bar .wp-block-woocommerce-filled-mini-cart-contents-block { .admin-bar .wp-block-woocommerce-filled-mini-cart-contents-block {
height: calc(100vh - 32px); height: calc(100vh - 32px);
} }
.admin-bar
.wc-block-components-drawer
.components-modal__header
.components-button {
top: 32px;
}