feat: Add spacing variables (#522)

carbon-design-system · Jan 23, 2018 · a6aead8 · a6aead8
1 parent ef5eebf
commit a6aead8
Show file tree

Hide file tree

Showing 15 changed files with 71 additions and 67 deletions.
diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
@@ -10,7 +11,7 @@
   .#{$prefix}--snippet--code {
     @include bx--snippet;
     background-color: $snippet-background-color;
-    padding: 1rem 2.5rem 1rem 1rem;
+    padding: $spacing-md $spacing-2xl $spacing-md $spacing-md;
   }
 
   .#{$prefix}--snippet code {
@@ -20,7 +21,7 @@
   .#{$prefix}--snippet--code .#{$prefix}--snippet-container {
     max-height: rem(192px);
     overflow-y: scroll;
-    margin-right: 1rem;
+    margin-right: $spacing-md;
     position: relative;
   }
 
@@ -33,7 +34,7 @@
     background-color: $text-01;
     color: $inverse-01;
     height: 3.5rem;
-    padding: 0 2.5rem 0 1rem;
+    padding: 0 $spacing-2xl 0 $spacing-md;
   }
 
   .#{$prefix}--snippet--terminal .#{$prefix}--snippet-container {

diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
@@ -1,6 +1,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/import-once';
@@ -20,7 +21,7 @@
     background-color: transparent;
     display: flex;
     align-items: center;
-    padding: 0 2rem;
+    padding: 0 $spacing-xl;
     margin: 0;
     text-decoration: none;
     border: 1px solid $brand-01;

diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -1,7 +1,7 @@
 .#{$prefix}--table-toolbar {
   display: flex;
-  padding-top: rem(8px);
-  padding-bottom: rem(8px);
+  padding-top: $spacing-xs;
+  padding-bottom: $spacing-xs;
   width: 100%;
   position: relative;
 
@@ -29,8 +29,8 @@
 .#{$prefix}--toolbar-action {
   @include button-reset;
   cursor: pointer;
-  padding-left: rem(12px);
-  padding-right: rem(12px);
+  padding-left: $spacing-sm;
+  padding-right: $spacing-sm;
 
   &:hover {
     > .#{$prefix}--toolbar-action__icon {
@@ -56,8 +56,8 @@
   }
 
   ~ .#{$prefix}--btn {
-    margin-left: rem(12px);
-    margin-right: rem(2px);
+    margin-left: $spacing-sm;
+    margin-right: $spacing-sm;
   }
 }
 
@@ -76,8 +76,8 @@
   opacity: 0;
   left: 0;
   top: 0;
-  padding-left: rem(24px);
-  padding-right: rem(24px);
+  padding-left: $spacing-lg;
+  padding-right: $spacing-lg;
   width: 100%;
   height: 100%;
   z-index: 99999;
@@ -131,7 +131,7 @@
 .#{$prefix}--action-icons {
   margin-left: auto;
   svg {
-    padding: 0 rem(12px);
+    padding: 0 $spacing-sm;
     fill: $ui-01;
     height: rem(16px);
     width: auto;
@@ -147,7 +147,7 @@
 
 .#{$prefix}--batch-summary__para {
   @include typescale('zeta');
-  margin-right: rem(24px);
+  margin-right: $spacing-lg;
 }
 
 .#{$prefix}--batch-summary__cancel {

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -2,7 +2,7 @@
   width: 100%;
   min-width: rem(500px);
   overflow-x: auto;
-  padding-top: 2px; // allow space for focus styles
+  padding-top: $spacing-3xs; // allow space for focus styles
 }
 
 .#{$prefix}--data-table-v2 {
@@ -53,7 +53,7 @@
   th,
   td {
     border-top: 1px solid $ui-04;
-    padding-left: rem(12px);
+    padding-left: $spacing-sm;
     vertical-align: middle;
     text-align: left;
 
@@ -63,7 +63,7 @@
     }
 
     &:last-of-type {
-      padding-right: rem(24px);
+      padding-right: $spacing-lg;
       border-right: 1px solid $ui-04;
     }
   }
@@ -95,7 +95,7 @@
 // Options
 
 .#{$prefix}--data-table-v2-header {
-  margin-bottom: 0.5rem;
+  margin-bottom: $spacing-xs;
 }
 
 .#{$prefix}--data-table-v2--zebra {

diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss
@@ -25,7 +25,7 @@ tr.#{$prefix}--expandable-row-v2 {
   + tr[data-child-row] {
     td {
       border-top: 0;
-      padding-bottom: rem(8px);
+      padding-bottom: $spacing-xs;
     }
   }
 
@@ -91,5 +91,5 @@ tr.#{$prefix}--expandable-row--hover-v2 {
   height: 16px;
   width: auto;
   max-width: 16px;
-  padding: 2px;
+  padding: $spacing-3xs;
 }
diff --git a/src/components/data-table-v2/_data-table-v2-inline-edit.scss b/src/components/data-table-v2/_data-table-v2-inline-edit.scss
@@ -23,7 +23,7 @@
 
   &:focus {
     @include focus-outline;
-    padding: 2px;
+    padding: $spacing-3xs;
 
     .#{$prefix}--inline-edit-label__icon {
       width: auto;
@@ -46,7 +46,7 @@
   margin-left: rem(-12px);
 
   input {
-    padding-left: rem(12px);
+    padding-left: $spacing-sm;
   }
 }
 
@@ -56,7 +56,7 @@
   }
 
   select {
-    padding: 0.45rem 2.75rem 0.45rem 1rem;
+    padding: 0.45rem 2.75rem 0.45rem $spacing-md;
   }
 
   .#{$prefix}--select__arrow {

diff --git a/src/components/data-table-v2/_data-table-v2-sort.scss b/src/components/data-table-v2/_data-table-v2-sort.scss
@@ -49,7 +49,7 @@
   opacity: 0;
   fill: $ui-05;
   height: rem(9px);
-  padding: 2px;
+  padding: $spacing-3xs;
   width: auto;
   max-width: 14px;
 }
diff --git a/src/components/data-table-v2/_data-table-v2.scss b/src/components/data-table-v2/_data-table-v2.scss
@@ -1,4 +1,5 @@
 @import '../../globals/scss/vars';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/helper-mixins';
 
 @import 'data-table-v2-action';

diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
@@ -1,5 +1,6 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
@@ -44,7 +45,7 @@
     position: relative;
     height: rem(40px);
     max-width: 9rem;
-    padding: 0 1rem;
+    padding: 0 $spacing-md;
     background-color: $field-01;
     color: $text-01;
     border: 1px solid transparent;
@@ -78,7 +79,7 @@
   }
 
   .#{$prefix}--date-picker__icon + .#{$prefix}--date-picker__input {
-    padding-left: 2.9rem;
+    padding-left: $spacing-3xl;
   }
 
   .#{$prefix}--date-picker--range {
@@ -87,7 +88,7 @@
   }
 
   .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
-    margin-right: 0.5rem;
+    margin-right: $spacing-xs;
   }
 
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker__icon {
@@ -107,7 +108,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0.875rem 1rem 0.25rem;
+    padding: $spacing-md $spacing-md $spacing-2xs;
     width: rem(285px);
     height: rem(230px);
     border-radius: 0;
@@ -128,7 +129,7 @@
   .#{$prefix}--date-picker__month,
   .flatpickr-month {
     width: 100%;
-    margin-bottom: 0.2rem;
+    margin-bottom: $spacing-2xs;
   }
 
   .#{$prefix}--date-picker__month .flatpickr-prev-month,
@@ -177,7 +178,7 @@
     border-radius: 0;
     min-width: rem(38px);
     width: rem(38px);
-    padding: .25rem;
+    padding: $spacing-2xs;
 
     &:focus {
       outline: 1px solid $brand-01;
@@ -330,6 +331,6 @@
   .#{$prefix}--date-picker__weekdays,
   .flatpickr-weekdays {
     width: rem(225px);
-    margin-bottom: 0.325rem;
+    margin-bottom: $spacing-2xs;
   }
 }
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -7,6 +7,7 @@
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/layer';
 @import '../../globals/scss/typography';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/import-once';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/css--typography';
@@ -56,8 +57,8 @@
     height: rem(40px);
     padding-top: rem(13px);
     padding-bottom: rem(13px);
-    padding-left: 1rem;
-    padding-right: 2.25rem;
+    padding-left: $spacing-md;
+    padding-right: $spacing-2xl;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
@@ -82,10 +83,7 @@
     display: block;
     color: currentColor;
     text-decoration: none;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    padding-left: 1rem;
-    padding-right: 1.5rem;
+    padding: $spacing-md $spacing-lg $spacing-md $spacing-md;
     text-overflow: ellipsis;
     overflow: hidden;
 

diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss
@@ -4,6 +4,7 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/colors';
+@import '../../globals/scss/spacing';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/import-once';
@@ -16,18 +17,18 @@
     @include font-family;
     @include typescale('zeta');
     @include font-smoothing;
-    margin-left: 2rem;
+    margin-left: $spacing-xl;
     line-height: 1.5;
   }
 
   .#{$prefix}--list--unordered,
   .#{$prefix}--list--ordered {
-    padding: 1rem;
+    padding: $spacing-md;
   }
 
   .#{$prefix}--list__item {
     font-weight: 600;
-    padding-left: 0.25rem;
+    padding-left: $spacing-2xs;
   }
 
   .#{$prefix}--list--unordered > .#{$prefix}--list__item {
@@ -39,7 +40,7 @@
   }
 
   .#{$prefix}--list--nested {
-    margin-left: 0.5rem;
+    margin-left: $spacing-xs;
   }
 
   .#{$prefix}--list--nested > .#{$prefix}--list__item {
@@ -49,6 +50,6 @@
 
   .#{$prefix}--list--nested > .#{$prefix}--list__item:before {
     content: '-';
-    padding-right: 0.25rem;
+    padding-right: $spacing-2xs;
   }
 }