| @@ -0,0 +1,45 @@ | ||
| //************************************************************************// | ||
| // Example: @include prefixer(border-radius, $radii, webkit ms spec); | ||
| //************************************************************************// | ||
| // Variables located in /settings/_prefixer.scss | ||
|
|
||
| @mixin prefixer ($property, $value, $prefixes) { | ||
| @each $prefix in $prefixes { | ||
| @if $prefix == webkit { | ||
| @if $prefix-for-webkit { | ||
| -webkit-#{$property}: $value; | ||
| } | ||
| } | ||
| @else if $prefix == moz { | ||
| @if $prefix-for-mozilla { | ||
| -moz-#{$property}: $value; | ||
| } | ||
| } | ||
| @else if $prefix == ms { | ||
| @if $prefix-for-microsoft { | ||
| -ms-#{$property}: $value; | ||
| } | ||
| } | ||
| @else if $prefix == o { | ||
| @if $prefix-for-opera { | ||
| -o-#{$property}: $value; | ||
| } | ||
| } | ||
| @else if $prefix == spec { | ||
| @if $prefix-for-spec { | ||
| #{$property}: $value; | ||
| } | ||
| } | ||
| @else { | ||
| @warn "Unrecognized prefix: #{$prefix}"; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin disable-prefix-for-all() { | ||
| $prefix-for-webkit: false !global; | ||
| $prefix-for-mozilla: false !global; | ||
| $prefix-for-microsoft: false !global; | ||
| $prefix-for-opera: false !global; | ||
| $prefix-for-spec: false !global; | ||
| } |
| @@ -0,0 +1,31 @@ | ||
| @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { | ||
| @if $asset-pipeline { | ||
| background-image: image-url("#{$filename}.#{$extension}"); | ||
| } | ||
| @else { | ||
| background-image: url("#{$filename}.#{$extension}"); | ||
| } | ||
|
|
||
| @include hidpi { | ||
| @if $asset-pipeline { | ||
| @if $retina-filename { | ||
| background-image: image-url("#{$retina-filename}.#{$extension}"); | ||
| } | ||
| @else { | ||
| background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); | ||
| } | ||
| } | ||
|
|
||
| @else { | ||
| @if $retina-filename { | ||
| background-image: url("#{$retina-filename}.#{$extension}"); | ||
| } | ||
| @else { | ||
| background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); | ||
| } | ||
| } | ||
|
|
||
| background-size: $background-size; | ||
|
|
||
| } | ||
| } |
| @@ -0,0 +1,26 @@ | ||
| // Set `width` and `height` in a single statement | ||
|
|
||
| @mixin size($value) { | ||
| $width: nth($value, 1); | ||
| $height: $width; | ||
|
|
||
| @if length($value) > 1 { | ||
| $height: nth($value, 2); | ||
| } | ||
|
|
||
| @if is-size($height) { | ||
| height: $height; | ||
| } | ||
|
|
||
| @else { | ||
| @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; | ||
| } | ||
|
|
||
| @if is-size($width) { | ||
| width: $width; | ||
| } | ||
|
|
||
| @else { | ||
| @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; | ||
| } | ||
| } |
| @@ -0,0 +1,32 @@ | ||
| // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) | ||
| // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html | ||
|
|
||
| // EASE IN | ||
| $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); | ||
| $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); | ||
| $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); | ||
| $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); | ||
| $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); | ||
| $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); | ||
| $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); | ||
| $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); | ||
|
|
||
| // EASE OUT | ||
| $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); | ||
| $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); | ||
| $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); | ||
| $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); | ||
| $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); | ||
| $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); | ||
| $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); | ||
| $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); | ||
|
|
||
| // EASE IN OUT | ||
| $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); | ||
| $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); | ||
| $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
| $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); | ||
| $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); | ||
| $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); | ||
| $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); | ||
| $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); |
| @@ -0,0 +1,83 @@ | ||
| @mixin triangle ($size, $color, $direction) { | ||
| height: 0; | ||
| width: 0; | ||
|
|
||
| $width: nth($size, 1); | ||
| $height: nth($size, length($size)); | ||
|
|
||
| $foreground-color: nth($color, 1); | ||
| $background-color: if(length($color) == 2, nth($color, 2), transparent); | ||
|
|
||
| @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { | ||
|
|
||
| $width: $width / 2; | ||
| $height: if(length($size) > 1, $height, $height/2); | ||
|
|
||
| @if $direction == up { | ||
| border-left: $width solid $background-color; | ||
| border-right: $width solid $background-color; | ||
| border-bottom: $height solid $foreground-color; | ||
|
|
||
| } @else if $direction == right { | ||
| border-top: $width solid $background-color; | ||
| border-bottom: $width solid $background-color; | ||
| border-left: $height solid $foreground-color; | ||
|
|
||
| } @else if $direction == down { | ||
| border-left: $width solid $background-color; | ||
| border-right: $width solid $background-color; | ||
| border-top: $height solid $foreground-color; | ||
|
|
||
| } @else if $direction == left { | ||
| border-top: $width solid $background-color; | ||
| border-bottom: $width solid $background-color; | ||
| border-right: $height solid $foreground-color; | ||
| } | ||
| } | ||
|
|
||
| @else if ($direction == up-right) or ($direction == up-left) { | ||
| border-top: $height solid $foreground-color; | ||
|
|
||
| @if $direction == up-right { | ||
| border-left: $width solid $background-color; | ||
|
|
||
| } @else if $direction == up-left { | ||
| border-right: $width solid $background-color; | ||
| } | ||
| } | ||
|
|
||
| @else if ($direction == down-right) or ($direction == down-left) { | ||
| border-bottom: $height solid $foreground-color; | ||
|
|
||
| @if $direction == down-right { | ||
| border-left: $width solid $background-color; | ||
|
|
||
| } @else if $direction == down-left { | ||
| border-right: $width solid $background-color; | ||
| } | ||
| } | ||
|
|
||
| @else if ($direction == inset-up) { | ||
| border-width: $height $width; | ||
| border-style: solid; | ||
| border-color: $background-color $background-color $foreground-color; | ||
| } | ||
|
|
||
| @else if ($direction == inset-down) { | ||
| border-width: $height $width; | ||
| border-style: solid; | ||
| border-color: $foreground-color $background-color $background-color; | ||
| } | ||
|
|
||
| @else if ($direction == inset-right) { | ||
| border-width: $width $height; | ||
| border-style: solid; | ||
| border-color: $background-color $background-color $background-color $foreground-color; | ||
| } | ||
|
|
||
| @else if ($direction == inset-left) { | ||
| border-width: $width $height; | ||
| border-style: solid; | ||
| border-color: $background-color $foreground-color $background-color $background-color; | ||
| } | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| @mixin word-wrap($wrap: break-word) { | ||
| overflow-wrap: $wrap; | ||
| word-wrap: $wrap; | ||
|
|
||
| @if $wrap == break-word { | ||
| word-break: break-all; | ||
| } @else { | ||
| word-break: $wrap; | ||
| } | ||
| } |
| @@ -0,0 +1,52 @@ | ||
| // http://www.w3.org/TR/css3-animations/#the-animation-name-property- | ||
| // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. | ||
|
|
||
| // Official animation shorthand property. | ||
| @mixin animation ($animations...) { | ||
| @include prefixer(animation, $animations, webkit moz spec); | ||
| } | ||
|
|
||
| // Individual Animation Properties | ||
| @mixin animation-name ($names...) { | ||
| @include prefixer(animation-name, $names, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-duration ($times...) { | ||
| @include prefixer(animation-duration, $times, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-timing-function ($motions...) { | ||
| // ease | linear | ease-in | ease-out | ease-in-out | ||
| @include prefixer(animation-timing-function, $motions, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-iteration-count ($values...) { | ||
| // infinite | <number> | ||
| @include prefixer(animation-iteration-count, $values, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-direction ($directions...) { | ||
| // normal | alternate | ||
| @include prefixer(animation-direction, $directions, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-play-state ($states...) { | ||
| // running | paused | ||
| @include prefixer(animation-play-state, $states, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-delay ($times...) { | ||
| @include prefixer(animation-delay, $times, webkit moz spec); | ||
| } | ||
|
|
||
|
|
||
| @mixin animation-fill-mode ($modes...) { | ||
| // none | forwards | backwards | both | ||
| @include prefixer(animation-fill-mode, $modes, webkit moz spec); | ||
| } |
| @@ -0,0 +1,3 @@ | ||
| @mixin appearance ($value) { | ||
| @include prefixer(appearance, $value, webkit moz ms o spec); | ||
| } |
| @@ -0,0 +1,6 @@ | ||
| //************************************************************************// | ||
| // Backface-visibility mixin | ||
| //************************************************************************// | ||
| @mixin backface-visibility($visibility) { | ||
| @include prefixer(backface-visibility, $visibility, webkit spec); | ||
| } |
| @@ -0,0 +1,42 @@ | ||
| //************************************************************************// | ||
| // Background-image property for adding multiple background images with | ||
| // gradients, or for stringing multiple gradients together. | ||
| //************************************************************************// | ||
|
|
||
| @mixin background-image($images...) { | ||
| $webkit-images: (); | ||
| $spec-images: (); | ||
|
|
||
| @each $image in $images { | ||
| $webkit-image: (); | ||
| $spec-image: (); | ||
|
|
||
| @if (type-of($image) == string) { | ||
| $url-str: str-slice($image, 0, 3); | ||
| $gradient-type: str-slice($image, 0, 6); | ||
|
|
||
| @if $url-str == "url" { | ||
| $webkit-image: $image; | ||
| $spec-image: $image; | ||
| } | ||
|
|
||
| @else if $gradient-type == "linear" { | ||
| $gradients: _linear-gradient-parser($image); | ||
| $webkit-image: map-get($gradients, webkit-image); | ||
| $spec-image: map-get($gradients, spec-image); | ||
| } | ||
|
|
||
| @else if $gradient-type == "radial" { | ||
| $gradients: _radial-gradient-parser($image); | ||
| $webkit-image: map-get($gradients, webkit-image); | ||
| $spec-image: map-get($gradients, spec-image); | ||
| } | ||
| } | ||
|
|
||
| $webkit-images: append($webkit-images, $webkit-image, comma); | ||
| $spec-images: append($spec-images, $spec-image, comma); | ||
| } | ||
|
|
||
| background-image: $webkit-images; | ||
| background-image: $spec-images; | ||
| } |
| @@ -0,0 +1,55 @@ | ||
| //************************************************************************// | ||
| // Background property for adding multiple backgrounds using shorthand | ||
| // notation. | ||
| //************************************************************************// | ||
|
|
||
| @mixin background($backgrounds...) { | ||
| $webkit-backgrounds: (); | ||
| $spec-backgrounds: (); | ||
|
|
||
| @each $background in $backgrounds { | ||
| $webkit-background: (); | ||
| $spec-background: (); | ||
| $background-type: type-of($background); | ||
|
|
||
| @if $background-type == string or $background-type == list { | ||
| $background-str: if($background-type == list, nth($background, 1), $background); | ||
|
|
||
| $url-str: str-slice($background-str, 0, 3); | ||
| $gradient-type: str-slice($background-str, 0, 6); | ||
|
|
||
| @if $url-str == "url" { | ||
| $webkit-background: $background; | ||
| $spec-background: $background; | ||
| } | ||
|
|
||
| @else if $gradient-type == "linear" { | ||
| $gradients: _linear-gradient-parser("#{$background}"); | ||
| $webkit-background: map-get($gradients, webkit-image); | ||
| $spec-background: map-get($gradients, spec-image); | ||
| } | ||
|
|
||
| @else if $gradient-type == "radial" { | ||
| $gradients: _radial-gradient-parser("#{$background}"); | ||
| $webkit-background: map-get($gradients, webkit-image); | ||
| $spec-background: map-get($gradients, spec-image); | ||
| } | ||
|
|
||
| @else { | ||
| $webkit-background: $background; | ||
| $spec-background: $background; | ||
| } | ||
| } | ||
|
|
||
| @else { | ||
| $webkit-background: $background; | ||
| $spec-background: $background; | ||
| } | ||
|
|
||
| $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); | ||
| $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); | ||
| } | ||
|
|
||
| background: $webkit-backgrounds; | ||
| background: $spec-backgrounds; | ||
| } |
| @@ -0,0 +1,59 @@ | ||
| @mixin border-image($borders...) { | ||
| $webkit-borders: (); | ||
| $spec-borders: (); | ||
|
|
||
| @each $border in $borders { | ||
| $webkit-border: (); | ||
| $spec-border: (); | ||
| $border-type: type-of($border); | ||
|
|
||
| @if $border-type == string or list { | ||
| $border-str: if($border-type == list, nth($border, 1), $border); | ||
|
|
||
| $url-str: str-slice($border-str, 0, 3); | ||
| $gradient-type: str-slice($border-str, 0, 6); | ||
|
|
||
| @if $url-str == "url" { | ||
| $webkit-border: $border; | ||
| $spec-border: $border; | ||
| } | ||
|
|
||
| @else if $gradient-type == "linear" { | ||
| $gradients: _linear-gradient-parser("#{$border}"); | ||
| $webkit-border: map-get($gradients, webkit-image); | ||
| $spec-border: map-get($gradients, spec-image); | ||
| } | ||
|
|
||
| @else if $gradient-type == "radial" { | ||
| $gradients: _radial-gradient-parser("#{$border}"); | ||
| $webkit-border: map-get($gradients, webkit-image); | ||
| $spec-border: map-get($gradients, spec-image); | ||
| } | ||
|
|
||
| @else { | ||
| $webkit-border: $border; | ||
| $spec-border: $border; | ||
| } | ||
| } | ||
|
|
||
| @else { | ||
| $webkit-border: $border; | ||
| $spec-border: $border; | ||
| } | ||
|
|
||
| $webkit-borders: append($webkit-borders, $webkit-border, comma); | ||
| $spec-borders: append($spec-borders, $spec-border, comma); | ||
| } | ||
|
|
||
| -webkit-border-image: $webkit-borders; | ||
| border-image: $spec-borders; | ||
| border-style: solid; | ||
| } | ||
|
|
||
| //Examples: | ||
| // @include border-image(url("image.png")); | ||
| // @include border-image(url("image.png") 20 stretch); | ||
| // @include border-image(linear-gradient(45deg, orange, yellow)); | ||
| // @include border-image(linear-gradient(45deg, orange, yellow) stretch); | ||
| // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); | ||
| // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); |
| @@ -0,0 +1,22 @@ | ||
| // Border Radius (Shorthand) | ||
| // Provides a shorthand syntax to target and add border radii to both corners on one side of a box | ||
|
|
||
| @mixin border-top-radius($radii) { | ||
| border-top-left-radius: $radii; | ||
| border-top-right-radius: $radii; | ||
| } | ||
|
|
||
| @mixin border-right-radius($radii) { | ||
| border-bottom-right-radius: $radii; | ||
| border-top-right-radius: $radii; | ||
| } | ||
|
|
||
| @mixin border-bottom-radius($radii) { | ||
| border-bottom-left-radius: $radii; | ||
| border-bottom-right-radius: $radii; | ||
| } | ||
|
|
||
| @mixin border-left-radius($radii) { | ||
| border-bottom-left-radius: $radii; | ||
| border-top-left-radius: $radii; | ||
| } |
| @@ -0,0 +1,4 @@ | ||
| @mixin box-sizing ($box) { | ||
| // content-box | border-box | inherit | ||
| @include prefixer(box-sizing, $box, webkit moz spec); | ||
| } |
| @@ -0,0 +1,4 @@ | ||
| @mixin calc($property, $value) { | ||
| #{$property}: -webkit-calc(#{$value}); | ||
| #{$property}: calc(#{$value}); | ||
| } |
| @@ -0,0 +1,47 @@ | ||
| @mixin columns($arg: auto) { | ||
| // <column-count> || <column-width> | ||
| @include prefixer(columns, $arg, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-count($int: auto) { | ||
| // auto || integer | ||
| @include prefixer(column-count, $int, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-gap($length: normal) { | ||
| // normal || length | ||
| @include prefixer(column-gap, $length, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-fill($arg: auto) { | ||
| // auto || length | ||
| @include prefixer(column-fill, $arg, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-rule($arg) { | ||
| // <border-width> || <border-style> || <color> | ||
| @include prefixer(column-rule, $arg, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-rule-color($color) { | ||
| @include prefixer(column-rule-color, $color, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-rule-style($style: none) { | ||
| // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid | ||
| @include prefixer(column-rule-style, $style, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-rule-width ($width: none) { | ||
| @include prefixer(column-rule-width, $width, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-span($arg: none) { | ||
| // none || all | ||
| @include prefixer(column-span, $arg, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin column-width($length: auto) { | ||
| // auto || length | ||
| @include prefixer(column-width, $length, webkit moz spec); | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| @mixin filter($function: none) { | ||
| // <filter-function> [<filter-function]* | none | ||
| @include prefixer(filter, $function, webkit spec); | ||
| } | ||
|
|
| @@ -0,0 +1,320 @@ | ||
| // CSS3 Flexible Box Model and property defaults | ||
|
|
||
| // Custom shorthand notation for flexbox | ||
| @mixin box($orient: inline-axis, $pack: start, $align: stretch) { | ||
| @include display-box; | ||
| @include box-orient($orient); | ||
| @include box-pack($pack); | ||
| @include box-align($align); | ||
| } | ||
|
|
||
| @mixin display-box { | ||
| display: -webkit-box; | ||
| display: -moz-box; | ||
| display: -ms-flexbox; // IE 10 | ||
| display: box; | ||
| } | ||
|
|
||
| @mixin box-orient($orient: inline-axis) { | ||
| // horizontal|vertical|inline-axis|block-axis|inherit | ||
| @include prefixer(box-orient, $orient, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin box-pack($pack: start) { | ||
| // start|end|center|justify | ||
| @include prefixer(box-pack, $pack, webkit moz spec); | ||
| -ms-flex-pack: $pack; // IE 10 | ||
| } | ||
|
|
||
| @mixin box-align($align: stretch) { | ||
| // start|end|center|baseline|stretch | ||
| @include prefixer(box-align, $align, webkit moz spec); | ||
| -ms-flex-align: $align; // IE 10 | ||
| } | ||
|
|
||
| @mixin box-direction($direction: normal) { | ||
| // normal|reverse|inherit | ||
| @include prefixer(box-direction, $direction, webkit moz spec); | ||
| -ms-flex-direction: $direction; // IE 10 | ||
| } | ||
|
|
||
| @mixin box-lines($lines: single) { | ||
| // single|multiple | ||
| @include prefixer(box-lines, $lines, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin box-ordinal-group($int: 1) { | ||
| @include prefixer(box-ordinal-group, $int, webkit moz spec); | ||
| -ms-flex-order: $int; // IE 10 | ||
| } | ||
|
|
||
| @mixin box-flex($value: 0.0) { | ||
| @include prefixer(box-flex, $value, webkit moz spec); | ||
| -ms-flex: $value; // IE 10 | ||
| } | ||
|
|
||
| @mixin box-flex-group($int: 1) { | ||
| @include prefixer(box-flex-group, $int, webkit moz spec); | ||
| } | ||
|
|
||
| // CSS3 Flexible Box Model and property defaults | ||
| // Unified attributes for 2009, 2011, and 2012 flavours. | ||
|
|
||
| // 2009 - display (box | inline-box) | ||
| // 2011 - display (flexbox | inline-flexbox) | ||
| // 2012 - display (flex | inline-flex) | ||
| @mixin display($value) { | ||
| // flex | inline-flex | ||
| @if $value == "flex" { | ||
| // 2009 | ||
| display: -webkit-box; | ||
| display: -moz-box; | ||
| display: box; | ||
|
|
||
| // 2012 | ||
| display: -webkit-flex; | ||
| display: -moz-flex; | ||
| display: -ms-flexbox; // 2011 (IE 10) | ||
| display: flex; | ||
| } | ||
|
|
||
| @else if $value == "inline-flex" { | ||
| display: -webkit-inline-box; | ||
| display: -moz-inline-box; | ||
| display: inline-box; | ||
|
|
||
| display: -webkit-inline-flex; | ||
| display: -moz-inline-flex; | ||
| display: -ms-inline-flexbox; | ||
| display: inline-flex; | ||
| } | ||
|
|
||
| @else { | ||
| display: $value; | ||
| } | ||
| } | ||
|
|
||
| // 2009 - box-flex (integer) | ||
| // 2011 - flex (decimal | width decimal) | ||
| // 2012 - flex (integer integer width) | ||
| @mixin flex($value) { | ||
|
|
||
| // Grab flex-grow for older browsers. | ||
| $flex-grow: nth($value, 1); | ||
|
|
||
| // 2009 | ||
| @include prefixer(box-flex, $flex-grow, webkit moz spec); | ||
|
|
||
| // 2011 (IE 10), 2012 | ||
| @include prefixer(flex, $value, webkit moz ms spec); | ||
| } | ||
|
|
||
| // 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis) | ||
| // - box-direction (normal | reverse) | ||
| // 2011 - flex-direction (row | row-reverse | column | column-reverse) | ||
| // 2012 - flex-direction (row | row-reverse | column | column-reverse) | ||
| @mixin flex-direction($value: row) { | ||
|
|
||
| // Alt values. | ||
| $value-2009: $value; | ||
| $value-2011: $value; | ||
| $direction: "normal"; | ||
|
|
||
| @if $value == row { | ||
| $value-2009: horizontal; | ||
| } | ||
|
|
||
| @else if $value == "row-reverse" { | ||
| $value-2009: horizontal; | ||
| $direction: reverse; | ||
| } | ||
|
|
||
| @else if $value == column { | ||
| $value-2009: vertical; | ||
| } | ||
|
|
||
| @else if $value == "column-reverse" { | ||
| $value-2009: vertical; | ||
| $direction: reverse; | ||
| } | ||
|
|
||
| // 2009 | ||
| @include prefixer(box-orient, $value-2009, webkit moz spec); | ||
| @if $direction == "reverse" { | ||
| @include prefixer(box-direction, $direction, webkit moz spec); | ||
| } | ||
|
|
||
| // 2012 | ||
| @include prefixer(flex-direction, $value, webkit moz spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-direction: $value; | ||
| } | ||
|
|
||
| // 2009 - box-lines (single | multiple) | ||
| // 2011 - flex-wrap (nowrap | wrap | wrap-reverse) | ||
| // 2012 - flex-wrap (nowrap | wrap | wrap-reverse) | ||
| @mixin flex-wrap($value: nowrap) { | ||
|
|
||
| // Alt values | ||
| $alt-value: $value; | ||
| @if $value == nowrap { | ||
| $alt-value: single; | ||
| } | ||
|
|
||
| @else if $value == wrap { | ||
| $alt-value: multiple; | ||
| } | ||
|
|
||
| @else if $value == "wrap-reverse" { | ||
| $alt-value: multiple; | ||
| } | ||
|
|
||
| @include prefixer(box-lines, $alt-value, webkit moz spec); | ||
| @include prefixer(flex-wrap, $value, webkit moz ms spec); | ||
| } | ||
|
|
||
| // 2009 - TODO: parse values into flex-direction/flex-wrap | ||
| // 2011 - TODO: parse values into flex-direction/flex-wrap | ||
| // 2012 - flex-flow (flex-direction || flex-wrap) | ||
| @mixin flex-flow($value) { | ||
| @include prefixer(flex-flow, $value, webkit moz spec); | ||
| } | ||
|
|
||
| // 2009 - box-ordinal-group (integer) | ||
| // 2011 - flex-order (integer) | ||
| // 2012 - order (integer) | ||
| @mixin order($int: 0) { | ||
| // 2009 | ||
| @include prefixer(box-ordinal-group, $int, webkit moz spec); | ||
|
|
||
| // 2012 | ||
| @include prefixer(order, $int, webkit moz spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-order: $int; | ||
| } | ||
|
|
||
| // 2012 - flex-grow (number) | ||
| @mixin flex-grow($number: 0) { | ||
| @include prefixer(flex-grow, $number, webkit moz spec); | ||
| -ms-flex-positive: $number; | ||
| } | ||
|
|
||
| // 2012 - flex-shrink (number) | ||
| @mixin flex-shrink($number: 1) { | ||
| @include prefixer(flex-shrink, $number, webkit moz spec); | ||
| -ms-flex-negative: $number; | ||
| } | ||
|
|
||
| // 2012 - flex-basis (number) | ||
| @mixin flex-basis($width: auto) { | ||
| @include prefixer(flex-basis, $width, webkit moz spec); | ||
| -ms-flex-preferred-size: $width; | ||
| } | ||
|
|
||
| // 2009 - box-pack (start | end | center | justify) | ||
| // 2011 - flex-pack (start | end | center | justify) | ||
| // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) | ||
| @mixin justify-content($value: flex-start) { | ||
|
|
||
| // Alt values. | ||
| $alt-value: $value; | ||
| @if $value == "flex-start" { | ||
| $alt-value: start; | ||
| } | ||
|
|
||
| @else if $value == "flex-end" { | ||
| $alt-value: end; | ||
| } | ||
|
|
||
| @else if $value == "space-between" { | ||
| $alt-value: justify; | ||
| } | ||
|
|
||
| @else if $value == "space-around" { | ||
| $alt-value: distribute; | ||
| } | ||
|
|
||
| // 2009 | ||
| @include prefixer(box-pack, $alt-value, webkit moz spec); | ||
|
|
||
| // 2012 | ||
| @include prefixer(justify-content, $value, webkit moz ms o spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-pack: $alt-value; | ||
| } | ||
|
|
||
| // 2009 - box-align (start | end | center | baseline | stretch) | ||
| // 2011 - flex-align (start | end | center | baseline | stretch) | ||
| // 2012 - align-items (flex-start | flex-end | center | baseline | stretch) | ||
| @mixin align-items($value: stretch) { | ||
|
|
||
| $alt-value: $value; | ||
|
|
||
| @if $value == "flex-start" { | ||
| $alt-value: start; | ||
| } | ||
|
|
||
| @else if $value == "flex-end" { | ||
| $alt-value: end; | ||
| } | ||
|
|
||
| // 2009 | ||
| @include prefixer(box-align, $alt-value, webkit moz spec); | ||
|
|
||
| // 2012 | ||
| @include prefixer(align-items, $value, webkit moz ms o spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-align: $alt-value; | ||
| } | ||
|
|
||
| // 2011 - flex-item-align (auto | start | end | center | baseline | stretch) | ||
| // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) | ||
| @mixin align-self($value: auto) { | ||
|
|
||
| $value-2011: $value; | ||
| @if $value == "flex-start" { | ||
| $value-2011: start; | ||
| } | ||
|
|
||
| @else if $value == "flex-end" { | ||
| $value-2011: end; | ||
| } | ||
|
|
||
| // 2012 | ||
| @include prefixer(align-self, $value, webkit moz spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-item-align: $value-2011; | ||
| } | ||
|
|
||
| // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) | ||
| // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) | ||
| @mixin align-content($value: stretch) { | ||
|
|
||
| $value-2011: $value; | ||
| @if $value == "flex-start" { | ||
| $value-2011: start; | ||
| } | ||
|
|
||
| @else if $value == "flex-end" { | ||
| $value-2011: end; | ||
| } | ||
|
|
||
| @else if $value == "space-between" { | ||
| $value-2011: justify; | ||
| } | ||
|
|
||
| @else if $value == "space-around" { | ||
| $value-2011: distribute; | ||
| } | ||
|
|
||
| // 2012 | ||
| @include prefixer(align-content, $value, webkit moz spec); | ||
|
|
||
| // 2011 (IE 10) | ||
| -ms-flex-line-pack: $value-2011; | ||
| } |
| @@ -0,0 +1,24 @@ | ||
| @mixin font-face( | ||
| $font-family, | ||
| $file-path, | ||
| $weight: normal, | ||
| $style: normal, | ||
| $asset-pipeline: $asset-pipeline, | ||
| $file-formats: eot woff2 woff ttf svg) { | ||
|
|
||
| $font-url-prefix: font-url-prefixer($asset-pipeline); | ||
|
|
||
| @font-face { | ||
| font-family: $font-family; | ||
| font-style: $style; | ||
| font-weight: $weight; | ||
|
|
||
| src: font-source-declaration( | ||
| $font-family, | ||
| $file-path, | ||
| $asset-pipeline, | ||
| $file-formats, | ||
| $font-url-prefix | ||
| ); | ||
| } | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| // Font feature settings mixin and property default. | ||
| // Examples: @include font-feature-settings("liga"); | ||
| // @include font-feature-settings("lnum" false); | ||
| // @include font-feature-settings("pnum" 1, "kern" 0); | ||
| // @include font-feature-settings("ss01", "ss02"); | ||
|
|
||
| @mixin font-feature-settings($settings...) { | ||
| @if length($settings) == 0 { $settings: none; } | ||
| @include prefixer(font-feature-settings, $settings, webkit moz ms spec); | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) | ||
| @mixin hidpi($ratio: 1.3) { | ||
| @media only screen and (-webkit-min-device-pixel-ratio: $ratio), | ||
| only screen and (min--moz-device-pixel-ratio: $ratio), | ||
| only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), | ||
| only screen and (min-resolution: round($ratio * 96dpi)), | ||
| only screen and (min-resolution: $ratio * 1dppx) { | ||
| @content; | ||
| } | ||
| } |
| @@ -0,0 +1,4 @@ | ||
| @mixin hyphens($hyphenation: none) { | ||
| // none | manual | auto | ||
| @include prefixer(hyphens, $hyphenation, webkit moz ms spec); | ||
| } |
| @@ -0,0 +1,14 @@ | ||
| @mixin image-rendering ($mode:auto) { | ||
|
|
||
| @if ($mode == crisp-edges) { | ||
| -ms-interpolation-mode: nearest-neighbor; // IE8+ | ||
| image-rendering: -moz-crisp-edges; | ||
| image-rendering: -o-crisp-edges; | ||
| image-rendering: -webkit-optimize-contrast; | ||
| image-rendering: crisp-edges; | ||
| } | ||
|
|
||
| @else { | ||
| image-rendering: $mode; | ||
| } | ||
| } |
| @@ -0,0 +1,35 @@ | ||
| // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content | ||
| @mixin keyframes($name) { | ||
| $original-prefix-for-webkit: $prefix-for-webkit; | ||
| $original-prefix-for-mozilla: $prefix-for-mozilla; | ||
| $original-prefix-for-microsoft: $prefix-for-microsoft; | ||
| $original-prefix-for-opera: $prefix-for-opera; | ||
| $original-prefix-for-spec: $prefix-for-spec; | ||
|
|
||
| @if $original-prefix-for-webkit { | ||
| @include disable-prefix-for-all(); | ||
| $prefix-for-webkit: true !global; | ||
| @-webkit-keyframes #{$name} { | ||
| @content; | ||
| } | ||
| } | ||
| @if $original-prefix-for-mozilla { | ||
| @include disable-prefix-for-all(); | ||
| $prefix-for-mozilla: true !global; | ||
| @-moz-keyframes #{$name} { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| $prefix-for-webkit: $original-prefix-for-webkit !global; | ||
| $prefix-for-mozilla: $original-prefix-for-mozilla !global; | ||
| $prefix-for-microsoft: $original-prefix-for-microsoft !global; | ||
| $prefix-for-opera: $original-prefix-for-opera !global; | ||
| $prefix-for-spec: $original-prefix-for-spec !global; | ||
|
|
||
| @if $original-prefix-for-spec { | ||
| @keyframes #{$name} { | ||
| @content; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,38 @@ | ||
| @mixin linear-gradient($pos, $G1, $G2: null, | ||
| $G3: null, $G4: null, | ||
| $G5: null, $G6: null, | ||
| $G7: null, $G8: null, | ||
| $G9: null, $G10: null, | ||
| $fallback: null) { | ||
| // Detect what type of value exists in $pos | ||
| $pos-type: type-of(nth($pos, 1)); | ||
| $pos-spec: null; | ||
| $pos-degree: null; | ||
|
|
||
| // If $pos is missing from mixin, reassign vars and add default position | ||
| @if ($pos-type == color) or (nth($pos, 1) == "transparent") { | ||
| $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; | ||
| $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; | ||
| $pos: null; | ||
| } | ||
|
|
||
| @if $pos { | ||
| $positions: _linear-positions-parser($pos); | ||
| $pos-degree: nth($positions, 1); | ||
| $pos-spec: nth($positions, 2); | ||
| } | ||
|
|
||
| $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; | ||
|
|
||
| // Set $G1 as the default fallback color | ||
| $fallback-color: nth($G1, 1); | ||
|
|
||
| // If $fallback is a color use that color as the fallback color | ||
| @if (type-of($fallback) == color) or ($fallback == "transparent") { | ||
| $fallback-color: $fallback; | ||
| } | ||
|
|
||
| background-color: $fallback-color; | ||
| background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome | ||
| background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); | ||
| } |
| @@ -0,0 +1,8 @@ | ||
| @mixin perspective($depth: none) { | ||
| // none | <length> | ||
| @include prefixer(perspective, $depth, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin perspective-origin($value: 50% 50%) { | ||
| @include prefixer(perspective-origin, $value, webkit moz spec); | ||
| } |
| @@ -0,0 +1,8 @@ | ||
| @mixin placeholder { | ||
| $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; | ||
| @each $placeholder in $placeholders { | ||
| &:#{$placeholder}-placeholder { | ||
| @content; | ||
| } | ||
| } | ||
| } |
| @@ -0,0 +1,39 @@ | ||
| // Requires Sass 3.1+ | ||
| @mixin radial-gradient($G1, $G2, | ||
| $G3: null, $G4: null, | ||
| $G5: null, $G6: null, | ||
| $G7: null, $G8: null, | ||
| $G9: null, $G10: null, | ||
| $pos: null, | ||
| $shape-size: null, | ||
| $fallback: null) { | ||
|
|
||
| $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); | ||
| $G1: nth($data, 1); | ||
| $G2: nth($data, 2); | ||
| $pos: nth($data, 3); | ||
| $shape-size: nth($data, 4); | ||
|
|
||
| $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; | ||
|
|
||
| // Strip deprecated cover/contain for spec | ||
| $shape-size-spec: _shape-size-stripper($shape-size); | ||
|
|
||
| // Set $G1 as the default fallback color | ||
| $first-color: nth($full, 1); | ||
| $fallback-color: nth($first-color, 1); | ||
|
|
||
| @if (type-of($fallback) == color) or ($fallback == "transparent") { | ||
| $fallback-color: $fallback; | ||
| } | ||
|
|
||
| // Add Commas and spaces | ||
| $shape-size: if($shape-size, '#{$shape-size}, ', null); | ||
| $pos: if($pos, '#{$pos}, ', null); | ||
| $pos-spec: if($pos, 'at #{$pos}', null); | ||
| $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); | ||
|
|
||
| background-color: $fallback-color; | ||
| background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); | ||
| background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); | ||
| } |
| @@ -0,0 +1,14 @@ | ||
| @mixin selection { | ||
| $before-colons: ""; | ||
|
|
||
| @if & { | ||
| $before-colons: "&" | ||
| } | ||
|
|
||
| #{$before-colons}::selection { | ||
| @content; | ||
| } | ||
| #{$before-colons}::-moz-selection { | ||
| @content; | ||
| } | ||
| } |
| @@ -0,0 +1,19 @@ | ||
| @mixin text-decoration($value) { | ||
| // <text-decoration-line> || <text-decoration-style> || <text-decoration-color> | ||
| @include prefixer(text-decoration, $value, moz); | ||
| } | ||
|
|
||
| @mixin text-decoration-line($line: none) { | ||
| // none || underline || overline || line-through | ||
| @include prefixer(text-decoration-line, $line, moz); | ||
| } | ||
|
|
||
| @mixin text-decoration-style($style: solid) { | ||
| // solid || double || dotted || dashed || wavy | ||
| @include prefixer(text-decoration-style, $style, moz webkit); | ||
| } | ||
|
|
||
| @mixin text-decoration-color($color: currentColor) { | ||
| // currentColor || <color> | ||
| @include prefixer(text-decoration-color, $color, moz); | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| @mixin transform($property: none) { | ||
| // none | <transform-function> | ||
| @include prefixer(transform, $property, webkit moz ms o spec); | ||
| } | ||
|
|
||
| @mixin transform-origin($axes: 50%) { | ||
| // x-axis - left | center | right | length | % | ||
| // y-axis - top | center | bottom | length | % | ||
| // z-axis - length | ||
| @include prefixer(transform-origin, $axes, webkit moz ms o spec); | ||
| } | ||
|
|
||
| @mixin transform-style ($style: flat) { | ||
| @include prefixer(transform-style, $style, webkit moz ms o spec); | ||
| } |
| @@ -0,0 +1,77 @@ | ||
| // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. | ||
| // Example: @include transition (all 2s ease-in-out); | ||
| // @include transition (opacity 1s ease-in 2s, width 2s ease-out); | ||
| // @include transition-property (transform, opacity); | ||
|
|
||
| @mixin transition ($properties...) { | ||
| // Fix for vendor-prefix transform property | ||
| $needs-prefixes: false; | ||
| $webkit: (); | ||
| $moz: (); | ||
| $spec: (); | ||
|
|
||
| // Create lists for vendor-prefixed transform | ||
| @each $list in $properties { | ||
| @if nth($list, 1) == "transform" { | ||
| $needs-prefixes: true; | ||
| $list1: -webkit-transform; | ||
| $list2: -moz-transform; | ||
| $list3: (); | ||
|
|
||
| @each $var in $list { | ||
| $list3: join($list3, $var); | ||
|
|
||
| @if $var != "transform" { | ||
| $list1: join($list1, $var); | ||
| $list2: join($list2, $var); | ||
| } | ||
| } | ||
|
|
||
| $webkit: append($webkit, $list1); | ||
| $moz: append($moz, $list2); | ||
| $spec: append($spec, $list3); | ||
| } | ||
|
|
||
| // Create lists for non-prefixed transition properties | ||
| @else { | ||
| $webkit: append($webkit, $list, comma); | ||
| $moz: append($moz, $list, comma); | ||
| $spec: append($spec, $list, comma); | ||
| } | ||
| } | ||
|
|
||
| @if $needs-prefixes { | ||
| -webkit-transition: $webkit; | ||
| -moz-transition: $moz; | ||
| transition: $spec; | ||
| } | ||
| @else { | ||
| @if length($properties) >= 1 { | ||
| @include prefixer(transition, $properties, webkit moz spec); | ||
| } | ||
|
|
||
| @else { | ||
| $properties: all 0.15s ease-out 0s; | ||
| @include prefixer(transition, $properties, webkit moz spec); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin transition-property ($properties...) { | ||
| -webkit-transition-property: transition-property-names($properties, 'webkit'); | ||
| -moz-transition-property: transition-property-names($properties, 'moz'); | ||
| transition-property: transition-property-names($properties, false); | ||
| } | ||
|
|
||
| @mixin transition-duration ($times...) { | ||
| @include prefixer(transition-duration, $times, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin transition-timing-function ($motions...) { | ||
| // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | ||
| @include prefixer(transition-timing-function, $motions, webkit moz spec); | ||
| } | ||
|
|
||
| @mixin transition-delay ($times...) { | ||
| @include prefixer(transition-delay, $times, webkit moz spec); | ||
| } |
| @@ -0,0 +1,3 @@ | ||
| @mixin user-select($arg: none) { | ||
| @include prefixer(user-select, $arg, webkit moz ms spec); | ||
| } |
| @@ -0,0 +1,11 @@ | ||
| @function assign-inputs($inputs, $pseudo: null) { | ||
| $list : (); | ||
|
|
||
| @each $input in $inputs { | ||
| $input: unquote($input); | ||
| $input: if($pseudo, $input + ":" + $pseudo, $input); | ||
| $list: append($list, $input, comma); | ||
| } | ||
|
|
||
| @return $list; | ||
| } |
| @@ -0,0 +1,13 @@ | ||
| // Programatically determines whether a color is light or dark | ||
| // Returns a boolean | ||
| // More details here http://robots.thoughtbot.com/closer-look-color-lightness | ||
|
|
||
| @function is-light($hex-color) { | ||
| $-local-red: red(rgba($hex-color, 1.0)); | ||
| $-local-green: green(rgba($hex-color, 1.0)); | ||
| $-local-blue: blue(rgba($hex-color, 1.0)); | ||
|
|
||
| $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; | ||
|
|
||
| @return $-local-lightness > .6; | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Test a Sass list to see if it contains a defined value | ||
| // Allows for checking if a list contains several values at once | ||
|
|
||
| @function contains($list, $values...) { | ||
| @each $value in $values { | ||
| @if type-of(index($list, $value)) != "number" { | ||
| @return false; | ||
| } | ||
| } | ||
|
|
||
| @return true; | ||
| } |
| @@ -0,0 +1,7 @@ | ||
| // Check for a valid length | ||
|
|
||
| @function is-length($value) { | ||
| @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == 'calc' | ||
| or index(auto inherit initial 0, $value) | ||
| or (type-of($value) == "number" and not(unitless($value)))); | ||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Check for a valid size | ||
|
|
||
| @function is-size($value) { | ||
| @return is-length($value) | ||
| or contains("fill" "fit-content" "min-content" "max-content", $value); | ||
| } |
| @@ -0,0 +1,69 @@ | ||
| // Scaling Variables | ||
| $golden: 1.618; | ||
| $minor-second: 1.067; | ||
| $major-second: 1.125; | ||
| $minor-third: 1.2; | ||
| $major-third: 1.25; | ||
| $perfect-fourth: 1.333; | ||
| $augmented-fourth: 1.414; | ||
| $perfect-fifth: 1.5; | ||
| $minor-sixth: 1.6; | ||
| $major-sixth: 1.667; | ||
| $minor-seventh: 1.778; | ||
| $major-seventh: 1.875; | ||
| $octave: 2; | ||
| $major-tenth: 2.5; | ||
| $major-eleventh: 2.667; | ||
| $major-twelfth: 3; | ||
| $double-octave: 4; | ||
|
|
||
| $modular-scale-ratio: $perfect-fourth !default; | ||
| $modular-scale-base: em($em-base) !default; | ||
|
|
||
| @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { | ||
| $v1: nth($value, 1); | ||
| $v2: nth($value, length($value)); | ||
| $value: $v1; | ||
|
|
||
| // scale $v2 to just above $v1 | ||
| @while $v2 > $v1 { | ||
| $v2: ($v2 / $ratio); // will be off-by-1 | ||
| } | ||
| @while $v2 < $v1 { | ||
| $v2: ($v2 * $ratio); // will fix off-by-1 | ||
| } | ||
|
|
||
| // check AFTER scaling $v2 to prevent double-counting corner-case | ||
| $double-stranded: $v2 > $v1; | ||
|
|
||
| @if $increment > 0 { | ||
| @for $i from 1 through $increment { | ||
| @if $double-stranded and ($v1 * $ratio) > $v2 { | ||
| $value: $v2; | ||
| $v2: ($v2 * $ratio); | ||
| } @else { | ||
| $v1: ($v1 * $ratio); | ||
| $value: $v1; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @if $increment < 0 { | ||
| // adjust $v2 to just below $v1 | ||
| @if $double-stranded { | ||
| $v2: ($v2 / $ratio); | ||
| } | ||
|
|
||
| @for $i from $increment through -1 { | ||
| @if $double-stranded and ($v1 / $ratio) < $v2 { | ||
| $value: $v2; | ||
| $v2: ($v2 / $ratio); | ||
| } @else { | ||
| $v1: ($v1 / $ratio); | ||
| $value: $v1; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @return $value; | ||
| } |
| @@ -0,0 +1,13 @@ | ||
| // Convert pixels to ems | ||
| // eg. for a relational value of 12px write em(12) when the parent is 16px | ||
| // if the parent is another value say 24px write em(12, 24) | ||
|
|
||
| @function em($pxval, $base: $em-base) { | ||
| @if not unitless($pxval) { | ||
| $pxval: strip-units($pxval); | ||
| } | ||
| @if not unitless($base) { | ||
| $base: strip-units($base); | ||
| } | ||
| @return ($pxval / $base) * 1em; | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| // Convert pixels to rems | ||
| // eg. for a relational value of 12px write rem(12) | ||
| // Assumes $em-base is the font-size of <html> | ||
|
|
||
| @function rem($pxval) { | ||
| @if not unitless($pxval) { | ||
| $pxval: strip-units($pxval); | ||
| } | ||
|
|
||
| $base: $em-base; | ||
| @if not unitless($base) { | ||
| $base: strip-units($base); | ||
| } | ||
| @return ($pxval / $base) * 1rem; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Srtips the units from a value. e.g. 12px -> 12 | ||
|
|
||
| @function strip-units($val) { | ||
| @return ($val / ($val * 0 + 1)); | ||
| } |
| @@ -0,0 +1,9 @@ | ||
| // Add percentage of white to a color | ||
| @function tint($color, $percent){ | ||
| @return mix(white, $color, $percent); | ||
| } | ||
|
|
||
| // Add percentage of black to a color | ||
| @function shade($color, $percent){ | ||
| @return mix(black, $color, $percent); | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| // Return vendor-prefixed property names if appropriate | ||
| // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background | ||
| //************************************************************************// | ||
| @function transition-property-names($props, $vendor: false) { | ||
| $new-props: (); | ||
|
|
||
| @each $prop in $props { | ||
| $new-props: append($new-props, transition-property-name($prop, $vendor), comma); | ||
| } | ||
|
|
||
| @return $new-props; | ||
| } | ||
|
|
||
| @function transition-property-name($prop, $vendor: false) { | ||
| // put other properties that need to be prefixed here aswell | ||
| @if $vendor and $prop == transform { | ||
| @return unquote('-'+$vendor+'-'+$prop); | ||
| } | ||
| @else { | ||
| @return $prop; | ||
| } | ||
| } |
| @@ -0,0 +1,17 @@ | ||
| // Convert shorthand to the 4-value syntax | ||
|
|
||
| @function unpack($shorthand) { | ||
| @if length($shorthand) == 1 { | ||
| @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); | ||
| } | ||
| @else if length($shorthand) == 2 { | ||
| @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); | ||
| } | ||
| @else if length($shorthand) == 3 { | ||
| @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); | ||
| } | ||
| @else { | ||
| @return $shorthand; | ||
| } | ||
| } | ||
|
|
| @@ -0,0 +1,15 @@ | ||
| //************************************************************************// | ||
| // Helper function for str-to-num fn. | ||
| // Source: http://sassmeister.com/gist/9647408 | ||
| //************************************************************************// | ||
| @function _convert-units($number, $unit) { | ||
| $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; | ||
| $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; | ||
| $index: index($strings, $unit); | ||
|
|
||
| @if not $index { | ||
| @warn "Unknown unit `#{$unit}`."; | ||
| @return false; | ||
| } | ||
| @return $number * nth($units, $index); | ||
| } |
| @@ -0,0 +1,43 @@ | ||
| // Used for creating the source string for fonts using @font-face | ||
| // Reference: http://goo.gl/Ru1bKP | ||
|
|
||
| @function font-url-prefixer($asset-pipeline) { | ||
| @if $asset-pipeline == true { | ||
| @return font-url; | ||
| } @else { | ||
| @return url; | ||
| } | ||
| } | ||
|
|
||
| @function font-source-declaration( | ||
| $font-family, | ||
| $file-path, | ||
| $asset-pipeline, | ||
| $file-formats, | ||
| $font-url) { | ||
|
|
||
| $src: null; | ||
|
|
||
| $formats-map: ( | ||
| eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), | ||
| woff2: "#{$file-path}.woff2" format("woff2"), | ||
| woff: "#{$file-path}.woff" format("woff"), | ||
| ttf: "#{$file-path}.ttf" format("truetype"), | ||
| svg: "#{$file-path}.svg##{$font-family}" format("svg") | ||
| ); | ||
|
|
||
| @each $key, $values in $formats-map { | ||
| @if contains($file-formats, $key) { | ||
| $file-path: nth($values, 1); | ||
| $font-format: nth($values, 2); | ||
|
|
||
| @if $asset-pipeline == true { | ||
| $src: append($src, font-url($file-path) $font-format, comma); | ||
| } @else { | ||
| $src: append($src, url($file-path) $font-format, comma); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @return $src; | ||
| } |
| @@ -0,0 +1,13 @@ | ||
| @function _gradient-positions-parser($gradient-type, $gradient-positions) { | ||
| @if $gradient-positions | ||
| and ($gradient-type == linear) | ||
| and (type-of($gradient-positions) != color) { | ||
| $gradient-positions: _linear-positions-parser($gradient-positions); | ||
| } | ||
| @else if $gradient-positions | ||
| and ($gradient-type == radial) | ||
| and (type-of($gradient-positions) != color) { | ||
| $gradient-positions: _radial-positions-parser($gradient-positions); | ||
| } | ||
| @return $gradient-positions; | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| // Check for a valid number | ||
|
|
||
| @function _is-num($value) { | ||
| @return contains('0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9, $value); | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| // Private function for linear-gradient-parser | ||
| @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { | ||
| $offset: null; | ||
| $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); | ||
| $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); | ||
|
|
||
| @if ($unit-long == "grad") or | ||
| ($unit-long == "turn") { | ||
| $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); | ||
| } | ||
|
|
||
| @else if ($unit-short == "deg") or | ||
| ($unit-short == "rad") { | ||
| $offset: if($unit-short == "deg", -90 * 3, 1.6rad); | ||
| } | ||
|
|
||
| @if $offset { | ||
| $num: _str-to-num($first-val); | ||
|
|
||
| @return ( | ||
| webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, | ||
| spec-image: $image | ||
| ); | ||
| } | ||
| } |
| @@ -0,0 +1,41 @@ | ||
| @function _linear-gradient-parser($image) { | ||
| $image: unquote($image); | ||
| $gradients: (); | ||
| $start: str-index($image, "("); | ||
| $end: str-index($image, ","); | ||
| $first-val: str-slice($image, $start + 1, $end - 1); | ||
|
|
||
| $prefix: str-slice($image, 0, $start); | ||
| $suffix: str-slice($image, $end, str-length($image)); | ||
|
|
||
| $has-multiple-vals: str-index($first-val, " "); | ||
| $has-single-position: unquote(_position-flipper($first-val) + ""); | ||
| $has-angle: _is-num(str-slice($first-val, 0, 0)); | ||
|
|
||
| @if $has-multiple-vals { | ||
| $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); | ||
| } | ||
|
|
||
| @else if $has-single-position != "" { | ||
| $pos: unquote($has-single-position + ""); | ||
|
|
||
| $gradients: ( | ||
| webkit-image: -webkit- + $image, | ||
| spec-image: $prefix + "to " + $pos + $suffix | ||
| ); | ||
| } | ||
|
|
||
| @else if $has-angle { | ||
| // Rotate degree for webkit | ||
| $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); | ||
| } | ||
|
|
||
| @else { | ||
| $gradients: ( | ||
| webkit-image: -webkit- + $image, | ||
| spec-image: $image | ||
| ); | ||
| } | ||
|
|
||
| @return $gradients; | ||
| } |
| @@ -0,0 +1,61 @@ | ||
| @function _linear-positions-parser($pos) { | ||
| $type: type-of(nth($pos, 1)); | ||
| $spec: null; | ||
| $degree: null; | ||
| $side: null; | ||
| $corner: null; | ||
| $length: length($pos); | ||
| // Parse Side and corner positions | ||
| @if ($length > 1) { | ||
| @if nth($pos, 1) == "to" { // Newer syntax | ||
| $side: nth($pos, 2); | ||
|
|
||
| @if $length == 2 { // eg. to top | ||
| // Swap for backwards compatability | ||
| $degree: _position-flipper(nth($pos, 2)); | ||
| } | ||
| @else if $length == 3 { // eg. to top left | ||
| $corner: nth($pos, 3); | ||
| } | ||
| } | ||
| @else if $length == 2 { // Older syntax ("top left") | ||
| $side: _position-flipper(nth($pos, 1)); | ||
| $corner: _position-flipper(nth($pos, 2)); | ||
| } | ||
|
|
||
| @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { | ||
| $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); | ||
| } | ||
| @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { | ||
| $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); | ||
| } | ||
| @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { | ||
| $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); | ||
| } | ||
| @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { | ||
| $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); | ||
| } | ||
| $spec: to $side $corner; | ||
| } | ||
| @else if $length == 1 { | ||
| // Swap for backwards compatability | ||
| @if $type == string { | ||
| $degree: $pos; | ||
| $spec: to _position-flipper($pos); | ||
| } | ||
| @else { | ||
| $degree: -270 - $pos; //rotate the gradient opposite from spec | ||
| $spec: $pos; | ||
| } | ||
| } | ||
| $degree: unquote($degree + ","); | ||
| $spec: unquote($spec + ","); | ||
| @return $degree $spec; | ||
| } | ||
|
|
||
| @function _position-flipper($pos) { | ||
| @return if($pos == left, right, null) | ||
| if($pos == right, left, null) | ||
| if($pos == top, bottom, null) | ||
| if($pos == bottom, top, null); | ||
| } |
| @@ -0,0 +1,31 @@ | ||
| // Private function for linear-gradient-parser | ||
| @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { | ||
| $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); | ||
| $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); | ||
| $val-3: null; | ||
| $has-val-3: str-index($val-2, " "); | ||
|
|
||
| @if $has-val-3 { | ||
| $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); | ||
| $val-2: str-slice($val-2, 0, $has-val-3 - 1); | ||
| } | ||
|
|
||
| $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); | ||
| $pos: unquote($pos + ""); | ||
|
|
||
| // Use old spec for webkit | ||
| @if $val-1 == "to" { | ||
| @return ( | ||
| webkit-image: -webkit- + $prefix + $pos + $suffix, | ||
| spec-image: $image | ||
| ); | ||
| } | ||
|
|
||
| // Bring the code up to spec | ||
| @else { | ||
| @return ( | ||
| webkit-image: -webkit- + $image, | ||
| spec-image: $prefix + "to " + $pos + $suffix | ||
| ); | ||
| } | ||
| } |
| @@ -0,0 +1,69 @@ | ||
| @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { | ||
| @each $value in $G1, $G2 { | ||
| $first-val: nth($value, 1); | ||
| $pos-type: type-of($first-val); | ||
| $spec-at-index: null; | ||
|
|
||
| // Determine if spec was passed to mixin | ||
| @if type-of($value) == list { | ||
| $spec-at-index: if(index($value, at), index($value, at), false); | ||
| } | ||
| @if $spec-at-index { | ||
| @if $spec-at-index > 1 { | ||
| @for $i from 1 through ($spec-at-index - 1) { | ||
| $shape-size: $shape-size nth($value, $i); | ||
| } | ||
| @for $i from ($spec-at-index + 1) through length($value) { | ||
| $pos: $pos nth($value, $i); | ||
| } | ||
| } | ||
| @else if $spec-at-index == 1 { | ||
| @for $i from ($spec-at-index + 1) through length($value) { | ||
| $pos: $pos nth($value, $i); | ||
| } | ||
| } | ||
| $G1: null; | ||
| } | ||
|
|
||
| // If not spec calculate correct values | ||
| @else { | ||
| @if ($pos-type != color) or ($first-val != "transparent") { | ||
| @if ($pos-type == number) | ||
| or ($first-val == "center") | ||
| or ($first-val == "top") | ||
| or ($first-val == "right") | ||
| or ($first-val == "bottom") | ||
| or ($first-val == "left") { | ||
|
|
||
| $pos: $value; | ||
|
|
||
| @if $pos == $G1 { | ||
| $G1: null; | ||
| } | ||
| } | ||
|
|
||
| @else if | ||
| ($first-val == "ellipse") | ||
| or ($first-val == "circle") | ||
| or ($first-val == "closest-side") | ||
| or ($first-val == "closest-corner") | ||
| or ($first-val == "farthest-side") | ||
| or ($first-val == "farthest-corner") | ||
| or ($first-val == "contain") | ||
| or ($first-val == "cover") { | ||
|
|
||
| $shape-size: $value; | ||
|
|
||
| @if $value == $G1 { | ||
| $G1: null; | ||
| } | ||
|
|
||
| @else if $value == $G2 { | ||
| $G2: null; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @return $G1, $G2, $pos, $shape-size; | ||
| } |
| @@ -0,0 +1,50 @@ | ||
| @function _radial-gradient-parser($image) { | ||
| $image: unquote($image); | ||
| $gradients: (); | ||
| $start: str-index($image, "("); | ||
| $end: str-index($image, ","); | ||
| $first-val: str-slice($image, $start + 1, $end - 1); | ||
|
|
||
| $prefix: str-slice($image, 0, $start); | ||
| $suffix: str-slice($image, $end, str-length($image)); | ||
|
|
||
| $is-spec-syntax: str-index($first-val, "at"); | ||
|
|
||
| @if $is-spec-syntax and $is-spec-syntax > 1 { | ||
| $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); | ||
| $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); | ||
| $pos: append($pos, $keyword, comma); | ||
|
|
||
| $gradients: ( | ||
| webkit-image: -webkit- + $prefix + $pos + $suffix, | ||
| spec-image: $image | ||
| ) | ||
| } | ||
|
|
||
| @else if $is-spec-syntax == 1 { | ||
| $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); | ||
|
|
||
| $gradients: ( | ||
| webkit-image: -webkit- + $prefix + $pos + $suffix, | ||
| spec-image: $image | ||
| ) | ||
| } | ||
|
|
||
| @else if str-index($image, "cover") or str-index($image, "contain") { | ||
| @warn "Radial-gradient needs to be updated to conform to latest spec."; | ||
|
|
||
| $gradients: ( | ||
| webkit-image: null, | ||
| spec-image: $image | ||
| ) | ||
| } | ||
|
|
||
| @else { | ||
| $gradients: ( | ||
| webkit-image: -webkit- + $image, | ||
| spec-image: $image | ||
| ) | ||
| } | ||
|
|
||
| @return $gradients; | ||
| } |
| @@ -0,0 +1,18 @@ | ||
| @function _radial-positions-parser($gradient-pos) { | ||
| $shape-size: nth($gradient-pos, 1); | ||
| $pos: nth($gradient-pos, 2); | ||
| $shape-size-spec: _shape-size-stripper($shape-size); | ||
|
|
||
| $pre-spec: unquote(if($pos, "#{$pos}, ", null)) | ||
| unquote(if($shape-size, "#{$shape-size},", null)); | ||
| $pos-spec: if($pos, "at #{$pos}", null); | ||
|
|
||
| $spec: "#{$shape-size-spec} #{$pos-spec}"; | ||
|
|
||
| // Add comma | ||
| @if ($spec != ' ') { | ||
| $spec: "#{$spec}," | ||
| } | ||
|
|
||
| @return $pre-spec $spec; | ||
| } |
| @@ -0,0 +1,26 @@ | ||
| // User for linear and radial gradients within background-image or border-image properties | ||
|
|
||
| @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { | ||
| $pre-spec: null; | ||
| $spec: null; | ||
| $vendor-gradients: null; | ||
| @if $gradient-type == linear { | ||
| @if $gradient-positions { | ||
| $pre-spec: nth($gradient-positions, 1); | ||
| $spec: nth($gradient-positions, 2); | ||
| } | ||
| } | ||
| @else if $gradient-type == radial { | ||
| $pre-spec: nth($gradient-positions, 1); | ||
| $spec: nth($gradient-positions, 2); | ||
| } | ||
|
|
||
| @if $vendor { | ||
| $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); | ||
| } | ||
| @else if $vendor == false { | ||
| $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; | ||
| $vendor-gradients: unquote($vendor-gradients); | ||
| } | ||
| @return $vendor-gradients; | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| @function _shape-size-stripper($shape-size) { | ||
| $shape-size-spec: null; | ||
| @each $value in $shape-size { | ||
| @if ($value == "cover") or ($value == "contain") { | ||
| $value: null; | ||
| } | ||
| $shape-size-spec: "#{$shape-size-spec} #{$value}"; | ||
| } | ||
| @return $shape-size-spec; | ||
| } |
| @@ -0,0 +1,50 @@ | ||
| //************************************************************************// | ||
| // Helper function for linear/radial-gradient-parsers. | ||
| // Source: http://sassmeister.com/gist/9647408 | ||
| //************************************************************************// | ||
| @function _str-to-num($string) { | ||
| // Matrices | ||
| $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; | ||
| $numbers: 0 1 2 3 4 5 6 7 8 9; | ||
|
|
||
| // Result | ||
| $result: 0; | ||
| $divider: 0; | ||
| $minus: false; | ||
|
|
||
| // Looping through all characters | ||
| @for $i from 1 through str-length($string) { | ||
| $character: str-slice($string, $i, $i); | ||
| $index: index($strings, $character); | ||
|
|
||
| @if $character == '-' { | ||
| $minus: true; | ||
| } | ||
|
|
||
| @else if $character == '.' { | ||
| $divider: 1; | ||
| } | ||
|
|
||
| @else { | ||
| @if not $index { | ||
| $result: if($minus, $result * -1, $result); | ||
| @return _convert-units($result, str-slice($string, $i)); | ||
| } | ||
|
|
||
| $number: nth($numbers, $index); | ||
|
|
||
| @if $divider == 0 { | ||
| $result: $result * 10; | ||
| } | ||
|
|
||
| @else { | ||
| // Move the decimal dot to the left | ||
| $divider: $divider * 10; | ||
| $number: $number / $divider; | ||
| } | ||
|
|
||
| $result: $result + $number; | ||
| } | ||
| } | ||
| @return if($minus, $result * -1, $result); | ||
| } |
| @@ -0,0 +1 @@ | ||
| $asset-pipeline: false !default; |
| @@ -0,0 +1,6 @@ | ||
| // Variable settings for /addons/prefixer.scss | ||
| $prefix-for-webkit: true !default; | ||
| $prefix-for-mozilla: true !default; | ||
| $prefix-for-microsoft: true !default; | ||
| $prefix-for-opera: true !default; | ||
| $prefix-for-spec: true !default; // required for keyframe mixin |
| @@ -0,0 +1 @@ | ||
| $em-base: 16px !default; |
| @@ -0,0 +1,26 @@ | ||
| @charset "UTF-8"; | ||
| // Neat 2.0.0 | ||
| // http://neat.bourbon.io | ||
| // Copyright 2012 thoughtbot, inc. | ||
| // MIT License | ||
|
|
||
| @import "neat/settings/settings"; | ||
|
|
||
| @import "neat/functions/retrieve-neat-settings"; | ||
| @import "neat/functions/neat-column-default"; | ||
| @import "neat/functions/neat-column-width"; | ||
| @import "neat/functions/neat-column-ratio"; | ||
| @import "neat/functions/neat-float-direction"; | ||
| @import "neat/functions/neat-merge-defaults"; | ||
| @import "neat/functions/neat-opposite-direction"; | ||
| @import "neat/functions/neat-parse-columns"; | ||
| @import "neat/functions/neat-parse-media"; | ||
| @import "neat/functions/neat-append-grid-visual"; | ||
|
|
||
| @import "neat/mixins/grid-collapse"; | ||
| @import "neat/mixins/grid-column"; | ||
| @import "neat/mixins/grid-container"; | ||
| @import "neat/mixins/grid-media"; | ||
| @import "neat/mixins/grid-push"; | ||
| @import "neat/mixins/grid-shift"; | ||
| @import "neat/mixins/grid-visual"; |
| @@ -0,0 +1,21 @@ | ||
| @charset "UTF-8"; | ||
| /// Append attributes to a the `$_grid-visual` variable in `grid-visual` mixin | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @argument {number (unitless) | null} $columns | ||
| /// | ||
| /// @return {number} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-column-default($neat-grid, 4) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-append-grid-visual($grid-visual-list, $attributes) { | ||
| @each $attribute in $attributes { | ||
| $grid-visual-list: append($grid-visual-list, $attribute, comma); | ||
| } | ||
|
|
||
| @return $grid-visual-list; | ||
| } |
| @@ -0,0 +1,23 @@ | ||
| @charset "UTF-8"; | ||
| /// Determine if a column count has been given. | ||
| /// If no columns have been given return the grid's total column count. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @argument {number (unitless) | null} $columns | ||
| /// | ||
| /// @return {number} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-column-default($neat-grid, 4) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-column-default($grid, $columns) { | ||
| @if $columns == null { | ||
| $_grid-columns: _retrieve-neat-setting($grid, columns); | ||
| @return $_grid-columns; | ||
| } @else { | ||
| @return $columns; | ||
| } | ||
| } |
| @@ -0,0 +1,24 @@ | ||
| @charset "UTF-8"; | ||
| /// Determine the ratio of `$columns` to the total column count. | ||
| /// If `$columns` is more than one value, they are handed to | ||
| /// `_neat-parse-columns()` which will detirmine the total columns and use this | ||
| /// value instead of `total-columns`. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @argument {number | list} $columns | ||
| /// | ||
| /// @return {number} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-column-ratio($grid, 3) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-column-ratio($grid, $columns) { | ||
| @if length($columns) > 1 { | ||
| @return nth($columns, 1) / _neat-parse-columns($columns); | ||
| } @else if $columns { | ||
| @return $columns / _retrieve-neat-setting($grid, columns); | ||
| } | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| @charset "UTF-8"; | ||
| /// Return a calulated column width that can then be passed in to a `calc()`. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @argument {number} $columns | ||
| /// | ||
| /// @return {string} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-column-width($neat-grid, 4) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-column-width($grid, $columns) { | ||
| $_column-ratio: _neat-column-ratio($grid, $columns); | ||
| $_gutter: _retrieve-neat-setting($grid, gutter); | ||
|
|
||
| @if $_gutter == 0 { | ||
| @return unquote("#{percentage($_column-ratio)}"); | ||
| } @else { | ||
| $_gutter-affordance: $_gutter + ($_gutter * $_column-ratio); | ||
| @return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}"); | ||
| } | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| @charset "UTF-8"; | ||
| /// Return the float direction of the grid. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @return {string} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-float-direction($neat-grid) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-float-direction($grid) { | ||
| $_direction: _retrieve-neat-setting($grid, direction); | ||
| $_float-direction: null; | ||
| @if $_direction == "ltr" { | ||
| $_float-direction: left; | ||
| } @else if $_direction == "rtl" { | ||
| $_float-direction: right; | ||
| } | ||
| @return $_float-direction; | ||
| } |
| @@ -0,0 +1,23 @@ | ||
| @charset "UTF-8"; | ||
| /// Apply Neat's default properties to undefined values within a map. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @return {map} | ||
| /// | ||
| /// @example scss | ||
| /// _retrieve-neat-setting($neat-grid) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-merge-defaults($grid) { | ||
| $_merged-grid: map-merge(( | ||
| columns: 12, | ||
| gutter: 20px, | ||
| media: null, | ||
| color: rgba(#00d4ff, 0.25), | ||
| direction: ltr, | ||
| ), $grid); | ||
|
|
||
| @return $_merged-grid; | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| @charset "UTF-8"; | ||
| /// Return the oppoite of the float direction of the grid. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @return {string} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-opposite-direction($neat-grid) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-opposite-direction($grid) { | ||
| $_direction: _retrieve-neat-setting($grid, direction); | ||
| $_float-direction: null; | ||
| @if $_direction == "ltr" { | ||
| $_float-direction: right; | ||
| } @else if $_direction == "rtl" { | ||
| $_float-direction: left; | ||
| } | ||
| @return $_float-direction; | ||
| } |
| @@ -0,0 +1,22 @@ | ||
| @charset "UTF-8"; | ||
| /// Parse a column count like `3 of 5` and retur the total coloumn count. | ||
| /// This is to allow a shorthand for custom grids without using a settings map. | ||
| /// | ||
| /// | ||
| /// @argument {list} $span | ||
| /// | ||
| /// @return {number} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-parse-columns(3 of 5) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-parse-columns($span) { | ||
| @if length($span) == 3 { | ||
| $_total-columns: nth($span, 3); | ||
| @return $_total-columns; | ||
| } @else if length($span) == 2 or if length($span) >= 3 { | ||
| @error "`$column` should contain 2 values, seperated by an `of`"; | ||
| } | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| @charset "UTF-8"; | ||
| /// Parse media types. If the property is a string then return it, otherwise | ||
| /// assume screen and min-width. | ||
| /// | ||
| /// @argument {string | number (with unit)} $media | ||
| /// | ||
| /// @return {number} | ||
| /// | ||
| /// @example scss | ||
| /// _neat-parse-media($grid, 1000px) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _neat-parse-media($media) { | ||
| @if type-of($media) == number { | ||
| @return "only screen and (min-width: #{$media})"; | ||
| } @else if type-of($media) == string { | ||
| @return "#{$media}"; | ||
| } | ||
| } |
| @@ -0,0 +1,19 @@ | ||
| @charset "UTF-8"; | ||
| /// This function recives a grid map and merges it with Neat's defauls. | ||
| /// It then returns the value of the property that has been passed to it. | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// | ||
| /// @argument {string} $setting | ||
| /// | ||
| /// @return {boolean | color | list | number | string} | ||
| /// | ||
| /// @example scss | ||
| /// _retrieve-neat-setting($neat-grid, columns) | ||
| /// | ||
| /// @access private | ||
|
|
||
| @function _retrieve-neat-setting($grid, $setting) { | ||
| $_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid); | ||
| @return map-get($_grid-settings, $setting); | ||
| } |
| @@ -0,0 +1,36 @@ | ||
| @charset "UTF-8"; | ||
| /// Creates collapsed grid object that consumes the gutters of its container, | ||
| /// for use in nested layouts. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid collapse | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid to be used to generate the collapsed container. | ||
| /// By default, the global `$neat-grid` will be used. | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-collapse; | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// float: left; | ||
| /// margin-left: -20px; | ||
| /// margin-right: -20px; | ||
| /// width: calc(100% + 40px); | ||
| /// } | ||
|
|
||
| @mixin grid-collapse($grid: $neat-grid) { | ||
| $_grid-gutter: _retrieve-neat-setting($grid, gutter); | ||
|
|
||
| @if unit($_grid-gutter) == "%" { | ||
| @warn "`grid-collapse` is not compatible with percentage based gutters."; | ||
| } | ||
|
|
||
| margin-#{_neat-float-direction($grid)}: -($_grid-gutter); | ||
| margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter); | ||
| width: calc(100% + #{($_grid-gutter * 2)}); | ||
| } |
| @@ -0,0 +1,39 @@ | ||
| @charset "UTF-8"; | ||
| /// Creates a grid column of requested size. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid column | ||
| /// | ||
| /// @argument {number (unitless)} $columns [null] | ||
| /// Specifies the number of columns an element should span based on the total | ||
| /// columns of the grid. | ||
| /// | ||
| /// This can also be defined in a shorthand syntaxt which also contains the | ||
| /// total column count such as `3 of 5`. | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid to be used to generate the column. | ||
| /// By default, the global `$neat-grid` will be used. | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-column(3); | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// width: calc(25% - 25px); | ||
| /// float: left; | ||
| /// margin-left: 20px; | ||
| /// } | ||
|
|
||
| @mixin grid-column($columns: null, $grid: $neat-grid) { | ||
| $columns: _neat-column-default($grid, $columns); | ||
| $_grid-columns: _retrieve-neat-setting($grid, columns); | ||
| $_grid-gutter: _retrieve-neat-setting($grid, gutter); | ||
|
|
||
| width: calc(#{_neat-column-width($grid, $columns)}); | ||
| float: _neat-float-direction($grid); | ||
| margin-#{_neat-float-direction($grid)}: $_grid-gutter; | ||
| } |
| @@ -0,0 +1,30 @@ | ||
| @charset "UTF-8"; | ||
| /// Creates a grid container with clearfix. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid container | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid to be used to generate the container. | ||
| /// By default, the global `$neat-grid` will be used. | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-container; | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element::after { | ||
| /// clear: both; | ||
| /// content: ""; | ||
| /// display: block; | ||
| /// } | ||
|
|
||
| @mixin grid-container($grid: $neat-grid) { | ||
| &::after { | ||
| clear: both; | ||
| content: ""; | ||
| display: block; | ||
| } | ||
| } |
| @@ -0,0 +1,67 @@ | ||
| @charset "UTF-8"; | ||
| /// `grid-media` allows you to change your layout based on a media query. | ||
| /// For example, an object can span 3 columns on small screens and 6 columns | ||
| /// on large screens. | ||
| /// | ||
| /// You can take this a step further and set different grid attributes like | ||
| /// gutter size and total column count for each media query. So, for example, | ||
| /// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large | ||
| /// screens. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid media | ||
| /// | ||
| /// @argument {map} $grid | ||
| /// The grid to be used within the scope of the block. | ||
| /// This grid should include the `media` property to determine the expression | ||
| /// for the media query. | ||
| /// | ||
| /// @content | ||
| /// Grid media will temporarily the override the default grid with the | ||
| /// attributes of the custom grid. This change is scoped to within the mixin | ||
| /// block, and once the mixin has ended the default grid will revert to its | ||
| /// original state as defined by `$neat-grid`. This allows for different | ||
| /// gutter width and column count based on screen size or other properties. | ||
| /// | ||
| /// @example scss | ||
| /// $custom-neat-grid: ( | ||
| /// columns: 12, | ||
| /// gutter: 50px, | ||
| /// media: 1000px, | ||
| /// ); | ||
| /// | ||
| /// .element { | ||
| /// @include grid-column(3); | ||
| /// | ||
| /// @include grid-media($custom-neat-grid){ | ||
| /// @include grid-column(6); | ||
| /// } | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// width: calc(25% - 25px); | ||
| /// float: left; | ||
| /// margin-left: 20px; | ||
| /// } | ||
| /// | ||
| /// @media only screen and (min-width: 1000px) { | ||
| /// .element { | ||
| /// width: calc(50% - 75px); | ||
| /// float: left; | ||
| /// margin-left: 50px; | ||
| /// } | ||
| /// } | ||
|
|
||
| @mixin grid-media($grid) { | ||
| $_media: _retrieve-neat-setting($grid, media); | ||
| $_query: _neat-parse-media($_media); | ||
|
|
||
| @media #{$_query} { | ||
| $_default-neat-grid: $neat-grid; | ||
| $neat-grid: map-merge($neat-grid, $grid) !global; | ||
| @content; | ||
| $neat-grid: $_default-neat-grid !global; | ||
| } | ||
| } |
| @@ -0,0 +1,37 @@ | ||
| @charset "UTF-8"; | ||
| /// Push or pull a grid column by manipulating its left margin. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid push | ||
| /// | ||
| /// @argument {number (unitless)} $push [false] | ||
| /// The number of columns to push the column. | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid to be used to detirmine how far to push the column. | ||
| /// By default, the global `$neat-grid` will be used. | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-push(3); | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// margin-left: calc(25% - 25px + 40px); | ||
| /// } | ||
|
|
||
| @mixin grid-push($push: false, $grid: $neat-grid) { | ||
| $_grid-columns: _retrieve-neat-setting($grid, columns); | ||
| $_grid-gutter: _retrieve-neat-setting($grid, gutter); | ||
|
|
||
| @if $push { | ||
| $_gutter-affordance: $_grid-gutter * 2; | ||
| $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance}); | ||
| margin-#{_neat-float-direction($grid)}: $_margin-value; | ||
| } @else { | ||
| $_margin-value: _retrieve-neat-setting($grid, gutter); | ||
| margin-#{_neat-float-direction($grid)}: $_margin-value; | ||
| } | ||
| } |
| @@ -0,0 +1,36 @@ | ||
| @charset "UTF-8"; | ||
| /// Shift columns and reorder them within their container using relative | ||
| /// positioning. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid shift | ||
| /// | ||
| /// @argument {number (unitless)} $shift [false] | ||
| /// The number of columns to shift the column. | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid to be used to detirmine how far to shift the column. | ||
| /// By default, the global `$neat-grid` will be used. | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-shift(3); | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// left: calc(25% - 25px + 20px); | ||
| /// position: relative; | ||
| /// } | ||
|
|
||
| @mixin grid-shift($shift: false, $grid: $neat-grid) { | ||
| @if $shift { | ||
| $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)}); | ||
| #{_neat-float-direction($grid)}: $_shift-value; | ||
| } @else { | ||
| #{_neat-float-direction($grid)}: auto; | ||
| } | ||
|
|
||
| position: relative; | ||
| } |
| @@ -0,0 +1,67 @@ | ||
| @charset "UTF-8"; | ||
| /// Creates a series of guide lines using the `background-image` property on a | ||
| /// grid container to visualise the columns and gutters of the grid. | ||
| /// | ||
| /// @group features | ||
| /// | ||
| /// @name Grid visual | ||
| /// | ||
| /// @argument {color} $color | ||
| /// The color of the guide lines created. | ||
| /// | ||
| /// @argument {map} $grid [$neat-grid] | ||
| /// The grid used to determine the guides | ||
| /// | ||
| /// @example scss | ||
| /// .element { | ||
| /// @include grid-visual; | ||
| /// } | ||
| /// | ||
| /// @example css | ||
| /// .element { | ||
| /// background-image: linear-gradient( … ) ; | ||
| /// } | ||
|
|
||
| @mixin grid-visual($color: null, $grid: $neat-grid) { | ||
| @if not $color { | ||
| $color: _retrieve-neat-setting($grid, color); | ||
| } | ||
|
|
||
| $_grid-columns: _retrieve-neat-setting($grid, columns); | ||
| $_grid-gutter: _retrieve-neat-setting($grid, gutter); | ||
| $_grid-visual-object: () !default; | ||
| $_grid-visual: | ||
| $color, | ||
| $color $_grid-gutter, | ||
| transparent $_grid-gutter, | ||
| ; | ||
|
|
||
| @for $i from 1 to $_grid-columns { | ||
| $_grid-visual-local: ( | ||
| #{$i}: "#{_neat-column-width($grid, $i)} + #{$_grid-gutter}", | ||
| ); | ||
|
|
||
| $_grid-visual-object: map-merge($_grid-visual-object, $_grid-visual-local); | ||
| } | ||
|
|
||
| @each $stop, $location in $_grid-visual-object { | ||
| $_grid-visual-loop-list: | ||
| transparent calc(#{$location}), | ||
| $color calc(#{$location}), | ||
| $color calc(#{$location} + #{$_grid-gutter}), | ||
| transparent calc(#{$location} + #{$_grid-gutter}), | ||
| ; | ||
|
|
||
| $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list); | ||
| } | ||
|
|
||
| $_grid-visual-loop-list: | ||
| transparent calc(100% - #{$_grid-gutter}), | ||
| $color calc(100% - #{$_grid-gutter}), | ||
| $color calc(100%), | ||
| ; | ||
|
|
||
| $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list); | ||
|
|
||
| background-image: linear-gradient(to right, $_grid-visual); | ||
| } |
| @@ -0,0 +1,74 @@ | ||
| @charset "UTF-8"; | ||
| /// This variable is a sass map that overrides Neat's default grid settings. | ||
| /// Use this to define your project's grid properties incluting gutters and | ||
| /// total column count. | ||
| /// | ||
| /// @type map | ||
| /// | ||
| /// @group settings | ||
| /// | ||
| /// @name Neat grid | ||
| /// | ||
| /// @property {number (unitless)} columns [12] | ||
| /// Default number of the total grid columns. | ||
| /// | ||
| /// @property {number (with unit)} gutter [20px] | ||
| /// Default grid gutter width between columns. | ||
| /// | ||
| /// @example scss | ||
| /// $neat-grid: ( | ||
| /// columns: 12, | ||
| /// gutter: 20px, | ||
| /// ); | ||
|
|
||
| $neat-grid: () !default; | ||
|
|
||
| /// If you need multiple grids in a single project, you can do | ||
| /// this by defining a new map stored within a variable of your choosing. This | ||
| /// variable can then be passed directly in to any of Neat's mixins like | ||
| /// [`grid-column(12, $my-custom-grid)`](#grid-column). | ||
| /// | ||
| /// Custom grids are especially useful with [`grid-media`](#grid-media). By | ||
| /// defining a `media` attribute within your custom grid, you are able to easily | ||
| /// define gutter width and total column count as well the breakpoint at which | ||
| /// they should activate. | ||
| /// | ||
| /// @type map | ||
| /// | ||
| /// @group settings | ||
| /// | ||
| /// @name Custom grids | ||
| /// | ||
| /// @property {number (unitless)} columns [12] | ||
| /// Number of the total grid columns. | ||
| /// | ||
| /// @property {number (with unit)} gutter [20px] | ||
| /// Grid gutter width between columns. | ||
| /// | ||
| /// @property {number (with unit) | string | null} media [null] | ||
| /// The `@media` definition that is used by the [`grid-media`](#grid-media) | ||
| /// mixin to detirmine the media properties. | ||
| /// | ||
| /// @property {color} color [null] | ||
| /// The color used by [`grid-visual`](#grid-visual) to create the guides. | ||
| /// | ||
| /// @property {string} direction [ltr] | ||
| /// The float direction used throughout the grid. | ||
| /// | ||
| /// @example scss | ||
| /// $my-custom-grid: ( | ||
| /// columns: 12, | ||
| /// gutter: 20px, | ||
| /// media: 1200px, | ||
| /// color: rgba(#00d4ff, 0.25), | ||
| /// direction: ltr, | ||
| /// ); | ||
| /// | ||
| /// $other-custom-grid-for-print: ( | ||
| /// columns: 14, | ||
| /// gutter: 1.5rem, | ||
| /// media: print, | ||
| /// ); | ||
| /// | ||
|
|
||
| $neat-custom-grid: () !default; |
| @@ -0,0 +1,103 @@ | ||
| @import "bourbon/bourbon"; | ||
| @import "neat/neat"; | ||
|
|
||
| $fg-column: 60px; // Column Width | ||
| $fg-gutter: 25px; // Gutter Width | ||
| $fg-max-columns: 12; // Total Columns For Main Container | ||
|
|
||
|
|
||
| html * { | ||
| font-family: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; | ||
| } | ||
|
|
||
| ul * { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| /* gridddddzzdzdz */ | ||
|
|
||
| // thirds | ||
| $custom-grid--halves: ( | ||
| columns: 2, | ||
| ); | ||
|
|
||
| .custom-grid--halves { | ||
| @include grid-container; | ||
| } | ||
|
|
||
|
|
||
| .custom-grid--halves__a-single-column { | ||
| @include grid-column(1, $custom-grid--halves); | ||
| } | ||
|
|
||
| // fucking with other grids | ||
|
|
||
| $article-layout-grid: ( | ||
| columns: 1, | ||
| gutter: 2rem, | ||
| ); | ||
|
|
||
| $article-layout-grid--tablet-up: ( | ||
| columns: 5, | ||
| gutter: 2rem, | ||
| media: "(min-width: 768px)", | ||
| ); | ||
|
|
||
| .article-layout { | ||
| @include grid-container; | ||
|
|
||
| } | ||
|
|
||
| .article-layout__hero { | ||
| @include grid-column(1, $article-layout-grid); | ||
| margin-bottom: 2rem; | ||
| } | ||
|
|
||
| .article-layout__sidebar { | ||
| @include grid-column(1, $article-layout-grid); | ||
| margin-bottom: 2rem; | ||
|
|
||
| @include grid-media($article-layout-grid--tablet-up) { | ||
| @include grid-column(2); | ||
| } | ||
| } | ||
|
|
||
| .article-layout__main { | ||
| @include grid-column(1, $article-layout-grid); | ||
|
|
||
| @include grid-media($article-layout-grid--tablet-up) { | ||
| @include grid-column(3); | ||
| } | ||
| } | ||
|
|
||
| /* cards */ | ||
| .cardz { | ||
| // @include border-top-radius(20px); | ||
| // @include border-bottom-radius(20px); | ||
| background: tint(black, 90%); | ||
| } | ||
|
|
||
| .cards { | ||
| @include display(flex); | ||
| @include flex-wrap(wrap); | ||
| @include justify-content(space-between); | ||
|
|
||
| .card { | ||
| @include flex-basis(20em); | ||
| @include flex-grow(1); | ||
| @include margin(null 1rem 1rem null); | ||
| @include padding(null null 3em null) | ||
| } | ||
| .card-header { | ||
| @include margin(0 null null null); | ||
| } | ||
| .card-basics { | ||
| } | ||
| .card-image { | ||
| height: 10rem; | ||
| overflow: hidden; | ||
| img { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } |