diff --git a/packages/layout/examples/preview/index.html b/packages/layout/examples/preview/index.html index c44b9a81..a0be87cc 100644 --- a/packages/layout/examples/preview/index.html +++ b/packages/layout/examples/preview/index.html @@ -37,7 +37,6 @@

Spacing scale

Fixed

    -
  1. @@ -47,17 +46,15 @@

    Fixed

  2. -
  3. -

Fluid

    -
  1. +
diff --git a/packages/layout/examples/preview/styles.scss b/packages/layout/examples/preview/styles.scss index c9f1ce06..a5637064 100644 --- a/packages/layout/examples/preview/styles.scss +++ b/packages/layout/examples/preview/styles.scss @@ -33,24 +33,24 @@ body { padding: 0; } -@each $step in $carbon--fixed-spacing-scale { - $index: index($carbon--fixed-spacing-scale, $step) - 1; +@each $spacer in $carbon--spacing { + $index: index($carbon--spacing, $spacer); .fixed-spacing-scale-#{$index} { - width: carbon--spacing($index); - height: carbon--spacing($index); + width: $spacer; + height: $spacer; background-color: black; margin-right: carbon--mini-units(3); margin-bottom: carbon--mini-units(3); } } -@each $step in $carbon--fluid-spacing-scale { - $index: index($carbon--fluid-spacing-scale, $step) - 1; +@each $spacer in $carbon--fluid-spacing { + $index: index($carbon--fluid-spacing, $spacer); .fluid-spacing-scale-#{$index} { - width: carbon--spacing($index, true); - height: carbon--spacing($index, true); + width: $spacer; + height: $spacer; background-color: black; margin-right: carbon--mini-units(3); margin-bottom: carbon--mini-units(3); diff --git a/packages/layout/scss/_spacing.scss b/packages/layout/scss/_spacing.scss index ebd216dc..1f97cf70 100644 --- a/packages/layout/scss/_spacing.scss +++ b/packages/layout/scss/_spacing.scss @@ -17,6 +17,18 @@ $carbon--spacing-07: carbon--mini-units(4) !default; $carbon--spacing-08: carbon--mini-units(5) !default; $carbon--spacing-09: carbon--mini-units(6) !default; +$carbon--spacing: ( + $carbon--spacing-01, + $carbon--spacing-02, + $carbon--spacing-03, + $carbon--spacing-04, + $carbon--spacing-05, + $carbon--spacing-06, + $carbon--spacing-07, + $carbon--spacing-08, + $carbon--spacing-09 +) !default; + $spacing-01: $carbon--spacing-01 !default; $spacing-02: $carbon--spacing-02 !default; $spacing-03: $carbon--spacing-03 !default; @@ -35,6 +47,16 @@ $carbon--layout-05: carbon--mini-units(8) !default; $carbon--layout-06: carbon--mini-units(12) !default; $carbon--layout-07: carbon--mini-units(20) !default; +$carbon--layout: ( + $carbon--layout-01, + $carbon--layout-02, + $carbon--layout-03, + $carbon--layout-04, + $carbon--layout-05, + $carbon--layout-06, + $carbon--layout-07 +) !default; + $layout-01: $carbon--layout-01 !default; $layout-02: $carbon--layout-02 !default; $layout-03: $carbon--layout-03 !default; @@ -49,6 +71,13 @@ $carbon--fluid-spacing-02: 2vw; $carbon--fluid-spacing-03: 5vw; $carbon--fluid-spacing-04: 10vw; +$carbon--fluid-spacing: ( + $carbon--fluid-spacing-01, + $carbon--fluid-spacing-02, + $carbon--fluid-spacing-03, + $carbon--fluid-spacing-04 +) !default; + $fluid-spacing-01: $carbon--fluid-spacing-01 !default; $fluid-spacing-02: $carbon--fluid-spacing-02 !default; $fluid-spacing-03: $carbon--fluid-spacing-03 !default;