diff --git a/__test__/src/scss/test.scss b/__test__/src/scss/test.scss index d38ae15..5fc0a56 100644 --- a/__test__/src/scss/test.scss +++ b/__test__/src/scss/test.scss @@ -17,7 +17,6 @@ body { .block { // * Behave like a grid-item - @include i; background: $color-secondary; border: 1px solid $color-border; box-shadow: inset 0 0 0.5em 0.5em rgba($color-shade, 0.1); diff --git a/__test__/src/scss/tests/_modifiers.scss b/__test__/src/scss/tests/_modifiers.scss index ef79aa8..957f19c 100644 --- a/__test__/src/scss/tests/_modifiers.scss +++ b/__test__/src/scss/tests/_modifiers.scss @@ -4,6 +4,7 @@ } &-item { + $hagrid-gutter: 3rem; @include i(1/3); &:last-child { @@ -21,6 +22,18 @@ @include g(right); } + &-full { + @include g(full); + } + + &-wide { + @include g; + } + + &-narrow { + @include g; + } + &-center { @include g(center); } @@ -49,18 +62,6 @@ } } - &-narrow { - @include g(narrow); - } - - &-full { - @include g(full); - } - - &-wide { - @include g(wide); - } - &-xrev { @include g(rev); } diff --git a/scss/_hagrid.scss b/scss/_hagrid.scss index a846195..d7c867b 100644 --- a/scss/_hagrid.scss +++ b/scss/_hagrid.scss @@ -7,16 +7,10 @@ //// /// Gutters -/// Set gutters usable as modifiers. +/// Set gutter used in grid calculation /// @property {Number} -$hagrid-gutters: - ( - default: 1.5rem, - full: 0, - narrow: 0.5rem, - wide: 3rem - ) !default; +$hagrid-gutter: 1.5rem !default; /// Breakpoints /// Can be used for the grid e.g. @include i(breakpoint 2/3) diff --git a/scss/hagrid/_functions.scss b/scss/hagrid/_functions.scss index ac44eba..097bb6f 100644 --- a/scss/hagrid/_functions.scss +++ b/scss/hagrid/_functions.scss @@ -18,7 +18,7 @@ @if $arg-length == 0 { // * If no params are passed, default to mobile-first @if $prop == width { - #{$prop}: 100%; + #{$prop}: get-calc(100%); } @else { @@ -34,7 +34,8 @@ // * If a general width is passed in, use it @if type-of($width) == number { - #{$prop}: calculate-width($width); + @include get-prop($prop, $width); + $width-detected: true; } // * If false is passed, assign no width @@ -64,7 +65,7 @@ @if $bp != false { @include bp(#{$key}) { @if type-of($value) == number { - #{$prop}: calculate-width($value); + @include get-prop($prop, $value); } @else if $value == auto { @@ -86,7 +87,7 @@ // * If only responsive params are passed, default to mobile-first @if $width-detected == false and $prop == width { - #{$prop}: 100%; + #{$prop}: get-calc(100%); } } } @@ -105,20 +106,28 @@ } } -/// Check if a reference exists in $hagrid-gutters -/// @param {String} $id -/// @return {Boolean} +/// Calculate a calc value based on a gutter +/// @param {Number} $width +/// @param {Number} $gutter +/// @return {Value} -@function hagrid-gutter-exists($id) { - @return map-has-key($hagrid-gutters, $id); +@function get-calc($width, $gutter: $hagrid-gutter) { + @return unquote("calc(#{calculate-width($width)} - #{$hagrid-gutter})"); } -/// Get a referenced item from $hagrid-gutters -/// @param {String} $id -/// @return {String} +/// Return calc() or width() based on prop +/// @param {String} $prop +/// @param {Number} $value +/// @return {Value} + +@mixin get-prop($prop, $value) { + @if $prop == width { + #{$prop}: get-calc($value); + } -@function hagrid-gutter-get($id) { - @return map-get($hagrid-gutters, $id); + @else { + #{$prop}: calculate-width($value); + } } /// Validate a breakpoint-key and return itself, its value or false @@ -197,3 +206,12 @@ @return str-slice($string, -1 * str-length($needle)) == $needle; } + +@function halves($num) { + @if type-of($num) != "number" { + @warn "`halves` function expecting a number; #{type-of($num)} given."; + @return false; + } + + @return ($num / 2); +} diff --git a/scss/hagrid/_modifiers.scss b/scss/hagrid/_modifiers.scss index a9f4a95..e660ad9 100644 --- a/scss/hagrid/_modifiers.scss +++ b/scss/hagrid/_modifiers.scss @@ -22,7 +22,7 @@ /// @output Modifier-styles for a given call @mixin grid-modifiers($modifiers...) { - $gutter: hagrid-gutter-get(default); + $gutter: $hagrid-gutter; $is-y: false; $is-wrap: false; $is-not-spacing: true; @@ -37,7 +37,7 @@ $is-wrap: true; } - @elseif hagrid-gutter-exists($modifier) { + @elseif $modifier == full { $is-not-spacing: false; } @@ -58,7 +58,7 @@ #{$hagrid-item-selector} { @if $is-not-spacing == true { - padding-left: $gutter; + margin-left: $gutter; } } } @@ -108,20 +108,7 @@ } } - @else { - // * Gutter Modifiers - - @if hagrid-gutter-exists($modifier) { - $gutter: hagrid-gutter-get($modifier); - margin-left: -$gutter; - - #{$hagrid-item-selector} { - padding-left: $gutter; - } - } - - @else { - @error "Modifier #{$modifier} does not exist."; - } + @elseif $modifier != full { + @error "Modifier #{$modifier} does not exist."; } }