feat(core-components-form-control): set opactiy in disabled state (#342)

core-ds · Nov 6, 2020 · 586a8d1 · 586a8d1
1 parent 62e18bf
commit 586a8d1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/packages/form-control/src/index.module.css b/packages/form-control/src/index.module.css
@@ -15,6 +15,7 @@
     /* disabled */
     --form-control-disabled-bg-color: var(--color-dark-indigo-15);
     --form-control-disabled-border-bottom: 1px dashed var(--color-dark-indigo-30-flat);
+    --form-control-disabled-opacity: 1;
 
     /* focus */
     --form-control-focus-shadow: inset 0 -1px var(--color-dark-indigo);
@@ -195,6 +196,7 @@
 /* DISABLED STATE */
 
 .disabled .inner {
+    opacity: var(--form-control-disabled-opacity);
     border-bottom: var(--form-control-disabled-border-bottom);
     background-color: var(--form-control-disabled-bg-color);
 }

diff --git a/packages/themes/src/mixins/form-control/click.css b/packages/themes/src/mixins/form-control/click.css
@@ -19,6 +19,7 @@
     --form-control-labeled-l-paddings: 34px var(--gap-m) 14px;
 
     /* disabled */
+    --form-control-disabled-opacity: 0.5;
     --form-control-disabled-border-bottom: 0;
     --form-control-disabled-bg-color: var(--color-light-bg-tertiary);