scss/xy-grid/_cell.scss

   1 // Foundation for Sites by ZURB
   2 // foundation.zurb.com
   3 // Licensed under MIT Open Source
   4
   5 ////
   6 /// @group xy-grid
   7 ////
   8
   9 /// Calculate the percentage size of a cell.
  10 ///
  11 /// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.
  12 @function xy-cell-size(
  13   $size: $grid-columns
  14 ) {
  15   // Parsing percents, decimals, n of n and number counts
  16   @if type-of($size) == 'number' {
  17     @if unit($size) == '%' {
  18       $size: $size;
  19     }
  20     @else if $size < 1 {
  21       $size: percentage($size);
  22     }
  23     @else {
  24       $size: percentage($size / $grid-columns);
  25     }
  26   }
  27
  28   // Parsing "n of n" or "n/n" expressions
  29   @elseif type-of($size) == 'list' {
  30     @if length($size) != 3 {
  31       @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
  32     }
  33     @else {
  34       $size: percentage(nth($size, 1) / nth($size, 3));
  35     }
  36   }
  37   // Anything else is incorrect
  38   @else {
  39     @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
  40   }
  41
  42   @return $size;
  43 }
  44
  45 /// Sets base flex properties for cells.
  46 ///
  47 /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
  48 @mixin xy-cell-base($size: full) {
  49   @if($size == 'full') {
  50     // This is the base style, all others inherit from it
  51     flex: 0 0 auto;
  52     min-height: 0px;
  53     min-width: 0px;
  54   }
  55   @elseif ($size == 'auto') {
  56     flex: 1 1 0px; // sass-lint:disable-line zero-unit
  57   }
  58   @elseif ($size == 'shrink') {
  59     flex: 0 0 auto;
  60   }
  61   @elseif ($size == 'grow') {
  62     flex: 1 0 auto;
  63   }
  64 }
  65
  66 /// Resets a cells width (or height if vertical is true) as well as strips its gutters.
  67 ///
  68 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
  69 @mixin xy-cell-reset($vertical: true) {
  70   $direction: if($vertical == true, width, height);
  71   #{$direction}: auto;
  72   max-#{$direction}: none;
  73 }
  74
  75 // Sets our cell widths or heights depending on gutter type.
  76 @mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
  77   $direction: if($vertical == true, height, width);
  78   @if($size == 'full') {
  79     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
  80     #{$direction}: $val;
  81   }
  82   @elseif ($size == 'auto') {
  83     #{$direction}: auto;
  84     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
  85   }
  86   @elseif ($size == 'shrink') {
  87     #{$direction}: auto;
  88   }
  89   @else {
  90     $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
  91     #{$direction}: $val;
  92   }
  93 }
  94
  95 /// Creates a cell for your grid.
  96 ///
  97 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
  98 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
  99 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 100 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 101 /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
 102 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 103 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 104 @mixin xy-cell(
 105   $size: full,
 106   $gutter-output: true,
 107   $gutters: $grid-margin-gutters,
 108   $gutter-type: margin,
 109   $gutter-position: right left,
 110   $breakpoint: null,
 111   $vertical: false
 112 ) {
 113   @if($breakpoint == null) {
 114     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
 115     @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
 116       $breakpoint: $-zf-size;
 117     }
 118     @else {
 119       $breakpoint: $-zf-zero-breakpoint;
 120     }
 121   }
 122
 123   // Get the gutter for the passed breakpoint/value.
 124   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 125
 126   @if($gutter != null) {
 127     // Base flex properties
 128     @include xy-cell-base($size);
 129
 130     $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
 131     $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 132
 133     @include -xy-cell-properties($size, $-gutter-margin, $vertical);
 134     @if ($-gutter-output) {
 135       @include xy-gutters($gutter, $gutter-type, $gutter-position);
 136     }
 137   }
 138   @else {
 139     @warn 'xy-cell: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}", cell was not generated`'
 140   }
 141 }
 142
 143 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 144 ///
 145 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
 146 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 147 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 148 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 149 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 150 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 151 @mixin xy-cell-static(
 152   $size: full,
 153   $gutter-output: true,
 154   $gutters: $grid-margin-gutters,
 155   $gutter-type: margin,
 156   $breakpoint: $-zf-zero-breakpoint,
 157   $vertical: false
 158 ) {
 159
 160   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 161   $gutter-position: if($vertical == true, top bottom, left right);
 162
 163   $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
 164   $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 165
 166   @include -xy-cell-properties($size, $-gutter-margin, $vertical);
 167   @if ($-gutter-output) {
 168     @include xy-gutters($gutter, $gutter-type, $gutter-position);
 169   }
 170 }