refactor(label): standardizing margin on bx--label rather than indivi…

…dual components
carbon-design-system · Apr 5, 2017 · b193ed4 · b193ed4
1 parent 305f1b1
commit b193ed4
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -9,9 +9,16 @@
 @import '../../globals/scss/import-once';
 
 @include exports('checkbox') {
+  .bx--form-item.bx--checkbox-wrapper {
+    margin-bottom: 1rem;
+
+    &:first-of-type {
+      margin-top: rem(6px);
+    }
 
-  .bx--checkbox-wrapper {
-    margin-top: 1rem;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
   }
 
   .bx--checkbox {
@@ -26,7 +33,6 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin-bottom: 1rem;
   }
 
   .bx--checkbox-appearance {

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -6,6 +6,7 @@
 @include exports('form') {
   .bx--fieldset {
     @include reset;
+    margin-bottom: 2rem;
   }
 
   .bx--form-item {
@@ -27,6 +28,7 @@
     font-weight: 700;
     display: inline-block;
     vertical-align: baseline;
+    margin-bottom: rem(10px);
   }
 
   .bx--label--disabled {

diff --git a/src/components/number-input/_number-input.scss b/src/components/number-input/_number-input.scss
@@ -22,7 +22,6 @@
     min-width: 9.375rem;
     padding-left: 1rem;
     font-weight: 300;
-    margin: .25rem 0;
     height: rem(40px);
     color: $text-01;
     background-color: $field-01;

diff --git a/src/components/radio-button/_radio-button.scss b/src/components/radio-button/_radio-button.scss
@@ -13,7 +13,7 @@
   .bx--radio-button-group {
     display: flex;
     align-items: center;
-    margin-top: 1rem;
+    margin-top: rem(6px);
   }
 
   .bx--radio-button {

diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
@@ -24,7 +24,6 @@
     width: 100%;
     padding: .75rem 2.75rem .75rem 1rem;
     height: rem(40px);
-    margin: .625rem 0 0;
     color: $text-01;
     background-color: $field-01;
     border: none;

diff --git a/src/components/text-area/_text-area.scss b/src/components/text-area/_text-area.scss
@@ -18,7 +18,6 @@
     width: 100%;
     min-width: 10rem;
     padding: 1rem;
-    margin-top: .625rem;
     color: $text-01;
     background-color: $field-01;
     border: 1px solid transparent;

diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -19,7 +19,6 @@
     height: rem(40px);
     min-width: 10rem;
     padding: .825rem 1rem;
-    margin: .625rem 0 0;
     color: $text-01;
     background-color: $field-01;
     border: 1px solid transparent;