]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Merge branch 'feat/hidpi-breakpoints-9556' of https://github.com/ncoden/foundation...
authorkball <kball@zendev.com>
Wed, 24 Jul 2019 16:52:05 +0000 (09:52 -0700)
committerkball <kball@zendev.com>
Wed, 24 Jul 2019 16:52:05 +0000 (09:52 -0700)
1  2 
scss/util/_breakpoint.scss
scss/util/_value.scss
test/sass/_breakpoint.scss

index f1ff296b128e12670704e7c59979b64291c1192e,9b301753bdb173ff508e07a160eeb684beff4d56..ad7a470684fd673ba711da1fcfca793b06c10e6e
@@@ -74,59 -93,24 +93,27 @@@ $breakpoint-classes: (small medium larg
      }
    }
  
-   // 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: '';
  
Simple merge
index 18e62f00499a8a90446832caa22cc45c17d23b92,55ef712c70e6dbd5dd0c83a720cf1d7c4f71223c..a2e8dd2a3a9cbf983353c8d966f1d84a1063524d
        '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)';