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   @else if 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   @else if ($size == 'auto') {
  56     flex: 1 1 0px; // sass-lint:disable-line zero-unit
  57   }
  58   @else if ($size == 'shrink') {
  59     flex: 0 0 auto;
  60   }
  61   @else if ($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   @else if ($size == 'auto') {
  83     #{$direction}: auto;
  84     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
  85   }
  86   @else if ($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
  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   $bp-is-fallback: false;
 114
 115   @if($breakpoint == null) {
 116     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
 117     @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
 118       $breakpoint: $-zf-size;
 119     }
 120     @else {
 121       $breakpoint: $-zf-zero-breakpoint;
 122       $bp-is-fallback: true;
 123     }
 124   }
 125
 126   // Get the gutter for the given breakpoint/value.
 127   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 128   // If the breakpoint is a fallback, use a fallback gutter as well
 129   @if ($bp-is-fallback == true and $gutter == null) {
 130     $gutter: 0;
 131   }
 132
 133   @if($gutter != null) {
 134     // Base flex properties
 135     @include xy-cell-base($size);
 136
 137     @if($gutter-type == 'margin') {
 138       @include -xy-cell-properties($size, $gutter, $vertical);
 139     }
 140     @else {
 141       @include -xy-cell-properties($size, 0, $vertical);
 142     }
 143
 144     @if $gutter-output {
 145       @include xy-gutters($gutter, $gutter-type, $gutter-position);
 146     }
 147   }
 148   @else {
 149     @warn 'xy-cell: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}", cell was not generated`'
 150   }
 151 }
 152
 153 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 154 ///
 155 /// @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.
 156 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
 157 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 158 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 159 /// @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.
 160 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 161 @mixin xy-cell-static(
 162   $size: full,
 163   $gutter-output: true,
 164   $gutters: $grid-margin-gutters,
 165   $gutter-type: margin,
 166   $breakpoint: $-zf-zero-breakpoint,
 167   $vertical: false
 168 ) {
 169
 170   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 171   $gutter-position: if($vertical == true, top bottom, left right);
 172
 173   @if($gutter-type == 'margin') {
 174     @include -xy-cell-properties($size, $gutter, $vertical);
 175   }
 176   @else {
 177     @include -xy-cell-properties($size, 0, $vertical);
 178   }
 179
 180   // If we want to output the gutters
 181   @if($gutter-output) {
 182     // TODO: Figure out if we need to pass breakpoint in here too.
 183     @include xy-gutters($gutter, $gutter-type, $gutter-position);
 184   }
 185 }