fix: Fix the selected and highlighted state of style (#1813)

cloudscape-design · Dec 15, 2023 · 543da84 · 543da84
1 parent 657843b
commit 543da84
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/internal/components/selectable-item/styles.scss b/src/internal/components/selectable-item/styles.scss
@@ -53,7 +53,7 @@
   }
 
   &.highlighted {
-    z-index: 2;
+    z-index: 3;
     background-color: awsui.$color-background-dropdown-item-hover;
     border-color: awsui.$color-border-dropdown-item-hover;
     &.disabled {
@@ -72,6 +72,10 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+    &.highlighted {
+      border-color: awsui.$color-border-dropdown-item-hover;
+      z-index: 3;
+    }
   }
 
   &.selected + &.selected {
@@ -80,7 +84,6 @@
   }
 
   &.highlighted.is-keyboard {
-    z-index: 3;
     border-color: awsui.$color-border-dropdown-item-focused;
     box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
   }