| 1 | // skel.scss v3.0.1 | (c) skel.io | MIT licensed */ |
|---|
| 2 | |
|---|
| 3 | // Vars. |
|---|
| 4 | |
|---|
| 5 | /// Breakpoints. |
|---|
| 6 | /// @var {list} |
|---|
| 7 | $breakpoints: () !global; |
|---|
| 8 | |
|---|
| 9 | /// Vendor prefixes. |
|---|
| 10 | /// @var {list} |
|---|
| 11 | $vendor-prefixes: ( |
|---|
| 12 | '-moz-', |
|---|
| 13 | '-webkit-', |
|---|
| 14 | '-ms-', |
|---|
| 15 | '' |
|---|
| 16 | ); |
|---|
| 17 | |
|---|
| 18 | /// Properties that should be vendorized. |
|---|
| 19 | /// @var {list} |
|---|
| 20 | $vendor-properties: ( |
|---|
| 21 | 'align-content', |
|---|
| 22 | 'align-items', |
|---|
| 23 | 'align-self', |
|---|
| 24 | 'animation', |
|---|
| 25 | 'animation-delay', |
|---|
| 26 | 'animation-direction', |
|---|
| 27 | 'animation-duration', |
|---|
| 28 | 'animation-fill-mode', |
|---|
| 29 | 'animation-iteration-count', |
|---|
| 30 | 'animation-name', |
|---|
| 31 | 'animation-play-state', |
|---|
| 32 | 'animation-timing-function', |
|---|
| 33 | 'appearance', |
|---|
| 34 | 'backface-visibility', |
|---|
| 35 | 'box-sizing', |
|---|
| 36 | 'filter', |
|---|
| 37 | 'flex', |
|---|
| 38 | 'flex-basis', |
|---|
| 39 | 'flex-direction', |
|---|
| 40 | 'flex-flow', |
|---|
| 41 | 'flex-grow', |
|---|
| 42 | 'flex-shrink', |
|---|
| 43 | 'flex-wrap', |
|---|
| 44 | 'justify-content', |
|---|
| 45 | 'order', |
|---|
| 46 | 'perspective', |
|---|
| 47 | 'pointer-events', |
|---|
| 48 | 'transform', |
|---|
| 49 | 'transform-origin', |
|---|
| 50 | 'transform-style', |
|---|
| 51 | 'transition', |
|---|
| 52 | 'transition-delay', |
|---|
| 53 | 'transition-duration', |
|---|
| 54 | 'transition-property', |
|---|
| 55 | 'transition-timing-function', |
|---|
| 56 | 'user-select' |
|---|
| 57 | ); |
|---|
| 58 | |
|---|
| 59 | /// Values that should be vendorized. |
|---|
| 60 | /// @var {list} |
|---|
| 61 | $vendor-values: ( |
|---|
| 62 | 'filter', |
|---|
| 63 | 'flex', |
|---|
| 64 | 'linear-gradient', |
|---|
| 65 | 'radial-gradient', |
|---|
| 66 | 'transform' |
|---|
| 67 | ); |
|---|
| 68 | |
|---|
| 69 | // Functions. |
|---|
| 70 | |
|---|
| 71 | /// Removes a specific item from a list. |
|---|
| 72 | /// @author Hugo Giraudel |
|---|
| 73 | /// @param {list} $list List. |
|---|
| 74 | /// @param {integer} $index Index. |
|---|
| 75 | /// @return {list} Updated list. |
|---|
| 76 | @function remove-nth($list, $index) { |
|---|
| 77 | |
|---|
| 78 | $result: null; |
|---|
| 79 | |
|---|
| 80 | @if type-of($index) != number { |
|---|
| 81 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; |
|---|
| 82 | } |
|---|
| 83 | @else if $index == 0 { |
|---|
| 84 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; |
|---|
| 85 | } |
|---|
| 86 | @else if abs($index) > length($list) { |
|---|
| 87 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; |
|---|
| 88 | } |
|---|
| 89 | @else { |
|---|
| 90 | |
|---|
| 91 | $result: (); |
|---|
| 92 | $index: if($index < 0, length($list) + $index + 1, $index); |
|---|
| 93 | |
|---|
| 94 | @for $i from 1 through length($list) { |
|---|
| 95 | |
|---|
| 96 | @if $i != $index { |
|---|
| 97 | $result: append($result, nth($list, $i)); |
|---|
| 98 | } |
|---|
| 99 | |
|---|
| 100 | } |
|---|
| 101 | |
|---|
| 102 | } |
|---|
| 103 | |
|---|
| 104 | @return $result; |
|---|
| 105 | |
|---|
| 106 | } |
|---|
| 107 | |
|---|
| 108 | /// Replaces a substring within another string. |
|---|
| 109 | /// @author Hugo Giraudel |
|---|
| 110 | /// @param {string} $string String. |
|---|
| 111 | /// @param {string} $search Substring. |
|---|
| 112 | /// @param {string} $replace Replacement. |
|---|
| 113 | /// @return {string} Updated string. |
|---|
| 114 | @function str-replace($string, $search, $replace: '') { |
|---|
| 115 | |
|---|
| 116 | $index: str-index($string, $search); |
|---|
| 117 | |
|---|
| 118 | @if $index { |
|---|
| 119 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); |
|---|
| 120 | } |
|---|
| 121 | |
|---|
| 122 | @return $string; |
|---|
| 123 | |
|---|
| 124 | } |
|---|
| 125 | |
|---|
| 126 | /// Replaces a substring within each string in a list. |
|---|
| 127 | /// @param {list} $strings List of strings. |
|---|
| 128 | /// @param {string} $search Substring. |
|---|
| 129 | /// @param {string} $replace Replacement. |
|---|
| 130 | /// @return {list} Updated list of strings. |
|---|
| 131 | @function str-replace-all($strings, $search, $replace: '') { |
|---|
| 132 | |
|---|
| 133 | @each $string in $strings { |
|---|
| 134 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); |
|---|
| 135 | } |
|---|
| 136 | |
|---|
| 137 | @return $strings; |
|---|
| 138 | |
|---|
| 139 | } |
|---|
| 140 | |
|---|
| 141 | /// Gets a value from a map. |
|---|
| 142 | /// @author Hugo Giraudel |
|---|
| 143 | /// @param {map} $map Map. |
|---|
| 144 | /// @param {string} $keys Key(s). |
|---|
| 145 | /// @return {string} Value. |
|---|
| 146 | @function val($map, $keys...) { |
|---|
| 147 | |
|---|
| 148 | @if nth($keys, 1) == null { |
|---|
| 149 | $keys: remove-nth($keys, 1); |
|---|
| 150 | } |
|---|
| 151 | |
|---|
| 152 | @each $key in $keys { |
|---|
| 153 | $map: map-get($map, $key); |
|---|
| 154 | } |
|---|
| 155 | |
|---|
| 156 | @return $map; |
|---|
| 157 | |
|---|
| 158 | } |
|---|
| 159 | |
|---|
| 160 | // Mixins. |
|---|
| 161 | |
|---|
| 162 | /// Sets the global box model. |
|---|
| 163 | /// @param {string} $model Model (default is content). |
|---|
| 164 | @mixin boxModel($model: 'content') { |
|---|
| 165 | |
|---|
| 166 | $x: $model + '-box'; |
|---|
| 167 | |
|---|
| 168 | *, *:before, *:after { |
|---|
| 169 | -moz-box-sizing: #{$x}; |
|---|
| 170 | -webkit-box-sizing: #{$x}; |
|---|
| 171 | box-sizing: #{$x}; |
|---|
| 172 | } |
|---|
| 173 | |
|---|
| 174 | } |
|---|
| 175 | |
|---|
| 176 | /// Wraps @content in a @media block using a given breakpoint. |
|---|
| 177 | /// @param {string} $breakpoint Breakpoint. |
|---|
| 178 | /// @param {map} $queries Additional queries. |
|---|
| 179 | @mixin breakpoint($breakpoint: null, $queries: null) { |
|---|
| 180 | |
|---|
| 181 | $query: 'screen'; |
|---|
| 182 | |
|---|
| 183 | // Breakpoint. |
|---|
| 184 | @if $breakpoint and map-has-key($breakpoints, $breakpoint) { |
|---|
| 185 | $query: $query + ' and ' + map-get($breakpoints, $breakpoint); |
|---|
| 186 | } |
|---|
| 187 | |
|---|
| 188 | // Queries. |
|---|
| 189 | @if $queries { |
|---|
| 190 | @each $k, $v in $queries { |
|---|
| 191 | $query: $query + ' and (' + $k + ':' + $v + ')'; |
|---|
| 192 | } |
|---|
| 193 | } |
|---|
| 194 | |
|---|
| 195 | @media #{$query} { |
|---|
| 196 | @content; |
|---|
| 197 | } |
|---|
| 198 | |
|---|
| 199 | } |
|---|
| 200 | |
|---|
| 201 | /// Wraps @content in a @media block targeting a specific orientation. |
|---|
| 202 | /// @param {string} $orientation Orientation. |
|---|
| 203 | @mixin orientation($orientation) { |
|---|
| 204 | @media screen and (orientation: #{$orientation}) { |
|---|
| 205 | @content; |
|---|
| 206 | } |
|---|
| 207 | } |
|---|
| 208 | |
|---|
| 209 | /// Utility mixin for containers. |
|---|
| 210 | /// @param {mixed} $width Width. |
|---|
| 211 | @mixin containers($width) { |
|---|
| 212 | |
|---|
| 213 | // Locked? |
|---|
| 214 | $lock: false; |
|---|
| 215 | |
|---|
| 216 | @if length($width) == 2 { |
|---|
| 217 | $width: nth($width, 1); |
|---|
| 218 | $lock: true; |
|---|
| 219 | } |
|---|
| 220 | |
|---|
| 221 | // Modifiers. |
|---|
| 222 | .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } |
|---|
| 223 | .container.\37 5\25 { width: $width * 0.75; } |
|---|
| 224 | .container.\35 0\25 { width: $width * 0.5; } |
|---|
| 225 | .container.\32 5\25 { width: $width * 0.25; } |
|---|
| 226 | |
|---|
| 227 | // Main class. |
|---|
| 228 | .container { |
|---|
| 229 | @if $lock { |
|---|
| 230 | width: $width !important; |
|---|
| 231 | } |
|---|
| 232 | @else { |
|---|
| 233 | width: $width; |
|---|
| 234 | } |
|---|
| 235 | } |
|---|
| 236 | |
|---|
| 237 | } |
|---|
| 238 | |
|---|
| 239 | /// Utility mixin for grid. |
|---|
| 240 | /// @param {list} $gutters Column and row gutters (default is 40px). |
|---|
| 241 | /// @param {string} $breakpointName Optional breakpoint name. |
|---|
| 242 | @mixin grid($gutters: 40px, $breakpointName: null) { |
|---|
| 243 | |
|---|
| 244 | // Gutters. |
|---|
| 245 | @include grid-gutters($gutters); |
|---|
| 246 | @include grid-gutters($gutters, \32 00\25, 2); |
|---|
| 247 | @include grid-gutters($gutters, \31 50\25, 1.5); |
|---|
| 248 | @include grid-gutters($gutters, \35 0\25, 0.5); |
|---|
| 249 | @include grid-gutters($gutters, \32 5\25, 0.25); |
|---|
| 250 | |
|---|
| 251 | // Cells. |
|---|
| 252 | $x: ''; |
|---|
| 253 | |
|---|
| 254 | @if $breakpointName { |
|---|
| 255 | $x: '\\28' + $breakpointName + '\\29'; |
|---|
| 256 | } |
|---|
| 257 | |
|---|
| 258 | .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } |
|---|
| 259 | .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } |
|---|
| 260 | .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } |
|---|
| 261 | .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } |
|---|
| 262 | .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } |
|---|
| 263 | .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } |
|---|
| 264 | .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } |
|---|
| 265 | .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } |
|---|
| 266 | .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } |
|---|
| 267 | .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } |
|---|
| 268 | .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } |
|---|
| 269 | .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } |
|---|
| 270 | |
|---|
| 271 | .\31 2u\24#{$x} + *, |
|---|
| 272 | .\31 1u\24#{$x} + *, |
|---|
| 273 | .\31 0u\24#{$x} + *, |
|---|
| 274 | .\39 u\24#{$x} + *, |
|---|
| 275 | .\38 u\24#{$x} + *, |
|---|
| 276 | .\37 u\24#{$x} + *, |
|---|
| 277 | .\36 u\24#{$x} + *, |
|---|
| 278 | .\35 u\24#{$x} + *, |
|---|
| 279 | .\34 u\24#{$x} + *, |
|---|
| 280 | .\33 u\24#{$x} + *, |
|---|
| 281 | .\32 u\24#{$x} + *, |
|---|
| 282 | .\31 u\24#{$x} + * { |
|---|
| 283 | clear: left; |
|---|
| 284 | } |
|---|
| 285 | |
|---|
| 286 | .\-11u#{$x} { margin-left: 91.6666666667% } |
|---|
| 287 | .\-10u#{$x} { margin-left: 83.3333333333% } |
|---|
| 288 | .\-9u#{$x} { margin-left: 75% } |
|---|
| 289 | .\-8u#{$x} { margin-left: 66.6666666667% } |
|---|
| 290 | .\-7u#{$x} { margin-left: 58.3333333333% } |
|---|
| 291 | .\-6u#{$x} { margin-left: 50% } |
|---|
| 292 | .\-5u#{$x} { margin-left: 41.6666666667% } |
|---|
| 293 | .\-4u#{$x} { margin-left: 33.3333333333% } |
|---|
| 294 | .\-3u#{$x} { margin-left: 25% } |
|---|
| 295 | .\-2u#{$x} { margin-left: 16.6666666667% } |
|---|
| 296 | .\-1u#{$x} { margin-left: 8.3333333333% } |
|---|
| 297 | |
|---|
| 298 | } |
|---|
| 299 | |
|---|
| 300 | /// Utility mixin for grid. |
|---|
| 301 | /// @param {list} $gutters Gutters. |
|---|
| 302 | /// @param {string} $class Optional class name. |
|---|
| 303 | /// @param {integer} $multiplier Multiplier (default is 1). |
|---|
| 304 | @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { |
|---|
| 305 | |
|---|
| 306 | // Expand gutters if it's not a list. |
|---|
| 307 | @if length($gutters) == 1 { |
|---|
| 308 | $gutters: ($gutters, 0); |
|---|
| 309 | } |
|---|
| 310 | |
|---|
| 311 | // Get column and row gutter values. |
|---|
| 312 | $c: nth($gutters, 1); |
|---|
| 313 | $r: nth($gutters, 2); |
|---|
| 314 | |
|---|
| 315 | // Get class (if provided). |
|---|
| 316 | $x: ''; |
|---|
| 317 | |
|---|
| 318 | @if $class { |
|---|
| 319 | $x: '.' + $class; |
|---|
| 320 | } |
|---|
| 321 | |
|---|
| 322 | // Default. |
|---|
| 323 | .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } |
|---|
| 324 | .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } |
|---|
| 325 | |
|---|
| 326 | // Uniform. |
|---|
| 327 | .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } |
|---|
| 328 | .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } |
|---|
| 329 | |
|---|
| 330 | } |
|---|
| 331 | |
|---|
| 332 | /// Wraps @content in vendorized keyframe blocks. |
|---|
| 333 | /// @param {string} $name Name. |
|---|
| 334 | @mixin keyframes($name) { |
|---|
| 335 | |
|---|
| 336 | @-moz-keyframes #{$name} { @content; } |
|---|
| 337 | @-webkit-keyframes #{$name} { @content; } |
|---|
| 338 | @-ms-keyframes #{$name} { @content; } |
|---|
| 339 | @keyframes #{$name} { @content; } |
|---|
| 340 | |
|---|
| 341 | } |
|---|
| 342 | |
|---|
| 343 | /// |
|---|
| 344 | /// Sets breakpoints. |
|---|
| 345 | /// @param {map} $x Breakpoints. |
|---|
| 346 | /// |
|---|
| 347 | @mixin skel-breakpoints($x: ()) { |
|---|
| 348 | $breakpoints: $x !global; |
|---|
| 349 | } |
|---|
| 350 | |
|---|
| 351 | /// |
|---|
| 352 | /// Initializes layout module. |
|---|
| 353 | /// @param {map} config Config. |
|---|
| 354 | /// |
|---|
| 355 | @mixin skel-layout($config: ()) { |
|---|
| 356 | |
|---|
| 357 | // Config. |
|---|
| 358 | $configPerBreakpoint: (); |
|---|
| 359 | |
|---|
| 360 | $z: map-get($config, 'breakpoints'); |
|---|
| 361 | |
|---|
| 362 | @if $z { |
|---|
| 363 | $configPerBreakpoint: $z; |
|---|
| 364 | } |
|---|
| 365 | |
|---|
| 366 | // Reset. |
|---|
| 367 | $x: map-get($config, 'reset'); |
|---|
| 368 | |
|---|
| 369 | @if $x { |
|---|
| 370 | |
|---|
| 371 | /* Reset */ |
|---|
| 372 | |
|---|
| 373 | @include reset($x); |
|---|
| 374 | |
|---|
| 375 | } |
|---|
| 376 | |
|---|
| 377 | // Box model. |
|---|
| 378 | $x: map-get($config, 'boxModel'); |
|---|
| 379 | |
|---|
| 380 | @if $x { |
|---|
| 381 | |
|---|
| 382 | /* Box Model */ |
|---|
| 383 | |
|---|
| 384 | @include boxModel($x); |
|---|
| 385 | |
|---|
| 386 | } |
|---|
| 387 | |
|---|
| 388 | // Containers. |
|---|
| 389 | $containers: map-get($config, 'containers'); |
|---|
| 390 | |
|---|
| 391 | @if $containers { |
|---|
| 392 | |
|---|
| 393 | /* Containers */ |
|---|
| 394 | |
|---|
| 395 | .container { |
|---|
| 396 | margin-left: auto; |
|---|
| 397 | margin-right: auto; |
|---|
| 398 | } |
|---|
| 399 | |
|---|
| 400 | // Use default is $containers is just "true". |
|---|
| 401 | @if $containers == true { |
|---|
| 402 | $containers: 960px; |
|---|
| 403 | } |
|---|
| 404 | |
|---|
| 405 | // Apply base. |
|---|
| 406 | @include containers($containers); |
|---|
| 407 | |
|---|
| 408 | // Apply per-breakpoint. |
|---|
| 409 | @each $name in map-keys($breakpoints) { |
|---|
| 410 | |
|---|
| 411 | // Get/use breakpoint setting if it exists. |
|---|
| 412 | $x: map-get($configPerBreakpoint, $name); |
|---|
| 413 | |
|---|
| 414 | // Per-breakpoint config exists? |
|---|
| 415 | @if $x { |
|---|
| 416 | $y: map-get($x, 'containers'); |
|---|
| 417 | |
|---|
| 418 | // Setting exists? Use it. |
|---|
| 419 | @if $y { |
|---|
| 420 | $containers: $y; |
|---|
| 421 | } |
|---|
| 422 | |
|---|
| 423 | } |
|---|
| 424 | |
|---|
| 425 | // Create @media block. |
|---|
| 426 | @media screen and #{map-get($breakpoints, $name)} { |
|---|
| 427 | @include containers($containers); |
|---|
| 428 | } |
|---|
| 429 | |
|---|
| 430 | } |
|---|
| 431 | |
|---|
| 432 | } |
|---|
| 433 | |
|---|
| 434 | // Grid. |
|---|
| 435 | $grid: map-get($config, 'grid'); |
|---|
| 436 | |
|---|
| 437 | @if $grid { |
|---|
| 438 | |
|---|
| 439 | /* Grid */ |
|---|
| 440 | |
|---|
| 441 | // Use defaults if $grid is just "true". |
|---|
| 442 | @if $grid == true { |
|---|
| 443 | $grid: (); |
|---|
| 444 | } |
|---|
| 445 | |
|---|
| 446 | // Sub-setting: Gutters. |
|---|
| 447 | $grid-gutters: 40px; |
|---|
| 448 | $x: map-get($grid, 'gutters'); |
|---|
| 449 | |
|---|
| 450 | @if $x { |
|---|
| 451 | $grid-gutters: $x; |
|---|
| 452 | } |
|---|
| 453 | |
|---|
| 454 | // Rows. |
|---|
| 455 | .row { |
|---|
| 456 | border-bottom: solid 1px transparent; |
|---|
| 457 | -moz-box-sizing: border-box; |
|---|
| 458 | -webkit-box-sizing: border-box; |
|---|
| 459 | box-sizing: border-box; |
|---|
| 460 | } |
|---|
| 461 | |
|---|
| 462 | .row > * { |
|---|
| 463 | float: left; |
|---|
| 464 | -moz-box-sizing: border-box; |
|---|
| 465 | -webkit-box-sizing: border-box; |
|---|
| 466 | box-sizing: border-box; |
|---|
| 467 | } |
|---|
| 468 | |
|---|
| 469 | .row:after, .row:before { |
|---|
| 470 | content: ''; |
|---|
| 471 | display: block; |
|---|
| 472 | clear: both; |
|---|
| 473 | height: 0; |
|---|
| 474 | } |
|---|
| 475 | |
|---|
| 476 | .row.uniform > * > :first-child { |
|---|
| 477 | margin-top: 0; |
|---|
| 478 | } |
|---|
| 479 | |
|---|
| 480 | .row.uniform > * > :last-child { |
|---|
| 481 | margin-bottom: 0; |
|---|
| 482 | } |
|---|
| 483 | |
|---|
| 484 | // Gutters (0%). |
|---|
| 485 | @include grid-gutters($grid-gutters, \30 \25, 0); |
|---|
| 486 | |
|---|
| 487 | // Apply base. |
|---|
| 488 | @include grid($grid-gutters); |
|---|
| 489 | |
|---|
| 490 | // Apply per-breakpoint. |
|---|
| 491 | @each $name in map-keys($breakpoints) { |
|---|
| 492 | |
|---|
| 493 | // Get/use breakpoint setting if it exists. |
|---|
| 494 | $x: map-get($configPerBreakpoint, $name); |
|---|
| 495 | |
|---|
| 496 | // Per-breakpoint config exists? |
|---|
| 497 | @if $x { |
|---|
| 498 | $y: map-get($x, 'grid'); |
|---|
| 499 | |
|---|
| 500 | // Setting exists? |
|---|
| 501 | @if $y { |
|---|
| 502 | |
|---|
| 503 | // Sub-setting: Gutters. |
|---|
| 504 | $x: map-get($y, 'gutters'); |
|---|
| 505 | |
|---|
| 506 | @if $x { |
|---|
| 507 | $grid-gutters: $x; |
|---|
| 508 | } |
|---|
| 509 | |
|---|
| 510 | } |
|---|
| 511 | |
|---|
| 512 | } |
|---|
| 513 | |
|---|
| 514 | // Create @media block. |
|---|
| 515 | @media screen and #{map-get($breakpoints, $name)} { |
|---|
| 516 | @include grid($grid-gutters, $name); |
|---|
| 517 | } |
|---|
| 518 | |
|---|
| 519 | } |
|---|
| 520 | |
|---|
| 521 | } |
|---|
| 522 | |
|---|
| 523 | } |
|---|
| 524 | |
|---|
| 525 | /// Resets browser styles. |
|---|
| 526 | /// @param {string} $mode Mode (default is 'normalize'). |
|---|
| 527 | @mixin reset($mode: 'normalize') { |
|---|
| 528 | |
|---|
| 529 | @if $mode == 'normalize' { |
|---|
| 530 | |
|---|
| 531 | // normalize.css v3.0.2 | MIT License | git.io/normalize |
|---|
| 532 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} |
|---|
| 533 | |
|---|
| 534 | } |
|---|
| 535 | @else if $mode == 'full' { |
|---|
| 536 | |
|---|
| 537 | // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) |
|---|
| 538 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} |
|---|
| 539 | |
|---|
| 540 | } |
|---|
| 541 | |
|---|
| 542 | } |
|---|
| 543 | |
|---|
| 544 | /// Vendorizes a declaration's property and/or value(s). |
|---|
| 545 | /// @param {string} $property Property. |
|---|
| 546 | /// @param {mixed} $value String/list of value(s). |
|---|
| 547 | @mixin vendor($property, $value) { |
|---|
| 548 | |
|---|
| 549 | // Determine if property should expand. |
|---|
| 550 | $expandProperty: index($vendor-properties, $property); |
|---|
| 551 | |
|---|
| 552 | // Determine if value should expand (and if so, add '-prefix-' placeholder). |
|---|
| 553 | $expandValue: false; |
|---|
| 554 | |
|---|
| 555 | @each $x in $value { |
|---|
| 556 | @each $y in $vendor-values { |
|---|
| 557 | @if $y == str-slice($x, 1, str-length($y)) { |
|---|
| 558 | |
|---|
| 559 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); |
|---|
| 560 | $expandValue: true; |
|---|
| 561 | |
|---|
| 562 | } |
|---|
| 563 | } |
|---|
| 564 | } |
|---|
| 565 | |
|---|
| 566 | // Expand property? |
|---|
| 567 | @if $expandProperty { |
|---|
| 568 | @each $vendor in $vendor-prefixes { |
|---|
| 569 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
|---|
| 570 | } |
|---|
| 571 | } |
|---|
| 572 | |
|---|
| 573 | // Expand just the value? |
|---|
| 574 | @elseif $expandValue { |
|---|
| 575 | @each $vendor in $vendor-prefixes { |
|---|
| 576 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
|---|
| 577 | } |
|---|
| 578 | } |
|---|
| 579 | |
|---|
| 580 | // Neither? Treat them as a normal declaration. |
|---|
| 581 | @else { |
|---|
| 582 | #{$property}: #{$value}; |
|---|
| 583 | } |
|---|
| 584 | |
|---|
| 585 | } |
|---|
