align gender/org input msg with others

Because the `input` field is already to the right, they were being transformed too far over. This overrides the transform to be correct, and also scopes some css in more detail

src/components/card/card.scss

@@ -21,6 +21,26 @@
         }
     }
 
+    .form {
+        padding: 3rem 4rem;
+
+        .card-button {
+            margin: 0 0 -3rem -4rem;
+        }
+
+        .row {        
+            margin-bottom: 1.2rem;
+
+            &.has-error {
+                .input {
+                    border: 1px solid $ui-orange;
+                }
+            }
+
+            .col-sm-9 {
+                position: relative;
+            }
+
             .validation-message {
                 $arrow-border-width: 1rem;
                 display: block;
@@ -57,26 +77,6 @@
                     content: "";
                 }
             }
-
-    .form {
-        padding: 3rem 4rem;
-
-        .card-button {
-            margin: 0 0 -3rem -4rem;
-        }
-
-        .row {        
-            margin-bottom: 1.2rem;
-
-            &.has-error {
-                .input {
-                    border: 1px solid $ui-orange;
-                }
-            }
-
-            .col-sm-9 {
-                position: relative;
-            }
         }
     }
 }
@@ -105,6 +105,8 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .card {
+        .form {
+            .row {
                 .validation-message {
                     position: relative;
                     transform: none;
@@ -117,4 +119,6 @@
                     }
                 }
             }
+        }
+    }
 }

src/components/registration/steps.scss

@@ -2,10 +2,6 @@
 @import "../../frameless";
 
 .registration-step {
-    .demographics-checkbox-is-robot {
-        display: none;
-    }
-
     .invite-avatar {
         display: block;
         margin: 0 auto 1rem auto;
@@ -13,6 +9,11 @@
         border-radius: 8px;
     }
 
+    .card {
+        .demographics-checkbox-is-robot {
+            display: none;
+        }
+
         .gender-input,
         .other-input {
             float: right;
@@ -20,6 +21,10 @@
 
             .row {
                 margin-left: .5rem;
+
+                .validation-message {
+                    transform: translate(14rem, 0);
+                }
             }
         }
 
@@ -28,6 +33,7 @@
             text-align: left;
             color: $ui-dark-gray;
         }
+    }
 
     &.class-invite-step {
         text-align: center;
@@ -51,12 +57,15 @@
     }
 
     &.username-step {
+        .card {
             .username-label {
                 margin-bottom: .75rem;
             }
         }
+    }
 
     &.demographics-step {
+        .card {
             .gender-input {
                 margin-top: -5.5rem;
             }
@@ -70,8 +79,10 @@
                 }
             }
         }
+    }
 
     &.phone-step {
+        .card {
             .form-group {
                 margin-bottom: 2rem;
             }
@@ -82,8 +93,10 @@
                 }
             }
         }
+    }
 
     &.organization-step {
+        .card {
             .checkbox-group {
                 .validation-message {
                     transform: translate(16rem, 8rem);
@@ -100,9 +113,10 @@
                 margin-top: -5.75rem;
             }
         }
+    }
 
     &.usescratch-step {
-        .form {
+        .card {
             .form-group {
                 margin-bottom: 0;
 
@@ -112,7 +126,6 @@
                     }
                 }
             }
-        }
 
             p {
                 &.char-count {
@@ -122,6 +135,7 @@
                 }
             }
         }
+    }
 
     &.last-step,
     &.error-step {
@@ -149,11 +163,13 @@
 @media only screen and (max-width: $mobile - 1) {
     .registration-step {
         &.demographics-step {
+            .card {
                 .radio {
                     width: 100%;
                     text-align: left;
                 }
             }
+        }
 
         &.last-step,
         &.error-step {
@@ -167,11 +183,14 @@
 
 @media only screen and (max-width: $desktop - 1) {
     .registration-step {
+        .card {
             .form {
                 text-align: left;
             }
+        }
 
         &.phone-step {
+            .card {
                 .checkbox,
                 .validation-message {
                     text-align: left;
@@ -181,11 +200,14 @@
                     margin-bottom: 1rem;
                 }
             }
+        }
 
         &.organization-step {
+            .card {
                 .checkbox-group {
                     text-align: left;
                 }
             }
         }
+    }
 }