diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/style.scss b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/style.scss index ceef64566f4..d8f089f7647 100644 --- a/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/style.scss @@ -94,196 +94,202 @@ } } -.editor-styles-wrapper { - .woocommerce-search-list__list { - border: 1px solid $gray-200; - margin: 0; - padding: 0; - max-height: 17em; - overflow-x: hidden; - overflow-y: auto; +.woocommerce-search-list__list { + border: 1px solid $gray-200; + margin: 0; + padding: 0; + max-height: 17em; + overflow-x: hidden; + overflow-y: auto; - li { - margin-bottom: 0; + li { + 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 { - padding: $gap-small 0; - text-align: center; - border: none; + .woocommerce-search-list__not-found-icon { + margin-right: $gap; - .woocommerce-search-list__not-found-icon, - .woocommerce-search-list__not-found-text { - 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,'); - 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,'); - } - } - - .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 + .gridicon { + vertical-align: top; margin-top: -1px; } + } + } - &:not(.depth-0) { - border-bottom: 0 !important; - } + .components-spinner { + float: none; + margin: 0 auto; + } - &:not(.depth-0) + .depth-0 { - border-top: 1px solid $gray-100; - } + .components-menu-group__label { + @include visually-hidden; + } - // 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); - } + > [role="menu"] { + border: 1px solid $gray-100; + border-bottom: none; + } - &.depth-0 .woocommerce-search-list__item-label::before { - margin-right: 0; + .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,'); + background-position: center right; + background-repeat: no-repeat; + background-size: contain; content: ""; + height: $gap-large; + margin-left: $gap-smaller; + width: $gap-large; } - @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); - } + &[disabled]::after { + background: none; + margin-left: 0; + width: auto; } - .woocommerce-search-list__item-name { + &.is-expanded::after { + background-image: url('data:image/svg+xml;utf8,'); + } + } + + .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; } .woocommerce-search-list__item-prefix { - display: none; - color: $gray-700; - } + display: inline; - &.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; + &::after { + margin-right: $gap-smallest; + content: " ›"; } - - .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 { - border-bottom: none; + &.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 { + border-bottom: none; + } }