fix(ɵcomponents/design): use correct background color for menu option…

…s of <select> HTML element
SchweizerischeBundesbahnen · Nov 15, 2023 · a2e4e14 · a2e4e14
1 parent 4c0a170
commit a2e4e14
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/apps/components/src/app/sci-styles-page/sci-styles-page.component.html b/apps/components/src/app/sci-styles-page/sci-styles-page.component.html
@@ -42,6 +42,17 @@ <h1>HTML Element Styling</h1>
     </section>
   </ng-template>
 
+  <ng-template sciTab label="HTML Select">
+    <section class="tab-content">
+      <span>Default:</span>
+      <select>
+        <option>Option 1</option>
+        <option>Option 2</option>
+        <option>Option 3</option>
+      </select>
+    </section>
+  </ng-template>
+
   <ng-template sciTab label="HTML Link">
     <section class="tab-content">
       <span>Link:</span>

diff --git a/apps/components/src/app/sci-styles-page/sci-styles-page.component.scss b/apps/components/src/app/sci-styles-page/sci-styles-page.component.scss
@@ -19,7 +19,7 @@
       align-items: center;
       padding: .5em;
 
-      > input {
+      > input, > select {
         @include sci-design.style-input-field;
       }
 

diff --git a/projects/scion/components.internal/design/_styles.scss b/projects/scion/components.internal/design/_styles.scss
@@ -74,6 +74,7 @@
   padding: .5em;
   transition: border-color ease-in-out .15s, color ease-in-out .15s;
   background-color: var(--sci-color-background-input);
+  color: var(--sci-color-text);
   appearance: auto;
 
   &:focus-within:not(:disabled):not(:has(input:disabled)):not(:has(select:disabled)) {
@@ -92,6 +93,15 @@
   &:read-only {
     color: var(--sci-color-text-subtle);
   }
+
+  > option {
+    background-color: var(--sci-color-background-elevation);
+    color: var(--sci-color-text);
+
+    &:hover {
+      background-color: var(--sci-color-background-elevation-hover);
+    }
+  }
 }
 
 /**