1 // skel.scss v3.0.1 | (c) skel.io | MIT licensed */
\r
7 $breakpoints: () !global;
\r
18 /// Properties that should be vendorized.
\r
20 $vendor-properties: (
\r
26 'animation-direction',
\r
27 'animation-duration',
\r
28 'animation-fill-mode',
\r
29 'animation-iteration-count',
\r
31 'animation-play-state',
\r
32 'animation-timing-function',
\r
34 'backface-visibility',
\r
53 'transition-duration',
\r
54 'transition-property',
\r
55 'transition-timing-function',
\r
59 /// Values that should be vendorized.
\r
71 /// Removes a specific item from a list.
\r
72 /// @author Hugo Giraudel
\r
73 /// @param {list} $list List.
\r
74 /// @param {integer} $index Index.
\r
75 /// @return {list} Updated list.
\r
76 @function remove-nth($list, $index) {
\r
80 @if type-of($index) != number {
\r
81 @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
\r
83 @else if $index == 0 {
\r
84 @warn "List index 0 must be a non-zero integer for `remove-nth`.";
\r
86 @else if abs($index) > length($list) {
\r
87 @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
\r
92 $index: if($index < 0, length($list) + $index + 1, $index);
\r
94 @for $i from 1 through length($list) {
\r
97 $result: append($result, nth($list, $i));
\r
108 /// Replaces a substring within another string.
\r
109 /// @author Hugo Giraudel
\r
110 /// @param {string} $string String.
\r
111 /// @param {string} $search Substring.
\r
112 /// @param {string} $replace Replacement.
\r
113 /// @return {string} Updated string.
\r
114 @function str-replace($string, $search, $replace: '') {
\r
116 $index: str-index($string, $search);
\r
119 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
\r
126 /// Replaces a substring within each string in a list.
\r
127 /// @param {list} $strings List of strings.
\r
128 /// @param {string} $search Substring.
\r
129 /// @param {string} $replace Replacement.
\r
130 /// @return {list} Updated list of strings.
\r
131 @function str-replace-all($strings, $search, $replace: '') {
\r
133 @each $string in $strings {
\r
134 $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
\r
141 /// Gets a value from a map.
\r
142 /// @author Hugo Giraudel
\r
143 /// @param {map} $map Map.
\r
144 /// @param {string} $keys Key(s).
\r
145 /// @return {string} Value.
\r
146 @function val($map, $keys...) {
\r
148 @if nth($keys, 1) == null {
\r
149 $keys: remove-nth($keys, 1);
\r
152 @each $key in $keys {
\r
153 $map: map-get($map, $key);
\r
162 /// Sets the global box model.
\r
163 /// @param {string} $model Model (default is content).
\r
164 @mixin boxModel($model: 'content') {
\r
166 $x: $model + '-box';
\r
168 *, *:before, *:after {
\r
169 -moz-box-sizing: #{$x};
\r
170 -webkit-box-sizing: #{$x};
\r
176 /// Wraps @content in a @media block using a given breakpoint.
\r
177 /// @param {string} $breakpoint Breakpoint.
\r
178 /// @param {map} $queries Additional queries.
\r
179 @mixin breakpoint($breakpoint: null, $queries: null) {
\r
184 @if $breakpoint and map-has-key($breakpoints, $breakpoint) {
\r
185 $query: $query + ' and ' + map-get($breakpoints, $breakpoint);
\r
190 @each $k, $v in $queries {
\r
191 $query: $query + ' and (' + $k + ':' + $v + ')';
\r
201 /// Wraps @content in a @media block targeting a specific orientation.
\r
202 /// @param {string} $orientation Orientation.
\r
203 @mixin orientation($orientation) {
\r
204 @media screen and (orientation: #{$orientation}) {
\r
209 /// Utility mixin for containers.
\r
210 /// @param {mixed} $width Width.
\r
211 @mixin containers($width) {
\r
216 @if length($width) == 2 {
\r
217 $width: nth($width, 1);
\r
222 .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; }
\r
223 .container.\37 5\25 { width: $width * 0.75; }
\r
224 .container.\35 0\25 { width: $width * 0.5; }
\r
225 .container.\32 5\25 { width: $width * 0.25; }
\r
230 width: $width !important;
\r
239 /// Utility mixin for grid.
\r
240 /// @param {list} $gutters Column and row gutters (default is 40px).
\r
241 /// @param {string} $breakpointName Optional breakpoint name.
\r
242 @mixin grid($gutters: 40px, $breakpointName: null) {
\r
245 @include grid-gutters($gutters);
\r
246 @include grid-gutters($gutters, \32 00\25, 2);
\r
247 @include grid-gutters($gutters, \31 50\25, 1.5);
\r
248 @include grid-gutters($gutters, \35 0\25, 0.5);
\r
249 @include grid-gutters($gutters, \32 5\25, 0.25);
\r
254 @if $breakpointName {
\r
255 $x: '\\28' + $breakpointName + '\\29';
\r
258 .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
\r
259 .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
\r
260 .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
\r
261 .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
\r
262 .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
\r
263 .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
\r
264 .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
\r
265 .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
\r
266 .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
\r
267 .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
\r
268 .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
\r
269 .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }
\r
271 .\31 2u\24#{$x} + *,
\r
272 .\31 1u\24#{$x} + *,
\r
273 .\31 0u\24#{$x} + *,
\r
274 .\39 u\24#{$x} + *,
\r
275 .\38 u\24#{$x} + *,
\r
276 .\37 u\24#{$x} + *,
\r
277 .\36 u\24#{$x} + *,
\r
278 .\35 u\24#{$x} + *,
\r
279 .\34 u\24#{$x} + *,
\r
280 .\33 u\24#{$x} + *,
\r
281 .\32 u\24#{$x} + *,
\r
282 .\31 u\24#{$x} + * {
\r
286 .\-11u#{$x} { margin-left: 91.6666666667% }
\r
287 .\-10u#{$x} { margin-left: 83.3333333333% }
\r
288 .\-9u#{$x} { margin-left: 75% }
\r
289 .\-8u#{$x} { margin-left: 66.6666666667% }
\r
290 .\-7u#{$x} { margin-left: 58.3333333333% }
\r
291 .\-6u#{$x} { margin-left: 50% }
\r
292 .\-5u#{$x} { margin-left: 41.6666666667% }
\r
293 .\-4u#{$x} { margin-left: 33.3333333333% }
\r
294 .\-3u#{$x} { margin-left: 25% }
\r
295 .\-2u#{$x} { margin-left: 16.6666666667% }
\r
296 .\-1u#{$x} { margin-left: 8.3333333333% }
\r
300 /// Utility mixin for grid.
\r
301 /// @param {list} $gutters Gutters.
\r
302 /// @param {string} $class Optional class name.
\r
303 /// @param {integer} $multiplier Multiplier (default is 1).
\r
304 @mixin grid-gutters($gutters, $class: null, $multiplier: 1) {
\r
306 // Expand gutters if it's not a list.
\r
307 @if length($gutters) == 1 {
\r
308 $gutters: ($gutters, 0);
\r
311 // Get column and row gutter values.
\r
312 $c: nth($gutters, 1);
\r
313 $r: nth($gutters, 2);
\r
315 // Get class (if provided).
\r
323 .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); }
\r
324 .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
\r
327 .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); }
\r
328 .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
\r
332 /// Wraps @content in vendorized keyframe blocks.
\r
333 /// @param {string} $name Name.
\r
334 @mixin keyframes($name) {
\r
336 @-moz-keyframes #{$name} { @content; }
\r
337 @-webkit-keyframes #{$name} { @content; }
\r
338 @-ms-keyframes #{$name} { @content; }
\r
339 @keyframes #{$name} { @content; }
\r
344 /// Sets breakpoints.
\r
345 /// @param {map} $x Breakpoints.
\r
347 @mixin skel-breakpoints($x: ()) {
\r
348 $breakpoints: $x !global;
\r
352 /// Initializes layout module.
\r
353 /// @param {map} config Config.
\r
355 @mixin skel-layout($config: ()) {
\r
358 $configPerBreakpoint: ();
\r
360 $z: map-get($config, 'breakpoints');
\r
363 $configPerBreakpoint: $z;
\r
367 $x: map-get($config, 'reset');
\r
373 @include reset($x);
\r
378 $x: map-get($config, 'boxModel');
\r
384 @include boxModel($x);
\r
389 $containers: map-get($config, 'containers');
\r
397 margin-right: auto;
\r
400 // Use default is $containers is just "true".
\r
401 @if $containers == true {
\r
402 $containers: 960px;
\r
406 @include containers($containers);
\r
408 // Apply per-breakpoint.
\r
409 @each $name in map-keys($breakpoints) {
\r
411 // Get/use breakpoint setting if it exists.
\r
412 $x: map-get($configPerBreakpoint, $name);
\r
414 // Per-breakpoint config exists?
\r
416 $y: map-get($x, 'containers');
\r
418 // Setting exists? Use it.
\r
425 // Create @media block.
\r
426 @media screen and #{map-get($breakpoints, $name)} {
\r
427 @include containers($containers);
\r
435 $grid: map-get($config, 'grid');
\r
441 // Use defaults if $grid is just "true".
\r
442 @if $grid == true {
\r
446 // Sub-setting: Gutters.
\r
447 $grid-gutters: 40px;
\r
448 $x: map-get($grid, 'gutters');
\r
456 border-bottom: solid 1px transparent;
\r
457 -moz-box-sizing: border-box;
\r
458 -webkit-box-sizing: border-box;
\r
459 box-sizing: border-box;
\r
464 -moz-box-sizing: border-box;
\r
465 -webkit-box-sizing: border-box;
\r
466 box-sizing: border-box;
\r
469 .row:after, .row:before {
\r
476 .row.uniform > * > :first-child {
\r
480 .row.uniform > * > :last-child {
\r
485 @include grid-gutters($grid-gutters, \30 \25, 0);
\r
488 @include grid($grid-gutters);
\r
490 // Apply per-breakpoint.
\r
491 @each $name in map-keys($breakpoints) {
\r
493 // Get/use breakpoint setting if it exists.
\r
494 $x: map-get($configPerBreakpoint, $name);
\r
496 // Per-breakpoint config exists?
\r
498 $y: map-get($x, 'grid');
\r
503 // Sub-setting: Gutters.
\r
504 $x: map-get($y, 'gutters');
\r
514 // Create @media block.
\r
515 @media screen and #{map-get($breakpoints, $name)} {
\r
516 @include grid($grid-gutters, $name);
\r
525 /// Resets browser styles.
\r
526 /// @param {string} $mode Mode (default is 'normalize').
\r
527 @mixin reset($mode: 'normalize') {
\r
529 @if $mode == 'normalize' {
\r
531 // normalize.css v3.0.2 | MIT License | git.io/normalize
\r
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}
\r
535 @else if $mode == 'full' {
\r
537 // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain)
\r
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}
\r
544 /// Vendorizes a declaration's property and/or value(s).
\r
545 /// @param {string} $property Property.
\r
546 /// @param {mixed} $value String/list of value(s).
\r
547 @mixin vendor($property, $value) {
\r
549 // Determine if property should expand.
\r
550 $expandProperty: index($vendor-properties, $property);
\r
552 // Determine if value should expand (and if so, add '-prefix-' placeholder).
\r
553 $expandValue: false;
\r
555 @each $x in $value {
\r
556 @each $y in $vendor-values {
\r
557 @if $y == str-slice($x, 1, str-length($y)) {
\r
559 $value: set-nth($value, index($value, $x), '-prefix-' + $x);
\r
560 $expandValue: true;
\r
566 // Expand property?
\r
567 @if $expandProperty {
\r
568 @each $vendor in $vendor-prefixes {
\r
569 #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
\r
573 // Expand just the value?
\r
574 @elseif $expandValue {
\r
575 @each $vendor in $vendor-prefixes {
\r
576 #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
\r
580 // Neither? Treat them as a normal declaration.
\r
582 #{$property}: #{$value};
\r