feat(input): add more input color options (#3108)

akveo · Sep 9, 2022 · 54da714 · 54da714
1 parent 010f312
commit 54da714
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 0 deletions.
diff --git a/src/framework/theme/components/input/_input-statuses.scss b/src/framework/theme/components/input/_input-statuses.scss
@@ -25,6 +25,10 @@
         background-color: nb-theme(input-#{$status}-hover-background-color);
         border-color: nb-theme(input-#{$status}-hover-border-color);
       }
+      &:focus:hover {
+        background-color: nb-theme(input-#{$status}-focus-and-hover-background-color);
+        border-color: nb-theme(input-#{$status}-focus-and-hover-border-color);
+      }
 
       &:disabled {
         background-color: nb-theme(input-#{$status}-disabled-background-color);

diff --git a/...framework/theme/components/select-with-autocomplete/_select-with-autocomplete-filled.scss b/...framework/theme/components/select-with-autocomplete/_select-with-autocomplete-filled.scss
@@ -38,6 +38,10 @@
         background-color: nb-theme(select-filled-#{$status}-hover-background-color);
         border-color: nb-theme(select-filled-#{$status}-hover-border-color);
       }
+      &:focus:hover {
+        background-color: nb-theme(select-filled-#{$status}-focus-and-hover-background-color);
+        border-color: nb-theme(select-filled-#{$status}-focus-and-hover-border-color);
+      }
 
       &[disabled] {
         background-color: nb-theme(select-filled-#{$status}-disabled-background-color);

diff --git a/src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-hero.scss b/src/framework/theme/components/select-with-autocomplete/_select-with-autocomplete-hero.scss
@@ -39,6 +39,11 @@
         $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color);
         background-image: linear-gradient(to right, $left-color, $right-color);
       }
+      &:focus:hover {
+        $left-color: nb-theme(select-hero-#{$status}-focus-and-hover-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-focus-and-hover-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
       &[disabled] {
         color: nb-theme(select-hero-#{$status}-disabled-text-color);
         background-color: nb-theme(select-hero-#{$status}-disabled-background-color);

diff --git a/...ramework/theme/components/select-with-autocomplete/_select-with-autocomplete-outline.scss b/...ramework/theme/components/select-with-autocomplete/_select-with-autocomplete-outline.scss
@@ -37,6 +37,10 @@
         background-color: nb-theme(select-outline-#{$status}-hover-background-color);
         border-color: nb-theme(select-outline-#{$status}-hover-border-color);
       }
+      &:focus:hover {
+        background-color: nb-theme(select-outline-#{$status}-focus-and-hover-background-color);
+        border-color: nb-theme(select-outline-#{$status}-focus-and-hover-border-color);
+      }
 
       &[disabled] {
         color: nb-theme(select-outline-#{$status}-disabled-text-color);

diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss
@@ -38,6 +38,10 @@
         background-color: nb-theme(select-filled-#{$status}-hover-background-color);
         border-color: nb-theme(select-filled-#{$status}-hover-border-color);
       }
+      &:focus:hover {
+        background-color: nb-theme(select-filled-#{$status}-focus-and-hover-background-color);
+        border-color: nb-theme(select-filled-#{$status}-focus-and-hover-border-color);
+      }
 
       &[disabled] {
         background-color: nb-theme(select-filled-#{$status}-disabled-background-color);

diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss
@@ -39,6 +39,11 @@
         $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color);
         background-image: linear-gradient(to right, $left-color, $right-color);
       }
+      &:focus:hover {
+        $left-color: nb-theme(select-hero-#{$status}-focus-and-hover-left-background-color);
+        $right-color: nb-theme(select-hero-#{$status}-focus-and-hover-right-background-color);
+        background-image: linear-gradient(to right, $left-color, $right-color);
+      }
       &[disabled] {
         color: nb-theme(select-hero-#{$status}-disabled-text-color);
         background-color: nb-theme(select-hero-#{$status}-disabled-background-color);

diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
@@ -37,6 +37,10 @@
         background-color: nb-theme(select-outline-#{$status}-hover-background-color);
         border-color: nb-theme(select-outline-#{$status}-hover-border-color);
       }
+      &:focus:hover {
+        background-color: nb-theme(select-outline-#{$status}-focus-and-hover-background-color);
+        border-color: nb-theme(select-outline-#{$status}-focus-and-hover-border-color);
+      }
 
       &[disabled] {
         color: nb-theme(select-outline-#{$status}-disabled-text-color);

diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss