Fix SearchListControl styles (II) (https://github.com/woocommerce/woocommerce-blocks/pull/10308)
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
b8f798b017
commit
ce16b98893
|
|
@ -94,196 +94,202 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-styles-wrapper {
|
.woocommerce-search-list__list {
|
||||||
.woocommerce-search-list__list {
|
border: 1px solid $gray-200;
|
||||||
border: 1px solid $gray-200;
|
margin: 0;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
padding: 0;
|
max-height: 17em;
|
||||||
max-height: 17em;
|
overflow-x: hidden;
|
||||||
overflow-x: hidden;
|
overflow-y: auto;
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-not-found {
|
||||||
|
padding: $gap-small 0;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
.woocommerce-search-list__not-found-icon,
|
||||||
|
.woocommerce-search-list__not-found-text {
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-not-found {
|
.woocommerce-search-list__not-found-icon {
|
||||||
padding: $gap-small 0;
|
margin-right: $gap;
|
||||||
text-align: center;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.woocommerce-search-list__not-found-icon,
|
.gridicon {
|
||||||
.woocommerce-search-list__not-found-text {
|
vertical-align: top;
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-search-list__not-found-icon {
|
|
||||||
margin-right: $gap;
|
|
||||||
|
|
||||||
.gridicon {
|
|
||||||
vertical-align: top;
|
|
||||||
margin-top: -1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-spinner {
|
|
||||||
float: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-menu-group__label {
|
|
||||||
@include visually-hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
> [role="menu"] {
|
|
||||||
border: 1px solid $gray-100;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-search-list__item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding: $gap-small $gap;
|
|
||||||
background: $studio-white;
|
|
||||||
// !important to keep the border around on hover
|
|
||||||
border-bottom: 1px solid $gray-100;
|
|
||||||
color: $gray-700;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: $gray-100;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-children {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
|
|
||||||
background-position: center right;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
content: "";
|
|
||||||
height: $gap-large;
|
|
||||||
margin-left: $gap-smaller;
|
|
||||||
width: $gap-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[disabled]::after {
|
|
||||||
background: none;
|
|
||||||
margin-left: 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-expanded::after {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-search-list__item-input[type="radio"] {
|
|
||||||
margin: 0 $gap-smaller 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-search-list__item-label {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.depth-0 + .depth-1 {
|
|
||||||
// Hide the border on the preceding list item
|
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.depth-0) {
|
.components-spinner {
|
||||||
border-bottom: 0 !important;
|
float: none;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.depth-0) + .depth-0 {
|
.components-menu-group__label {
|
||||||
border-top: 1px solid $gray-100;
|
@include visually-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Anything deeper than 5 levels will use this fallback depth
|
> [role="menu"] {
|
||||||
&[class*="depth-"] .woocommerce-search-list__item-label::before {
|
border: 1px solid $gray-100;
|
||||||
margin-right: $gap-smallest;
|
border-bottom: none;
|
||||||
content: str-repeat("— ", 5);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.depth-0 .woocommerce-search-list__item-label::before {
|
.woocommerce-search-list__item {
|
||||||
margin-right: 0;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: $gap-small $gap;
|
||||||
|
background: $studio-white;
|
||||||
|
// !important to keep the border around on hover
|
||||||
|
border-bottom: 1px solid $gray-100;
|
||||||
|
color: $gray-700;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-children {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||||
|
background-position: center right;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
content: "";
|
content: "";
|
||||||
|
height: $gap-large;
|
||||||
|
margin-left: $gap-smaller;
|
||||||
|
width: $gap-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 to 5 {
|
&[disabled]::after {
|
||||||
&.depth-#{$i} {
|
background: none;
|
||||||
padding-left: $gap * ( $i + 1 );
|
margin-left: 0;
|
||||||
}
|
width: auto;
|
||||||
|
|
||||||
&.depth-#{$i} .woocommerce-search-list__item-label::before {
|
|
||||||
content: str-repeat("— ", $i);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-search-list__item-name {
|
&.is-expanded::after {
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-input {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-input[type="radio"] {
|
||||||
|
margin-right: $gap-smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.components-base-control__field {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-label {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.depth-0 + .depth-1 {
|
||||||
|
// Hide the border on the preceding list item
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.depth-0) {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.depth-0) + .depth-0 {
|
||||||
|
border-top: 1px solid $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Anything deeper than 5 levels will use this fallback depth
|
||||||
|
&[class*="depth-"] .woocommerce-search-list__item-label::before {
|
||||||
|
margin-right: $gap-smallest;
|
||||||
|
content: str-repeat("— ", 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.depth-0 .woocommerce-search-list__item-label::before {
|
||||||
|
margin-right: 0;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 to 5 {
|
||||||
|
&.depth-#{$i} {
|
||||||
|
padding-left: $gap * ( $i + 1 );
|
||||||
|
}
|
||||||
|
|
||||||
|
&.depth-#{$i} .woocommerce-search-list__item-label::before {
|
||||||
|
content: str-repeat("— ", $i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-name {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-prefix {
|
||||||
|
display: none;
|
||||||
|
color: $gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-searching,
|
||||||
|
&.is-skip-level {
|
||||||
|
.woocommerce-search-list__item-label {
|
||||||
|
// Un-flex the label, so the prefix (breadcrumbs) and name are aligned.
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-search-list__item-prefix {
|
.woocommerce-search-list__item-prefix {
|
||||||
display: none;
|
display: inline;
|
||||||
color: $gray-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-searching,
|
&::after {
|
||||||
&.is-skip-level {
|
margin-right: $gap-smallest;
|
||||||
.woocommerce-search-list__item-label {
|
content: " ›";
|
||||||
// Un-flex the label, so the prefix (breadcrumbs) and name are aligned.
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-search-list__item-prefix {
|
|
||||||
display: inline;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
margin-right: $gap-smallest;
|
|
||||||
content: " ›";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-searching {
|
|
||||||
.woocommerce-search-list__item-name {
|
|
||||||
color: $gray-900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-count {
|
|
||||||
> .components-menu-item__item {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-search-list__item-count {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
padding: math.div($gap-smallest, 2) $gap-smaller;
|
|
||||||
border: 1px solid $gray-100;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
line-height: 1.4;
|
|
||||||
margin-left: auto;
|
|
||||||
color: $gray-700;
|
|
||||||
background: $studio-white;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li:last-child .woocommerce-search-list__item {
|
&.is-searching {
|
||||||
border-bottom: none;
|
.woocommerce-search-list__item-name {
|
||||||
|
color: $gray-900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-count {
|
||||||
|
> .components-menu-item__item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.woocommerce-search-list__item-count {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
padding: math.div($gap-smallest, 2) $gap-smaller;
|
||||||
|
border: 1px solid $gray-100;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-left: auto;
|
||||||
|
color: $gray-700;
|
||||||
|
background: $studio-white;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li:last-child .woocommerce-search-list__item {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue