}
}
- // Convert any pixel, rem, or unitless value to em
- $bp: -zf-bp-to-em($bp);
- // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
- // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
- // See https://github.com/zurb/foundation-sites/issues/11313
- @if $bp-max {
- $bp-max: -zf-bp-to-em($bp-max) - .00125;
+ @if not $name and $dir == 'only' {
+ @warn 'breakpoint(): Only named media queries can have an `only` range.';
+ @return null;
}
- // Conditions to skip media query creation
- // - It's a named breakpoint that resolved to "0 down" or "0 up"
- // - It's a numeric breakpoint that resolved to "0 " + anything
- @if $bp > 0em or $dir == 'only' or $dir == 'down' {
- // `only` ranges use the format `(min-width: n) and (max-width: n)`
- @if $dir == 'only' {
- // Only named media queries can have an "only" range
- @if $named == true {
- // Only use "min-width" if the floor is greater than 0
- @if $bp > 0em {
- $str: $str + '(min-width: #{$bp})';
-
- // Only add "and" to the media query if there's a ceiling
- @if $bp-max != null {
- $str: $str + ' and ';
- }
- }
-
- // Only use "max-width" if there's a ceiling
- @if $bp-max != null {
- $str: $str + '(max-width: #{$bp-max})';
- }
- }
- @else {
- @warn 'breakpoint(): Only named media queries can have an `only` range.';
- }
+ // Only 'only' and 'up' have a min limit.
+ @if $dir == 'only' or $dir == 'up' {
+ $bp-min: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
+ }
+ // Only 'only' and 'down' have a max limit.
+ @if $dir == 'only' or $dir == 'down' {
+ // If the breakpoint is a value, use it as max limit.
+ @if not $name {
+ $bp-max: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
}
-
- // `down` ranges use the format `(max-width: n)`
- @else if $dir == 'down' {
- $max: if($named, $bp-max, $bp);
-
- // Skip media query creation if input value is exactly "0 down",
- // unless the function was called as "small down", in which case it's just "small only"
- @if $named or $bp > 0em {
- @if $max != null {
- $str: $str + '(max-width: #{$max})';
- }
- }
- }
-
- // `up` ranges use the format `(min-width: n)`
- @else if $bp > 0em {
- $str: $str + '(min-width: #{$bp})';
+ // If the breakpoint is named, the max limit is the following breakpoint - 1px.
+ @else if $bp-next {
- $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - (1/16));
++ // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
++ // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
++ // See https://github.com/zurb/foundation-sites/issues/11313
++ $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
}
}
}
}
+/// Return the best breakpoint to use according to the calling context. It returns in order:
+/// 1. the given `$value` argument if it is not null.
+/// 2. the global breakpoint context `$-zf-size` if it is not null (like if called inside then `breakpoint()` mixin)
+/// 3. the given `$default` argument.
+/// @access private
+///
+/// @param {Keyword} $value [null] - Breakpoint to use in priority if non-null.
+/// @param {Keyword} $default [null] - Breakpoint to use by default if no other value can be used.
+///
+/// @return {Keyword} The resolved breakpoint.
+@function -zf-current-breakpoint($value: null, $default: null) {
+ @if ($value != null) {
+ @return $value;
+ }
+ @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+ @return $-zf-size;
+ }
+ @else {
+ @return $default;
+ }
+}
+
+ /// Return media query string from the given min and/or max limits.
+ /// If a limit is equal to `null` or `0`, it is ignored.
+ /// @access private
+ ///
+ /// @param {Number} $min [0] - Min media query limit.
+ /// @param {Number} $max [0] - Max media query limit.
+ /// @param {String} $min-name ['min-width'] - Name of the min media query limit.
+ /// @param {String} $delimiter ['max-width'] - Name of the max media query limit.
+ ///
+ /// @returns {String} Media Query string.
+ @function -zf-bp-join(
+ $min: 0,
+ $max: 0,
+ $min-name: 'min-width',
+ $max-name: 'max-width'
+ ) {
+ @return zf-str-join(
+ if($min and $min > 0, '(#{$min-name}: #{$min})', null),
+ if($max and $max > 0, '(#{$max-name}: #{$max})', null),
+ ' and ');
+ }
+
$small-up: '';
$small-only: '';
'Converts a named breakpoint to an em value');
}
- @include test('Breakpoint (Rem/Px to Em) [function]') {
- $expect: '(min-width: 1em)';
-
- @include assert-equal(breakpoint(16px), $expect,
- 'Converts a pixel breakpoint to em');
- @include assert-equal(breakpoint(1rem), $expect,
- 'Converts a rem breakpoint to em');
- }
-
- @include test('Breakpoint (Only Range) [function]') {
+ @include test('Breakpoint (Named Only Range) [function]') {
$test: breakpoint(medium only);
- $expect: '(min-width: 40em) and (max-width: 63.9375em)';
+ $expect: '(min-width: 40em) and (max-width: 63.99875em)';
$test-lowest: breakpoint(small only);
- $expect-lowest: '(max-width: 39.9375em)';
+ $expect-lowest: '(max-width: 39.99875em)';
$test-highest: breakpoint(xxlarge only);
$expect-highest: '(min-width: 90em)';