assets/main/sass/libs/_breakpoints.scss

   1 // breakpoints.scss v1.0 | @ajlkn | MIT licensed */
   2
   3 // Vars.
   4
   5         /// Breakpoints.
   6         /// @var {list}
   7         $breakpoints: () !global;
   8
   9 // Mixins.
  10
  11         /// Sets breakpoints.
  12         /// @param {map} $x Breakpoints.
  13         @mixin breakpoints($x: ()) {
  14                 $breakpoints: $x !global;
  15         }
  16
  17         /// Wraps @content in a @media block targeting a specific orientation.
  18         /// @param {string} $orientation Orientation.
  19         @mixin orientation($orientation) {
  20                 @media screen and (orientation: #{$orientation}) {
  21                         @content;
  22                 }
  23         }
  24
  25         /// Wraps @content in a @media block using a given query.
  26         /// @param {string} $query Query.
  27         @mixin breakpoint($query: null) {
  28
  29                 $breakpoint: null;
  30                 $op: null;
  31                 $media: null;
  32
  33                 // Determine operator, breakpoint.
  34
  35                         // Greater than or equal.
  36                                 @if (str-slice($query, 0, 2) == '>=') {
  37
  38                                         $op: 'gte';
  39                                         $breakpoint: str-slice($query, 3);
  40
  41                                 }
  42
  43                         // Less than or equal.
  44                                 @elseif (str-slice($query, 0, 2) == '<=') {
  45
  46                                         $op: 'lte';
  47                                         $breakpoint: str-slice($query, 3);
  48
  49                                 }
  50
  51                         // Greater than.
  52                                 @elseif (str-slice($query, 0, 1) == '>') {
  53
  54                                         $op: 'gt';
  55                                         $breakpoint: str-slice($query, 2);
  56
  57                                 }
  58
  59                         // Less than.
  60                                 @elseif (str-slice($query, 0, 1) == '<') {
  61
  62                                         $op: 'lt';
  63                                         $breakpoint: str-slice($query, 2);
  64
  65                                 }
  66
  67                         // Not.
  68                                 @elseif (str-slice($query, 0, 1) == '!') {
  69
  70                                         $op: 'not';
  71                                         $breakpoint: str-slice($query, 2);
  72
  73                                 }
  74
  75                         // Equal.
  76                                 @else {
  77
  78                                         $op: 'eq';
  79                                         $breakpoint: $query;
  80
  81                                 }
  82
  83                 // Build media.
  84                         @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
  85
  86                                 $a: map-get($breakpoints, $breakpoint);
  87
  88                                 // Range.
  89                                         @if (type-of($a) == 'list') {
  90
  91                                                 $x: nth($a, 1);
  92                                                 $y: nth($a, 2);
  93
  94                                                 // Max only.
  95                                                         @if ($x == null) {
  96
  97                                                                 // Greater than or equal (>= 0 / anything)
  98                                                                         @if ($op == 'gte') {
  99                                                                                 $media: 'screen';
 100                                                                         }
 101
 102                                                                 // Less than or equal (<= y)
 103                                                                         @elseif ($op == 'lte') {
 104                                                                                 $media: 'screen and (max-width: ' + $y + ')';
 105                                                                         }
 106
 107                                                                 // Greater than (> y)
 108                                                                         @elseif ($op == 'gt') {
 109                                                                                 $media: 'screen and (min-width: ' + ($y + 1) + ')';
 110                                                                         }
 111
 112                                                                 // Less than (< 0 / invalid)
 113                                                                         @elseif ($op == 'lt') {
 114                                                                                 $media: 'screen and (max-width: -1px)';
 115                                                                         }
 116
 117                                                                 // Not (> y)
 118                                                                         @elseif ($op == 'not') {
 119                                                                                 $media: 'screen and (min-width: ' + ($y + 1) + ')';
 120                                                                         }
 121
 122                                                                 // Equal (<= y)
 123                                                                         @else {
 124                                                                                 $media: 'screen and (max-width: ' + $y + ')';
 125                                                                         }
 126
 127                                                         }
 128
 129                                                 // Min only.
 130                                                         @else if ($y == null) {
 131
 132                                                                 // Greater than or equal (>= x)
 133                                                                         @if ($op == 'gte') {
 134                                                                                 $media: 'screen and (min-width: ' + $x + ')';
 135                                                                         }
 136
 137                                                                 // Less than or equal (<= inf / anything)
 138                                                                         @elseif ($op == 'lte') {
 139                                                                                 $media: 'screen';
 140                                                                         }
 141
 142                                                                 // Greater than (> inf / invalid)
 143                                                                         @elseif ($op == 'gt') {
 144                                                                                 $media: 'screen and (max-width: -1px)';
 145                                                                         }
 146
 147                                                                 // Less than (< x)
 148                                                                         @elseif ($op == 'lt') {
 149                                                                                 $media: 'screen and (max-width: ' + ($x - 1) + ')';
 150                                                                         }
 151
 152                                                                 // Not (< x)
 153                                                                         @elseif ($op == 'not') {
 154                                                                                 $media: 'screen and (max-width: ' + ($x - 1) + ')';
 155                                                                         }
 156
 157                                                                 // Equal (>= x)
 158                                                                         @else {
 159                                                                                 $media: 'screen and (min-width: ' + $x + ')';
 160                                                                         }
 161
 162                                                         }
 163
 164                                                 // Min and max.
 165                                                         @else {
 166
 167                                                                 // Greater than or equal (>= x)
 168                                                                         @if ($op == 'gte') {
 169                                                                                 $media: 'screen and (min-width: ' + $x + ')';
 170                                                                         }
 171
 172                                                                 // Less than or equal (<= y)
 173                                                                         @elseif ($op == 'lte') {
 174                                                                                 $media: 'screen and (max-width: ' + $y + ')';
 175                                                                         }
 176
 177                                                                 // Greater than (> y)
 178                                                                         @elseif ($op == 'gt') {
 179                                                                                 $media: 'screen and (min-width: ' + ($y + 1) + ')';
 180                                                                         }
 181
 182                                                                 // Less than (< x)
 183                                                                         @elseif ($op == 'lt') {
 184                                                                                 $media: 'screen and (max-width: ' + ($x - 1) + ')';
 185                                                                         }
 186
 187                                                                 // Not (< x and > y)
 188                                                                         @elseif ($op == 'not') {
 189                                                                                 $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
 190                                                                         }
 191
 192                                                                 // Equal (>= x and <= y)
 193                                                                         @else {
 194                                                                                 $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
 195                                                                         }
 196
 197                                                         }
 198
 199                                         }
 200
 201                                 // String.
 202                                         @else {
 203
 204                                                 // Missing a media type? Prefix with "screen".
 205                                                         @if (str-slice($a, 0, 1) == '(') {
 206                                                                 $media: 'screen and ' + $a;
 207                                                         }
 208
 209                                                 // Otherwise, use as-is.
 210                                                         @else {
 211                                                                 $media: $a;
 212                                                         }
 213
 214                                         }
 215
 216                         }
 217
 218                 // Output.
 219                 @media #{$media} {
 220                                 @content;
 221                         }
 222
 223         }