fix: #button hover fix on IE11 to show the borders

dnbexperience · Apr 5, 2019 · eda082a · eda082a
1 parent 1ca48e3
commit eda082a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 15 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -246,7 +246,11 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--primary:hover:not([disabled]) {
     color: var(--color-sea-green);
     background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-white), 0 0 0 calc(0.125rem + 1px) var(--color-emerald-green); }
+    box-shadow: 0 0 0 0.0625rem var(--color-white), 0 0 0 0.1875rem var(--color-emerald-green);
+    /* IE11 fix */ }
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      :not([dnb-is-touch]) .dnb-button--primary:hover:not([disabled]) {
+        border: 0 solid transparent; } }
   :not([dnb-is-touch]) .dnb-button--primary:focus[disabled] {
     cursor: not-allowed; }
   :not([dnb-is-touch]) .dnb-button--primary:focus:not([disabled]) {
@@ -261,7 +265,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--primary:active:not([disabled]) {
     color: var(--color-sea-green);
     background-color: var(--color-mint-green-50);
-    box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 0.0625rem transparent;
     border-color: transparent; }
   .dnb-button--primary[disabled] {
     color: var(--color-white);
@@ -277,7 +281,11 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--secondary:hover:not([disabled]) {
     color: var(--color-sea-green);
     background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-white), 0 0 0 calc(0.125rem + 1px) var(--color-emerald-green); }
+    box-shadow: 0 0 0 0.0625rem var(--color-white), 0 0 0 0.1875rem var(--color-emerald-green);
+    /* IE11 fix */ }
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      :not([dnb-is-touch]) .dnb-button--secondary:hover:not([disabled]) {
+        border: 0 solid transparent; } }
   :not([dnb-is-touch]) .dnb-button--secondary:focus[disabled] {
     cursor: not-allowed; }
   :not([dnb-is-touch]) .dnb-button--secondary:focus:not([disabled]) {
@@ -292,7 +300,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--secondary:active:not([disabled]) {
     color: var(--color-sea-green);
     background-color: var(--color-mint-green-50);
-    box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 0.0625rem transparent;
     border-color: transparent; }
   .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
     color: var(--color-sea-green-alt-30);
@@ -366,7 +374,11 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--signal:hover:not([disabled]) {
     color: var(--color-black);
     background-color: var(--color-signal-yellow);
-    box-shadow: 0 0 0 1px var(--color-signal-yellow), 0 0 0 calc(0.125rem + 1px) var(--color-emerald-green); }
+    box-shadow: 0 0 0 0.0625rem var(--color-signal-yellow), 0 0 0 0.1875rem var(--color-emerald-green);
+    /* IE11 fix */ }
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      :not([dnb-is-touch]) .dnb-button--signal:hover:not([disabled]) {
+        border: 0 solid transparent; } }
   :not([dnb-is-touch]) .dnb-button--signal:focus[disabled] {
     cursor: not-allowed; }
   :not([dnb-is-touch]) .dnb-button--signal:focus:not([disabled]) {
@@ -381,7 +393,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   :not([dnb-is-touch]) .dnb-button--signal:active:not([disabled]) {
     color: var(--color-black);
     background-color: var(--color-signal-yellow);
-    box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 0.0625rem transparent;
     border-color: transparent; }
   .dnb-button--signal[disabled] {
     color: var(--color-black-30);

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss b/packages/dnb-ui-lib/src/components/button/style/_button-mixins.scss
@@ -16,7 +16,7 @@
     @include extendFakeFocus(
       $background-color,
       var(--color-emerald-green),
-      1px
+      0.0625rem //1px
     );
 
     @content;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -424,7 +424,7 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
     background-color: var(--color-white);
     border-color: var(--dropdown-border-color); }
   .dnb-dropdown--opened .dnb-dropdown__trigger {
-    box-shadow: 0 0 0 1px;
+    box-shadow: 0 0 0 0.0625rem;
     border-color: var(--dropdown-border-color--selected); }
   .dnb-dropdown__status--error:not(.dnb-dropdown--opened) .dnb-dropdown__trigger {
     box-shadow: 0 0 0 1px var(--color-cherry-red) !important;
@@ -459,7 +459,7 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
     color: var(--dropdown-text-color); }
   :not([dnb-is-touch]) .dnb-dropdown__input:hover:not([disabled]) ~ .dnb-dropdown__trigger {
     border-color: var(--dropdown-border-color--selected);
-    box-shadow: 0 0 0 1px; }
+    box-shadow: 0 0 0 0.0625rem; }
   .dnb-dropdown > .dnb-form-status {
     transform: translateY(-0.4375rem); }
 "
@@ -818,7 +818,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     .dnb-dropdown__option--active {
       background-color: grey; }
       .dnb-dropdown__option--active .dnb-dropdown__option__inner {
-        box-shadow: 0 0 0 1px; }
+        box-shadow: 0 0 0 0.0625rem; }
     .dnb-dropdown__option--selected {
       background-color: grey; }
       .dnb-dropdown__option--selected .dnb-dropdown__option__inner {
@@ -926,7 +926,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     :not([dnb-is-touch]) .dnb-dropdown__input:focus:not([disabled]) ~ .dnb-dropdown__trigger {
       z-index: 8;
       cursor: pointer;
-      box-shadow: 0 0 0 1px; }
+      box-shadow: 0 0 0 0.0625rem; }
     :not([dnb-is-touch]) .dnb-dropdown__input:focus:not([disabled]) ~ .dnb-dropdown__options {
       z-index: 9;
       display: flex;

diff --git a/packages/dnb-ui-lib/src/style/core/utilities.scss b/packages/dnb-ui-lib/src/style/core/utilities.scss
@@ -110,7 +110,7 @@
   }
 }
 
-$focusRingWidth: 0.125rem;
+$focusRingWidth: 0.125rem; //2px
 $focusRingColor: var(--color-emerald-green);
 @mixin fakeFocus($whatinput: null, $color: null, $inset: null) {
   outline: none;
@@ -129,7 +129,7 @@ $focusRingColor: var(--color-emerald-green);
 
 @mixin fakeBorder(
   $color: null,
-  $width: 1px,
+  $width: 0.0625rem /*1px*/,
   $inset: null,
   $important: null
 ) {
@@ -146,10 +146,16 @@ $focusRingColor: var(--color-emerald-green);
 @mixin extendFakeFocus(
   $first-color: null,
   $second-color: null,
-  $width: 1px
+  $width: 0.0625rem /*1px*/
 ) {
-  $second: 0 0 0 calc(#{$focusRingWidth} + #{$width}) $second-color;
+  $second: 0 0 0 ($focusRingWidth + $width) $second-color;
   box-shadow: 0 0 0 $width $first-color, $second;
+
+  /* IE11 fix */
+  @media screen and (-ms-high-contrast: active),
+    (-ms-high-contrast: none) {
+    border: 0 solid transparent; // only to trigger the renderering correctly in IE11
+  }
 }
 
 @mixin dummySpacing() {