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 [null] - [DEPRECATED] 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] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 101 /// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
 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 /// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
 105 @mixin xy-cell(
 106   $size: full,
 107   $gutter-output: null,
 108   $gutters: $grid-margin-gutters,
 109   $gutter-type: margin,
 110   $gutter-position: null,
 111   $breakpoint: null,
 112   $vertical: false,
 113   $output: (base size gutters)
 114 ) {
 115   $bp-is-fallback: false;
 116
 117   // Default for $gutter-output
 118   @if ($gutter-output != null) {
 119     @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
 120     @if ($gutter-output == false) {
 121       $output: sl-remove($output, gutters);
 122     }
 123   }
 124
 125   @if($breakpoint == null) {
 126     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
 127     @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
 128       $breakpoint: $-zf-size;
 129     }
 130     @else {
 131       $breakpoint: $-zf-zero-breakpoint;
 132       $bp-is-fallback: true;
 133     }
 134   }
 135
 136   // Get the default gutter position according to cell direction
 137   @if($gutter-position == null) {
 138     $gutter-position: if($vertical == true, top bottom, left right);
 139   }
 140
 141   // Get the gutter for the given breakpoint/value.
 142   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 143   // If the breakpoint is a fallback, use a fallback gutter as well
 144   @if ($bp-is-fallback == true and $gutter == null) {
 145     $gutter: 0;
 146   }
 147
 148   @if($gutter != null) {
 149     $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 150
 151     // Base flex properties
 152     @if (index($output, base)) {
 153       @include xy-cell-base($size);
 154     }
 155     @if (index($output, size)) {
 156       @include -xy-cell-properties($size, $-gutter-margin, $vertical);
 157     }
 158     @if (index($output, gutters) and $gutter-type and $gutter-type != none) {
 159       @include xy-gutters($gutter, $gutter-type, $gutter-position);
 160     }
 161   }
 162   @else {
 163     @warn 'xy-cell: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}", cell was not generated`';
 164   }
 165 }
 166
 167 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 168 ///
 169 /// `xy-cell-static()` is deprecated and will be removed.
 170 /// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
 171 /// See migration notes at https://git.io/foundation-6-6-0
 172 ///
 173 /// @deprecated v6.6.0
 174 ///
 175 /// @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.
 176 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 177 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 178 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 179 /// @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.
 180 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 181 @mixin xy-cell-static(
 182   $size: full,
 183   $gutter-output: true,
 184   $gutters: $grid-margin-gutters,
 185   $gutter-type: margin,
 186   $breakpoint: $-zf-zero-breakpoint,
 187   $vertical: false
 188 ) {
 189   @warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
 190
 191   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 192   $gutter-position: if($vertical == true, top bottom, left right);
 193
 194   $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
 195   $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 196
 197   @include -xy-cell-properties($size, $-gutter-margin, $vertical);
 198   @if ($-gutter-output) {
 199     @include xy-gutters($gutter, $gutter-type, $gutter-position);
 200   }
 201 }