fix: fix #input component IE11 hover / focus issue with outline border

dnbexperience · Apr 21, 2019 · 5ab8547 · 5ab8547
1 parent 4688417
commit 5ab8547
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -408,23 +408,23 @@ exports[`Input scss have to match default theme snapshot 1`] = `
   .dnb-input__shell {
     background-color: var(--input-background-color);
     border: none;
-    box-shadow: inset 0 0 0 var(--input-border-width, 1px) var(--input-border-color);
+    box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
     border-color: transparent; }
     .dnb-input__shell[data-input-state='dirty'] {
       color: var(--input-text-color--changed);
       background-color: var(--input-background-color--changed); }
     .dnb-input__shell[data-input-state='disabled'] {
       color: var(--input-text-color--disabled);
-      box-shadow: inset 0 0 0 var(--input-border-width, 1px) var(--input-border-color--disabled);
+      box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color--disabled);
       border-color: transparent;
       background-color: var(--input-background-color--disabled); }
     .dnb-input__shell:not([data-input-state='disabled']):hover, .dnb-input__shell[data-input-state='focus'] {
       color: var(--input-text-color--focus);
       background-color: var(--input-background-color--focus);
-      box-shadow: 0 0 0 calc(var(--input-border-width, 1px) + 1px) var(--input-border-color--focus);
+      box-shadow: 0 0 0 0.125rem var(--input-border-color--focus);
       border-color: transparent; }
   .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']), .dnb-input__status--error .dnb-input__shell:not([data-input-state='focus']):not([data-input-state='disabled']):hover {
-    box-shadow: 0 0 0 calc(var(--input-border-width, 1px) + 1px) var(--color-cherry-red);
+    box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
     border-color: transparent; }
   .dnb-input ::selection {
     background-color: var(--color-mint-green);

diff --git a/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-ui-lib/src/components/input/style/themes/dnb-input-theme-ui.scss
@@ -29,7 +29,7 @@
 
     @include fakeBorder(
       var(--input-border-color),
-      var(--input-border-width, 1px),
+      var(--input-border-width),
       inset
     );
 
@@ -43,7 +43,7 @@
       color: var(--input-text-color--disabled);
       @include fakeBorder(
         var(--input-border-color--disabled),
-        var(--input-border-width, 1px),
+        var(--input-border-width),
         inset
       );
       background-color: var(--input-background-color--disabled);
@@ -53,10 +53,7 @@
     &[data-input-state='focus'] {
       color: var(--input-text-color--focus);
       background-color: var(--input-background-color--focus);
-      @include fakeBorder(
-        var(--input-border-color--focus),
-        calc(var(--input-border-width, 1px) + 1px)
-      );
+      @include fakeBorder(var(--input-border-color--focus), 0.125rem);
     }
   }
 
@@ -65,10 +62,7 @@
     &,
     &:not([data-input-state='disabled']):hover {
       // In case we want to have a larger border size on the input
-      @include fakeBorder(
-        var(--color-cherry-red),
-        calc(var(--input-border-width, 1px) + 1px)
-      );
+      @include fakeBorder(var(--color-cherry-red), 0.125rem);
     }
   }