fix: switch colors for disabled inputs

glasskube · Sep 19, 2024 · e86fa11 · e86fa11
1 parent 650a60e
commit e86fa11
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -659,7 +659,17 @@ <h6>Heading 6</h4>
       <div class="px-3 py-2 border-bottom mb-3">
         <div class="container d-flex flex-wrap justify-content-center">
           <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">
-            <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
+            <input type="search" class="form-control mb-1" placeholder="Search..." aria-label="Search">
+            <input type="text" class="form-control mb-1" placeholder="">
+            <input type="text" disabled class="form-control mb-1" value="Disabled Text">
+            <select class="form-select mb-1">
+              <option>Option 1</option>
+              <option>Option 2</option>
+            </select>
+            <select class="form-select mb-1" disabled>
+              <option>Option 1</option>
+              <option>Option 2</option>
+            </select>
           </form>
 
           <div class="text-end">
@@ -679,4 +689,4 @@ <h6>Heading 6</h4>
   </main>
 </body>
 
-</html>
+</html>
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -46,6 +46,13 @@ $body-tertiary-bg-dark: $gk-surface-dark;
 $body-color: $gk-fg-light;
 $body-color-dark: $gk-fg-dark;
 
+$input-bg: var(--bs-secondary-bg);
+$input-disabled-bg: var(--bs-body-bg);
+$input-disabled-color: var(--bs-tertiary-color);
+
+$form-select-disabled-color: $input-disabled-color;
+$form-select-disabled-bg: $input-disabled-bg;
+
 $min-contrast-ratio: 2;
 
 $font-family-base: $font-family-main;