From 2c9df3237e3f58f20fc5ab3eaa639c7245efc1b8 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Thu, 28 Jul 2016 14:10:36 -0400
Subject: [PATCH 1/3] Fix gender input error alignment in IE11

Also re-apply the arrow styling on the organization checkbox group, since it appears to be aligned correctly.
---
 src/components/registration/steps.scss | 52 ++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index 21d0ff0a5..f8e0782e2 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -212,5 +212,57 @@
                 }
             }
         }
+
+        &.demographics-step {
+            .form-group {
+                &.has-error {
+                    .gender-input {
+                        transform: translateY(-3rem);
+                    }
+                }
+            }
+        }
+
+        &.organization-step {
+            .checkbox-group {
+                .validation-message {
+                    $arrow-border-width: 1rem;
+                    display: block;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    transform: translate(16rem, -16rem);
+                    margin-left: $arrow-border-width;
+                    border: 1px solid $active-gray;
+                    border-radius: 5px;
+                    background-color: $ui-orange;
+                    padding: 1rem;
+                    max-width: 18.75rem;
+                    min-height: 1rem;
+                    max-height: 3rem;
+                    overflow: visible;
+                    color: $type-white;
+
+                    &:before {
+                        display: block;
+                        position: absolute;
+                        top: 1rem;
+                        left: -$arrow-border-width / 2;
+
+                        transform: rotate(45deg);
+
+                        border-bottom: 1px solid $active-gray;
+                        border-left: 1px solid $active-gray;
+                        border-radius: 5px;
+
+                        background-color: $ui-orange;
+                        width: $arrow-border-width;
+                        height: $arrow-border-width;
+
+                        content: "";
+                    }
+                }
+            }
+        }
     }
 }

From d97bc193df6f07f5bd6553558e8dab1f7141e632 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Thu, 28 Jul 2016 15:11:14 -0400
Subject: [PATCH 2/3] Remove unnecessary redefinitions

These are already defined in the base, and are not overridden anywhere. Only redefine the things that were overridden.
---
 src/components/registration/steps.scss | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index f8e0782e2..c8987ece4 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -227,39 +227,14 @@
             .checkbox-group {
                 .validation-message {
                     $arrow-border-width: 1rem;
-                    display: block;
                     position: absolute;
-                    top: 0;
-                    left: 0;
                     transform: translate(16rem, -16rem);
                     margin-left: $arrow-border-width;
-                    border: 1px solid $active-gray;
-                    border-radius: 5px;
-                    background-color: $ui-orange;
-                    padding: 1rem;
-                    max-width: 18.75rem;
                     min-height: 1rem;
                     max-height: 3rem;
-                    overflow: visible;
-                    color: $type-white;
 
                     &:before {
                         display: block;
-                        position: absolute;
-                        top: 1rem;
-                        left: -$arrow-border-width / 2;
-
-                        transform: rotate(45deg);
-
-                        border-bottom: 1px solid $active-gray;
-                        border-left: 1px solid $active-gray;
-                        border-radius: 5px;
-
-                        background-color: $ui-orange;
-                        width: $arrow-border-width;
-                        height: $arrow-border-width;
-
-                        content: "";
                     }
                 }
             }

From 4909d509d25ff4ff3719c377a581f4d3ecedeff4 Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Thu, 28 Jul 2016 15:46:56 -0400
Subject: [PATCH 3/3] remove ie fallback to mobile styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

it looks like @rschamp’s wodnerful `top` alignment fix for Chrome and Edge also helps here, from a test I did in IE11.
---
 src/components/registration/steps.scss | 52 --------------------------
 1 file changed, 52 deletions(-)

diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index c8987ece4..0355fbf7d 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -189,55 +189,3 @@
         }
     }
 }
-
-/* IE10 and IE11 fallback */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .registration-step {
-        &.username-step,
-        &.demographics-step,
-        &.name-step,
-        &.phone-step,
-        &.organization-step,
-        &.address-step,
-        &.email-step {
-            .validation-message {
-                position: relative;
-                transform: none;
-                margin: inherit;
-                width: 100%;
-                height: inherit;
-
-                &:before {
-                    display: none;
-                }
-            }
-        }
-
-        &.demographics-step {
-            .form-group {
-                &.has-error {
-                    .gender-input {
-                        transform: translateY(-3rem);
-                    }
-                }
-            }
-        }
-
-        &.organization-step {
-            .checkbox-group {
-                .validation-message {
-                    $arrow-border-width: 1rem;
-                    position: absolute;
-                    transform: translate(16rem, -16rem);
-                    margin-left: $arrow-border-width;
-                    min-height: 1rem;
-                    max-height: 3rem;
-
-                    &:before {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-}