From 2c9df3237e3f58f20fc5ab3eaa639c7245efc1b8 Mon Sep 17 00:00:00 2001 From: Matthew Taylor 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 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 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; - } - } - } - } - } -}