Merge pull request #28 from tw15egan/toggle-fix

fix(toggle): removes margin from toggle
carbon-design-system · Apr 14, 2017 · db0f1df · db0f1df
2 parents 05b0f3b + 5fa009f
commit db0f1df
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss
@@ -20,7 +20,7 @@
     align-items: center;
     transition-duration: $transition--base;
     cursor: pointer;
-    margin: 1rem;
+    margin: 1rem 0;
   }
 
   .bx--toggle__appearance {

diff --git a/src/components/toggle/toggle.html b/src/components/toggle/toggle.html
@@ -7,9 +7,21 @@
   </label>
 </div>
 
+<fieldset class="bx--fieldset">
+  <legend class="bx--label">Toggle w/ Label</legend>
+  <div class="bx--form-item">
+    <input class="bx--toggle" id="toggle2" type="checkbox">
+    <label class="bx--toggle__label" for="toggle2">
+    <span class="bx--toggle__text--left">Off</span>
+    <span class="bx--toggle__appearance"></span>
+    <span class="bx--toggle__text--right">On</span>
+  </label>
+  </div>
+</fieldset>
+
 <div class="bx--form-item">
-  <input class="bx--toggle" id="toggle2" type="checkbox" disabled>
-  <label class="bx--toggle__label" for="toggle2">
+  <input class="bx--toggle" id="toggle3" type="checkbox" disabled>
+  <label class="bx--toggle__label" for="toggle3">
     <span class="bx--toggle__text--left">Off</span>
     <span class="bx--toggle__appearance"></span>
     <span class="bx--toggle__text--right">On</span>