refactor: move focus inset shadow to theme (#2143)

akveo · Dec 30, 2019 · ecafd16 · ecafd16
1 parent 011edd1
commit ecafd16
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 7 deletions.
diff --git a/src/framework/theme/components/button/_button-ghost.scss b/src/framework/theme/components/button/_button-ghost.scss
@@ -13,7 +13,8 @@
     text-transform: nb-theme(button-ghost-text-transform);
 
     &:focus {
-      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true));
+      $inset-shadow: nb-theme(button-ghost-focus-inset-shadow-length);
+      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), $inset-shadow);
     }
 
     @each $size in nb-get-sizes() {

diff --git a/src/framework/theme/components/button/_button-outline.scss b/src/framework/theme/components/button/_button-outline.scss
@@ -11,7 +11,8 @@
     text-transform: nb-theme(button-outline-text-transform);
 
     &:focus {
-      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true));
+      $inset-shadow: nb-theme(button-outline-focus-inset-shadow-length);
+      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), $inset-shadow);
     }
 
     @each $size in nb-get-sizes() {

diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts
@@ -202,6 +202,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
  * button-outline-border-style:
  * button-outline-border-width:
  * button-outline-text-transform:
+ * button-outline-focus-inset-shadow-length:
  * button-outline-tiny-padding:
  * button-outline-small-padding:
  * button-outline-medium-padding:
@@ -317,6 +318,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
  * button-ghost-border-style:
  * button-ghost-border-width:
  * button-ghost-text-transform:
+ * button-ghost-focus-inset-shadow-length:
  * button-ghost-tiny-padding:
  * button-ghost-small-padding:
  * button-ghost-medium-padding:

diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -22,7 +22,8 @@
     }
 
     .native-input:focus:not(:checked) + .custom-checkbox {
-      @include nb-outline(nb-theme(checkbox-outline-width), nb-theme(checkbox-outline-color), (inset-shadow: true));
+      $inset-shadow: nb-theme(checkbox-focus-inset-shadow-length);
+      @include nb-outline(nb-theme(checkbox-outline-width), nb-theme(checkbox-outline-color), $inset-shadow);
     }
     .native-input:focus:checked + .custom-checkbox {
       @include nb-outline(nb-theme(checkbox-outline-width), nb-theme(checkbox-outline-color));

diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts
@@ -53,6 +53,7 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
  * checkbox-text-line-height:
  * checkbox-text-space:
  * checkbox-padding:
+ * checkbox-focus-inset-shadow-length:
  * checkbox-basic-text-color:
  * checkbox-basic-background-color:
  * checkbox-basic-border-color:

diff --git a/src/framework/theme/styles/core/_mixins.scss b/src/framework/theme/styles/core/_mixins.scss
@@ -34,14 +34,14 @@
   }
 }
 
-@mixin nb-outline($outline-width, $outline-color, $options: (inset-shadow: false)) {
+@mixin nb-outline($outline-width, $outline-color, $inset-shadow-length: 0) {
   $outset-shadow: 0 0 0 $outline-width $outline-color;
   box-shadow: $outset-shadow;
 
-  @if (map-get($options, 'inset-shadow')) {
+  @if ($inset-shadow-length != 0) {
     &:not(:hover):not(:active) {
-      box-shadow: $outset-shadow,
-                  inset 0 0 0 100vmax nb-theme(button-outline-color);
+      $inset-shadow: inset $inset-shadow-length $outline-color;
+      box-shadow: $outset-shadow, $inset-shadow;
     }
   }
 }

diff --git a/src/framework/theme/styles/themes/_mapping.scss b/src/framework/theme/styles/themes/_mapping.scss
@@ -657,6 +657,7 @@ $eva-mapping: (
   button-outline-border-style: solid,
   button-outline-border-width: 0.0625rem,
   button-outline-text-transform: uppercase,
+  button-outline-focus-inset-shadow-length: 0 0 0 100vmax,
 
   button-outline-tiny-padding: 0.3125rem 0.625rem,
   button-outline-small-padding: 0.4375rem 0.875rem,
@@ -781,6 +782,7 @@ $eva-mapping: (
   button-ghost-border-style: solid,
   button-ghost-border-width: 0.0625rem,
   button-ghost-text-transform: uppercase,
+  button-ghost-focus-inset-shadow-length: 0 0 0 100vmax,
 
   button-ghost-tiny-padding: 0.3125rem 0.625rem,
   button-ghost-small-padding: 0.4375rem 0.875rem,
@@ -1162,6 +1164,7 @@ $eva-mapping: (
   checkbox-text-line-height: text-subtitle-2-line-height,
   checkbox-text-space: 0.6875rem,
   checkbox-padding: 0,
+  checkbox-focus-inset-shadow-length: 0 0 0 100vmax,
 
   checkbox-basic-text-color: text-basic-color,
   checkbox-basic-background-color: color-basic-transparent-default,