From: Nicolas Coden Date: Wed, 18 Jul 2018 21:31:51 +0000 (+0200) Subject: feat: refactor `xy-cell-base()` mixin and add corresponding function X-Git-Tag: v6.6.0~3^2~68^2~12 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ceb01d403f097e8a364d6f39ecb8f4c8954afbd0;p=thirdparty%2Ffoundation%2Ffoundation-sites.git feat: refactor `xy-cell-base()` mixin and add corresponding function Changes: - Add function `xy-cell-base()`: Returns the appropriate CSS flex value for a cell base. - Refactor mixin `xy-cell-base()` to use its corresponding function. --- diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss index adcd7e67d..768d94a35 100644 --- a/scss/xy-grid/_cell.scss +++ b/scss/xy-grid/_cell.scss @@ -6,6 +6,24 @@ /// @group xy-grid //// +/// Returns the appropriate CSS flex value for a cell base. +/// +/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`. +/// +/// @returns {List} The cell flex property value. +@function xy-cell-base($size: full) { + @if ($size == 'auto') { + @return 1 1 0px; + } + @else if ($size == 'grow') { + @return 1 0 auto; + } + @else if ($size == 'shrink' or $size == 'full') { + @return 0 0 auto; + } + @return null; +} + /// Calculate the size of a cell gutters. /// /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. @@ -79,21 +97,15 @@ /// /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`. @mixin xy-cell-base($size: full) { + $base: xy-cell-base($size); + + flex: #{$base}; + + // Set base styles for "full" only @if($size == 'full') { - // This is the base style, all others inherit from it - flex: 0 0 auto; min-height: 0px; min-width: 0px; } - @else if ($size == 'auto') { - flex: 1 1 0px; // sass-lint:disable-line zero-unit - } - @else if ($size == 'shrink') { - flex: 0 0 auto; - } - @else if ($size == 'grow') { - flex: 1 0 auto; - } } /// Resets a cells width (or height if vertical is true) as well as strips its gutters.