From: harry Date: Thu, 7 Sep 2017 18:00:27 +0000 (+0530) Subject: More Refactor. This also removes the dirt! X-Git-Tag: v6.4.4-rc1~15^2~8 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e329de7d2280fcf250fc19445ff89e3f2f23e13e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git More Refactor. This also removes the dirt! --- diff --git a/scss/prototype/_spacing.scss b/scss/prototype/_spacing.scss index 7d1ea0342..604d081dd 100644 --- a/scss/prototype/_spacing.scss +++ b/scss/prototype/_spacing.scss @@ -14,6 +14,12 @@ $prototype-spacing-breakpoints: $global-prototype-breakpoints !default; /// @type Number $prototype-spacers-count: 3 !default; +/// Available direction's for the spacer properties +/// @type Map +$prototype-direction: ( + top, right, bottom, left, horizontal, vertical +) !default; + /// Margin helper mixin, all the values are multiplied by `$global-margin` which by default is equal to `1rem` /// @param {Number} $top [null] - Margin Top /// @param {Number} $right [null] - Margin Right @@ -70,44 +76,30 @@ $prototype-spacers-count: 3 !default; @each $prop in (margin, padding) { // All Sides .#{$prop}-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, $spacer, $spacer, $spacer); } - @else if ($prop == padding) { @include padding($spacer, $spacer, $spacer, $spacer); } - } - - // Top Side - .#{$prop}-top-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, null, null, null); } - @else if ($prop == padding) { @include padding($spacer, null, null, null); } - } - - // Right Side - .#{$prop}-right-#{$spacer} { - @if ($prop == margin) { @include margin(null, $spacer, null, null); } - @else if ($prop == padding) { @include padding(null, $spacer, null, null); } - } - - // Bottom Side - .#{$prop}-bottom-#{$spacer} { - @if ($prop == margin) { @include margin(null, null, $spacer, null); } - @else if ($prop == padding) { @include padding(null, $spacer, null, null); } - } - - // Left Side - .#{$prop}-left-#{$spacer} { - @if ($prop == margin) { @include margin(null, null, null, $spacer); } - @else if ($prop == padding) { @include padding(null, null, null, $spacer); } + @if ($prop == margin) { margin: $spacer; } + @else if ($prop == padding) { padding: $spacer; } } - // Horizontal Axes - .#{$prop}-horizontal-#{$spacer} { - @if ($prop == margin) { @include margin(null, $spacer, null, $spacer); } - @else if ($prop == padding) { @include padding(null, $spacer, null, $spacer); } - } - - // Vertical Axes - .#{$prop}-vertical-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, null, $spacer, null); } - @else if ($prop == padding) { @include padding($spacer, null, $spacer, null); } + @each $dir in $prototype-direction { + // Top Side + .#{$prop}-#{$dir}-#{$spacer} { + @if ($prop == margin) { + @if ($dir == top) { @include margin($top: $spacer); } + @else if ($dir == right) { @include margin($right: $spacer); } + @else if ($dir == bottom) { @include margin($bottom: $spacer); } + @else if ($dir == left) { @include margin($left: $spacer); } + @else if ($dir == horizontal) { @include margin($right: $spacer, $left: $spacer); } + @else if ($dir == vertical) { @include margin($top: $spacer, $bottom: $spacer); } + } + @else if ($prop == padding) { + @if ($dir == top) { @include padding($top: $spacer); } + @else if ($dir == right) { @include padding($right: $spacer); } + @else if ($dir == bottom) { @include padding($bottom: $spacer); } + @else if ($dir == left) { @include padding($left: $spacer); } + @else if ($dir == horizontal) { @include padding($right: $spacer, $left: $spacer); } + @else if ($dir == vertical) { @include padding($top: $spacer, $bottom: $spacer); } + } + } } } @@ -120,44 +112,30 @@ $prototype-spacers-count: 3 !default; @each $prop in (margin, padding) { // All Sides &-#{$prop}-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, $spacer, $spacer, $spacer); } - @else if ($prop == padding) { @include padding($spacer, $spacer, $spacer, $spacer); } - } - - // Top Side - &-#{$prop}-top-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, null, null, null); } - @else if ($prop == padding) { @include padding($spacer, null, null, null); } - } - - // Right Side - &-#{$prop}-right-#{$spacer} { - @if ($prop == margin) { @include margin(null, $spacer, null, null); } - @else if ($prop == padding) { @include padding(null, $spacer, null, null); } - } - - // Bottom Side - &-#{$prop}-bottom-#{$spacer} { - @if ($prop == margin) { @include margin(null, null, $spacer, null); } - @else if ($prop == padding) { @include padding(null, $spacer, null, null); } - } - - // Left Side - &-#{$prop}-left-#{$spacer} { - @if ($prop == margin) { @include margin(null, null, null, $spacer); } - @else if ($prop == padding) { @include padding(null, null, null, $spacer); } - } - - // Horizontal Axes - &-#{$prop}-horizontal-#{$spacer} { - @if ($prop == margin) { @include margin(null, $spacer, null, $spacer); } - @else if ($prop == padding) { @include padding(null, $spacer, null, $spacer); } + @if ($prop == margin) { margin: $spacer; } + @else if ($prop == padding) { padding: $spacer; } } - // Vertical Axes - &-#{$prop}-vertical-#{$spacer} { - @if ($prop == margin) { @include margin($spacer, null, $spacer, null); } - @else if ($prop == padding) { @include padding($spacer, null, $spacer, null); } + @each $dir in $prototype-direction { + // Top Side + &-#{$prop}-#{$dir}-#{$spacer} { + @if ($prop == margin) { + @if ($dir == top) { @include margin($top: $spacer); } + @else if ($dir == right) { @include margin($right: $spacer); } + @else if ($dir == bottom) { @include margin($bottom: $spacer); } + @else if ($dir == left) { @include margin($left: $spacer); } + @else if ($dir == horizontal) { @include margin($right: $spacer, $left: $spacer); } + @else if ($dir == vertical) { @include margin($top: $spacer, $bottom: $spacer); } + } + @else if ($prop == padding) { + @if ($dir == top) { @include padding($top: $spacer); } + @else if ($dir == right) { @include padding($right: $spacer); } + @else if ($dir == bottom) { @include padding($bottom: $spacer); } + @else if ($dir == left) { @include padding($left: $spacer); } + @else if ($dir == horizontal) { @include padding($right: $spacer, $left: $spacer); } + @else if ($dir == vertical) { @include padding($top: $spacer, $bottom: $spacer); } + } + } } } }