use Sythesized class

user-interviews · Dec 5, 2023 · 3d0ffdf · 3d0ffdf
1 parent 3812661
commit 3d0ffdf
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/src/Dropdown/DropdownItem.module.scss b/src/Dropdown/DropdownItem.module.scss
@@ -1,5 +1,28 @@
 @import '../../scss/theme';
 
+.Synthesized {
+  .DropdownItem {
+    @include synth-font-type-30;
+    color: $ux-gray-900;
+
+    i, svg {
+      &.icon-left {
+        margin-right: $ux-spacing-20;
+      }
+    }
+
+    &:hover {
+      background-color: $synth-hover-state;
+      text-decoration: none;
+    }
+
+    &:focus {
+      background-color: $synth-selected-state-green;
+      color: $ux-gray-900;
+    }
+  }
+}
+
 .DropdownItem {
   @include synth-font-type-30;
   color: $ux-gray-900;
@@ -11,12 +34,12 @@
   }
 
   &:hover {
-    background-color: $synth-hover-state;
+    background-color: $ux-blue-100;
     text-decoration: none;
   }
 
   &:focus {
-    background-color: $synth-selected-state-green;
+    background-color: $ux-blue-200;
     color: $ux-gray-900;
   }
 }