diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 39d9a33fbd..c9192e6702 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -6,6 +6,8 @@
/// @group button
////
+@use "sass:meta";
+
/// Font family for button elements.
/// @type Font
$button-font-family: inherit !default;
@@ -109,7 +111,7 @@ $button-responsive-expanded: false !default;
text-align: center;
cursor: pointer;
- @if (type-of($button-padding) == 'map') {
+ @if (meta.type-of($button-padding) == 'map') {
@each $size, $padding in $button-padding {
@include breakpoint($size) {
padding: $padding;
diff --git a/scss/components/_close-button.scss b/scss/components/_close-button.scss
index 49ad96844e..80be11d5f1 100644
--- a/scss/components/_close-button.scss
+++ b/scss/components/_close-button.scss
@@ -6,6 +6,8 @@
/// @group close-button
////
+@use "sass:meta";
+
/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
/// @type List
$closebutton-position: right top !default;
@@ -63,7 +65,7 @@ $closebutton-color-hover: $black !default;
/// @return {Number} The given number or the value found in the map.
@function -zf-get-size-val($value, $size) {
// Check if the value is a number
- @if type-of($value) == 'number' {
+ @if meta.type-of($value) == 'number' {
// If it is, just return the number
@return $value;
}
diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 3d180a25cd..414648c505 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -6,6 +6,8 @@
/// @group dropdown-menu
////
+@use "sass:meta";
+
/// Enables arrows for items with dropdown menus.
/// @type Boolean
$dropdownmenu-arrows: true !default;
@@ -260,7 +262,7 @@ $dropdown-menu-item-background-active: transparent !default;
}
}
- @if (type-of($dropdownmenu-border-width) == 'number') {
+ @if (meta.type-of($dropdownmenu-border-width) == 'number') {
.is-dropdown-submenu {
margin-top: (-$dropdownmenu-border-width);
}
diff --git a/scss/components/_responsive-embed.scss b/scss/components/_responsive-embed.scss
index c710fca8e0..425adbd1dc 100644
--- a/scss/components/_responsive-embed.scss
+++ b/scss/components/_responsive-embed.scss
@@ -6,6 +6,8 @@
/// @group responsive-embed
////
+@use "sass:meta";
+
/// Margin below a responsive embed container.
/// @type Number
$responsive-embed-margin-bottom: rem-calc(16) !default;
@@ -20,7 +22,7 @@ $responsive-embed-ratios: (
/// Creates a responsive embed container.
/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
@mixin responsive-embed($ratio: default) {
- @if type-of($ratio) == 'string' {
+ @if meta.type-of($ratio) == 'string' {
$ratio: map-get($responsive-embed-ratios, $ratio);
}
position: relative;
diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 2230c5443a..1257f81061 100644
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -6,6 +6,8 @@
/// @group grid
////
+@use "sass:meta";
+
/// Outputs CSS classes for the grid.
/// @access private
@mixin foundation-grid(
@@ -59,7 +61,7 @@
@include grid-row-size(expand);
}
- @if type-of($grid-column-gutter) == 'map' {
+ @if meta.type-of($grid-column-gutter) == 'map' {
// Static (unresponsive) row gutters
//
@each $breakpoint, $value in $grid-column-gutter {
diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index ba8e2812e8..e6c80fd7ed 100644
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -6,6 +6,8 @@
/// @group grid
////
+@use "sass:meta";
+
/// Sizes child elements so that `$n` number of items appear on each row.
///
/// @param {Number} $n - Number of elements to display per row.
@@ -26,7 +28,7 @@
// If a $gutter value is passed
@if($gutter) {
// Gutters
- @if type-of($gutter) == 'map' {
+ @if meta.type-of($gutter) == 'map' {
@each $breakpoint, $value in $gutter {
$padding: rem-calc($value) * 0.5;
@@ -36,7 +38,7 @@
}
}
}
- @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+ @else if meta.type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
$padding: rem-calc($gutter) * 0.5;
padding-right: $padding;
padding-left: $padding;
diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index c277bb1927..4e516a461a 100644
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -6,6 +6,8 @@
/// @group grid
////
+@use "sass:meta";
+
/// Reposition a column.
///
/// @param {Number|Keyword} $position - It can be:
@@ -31,7 +33,7 @@
}
// Push/pull
- @else if type-of($position) == 'number' {
+ @else if meta.type-of($position) == 'number' {
$offset: percentage(divide($position, $grid-column-count));
position: relative;
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index c8fa336d56..d898a9df1f 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -6,6 +6,8 @@
/// @group breakpoints
////
+@use "sass:meta";
+
/// Patch to fix issue #12080
$-zf-size: null;
@@ -78,7 +80,7 @@ $breakpoint-classes: (small medium large) !default;
}
// If a breakpoint name is given, get its value from the $breakpoints/$breakpoints-hidpi map.
- @if type-of($bp) == 'string' {
+ @if meta.type-of($bp) == 'string' {
@if map-has-key($breakpoints, $bp) {
$name: $bp;
$bp: map-get($breakpoints, $name);
@@ -250,7 +252,7 @@ $breakpoint-classes: (small medium large) !default;
$next-number: null;
@each $k, $v in $map {
- @if type-of($v) == 'number' and $v > $number and ($next-number == null or $v < $next-number) {
+ @if meta.type-of($v) == 'number' and $v > $number and ($next-number == null or $v < $next-number) {
$next-number: $v;
}
}
@@ -317,14 +319,14 @@ $breakpoint-classes: (small medium large) !default;
/// @return {Mixed} The corresponding breakpoint value.
@function -zf-get-bp-val($map, $value) {
// If the given map is a single value, return it
- @if type-of($map) == 'number' {
+ @if meta.type-of($map) == 'number' {
@return $map;
}
// Check if the breakpoint name exists globally
@if not map-has-key($breakpoints, $value) {
- @if type-of($value) == 'number' {
+ @if meta.type-of($value) == 'number' {
$value: -zf-closest-named-breakpoint($value);
} @else {
@return null;
@@ -369,7 +371,7 @@ $breakpoint-classes: (small medium large) !default;
@if ($value != null) {
@return $value;
}
- @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+ @else if (variable-exists(-zf-size) and meta.type-of($-zf-size) != 'number') and $-zf-size != null {
@return $-zf-size;
}
@else {
diff --git a/scss/util/_math.scss b/scss/util/_math.scss
index b0632b8793..77d2e139a0 100644
--- a/scss/util/_math.scss
+++ b/scss/util/_math.scss
@@ -3,6 +3,7 @@
// Licensed under MIT Open Source
@use "sass:math";
+@use "sass:meta";
////
/// @group functions
@@ -80,7 +81,7 @@
/// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.
@function zf-parse-fraction($fraction) {
- @if type-of($fraction) == 'number' {
+ @if meta.type-of($fraction) == 'number' {
// "50%"
@if unit($fraction) == '%' {
@return (strip-unit($fraction), 100);
@@ -97,11 +98,11 @@
}
}
- @else if type-of($fraction) == 'list' {
+ @else if meta.type-of($fraction) == 'list' {
// "50 of 100", "50/100"...
@if length($fraction) == 3
- and type-of(nth($fraction, 1) == 'number')
- and type-of(nth($fraction, 3) == 'number') {
+ and meta.type-of(nth($fraction, 1) == 'number')
+ and meta.type-of(nth($fraction, 3) == 'number') {
@return (nth($fraction, 1), nth($fraction, 3));
}
}
@@ -137,7 +138,7 @@
@error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
}
@if $parsed-denominator == null {
- @if type-of($denominator) == 'number' {
+ @if meta.type-of($denominator) == 'number' {
$parsed-denominator: $denominator;
}
@else {
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index cb9f37d1d1..552135547d 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -7,6 +7,7 @@
////
@use "sass:color";
+@use "sass:meta";
// Patch to fix issue #12080
$-zf-bp-value: null;
@@ -301,15 +302,15 @@ $-zf-bp-value: null;
@if $breakpoints == auto {
$-list: $breakpoint-classes;
}
- @else if type-of($breakpoints) == 'list' {
+ @else if meta.type-of($breakpoints) == 'list' {
$-list: $breakpoints;
}
- @else if type-of($breakpoints) == 'string' {
+ @else if meta.type-of($breakpoints) == 'string' {
$-list: ($breakpoints);
$-breakpoints-is-a-list: false;
}
@else {
- @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
+ @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{meta.type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
}
// Add or remove the zero breakpoint according to `$zero-breakpoint`
@@ -351,7 +352,7 @@ $-zf-bp-value: null;
$name: auto,
$map: null
) {
- @if $name == auto and type-of($map) == 'map' {
+ @if $name == auto and meta.type-of($map) == 'map' {
// "auto"
@each $k, $v in $map {
@include breakpoint($k) {
@@ -363,7 +364,7 @@ $-zf-bp-value: null;
}
@else {
// breakpoint name
- @if type-of($name) == 'string' {
+ @if meta.type-of($name) == 'string' {
$bp-value: -zf-get-bp-val($map, $name);
@if $bp-value != null {
$name: $bp-value;
diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index 75e0b13ab2..2e6332877f 100644
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -2,6 +2,7 @@
// https://get.foundation
// Licensed under MIT Open Source
+@use "sass:meta";
@import 'math';
$unit-warnings: true !default;
@@ -78,7 +79,7 @@ $global-font-size: 100% !default;
/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
@function -zf-to-rem($value, $base: null) {
// Check if the value is a number
- @if type-of($value) != 'number' {
+ @if meta.type-of($value) != 'number' {
@if $unit-warnings {
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
}
diff --git a/scss/util/_value.scss b/scss/util/_value.scss
index 419dbf33ea..12458011cd 100644
--- a/scss/util/_value.scss
+++ b/scss/util/_value.scss
@@ -6,6 +6,8 @@
/// @group functions
////
+@use "sass:meta";
+
/// Determine if a value is not falsey, in CSS terms. Falsey values are `null`, `none`, `0` with any unit, or an empty list.
///
/// @param {Mixed} $val - Value to check.
@@ -15,10 +17,10 @@
@if $val == null or $val == none {
@return false;
}
- @if type-of($val) == 'number' and strip-unit($val) == 0 {
+ @if meta.type-of($val) == 'number' and strip-unit($val) == 0 {
@return false;
}
- @if type-of($val) == 'list' and length($val) == 0 {
+ @if meta.type-of($val) == 'list' and length($val) == 0 {
@return false;
}
@return true;
@@ -56,7 +58,7 @@
@function get-border-value($val, $elem) {
// Find the width, style, or color and return it
@each $v in $val {
- $type: type-of($v);
+ $type: meta.type-of($v);
@if $elem == width and $type == 'number' {
@return $v;
}
@@ -100,7 +102,7 @@
@function map-to-list($map, $keep: 'both') {
$keep: if(index('keys' 'values', $keep), $keep, 'both');
- @if type-of($map) == 'map' {
+ @if meta.type-of($map) == 'map' {
$keys: ();
$values: ();
@@ -120,7 +122,7 @@
}
}
- @return if(type-of($map) != 'list', ($value,), $map);
+ @return if(meta.type-of($map) != 'list', ($value,), $map);
}
@@ -160,7 +162,7 @@
///
/// @returns {List} Found value.
@function map-safe-get($map, $key) {
- @if (type-of($map) == 'map' or (type-of($map) == 'list' and length($map) == 0)) {
+ @if (meta.type-of($map) == 'map' or (meta.type-of($map) == 'list' and length($map) == 0)) {
@if (map-has-key($map, $key)) {
@return map-get($map, $key);
}
diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 1d43d69ebc..c5338c52c4 100644
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -6,6 +6,8 @@
/// @group xy-grid
////
+@use "sass:meta";
+
/// 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`).
@@ -96,7 +98,7 @@
// 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' {
+ @if meta.type-of($margin-gutter) == 'map' {
$responsive-css-sizes: ();
@each $bp, $mg in $margin-gutter {
@@ -167,7 +169,7 @@
$sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
$direction: if($vertical == true, height, width);
- @if (type-of($sizes) == 'map') {
+ @if (meta.type-of($sizes) == 'map') {
@include -zf-breakpoint-value(auto, $sizes) {
#{$direction}: $-zf-bp-value;
}
diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index cfee971429..81a611ee4a 100644
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -6,6 +6,8 @@
/// @group xy-grid
////
+@use "sass:meta";
+
// Margin Grid classes
@mixin xy-base-grid-classes {
@@ -143,7 +145,7 @@
// base styles need to all be before the auto and shrink styles
@include -zf-each-breakpoint() {
- @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
+ @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
> .cell {
@include xy-cell($vertical: $vertical, $output: (size gutters));
}
@@ -156,7 +158,7 @@
// for all prior breakpoints.
// As their gutter is defined with their width/height, even breakpoint without a new margin must be
// generated to not having their width/height overrided by re-adjusted smaller breakpoints.
- @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+ @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
@each $bp in -zf-breakpoints-less-than($-zf-size) {
@include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
}
@@ -206,7 +208,7 @@
@for $i from 1 through $xy-block-grid-max {
// This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
// for prior breakpoints based on the responsive gutter.
- @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+ @if(meta.type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
@each $bp in -zf-breakpoints-less-than($-zf-size) {
@if(map-has-key($grid-margin-gutters, $bp)) {
.grid-margin-x.#{$bp}-up-#{$i} {
diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
index d596f8b513..cdaf5e117c 100644
--- a/scss/xy-grid/_frame.scss
+++ b/scss/xy-grid/_frame.scss
@@ -1,5 +1,7 @@
// sass-lint:disable no-vendor-prefixes
+@use "sass:meta";
+
/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
@@ -22,7 +24,7 @@
align-items: stretch;
}
- @if $breakpoint == null and type-of($gutters) == 'map' {
+ @if $breakpoint == null and meta.type-of($gutters) == 'map' {
@include -zf-each-breakpoint() {
@include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
}
diff --git a/scss/xy-grid/_gutters.scss b/scss/xy-grid/_gutters.scss
index 839e8746f6..0f99ef1c04 100644
--- a/scss/xy-grid/_gutters.scss
+++ b/scss/xy-grid/_gutters.scss
@@ -6,6 +6,8 @@
/// @group xy-grid
////
+@use "sass:meta";
+
/// Create gutters for a cell/container.
///
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
@@ -24,7 +26,7 @@
$gutter-type: if($negative, 'margin', $gutter-type);
// Output our margin gutters.
- @if (type-of($gutters) == 'map') {
+ @if (meta.type-of($gutters) == 'map') {
@include -zf-breakpoint-value(auto, $gutters) {
$gutter: rem-calc($-zf-bp-value) * 0.5;
@@ -34,7 +36,7 @@
}
}
}
- @else if (type-of($gutters) == 'number') {
+ @else if (meta.type-of($gutters) == 'number') {
$gutter: rem-calc($gutters) * 0.5;
// Loop through each gutter position