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;
+ }
}