Paul O’Shannessy
11 years ago
56 changed files with 1279 additions and 535 deletions
@ -0,0 +1,111 @@ |
|||||
|
// directional-property mixins are shorthands |
||||
|
// for writing properties like the following |
||||
|
// |
||||
|
// @include margin(null 0 10px); |
||||
|
// ------ |
||||
|
// margin-right: 0; |
||||
|
// margin-bottom: 10px; |
||||
|
// margin-left: 0; |
||||
|
// |
||||
|
// - or - |
||||
|
// |
||||
|
// @include border-style(dotted null); |
||||
|
// ------ |
||||
|
// border-top-style: dotted; |
||||
|
// border-bottom-style: dotted; |
||||
|
// |
||||
|
// ------ |
||||
|
// |
||||
|
// Note: You can also use false instead of null |
||||
|
|
||||
|
@function collapse-directionals($vals) { |
||||
|
$output: null; |
||||
|
|
||||
|
$A: nth( $vals, 1 ); |
||||
|
$B: if( length($vals) < 2, $A, nth($vals, 2)); |
||||
|
$C: if( length($vals) < 3, $A, nth($vals, 3)); |
||||
|
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); |
||||
|
|
||||
|
@if $A == 0 { $A: 0 } |
||||
|
@if $B == 0 { $B: 0 } |
||||
|
@if $C == 0 { $C: 0 } |
||||
|
@if $D == 0 { $D: 0 } |
||||
|
|
||||
|
@if $A == $B and $A == $C and $A == $D { $output: $A } |
||||
|
@else if $A == $C and $B == $D { $output: $A $B } |
||||
|
@else if $B == $D { $output: $A $B $C } |
||||
|
@else { $output: $A $B $C $D } |
||||
|
|
||||
|
@return $output; |
||||
|
} |
||||
|
|
||||
|
@function contains-falsy($list) { |
||||
|
@each $item in $list { |
||||
|
@if not $item { |
||||
|
@return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@return false; |
||||
|
} |
||||
|
|
||||
|
@mixin directional-property($pre, $suf, $vals) { |
||||
|
// Property Names |
||||
|
$top: $pre + "-top" + if($suf, "-#{$suf}", ""); |
||||
|
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); |
||||
|
$left: $pre + "-left" + if($suf, "-#{$suf}", ""); |
||||
|
$right: $pre + "-right" + if($suf, "-#{$suf}", ""); |
||||
|
$all: $pre + if($suf, "-#{$suf}", ""); |
||||
|
|
||||
|
$vals: collapse-directionals($vals); |
||||
|
|
||||
|
@if contains-falsy($vals) { |
||||
|
@if nth($vals, 1) { #{$top}: nth($vals, 1); } |
||||
|
|
||||
|
@if length($vals) == 1 { |
||||
|
@if nth($vals, 1) { #{$right}: nth($vals, 1); } |
||||
|
} @else { |
||||
|
@if nth($vals, 2) { #{$right}: nth($vals, 2); } |
||||
|
} |
||||
|
|
||||
|
// prop: top/bottom right/left |
||||
|
@if length($vals) == 2 { |
||||
|
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); } |
||||
|
@if nth($vals, 2) { #{$left}: nth($vals, 2); } |
||||
|
|
||||
|
// prop: top right/left bottom |
||||
|
} @else if length($vals) == 3 { |
||||
|
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); } |
||||
|
@if nth($vals, 2) { #{$left}: nth($vals, 2); } |
||||
|
|
||||
|
// prop: top right bottom left |
||||
|
} @else if length($vals) == 4 { |
||||
|
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); } |
||||
|
@if nth($vals, 4) { #{$left}: nth($vals, 4); } |
||||
|
} |
||||
|
|
||||
|
// prop: top/right/bottom/left |
||||
|
} @else { |
||||
|
#{$all}: $vals; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin margin($vals...) { |
||||
|
@include directional-property(margin, false, $vals...); |
||||
|
} |
||||
|
|
||||
|
@mixin padding($vals...) { |
||||
|
@include directional-property(padding, false, $vals...); |
||||
|
} |
||||
|
|
||||
|
@mixin border-style($vals...) { |
||||
|
@include directional-property(border, style, $vals...); |
||||
|
} |
||||
|
|
||||
|
@mixin border-color($vals...) { |
||||
|
@include directional-property(border, color, $vals...); |
||||
|
} |
||||
|
|
||||
|
@mixin border-width($vals...) { |
||||
|
@include directional-property(border, width, $vals...); |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
@mixin ellipsis($width: 100%) { |
||||
|
display: inline-block; |
||||
|
max-width: $width; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
@ -1,5 +1,5 @@ |
|||||
$georgia: Georgia, Cambria, "Times New Roman", Times, serif; |
$georgia: Georgia, Cambria, "Times New Roman", Times, serif; |
||||
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; |
$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; |
||||
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; |
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; |
||||
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; |
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; |
||||
$verdana: Verdana, Geneva, sans-serif; |
$verdana: Verdana, Geneva, sans-serif; |
||||
|
|||||
@ -1,5 +1,10 @@ |
|||||
@mixin hide-text { |
@mixin hide-text { |
||||
color: transparent; |
overflow: hidden; |
||||
font: 0/0 a; |
|
||||
text-shadow: none; |
&:before { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
width: 0; |
||||
|
height: 100%; |
||||
|
} |
||||
} |
} |
||||
|
|||||
@ -1,44 +1,16 @@ |
|||||
@mixin size($size) { |
@mixin size($size) { |
||||
@if length($size) == 1 { |
$height: nth($size, 1); |
||||
@if $size == auto { |
$width: $height; |
||||
width: $size; |
|
||||
height: $size; |
|
||||
} |
|
||||
|
|
||||
@else if unitless($size) { |
@if length($size) > 1 { |
||||
width: $size + px; |
|
||||
height: $size + px; |
|
||||
} |
|
||||
|
|
||||
@else if not(unitless($size)) { |
|
||||
width: $size; |
|
||||
height: $size; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// Width x Height |
|
||||
@if length($size) == 2 { |
|
||||
$width: nth($size, 1); |
|
||||
$height: nth($size, 2); |
$height: nth($size, 2); |
||||
|
} |
||||
|
|
||||
@if $width == auto { |
@if $height == auto or (type-of($height) == number and not unitless($height)) { |
||||
width: $width; |
height: $height; |
||||
} |
} |
||||
@else if not(unitless($width)) { |
|
||||
width: $width; |
|
||||
} |
|
||||
@else if unitless($width) { |
|
||||
width: $width + px; |
|
||||
} |
|
||||
|
|
||||
@if $height == auto { |
@if $width == auto or (type-of($width) == number and not unitless($width)) { |
||||
height: $height; |
width: $width; |
||||
} |
|
||||
@else if not(unitless($height)) { |
|
||||
height: $height; |
|
||||
} |
|
||||
@else if unitless($height) { |
|
||||
height: $height + px; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -0,0 +1,8 @@ |
|||||
|
@mixin word-wrap($wrap: break-word) { |
||||
|
word-wrap: $wrap; |
||||
|
|
||||
|
@if $wrap == break-word { |
||||
|
overflow-wrap: break-word; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
@mixin calc($property, $value) { |
||||
|
#{$property}: -webkit-calc(#{$value}); |
||||
|
#{$property}: calc(#{$value}); |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
@mixin filter($function: none) { |
||||
|
// <filter-function> [<filter-function]* | none |
||||
|
@include prefixer(filter, $function, webkit spec); |
||||
|
} |
||||
|
|
||||
@ -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,4 @@ |
|||||
|
@mixin hyphens($hyphenation: none) { |
||||
|
// none | manual | auto |
||||
|
@include prefixer(hyphens, $hyphenation, webkit moz ms spec); |
||||
|
} |
||||
@ -1,8 +0,0 @@ |
|||||
// Legacy support for inline-block in IE7 (maybe IE6) |
|
||||
@mixin inline-block { |
|
||||
display: inline-block; |
|
||||
vertical-align: baseline; |
|
||||
zoom: 1; |
|
||||
*display: inline; |
|
||||
*vertical-align: auto; |
|
||||
} |
|
||||
@ -1,29 +1,8 @@ |
|||||
$placeholders: '-webkit-input-placeholder', |
|
||||
'-moz-placeholder', |
|
||||
'-ms-input-placeholder'; |
|
||||
|
|
||||
@mixin placeholder { |
@mixin placeholder { |
||||
|
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; |
||||
@each $placeholder in $placeholders { |
@each $placeholder in $placeholders { |
||||
@if $placeholder == "-webkit-input-placeholder" { |
&:#{$placeholder}-placeholder { |
||||
&::#{$placeholder} { |
@content; |
||||
@content; |
|
||||
} |
|
||||
} |
|
||||
@else if $placeholder == "-moz-placeholder" { |
|
||||
// FF 18- |
|
||||
&:#{$placeholder} { |
|
||||
@content; |
|
||||
} |
|
||||
|
|
||||
// FF 19+ |
|
||||
&::#{$placeholder} { |
|
||||
@content; |
|
||||
} |
|
||||
} |
|
||||
@else { |
|
||||
&:#{$placeholder} { |
|
||||
@content; |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -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; |
||||
|
} |
||||
@ -1,11 +0,0 @@ |
|||||
// Remove `false` values from a list |
|
||||
|
|
||||
@function compact($vars...) { |
|
||||
$list: (); |
|
||||
@each $var in $vars { |
|
||||
@if $var { |
|
||||
$list: append($list, $var, comma); |
|
||||
} |
|
||||
} |
|
||||
@return $list; |
|
||||
} |
|
||||
@ -0,0 +1,3 @@ |
|||||
|
@function golden-ratio($value, $increment) { |
||||
|
@return modular-scale($value, $increment, $golden) |
||||
|
} |
||||
@ -1,13 +0,0 @@ |
|||||
@function linear-gradient($pos, $gradients...) { |
|
||||
$type: linear; |
|
||||
$pos-type: type-of(nth($pos, 1)); |
|
||||
|
|
||||
// if $pos doesn't exist, fix $gradient |
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") { |
|
||||
$gradients: zip($pos $gradients); |
|
||||
$pos: false; |
|
||||
} |
|
||||
|
|
||||
$type-gradient: $type, $pos, $gradients; |
|
||||
@return $type-gradient; |
|
||||
} |
|
||||
@ -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; |
||||
|
} |
||||
@ -1,23 +0,0 @@ |
|||||
// This function is required and used by the background-image mixin. |
|
||||
@function radial-gradient($G1, $G2, |
|
||||
$G3: false, $G4: false, |
|
||||
$G5: false, $G6: false, |
|
||||
$G7: false, $G8: false, |
|
||||
$G9: false, $G10: false, |
|
||||
$pos: null, |
|
||||
$shape-size: 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); |
|
||||
|
|
||||
$type: radial; |
|
||||
$gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); |
|
||||
|
|
||||
$type-gradient: $type, $shape-size $pos, $gradient; |
|
||||
@return $type-gradient; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
@ -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,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); |
||||
|
} |
||||
@ -1,39 +0,0 @@ |
|||||
// Render Deprecated Webkit Gradient - Linear || Radial |
|
||||
//************************************************************************// |
|
||||
@function _deprecated-webkit-gradient($type, |
|
||||
$deprecated-pos1, $deprecated-pos2, |
|
||||
$full, |
|
||||
$deprecated-radius1: false, $deprecated-radius2: false) { |
|
||||
$gradient-list: (); |
|
||||
$gradient: false; |
|
||||
$full-length: length($full); |
|
||||
$percentage: false; |
|
||||
$gradient-type: $type; |
|
||||
|
|
||||
@for $i from 1 through $full-length { |
|
||||
$gradient: nth($full, $i); |
|
||||
|
|
||||
@if length($gradient) == 2 { |
|
||||
$color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); |
|
||||
$gradient-list: join($gradient-list, $color-stop, comma); |
|
||||
} |
|
||||
@else if $gradient != null { |
|
||||
@if $i == $full-length { |
|
||||
$percentage: 100%; |
|
||||
} |
|
||||
@else { |
|
||||
$percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; |
|
||||
} |
|
||||
$color-stop: color-stop(unquote($percentage), $gradient); |
|
||||
$gradient-list: join($gradient-list, $color-stop, comma); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@if $type == radial { |
|
||||
$gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); |
|
||||
} |
|
||||
@else if $type == linear { |
|
||||
$gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); |
|
||||
} |
|
||||
@return $gradient; |
|
||||
} |
|
||||
@ -0,0 +1,8 @@ |
|||||
|
//************************************************************************// |
||||
|
// Helper for linear-gradient-parser |
||||
|
//************************************************************************// |
||||
|
@function _is-num($char) { |
||||
|
$values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; |
||||
|
$index: index($values, $char); |
||||
|
@return if($index, true, false); |
||||
|
} |
||||
@ -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,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,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,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; |
||||
Loading…
Reference in new issue