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 /// Returns the appropriate CSS flex value for a cell base.
  10 ///
  11 /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
  12 ///
  13 /// @returns {List} The cell flex property value.
  14 @function xy-cell-base($size: full) {
  15   @if ($size == 'auto') {
  16     @return 1 1 0px;
  17   }
  18   @else if ($size == 'grow') {
  19     @return 1 0 auto;
  20   }
  21   @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
  22     @return 0 0 auto;
  23   }
  24   @return null;
  25 }
  26
  27 /// Calculate the size of a cell gutters.
  28 ///
  29 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
  30 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
  31 ///
  32 /// @returns {Number|Map} The cell gutter size or the responsive gutters map.
  33 @function xy-cell-gutters(
  34   $gutters: $grid-margin-gutters,
  35   $breakpoint: null
  36 ) {
  37   // For `auto`, returns the responsive map `$gutters`.
  38   @if ($breakpoint == 'auto') {
  39     @return $gutters;
  40   }
  41
  42   // Use the contextual breakpoint by default.
  43   $breakpoint: -zf-current-breakpoint($breakpoint);
  44
  45   @if ($breakpoint) {
  46     @return -zf-get-bp-val($gutters, $breakpoint);
  47   }
  48   @else {
  49     @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
  50   }
  51 }
  52
  53 /// Returns the percentage size of a cell.
  54 ///
  55 /// @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`.
  56 ///
  57 /// @returns {Number} Size of the cell (in percent).
  58 @function xy-cell-size(
  59   $size: $grid-columns
  60 ) {
  61   @return fraction-to-percentage($size, $denominator: $grid-columns);
  62 }
  63
  64 /// Returns the appropriate CSS value for a cell size.
  65 ///
  66 /// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
  67 ///
  68 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.
  69 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
  70 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
  71 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
  72 ///
  73 /// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
  74 @function xy-cell-size-css(
  75   $size: full,
  76   $gutters: $grid-margin-gutters,
  77   $gutter-type: margin,
  78   $breakpoint: null
  79 ) {
  80   $margin-gutter: 0;
  81
  82   @if ($size == 'auto' or $size == 'shrink') {
  83     @return auto;
  84   }
  85
  86   // For cells with margin gutters, the gutter is included in the width.
  87   @if ($gutter-type == 'margin') {
  88     $margin-gutter: xy-cell-gutters($gutters, $breakpoint);
  89     @if ($margin-gutter == null) {
  90       @error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
  91     }
  92   }
  93
  94   // Calculate the cell size (number)
  95   $size-raw: if($size == 'full', 100%, xy-cell-size($size));
  96
  97   // Calculate the cell CSS size including gutters (string)
  98   // If the cell has responsive margin gutters, return a responsive map of sizes.
  99   @if type-of($margin-gutter) == 'map' {
 100     $responsive-css-sizes: ();
 101
 102     @each $bp, $mg in $margin-gutter {
 103       $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
 104       $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
 105     }
 106
 107     @return $responsive-css-sizes;
 108   }
 109   // Otherwise, return a single CSS size.
 110   @else {
 111     $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
 112     @return $css-size;
 113   }
 114 }
 115
 116 /// Sets base flex properties for cells.
 117 ///
 118 /// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
 119 @mixin xy-cell-base($size: full) {
 120   $base: xy-cell-base($size);
 121
 122   flex: #{$base};
 123
 124   // Set base styles for "full" only
 125   @if($size == 'full') {
 126     min-height: 0px;
 127     min-width: 0px;
 128   }
 129 }
 130
 131 /// Resets a cells width (or height if vertical is true) as well as strips its gutters.
 132 ///
 133 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 134 @mixin xy-cell-reset($vertical: true) {
 135   $direction: if($vertical == true, height, width);
 136   #{$direction}: auto;
 137   max-#{$direction}: none;
 138 }
 139
 140 /// Sets sizing properties for cells.
 141 ///
 142 /// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
 143 ///
 144 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
 145 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 146 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 147 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 148 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 149 @mixin xy-cell-size(
 150   $size: full,
 151   $gutters: $grid-margin-gutters,
 152   $gutter-type: margin,
 153   $breakpoint: null,
 154   $vertical: false
 155 ) {
 156   $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
 157   $direction: if($vertical == true, height, width);
 158
 159   @if (type-of($sizes) == 'map') {
 160     @include -zf-breakpoint-value(auto, $sizes) {
 161       #{$direction}: $-zf-bp-value;
 162     }
 163   }
 164   @else {
 165     #{$direction}: $sizes;
 166   }
 167 }
 168
 169 /// Sets gutters properties for cells.
 170 ///
 171 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 172 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 173 /// @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.
 174 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 175 /// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
 176 @mixin xy-cell-gutters(
 177   $gutters: $grid-margin-gutters,
 178   $gutter-type: margin,
 179   $gutter-position: null,
 180   $breakpoint: null,
 181   $vertical: false
 182 ) {
 183   // Get the default gutter position according to cell direction
 184   @if($gutter-position == null) {
 185     $gutter-position: if($vertical == true, top bottom, left right);
 186   }
 187
 188   // Get the gutter width for this breakpoint
 189   $gutter-width: xy-cell-gutters($gutters, $breakpoint);
 190   @if ($gutter-width == null) {
 191     @error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
 192   }
 193
 194   @if ($gutter-type and $gutter-type != none) {
 195     @include xy-gutters($gutter-width, $gutter-type, $gutter-position);
 196   }
 197 }
 198
 199 /// Creates a cell for your grid.
 200 ///
 201 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
 202 /// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
 203 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 204 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 205 /// @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.
 206 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 207 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 208 /// @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 properly otherwise.
 209 @mixin xy-cell(
 210   $size: full,
 211   $gutter-output: null,
 212   $gutters: $grid-margin-gutters,
 213   $gutter-type: margin,
 214   $gutter-position: null,
 215   $breakpoint: null,
 216   $vertical: false,
 217   $output: (base size gutters)
 218 ) {
 219   // Default for $gutter-output
 220   @if ($gutter-output != null) {
 221     @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
 222     @if ($gutter-output == false) {
 223       $output: sl-remove($output, gutters);
 224     }
 225   }
 226
 227   @if (index($output, base)) {
 228     @include xy-cell-base($size);
 229   }
 230   @if (index($output, size)) {
 231     @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
 232   }
 233   @if (index($output, gutters)) {
 234     @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
 235   }
 236 }
 237
 238 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 239 ///
 240 /// `xy-cell-static()` is deprecated and will be removed.
 241 /// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
 242 /// See migration notes at https://git.io/foundation-6-6-0
 243 ///
 244 /// @deprecated v6.6.0
 245 ///
 246 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
 247 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 248 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 249 /// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
 250 /// @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.
 251 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
 252 @mixin xy-cell-static(
 253   $size: full,
 254   $gutter-output: true,
 255   $gutters: $grid-margin-gutters,
 256   $gutter-type: margin,
 257   $breakpoint: $-zf-zero-breakpoint,
 258   $vertical: false
 259 ) {
 260   @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';
 261
 262   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 263   $gutter-position: if($vertical == true, top bottom, left right);
 264
 265   $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
 266   $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 267
 268   @include -xy-cell-properties($size, $-gutter-margin, $vertical);
 269   @if ($-gutter-output) {
 270     @include xy-gutters($gutter, $gutter-type, $gutter-position);
 271   }
 272 }