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

Make chevron clickable in Filter by Product block input (https://github.com/woocommerce/woocommerce-blocks/pull/7139) 

* Make chevron clickable in Filter by Product block

* Make sure the chevron is vertically centered
This commit is contained in:
Albert Juhé Lluveras 2022-09-15 12:39:34 +02:00 committed by GitHub
parent fb213b3b1b
commit 87e1748811
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss
View File

@ -44,9 +44,10 @@
> svg { > svg {
position: absolute; position: absolute;
right: 20px; right: 8px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none;
} }
} }
@ -105,13 +106,6 @@
} }
} }
} }
.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
width: calc(100% - 50px);
.components-form-token-field__suggestions-list {
width: calc(100% + 50px);
}
}
} }
.wc-block-attribute-filter__multiple-toggle, .wc-block-attribute-filter__multiple-toggle,
@ -159,12 +153,19 @@
} }
.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container { .wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
padding: $gap-smallest 30px $gap-smallest $gap-smaller;
.components-form-token-field__token-text { .components-form-token-field__token-text {
background-color: $white; background-color: $white;
border: 1px solid; border: 1px solid;
border-right: 0; border-right: 0;
border-radius: 25px 0 0 25px; border-radius: 25px 0 0 25px;
padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small); padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small);
line-height: 22px;
}
> .components-form-token-field__input {
margin: em($gap-smallest) 0;
} }
.components-button.components-form-token-field__remove-token { .components-button.components-form-token-field__remove-token {