-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group xy-grid
////
-/// Calculate the percentage size of a cell.
+/// Returns the appropriate CSS flex value for a cell base.
+///
+/// @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`).
+///
+/// @returns {List} The cell flex property value.
+@function xy-cell-base($size: full) {
+ @if ($size == 'auto') {
+ @return 1 1 0;
+ }
+ @else if ($size == 'grow') {
+ @return 1 0 auto;
+ }
+ @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
+ @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.
+/// @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.
+///
+/// @returns {Number|Map} The cell gutter size or the responsive gutters map.
+@function xy-cell-gutters(
+ $gutters: $grid-margin-gutters,
+ $breakpoint: null
+) {
+ // For `auto`, returns the responsive map `$gutters`.
+ @if ($breakpoint == 'auto') {
+ @return $gutters;
+ }
+
+ // Use the contextual breakpoint by default.
+ $breakpoint: -zf-current-breakpoint($breakpoint);
+
+ @if ($breakpoint) {
+ @return -zf-get-bp-val($gutters, $breakpoint);
+ }
+ @else {
+ @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
+ }
+}
+
+/// Returns the percentage size of a cell.
///
/// @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`.
+///
+/// @returns {Number} Size of the cell (in percent).
@function xy-cell-size(
$size: $grid-columns
) {
- // Parsing percents, decimals, n of n and number counts
- @if type-of($size) == 'number' {
- @if unit($size) == '%' {
- $size: $size;
- }
- @else if $size < 1 {
- $size: percentage($size);
- }
- @else {
- $size: percentage($size / $grid-columns);
- }
+ @return fraction-to-percentage($size, $denominator: $grid-columns);
+}
+
+/// Returns the appropriate CSS value for a cell size.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @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`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @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.
+///
+/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
+@function xy-cell-size-css(
+ $size: full,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null
+) {
+ $margin-gutter: 0;
+
+ @if ($size == 'auto' or $size == 'shrink') {
+ @return auto;
}
- // Parsing "n of n" or "n/n" expressions
- @elseif type-of($size) == 'list' {
- @if length($size) != 3 {
- @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
+ // For cells with margin gutters, the gutter is included in the width.
+ @if ($gutter-type == 'margin') {
+ $margin-gutter: xy-cell-gutters($gutters, $breakpoint);
+ @if ($margin-gutter == null) {
+ @error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
}
- @else {
- $size: percentage(nth($size, 1) / nth($size, 3));
+ }
+
+ // Calculate the cell size (number)
+ $size-raw: if($size == 'full', 100%, xy-cell-size($size));
+
+ // Calculate the cell CSS size including gutters (string)
+ // If the cell has responsive margin gutters, return a responsive map of sizes.
+ @if type-of($margin-gutter) == 'map' {
+ $responsive-css-sizes: ();
+
+ @each $bp, $mg in $margin-gutter {
+ $mgc: rem-calc($mg);
+ @if $mgc == 0 {
+ $mgc: 0rem;
+ }
+ $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{$mg}));
+ $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
}
+
+ @return $responsive-css-sizes;
}
- // Anything else is incorrect
+ // Otherwise, return a single CSS size.
@else {
- @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+ // Make sure that 0 is translated in 0rem for calc()
+ $mgc: rem-calc($margin-gutter);
+ @if $mgc == 0 {
+ $mgc: 0rem;
+ }
+ $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{$mgc}));
+ @return $css-size;
}
-
- @return $size;
}
/// Sets base flex properties for cells.
///
-/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
+/// @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`).
@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;
- }
- @elseif ($size == 'auto') {
- flex: 1 1 0px; // sass-lint:disable-line zero-unit
- }
- @elseif ($size == 'shrink') {
- flex: 0 0 auto;
- }
- @elseif ($size == 'grow') {
- flex: 1 0 auto;
+ min-height: 0;
+ min-width: 0;
}
}
///
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
@mixin xy-cell-reset($vertical: true) {
- $direction: if($vertical == true, width, height);
+ $direction: if($vertical == true, height, width);
#{$direction}: auto;
max-#{$direction}: none;
}
-// Sets our cell widths or heights depending on gutter type.
-@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
+/// Sets sizing properties for cells.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @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`...).
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @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.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-size(
+ $size: full,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null,
+ $vertical: false
+) {
+ $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
$direction: if($vertical == true, height, width);
- @if($size == 'full') {
- $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
- #{$direction}: $val;
+
+ @if (type-of($sizes) == 'map') {
+ @include -zf-breakpoint-value(auto, $sizes) {
+ #{$direction}: $-zf-bp-value;
+ }
}
- @elseif ($size == 'auto') {
- #{$direction}: auto;
- $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+ @else {
+ #{$direction}: $sizes;
}
- @elseif ($size == 'shrink') {
- #{$direction}: auto;
+}
+
+/// Sets gutters properties for cells.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @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.
+/// @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.
+/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
+@mixin xy-cell-gutters(
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $gutter-position: null,
+ $breakpoint: null,
+ $vertical: false
+) {
+ // Get the default gutter position according to cell direction
+ @if($gutter-position == null) {
+ $gutter-position: if($vertical == true, top bottom, left right);
}
- @else {
- $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
- #{$direction}: $val;
+
+ // Get the gutter width for this breakpoint
+ $gutter-width: xy-cell-gutters($gutters, $breakpoint);
+ @if ($gutter-width == null) {
+ @error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
+ }
+
+ @if ($gutter-type and $gutter-type != none) {
+ @include xy-gutters($gutter-width, $gutter-type, $gutter-position);
}
}
/// Creates a cell for your grid.
///
-/// @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.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @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`...).
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @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.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @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.
+/// @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.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @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.
@mixin xy-cell(
$size: full,
- $gutter-output: true,
+ $gutter-output: null,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
- $gutter-position: right left,
+ $gutter-position: null,
$breakpoint: null,
- $vertical: false
+ $vertical: false,
+ $output: (base size gutters)
) {
- @if($breakpoint == null) {
- // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
- @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
- $breakpoint: $-zf-size;
- }
- @else {
- $breakpoint: $-zf-zero-breakpoint;
+ // Default for $gutter-output
+ @if ($gutter-output != null) {
+ @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
+ @if ($gutter-output == false) {
+ $output: sl-remove($output, gutters);
}
}
- // Get the gutter for the passed breakpoint/value.
- $gutter: -zf-get-bp-val($gutters, $breakpoint);
-
- @if($gutter != null) {
- // Base flex properties
+ @if (index($output, base)) {
@include xy-cell-base($size);
-
- @if($gutter-type == 'margin') {
- @include -xy-cell-properties($size, $gutter, $vertical);
- }
- @else {
- @include -xy-cell-properties($size, 0, $vertical);
- }
-
- @if $gutter-output {
- @include xy-gutters($gutter, $gutter-type, $gutter-position);
- }
}
- @else {
- @warn 'xy-cell: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}", cell was not generated`'
+ @if (index($output, size)) {
+ @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
+ }
+ @if (index($output, gutters)) {
+ @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
}
}
/// Creates a single breakpoint sized grid. Used to generate our grid classes.
///
-/// @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.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// `xy-cell-static()` is deprecated and will be removed.
+/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
+/// See migration notes at https://git.io/foundation-6-6-0
+///
+/// @deprecated v6.6.0
+///
+/// @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`...).
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
/// @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.
$breakpoint: $-zf-zero-breakpoint,
$vertical: false
) {
+ @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';
$gutter: -zf-get-bp-val($gutters, $breakpoint);
$gutter-position: if($vertical == true, top bottom, left right);
- @if($gutter-type == 'margin') {
- @include -xy-cell-properties($size, $gutter, $vertical);
- }
- @else {
- @include -xy-cell-properties($size, 0, $vertical);
- }
+ $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+ $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
- // If we want to output the gutters
- @if($gutter-output) {
- // TODO: Figure out if we need to pass breakpoint in here too.
+ @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+ @if ($-gutter-output) {
@include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}
projects / thirdparty / foundation / foundation-sites.git / blobdiff