Radio optimized

MikeMitterer · Mar 19, 2015 · 814173c · 814173c
1 parent 24f55a1
commit 814173c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/example/forms/web/demo.css b/example/forms/web/demo.css
@@ -734,7 +734,10 @@ form, .wsk-form {
         -webkit-flex-grow: 0;
             -ms-flex-positive: 0;
                 flex-grow: 0;
-        margin-top: 5px; }
+        margin-top: 3px;
+        margin-left: 1em; }
+        form .wsk-form__group.wsk-form__group--checkbox input:first-child, form .wsk-form__group.wsk-form__group--radio input:first-child, .wsk-form .wsk-form__group.wsk-form__group--checkbox input:first-child, .wsk-form .wsk-form__group.wsk-form__group--radio input:first-child {
+          margin-left: 0; }
       form .wsk-form__group.wsk-form__group--checkbox > *, form .wsk-form__group.wsk-form__group--radio > *, .wsk-form .wsk-form__group.wsk-form__group--checkbox > *, .wsk-form .wsk-form__group.wsk-form__group--radio > * {
         margin-right: 6px; }
     form .wsk-form__group.help, .wsk-form .wsk-form__group.help {

diff --git a/example/forms/web/index.html b/example/forms/web/index.html
@@ -222,7 +222,7 @@ <h3>Vertical, distributed, without offset</h3>
               <input type="email" class="form-control" id="inputEmail" placeholder="Email">
               <label for="inputPassword">Password:</label>
               <input type="password" class="form-control" id="inputPassword" placeholder="Password">
-              <div class="wsk-form__group checkbox">
+              <div class="wsk-form__group wsk-form__group--checkbox">
                   <input type="checkbox"> Remember me
               </div>
               <button type="submit" class="wsk-form__control--right">Sign in</button>

diff --git a/lib/sass/forms/_forms.scss b/lib/sass/forms/_forms.scss
@@ -161,7 +161,12 @@ form, .wsk-form {
 
             input {
                 flex-grow  : 0;
-                margin-top : ($_form_default_font_size / 3);
+                margin-top : 3px;
+                margin-left: 1em;
+
+                &:first-child {
+                    margin-left: 0;
+                }
             }
 
             > * {