fix: #switch IE11 fixes

dnbexperience · Mar 12, 2019 · 18b51df · 18b51df
1 parent 3637cc4
commit 18b51df
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 31 deletions.
diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -151,26 +151,23 @@ exports[`Switch scss have to match default theme snapshot 1`] = `
     .dnb-switch__background::after {
       content: '';
       position: absolute;
-      transition: transform 0.3s ease-out; }
+      transition: transform 0.3s ease-out, position 0.3s ease-out; }
+      @media all and (-ms-high-contrast: none) {
+        .dnb-switch__background::after {
+          top: 0.25rem; } }
   .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
-    transform: translateX(0);
-    transform: translateX(calc(1px - 1px - var(--switch-border-width)));
     background-color: var(--color-white);
-    border: var(--switch-border-width) solid var(--color-sea-green-alt); }
+    border-color: var(--color-sea-green-alt); }
   .dnb-switch__input:checked ~ .dnb-switch__button {
-    transform: translateX(1rem);
-    transform: translateX(calc(1rem + var(--switch-border-width)));
     background-color: var(--color-sea-green); }
   .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
-    position: absolute;
     right: 0;
     transform: translateX(-0.3125rem);
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     border: 0.0625rem solid var(--color-sea-green); }
   .dnb-switch__input:checked ~ .dnb-switch__background::after {
-    position: absolute;
     left: 0;
     transform: translateX(calc(0.5rem + 0.125rem));
     width: 0.0625rem;
@@ -192,7 +189,7 @@ exports[`Switch scss have to match default theme snapshot 1`] = `
     background-color: var(--color-mint-green-50); }
   .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
     background-color: var(--color-mint-green-50);
-    border: none; }
+    border-color: transparent; }
   html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
     border: none; }
   .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background,
@@ -1548,6 +1545,7 @@ exports[`Switch scss have to match snapshot 1`] = `
 */
 :root {
   --switch-height: 1.5rem;
+  --switch-width: 2.5rem;
   --switch-border-width: 0.0625rem; }
 
 .dnb-switch {
@@ -1558,7 +1556,15 @@ exports[`Switch scss have to match snapshot 1`] = `
   vertical-align: middle;
   width: auto;
   margin: 0;
-  padding: 0; }
+  padding: 0;
+  /*
+    * When switched OFF
+    * aka when the checkbox is not :checked
+    */
+  /*
+    * When switched ON
+    * aka when the checkbox is :checked
+    */ }
   .dnb-switch__shell {
     position: relative;
     display: flex;
@@ -1574,10 +1580,21 @@ exports[`Switch scss have to match snapshot 1`] = `
     height: var(--switch-height);
     border-radius: 50%; }
   .dnb-switch__button {
+    left: 0;
+    transform: translateX(0);
     transition: transform 160ms ease-out 125ms;
     border: var(--switch-border-width) solid transparent; }
+    @media all and (-ms-high-contrast: none) {
+      .dnb-switch__button {
+        top: -0.25rem; } }
+  .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
+    transform: translateX(0);
+    transform: translateX(calc(1px - 1px - var(--switch-border-width))); }
+  .dnb-switch__input:checked ~ .dnb-switch__button {
+    transform: translateX(1rem);
+    transform: translateX(calc(1rem + var(--switch-border-width))); }
   .dnb-switch__background {
-    width: 2.5rem;
+    width: var(--switch-width);
     height: 1rem;
     border-radius: 0.8125rem; }
   .dnb-switch__focus {

diff --git a/packages/dnb-ui-lib/src/components/switch/style/_switch.scss b/packages/dnb-ui-lib/src/components/switch/style/_switch.scss
@@ -5,6 +5,7 @@
 
 :root {
   --switch-height: 1.5rem;
+  --switch-width: 2.5rem;
   --switch-border-width: 0.0625rem;
 }
 
@@ -51,12 +52,38 @@
   }
 
   &__button {
+    left: 0;
+
+    transform: translateX(0);
     transition: transform 160ms ease-out 125ms;
     border: var(--switch-border-width) solid transparent;
+
+    // IE fix
+    @media all and (-ms-high-contrast: none) {
+      top: -0.25rem; // because IE is not using flex to center here
+    }
+  }
+
+  /*
+    * When switched OFF
+    * aka when the checkbox is not :checked
+    */
+  &__input:not(:checked) ~ &__button {
+    transform: translateX(0); // IE fix
+    transform: translateX(calc(1px - 1px - var(--switch-border-width)));
+  }
+
+  /*
+    * When switched ON
+    * aka when the checkbox is :checked
+    */
+  &__input:checked ~ &__button {
+    transform: translateX(1rem); // IE fix
+    transform: translateX(calc(1rem + var(--switch-border-width)));
   }
 
   &__background {
-    width: 2.5rem;
+    width: var(--switch-width);
     height: 1rem;
     border-radius: 0.8125rem;
   }

diff --git a/packages/dnb-ui-lib/src/components/switch/style/themes/dnb-switch-theme-ui.scss b/packages/dnb-ui-lib/src/components/switch/style/themes/dnb-switch-theme-ui.scss
@@ -20,7 +20,12 @@
     &::after {
       content: '';
       position: absolute;
-      transition: transform 0.3s ease-out;
+      transition: transform 0.3s ease-out, position 0.3s ease-out;
+
+      // IE fix
+      @media all and (-ms-high-contrast: none) {
+        top: 0.25rem; // because IE is not using flex to center here
+      }
     }
   }
 
@@ -29,21 +34,16 @@
     * aka when the checkbox is not :checked
     */
   &__input:not(:checked) ~ &__button {
-    transform: translateX(0);
-    transform: translateX(calc(1px - 1px - var(--switch-border-width)));
-
     background-color: var(--color-white);
-    border: var(--switch-border-width) solid var(--color-sea-green-alt);
+    border-color: var(--color-sea-green-alt);
+    // border: var(--switch-border-width) solid var(--color-sea-green-alt);
   }
 
   /*
     * When switched ON
     * aka when the checkbox is :checked
     */
   &__input:checked ~ &__button {
-    transform: translateX(1rem); // IE fix
-    transform: translateX(calc(1rem + var(--switch-border-width)));
-
     background-color: var(--color-sea-green);
   }
 
@@ -53,10 +53,9 @@
     */
   &__input:not(:checked) ~ &__background {
     &::after {
-      position: absolute;
-      // right: 0.3125rem;
       right: 0;
-      transform: translateX(-0.3125rem);
+      transform: translateX(-0.3125rem); // 5px
+      // transform: translateX(calc(var(--switch-width) - 0.85rem)); // alternative positioning
 
       width: 0.5rem;
       height: 0.5rem;
@@ -66,7 +65,6 @@
   }
   &__input:checked ~ &__background {
     &::after {
-      position: absolute;
       left: 0;
       transform: translateX(calc(0.5rem + 0.125rem));
 
@@ -120,7 +118,7 @@
   /* stylelint-disable */
   &__input:not([disabled]):active ~ &__button {
     background-color: var(--color-mint-green-50);
-    border: none;
+    border-color: transparent;
   }
   /* stylelint-enable */
 
@@ -132,6 +130,7 @@
   &__input:not([disabled]):focus ~ &__button {
     html[data-whatinput='keyboard'] & {
       border: none;
+      // border-color: var(--color-sea-green-alt-30);
     }
   }
   /* stylelint-enable */
@@ -157,12 +156,6 @@
     * On error state
     *
     */
-  // TODO: can be removed later
-  // &__status--error
-  //   &__input:not([disabled]):not(:focus):not(:active)
-  //   ~ &__button {
-  //   border: none;
-  // }
   // change button color
   &__status--error &__input:not([disabled]):not(:focus):hover ~ &__button {
     border-color: var(--color-cherry-red);