File "style.scss"
Full Path: /home/warrior1/public_html/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss
File size: 4 KB
MIME-type: text/plain
Charset: utf-8
.wp-block-woocommerce-attribute-filter {
// We need to override it because by default the global styles applied the border-style: solid;
// Our goal is not to have a border on main wrapper DOM element
border-style: none !important;
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: inherit;
}
> .wc-block-attribute-filter__title {
margin-top: $gap-small;
margin-bottom: $gap-small;
}
}
.wc-block-attribute-filter {
margin-bottom: $gap;
border-radius: inherit;
border-color: inherit;
.is-loading {
@include placeholder();
box-shadow: none;
border-radius: 0;
height: 1em;
margin-top: $gap;
}
&.style-dropdown {
position: relative;
display: flex;
gap: $gap;
align-items: flex-start;
.wc-block-components-filter-submit-button {
height: 36px;
line-height: 1;
}
> svg {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
}
.wc-block-attribute-filter-list {
margin: 0;
width: 100%;
li {
label {
cursor: pointer;
}
input {
cursor: pointer;
display: inline-block;
}
}
}
.wc-blocks-components-form-token-field-wrapper {
flex-grow: 1;
max-width: unset;
width: 0;
height: max-content;
&:not(.is-loading) {
border: 1px solid $gray-700 !important;
border-radius: 4px;
}
&.is-loading {
border-radius: em(4px);
}
}
.is-single .wc-block-attribute-filter-list-count,
.wc-blocks-components-form-token-field-wrapper .wc-block-attribute-filter-list-count {
opacity: 0.6;
}
.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
border: 0;
padding: $gap-smaller;
.components-form-token-field__input::placeholder {
color: $black;
}
.components-form-token-field__suggestions-list {
border: 1px solid $gray-700;
border-radius: 4px;
margin-top: $gap-smaller;
max-height: 21em;
.components-form-token-field__suggestion {
color: $black;
border: 1px solid $gray-400;
border-radius: 4px;
margin: $gap-small;
padding: $gap-small;
}
}
}
.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__conditions-toggle,
.wc-block-attribute-filter__display-toggle {
width: 100%;
}
.woocommerce-product-attributes {
.woocommerce-search-list__search {
.components-base-control__label {
@include reset-typography();
@include font-size(regular);
color: $gray-700;
}
}
}
.wc-block-attribute-filter__actions {
align-items: center;
display: flex;
gap: $gap;
justify-content: flex-end;
.wc-block-components-filter-submit-button {
margin-left: 0;
&:disabled {
opacity: 0.6;
cursor: auto;
}
}
.wc-block-filter-submit-button.wc-block-components-filter-submit-button.wc-block-attribute-filter__button {
margin-top: 0;
}
}
.editor-styles-wrapper .wc-block-components-checkbox {
margin-top: em($gap);
}
.wc-block-components-checkbox {
margin-top: em($gap);
}
.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
.components-form-token-field__token-text {
background-color: $white;
border: 1px solid;
border-right: 0;
border-radius: 25px 0 0 25px;
padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small);
}
.components-button.components-form-token-field__remove-token {
background-color: $white;
border: 1px solid;
border-left: 0;
border-radius: 0 25px 25px 0;
padding: 1px em($gap-smallest) 0 0;
&.has-icon svg {
background-color: $gray-200;
border-radius: 25px;
}
}
}
.editor-styles-wrapper .wc-block-attribute-filter__button.wc-block-attribute-filter__button,
.wc-block-attribute-filter__button.wc-block-attribute-filter__button {
padding: em($gap-smaller) em($gap);
@include font-size(small);
height: max-content;
line-height: normal;
width: max-content;
}