From 5ab854794f1779e001c8062c4b20f80f97420e52 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Sun, 21 Apr 2019 21:03:25 +0200
Subject: [PATCH] fix: fix #input component IE11 hover / focus issue with
 outline border

---
 .../__tests__/__snapshots__/Input.test.js.snap     |  8 ++++----
 .../input/style/themes/dnb-input-theme-ui.scss     | 14 ++++----------
 2 files changed, 8 insertions(+), 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
index 77653bbacdb..790fdc82866 100644
--- 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
index d0aad2e293d..3c6186a770e 100644
--- 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);
     }
   }