afb-client/bower_components/foundation-apps/scss/helpers/_breakpoints.scss

   1 // Foundation for Apps
   2 //
   3 // BREAKPOINTS
   4 // -----------
   5 // Foundation for Apps has three core breakpoints: small (> 0), medium (>= 640), and large (>= 1024).
   6 // There are two additional breakpoints, xlarge, and xxlarge, which (by default) do not output as sizing classes.
   7 // Access named breakpoints using the mixin breakpoint($size), where $size is a breakpoint value.
   8 // You can also pass an em, rem, or pixel value into this mixin to generate an em-based media query.
   9 // Create new named breakpoints using the $breakpoints map. Change which named breakpoints get their own classes by modifying the $breakpoint-classes map.
  10 // NOTE: If you change the $breakpoints map, know that all values must be ordered by width, smallest width first. So 0 is always your first value.
  11
  12 // 1. Variables
  13 // - - - - - - - - - - - - - - -
  14
  15 /// @Foundation.settings
  16 // Breakpoints
  17 // These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
  18 $breakpoints: (
  19   small: rem-calc(0),
  20   medium: rem-calc(640),
  21   large: rem-calc(1200),
  22   xlarge: rem-calc(1440),
  23   xxlarge: rem-calc(1920),
  24 ) !default;
  25
  26 // All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
  27 $breakpoint-classes: (small medium large) !default;
  28 ///
  29
  30 // 2. Mixins
  31 // - - - - - - - - - - - - - - -
  32
  33 /// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
  34 ///  - If a string is passed, the mixin will look for it in the $breakpoints map, and use a media query there.
  35 ///  - If a pixel value is passed, it will be converted to an em value using $rem-base.
  36 ///  - If a rem value is passed, the unit will be changed to em.
  37 ///  - If an em value is passed, the value will be used as-is.
  38 ///
  39 /// @param {mixed} $val - Breakpoint name or px/em/rem value to process.
  40 ///
  41 /// @output If the breakpoint is "0px and larger", outputs the content. Otherwise, outputs the content wrapped in a media query.
  42 @mixin breakpoint($val: small) {
  43   // Size or keyword
  44   $bp: nth($val, 1);
  45   // Value for max-width media queries
  46   $bpMax: 0;
  47   // Direction of media query (up, down, or only)
  48   $dir: if(length($val) > 1, nth($val, 2), up);
  49   // Eventual output
  50   $str: 'only screen';
  51   // Is it a named media query?
  52   $named: false;
  53
  54   // Orientation media queries have a unique syntax
  55   @if $bp == 'landscape' or $bp == 'portrait' {
  56     $str: $str + ' and (orientation: #{$bp})';
  57   }
  58
  59   @else {
  60     // Try to pull a named breakpoint out of the $breakpoints map
  61     @if type-of($bp) == 'string' {
  62       @if map-has-key($breakpoints, $bp) {
  63         @if $dir == 'only' {
  64           $next-bp: map-next($breakpoints, $bp);
  65           @if $next-bp == null {
  66             $bpMax: null;
  67           }
  68           @else {
  69             $bpMax: $next-bp - (1/16);
  70           }
  71         }
  72         $bp: map-get($breakpoints, $bp);
  73         $named: true;
  74       }
  75       @else {
  76         $bp: 0;
  77       }
  78     }
  79
  80     // Pixel and unitless values are converted to rems
  81     @if unit($bp) == 'px' or unit($bp) == '' {
  82       $bp: rem-calc($bp);
  83     }
  84     // Finally, the rem value is turned into an em value
  85     $bp: strip-unit($bp) * 1em;
  86
  87     // Skip media query creation if the input is "0 up" or "0 down"
  88     @if $bp > 0 or $dir == 'only' {
  89       // And lo, a media query was born
  90       @if $dir == 'only' {
  91         @if $named == true {
  92           $str: $str + ' and (min-width: #{$bp})';
  93           @if $bpMax != null {
  94             $str: $str + ' and (max-width: #{$bpMax})';
  95           }
  96         }
  97         @else {
  98           @debug 'ERROR: Only named media queries can have an "only" range.';
  99         }
 100       }
 101       @else if $dir == 'down' {
 102         $max: $bp - (1/16);
 103         $str: $str + ' and (max-width: #{$max})';
 104       }
 105       @else {
 106         $str: $str + ' and (min-width: #{$bp})';
 107       }
 108     }
 109   }
 110
 111   // Output
 112   @if $bp == 0em and $dir != 'only' {
 113     @content;
 114   }
 115   @else {
 116     @media #{$str} {
 117       @content;
 118     }
 119   }
 120 }
 121
 122 /// Prefixes selector $class with breakpoint keywords, allowing you to create a batch of breakpoint classes with one chunk of code. If you want to skip a breakpoint (like small, because mobile first and all that), add values to the $omit parameter.
 123 ///
 124 /// @param {string} $class - Class to prefix with the breakpoint name and a hyphen.
 125 /// @param {list} $omit - Named breakpoints to skip. No class will be added with breakpoints in this list.
 126 @mixin each-breakpoint($class, $omit: ()) {
 127   // Iterate through breakpoint classes
 128   @each $size in $breakpoint-classes {
 129     // Only do something if the breakpoint is not in $omit
 130     @if index($omit, $size) == null {
 131       $val: map-get($breakpoints, $size);
 132       // Prefix $class with $size and a hyphen
 133       .#{$size + '-' + $class} {
 134         @include breakpoint($size) {
 135           @content;
 136         }
 137       }
 138     }
 139   }
 140 }
 141
 142 // 3. CSS Output
 143 // - - - - - - - - - - - - - - -
 144
 145 // Meta styles are included in all builds, as they are a dependancy of the Javascript.
 146 // Used to provide media query values for javascript components.
 147 // Forward slash placed around everything to convince PhantomJS to read the value.
 148
 149 meta.foundation-version {
 150   font-family: "#{$foundation-version}";
 151 }
 152 meta.foundation-mq {
 153   font-family: "#{map-serialize($breakpoints)}";
 154 }