refactor: minor refactor of input with vars and state modifiers

sebnitu · May 23, 2021 · 3b13a1a · 3b13a1a
1 parent 1c0bbd2
commit 3b13a1a
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 7 deletions.
diff --git a/docs/dist/styles.css b/docs/dist/styles.css
diff --git a/docs/dist/styles.css.map b/docs/dist/styles.css.map
diff --git a/docs/dist/styles.min.css b/docs/dist/styles.min.css
diff --git a/docs/dist/styles.min.css.map b/docs/dist/styles.min.css.map
diff --git a/packages/input/src/_input.scss b/packages/input/src/_input.scss
@@ -34,6 +34,14 @@ $_b: var.$prefix-block;
     background-color: var.$background-focus;
   }
 
+  &[disabled] {
+    background-color: var.$background-disabled;
+  }
+
+  &[readonly] {
+    background-color: var.$background-readonly;
+  }
+
   &::placeholder {
     color: core.$color-subtle;
   }

diff --git a/packages/input/src/_input_state.scss b/packages/input/src/_input_state.scss
@@ -6,6 +6,18 @@ $_b: var.$prefix-block;
 $_m: var.$prefix-modifier;
 $_v: var.$prefix-modifier-value;
 
+.#{$_b}input#{$_m}state#{$_v}info {
+  @include mix.box-shadow("default", rgba(core.$info, 1));
+
+  &:hover {
+    @include mix.box-shadow("hover", rgba(core.$info, 1));
+  }
+
+  &:focus {
+    @include mix.box-shadow("focus", rgba(core.$info, 1));
+  }
+}
+
 .#{$_b}input#{$_m}state#{$_v}success {
   @include mix.box-shadow("default", rgba(core.$success, 1));
 

diff --git a/packages/input/src/_variables.scss b/packages/input/src/_variables.scss
@@ -22,6 +22,8 @@ $color-placeholder: core.$color-subtle !default;
 
 $background: core.$white !default;
 $background-focus: core.$white !default;
+$background-disabled: core.$shade !default;
+$background-readonly: core.$shade !default;
 
 $box-shadow-values: 0 0 0 1px !default;
 $box-shadow-color: core.$border-color-dark !default;