First commit

This commit is contained in:
Pierre Hubert
2016-11-19 12:08:12 +01:00
commit 990540b2b9
4706 changed files with 931207 additions and 0 deletions

View File

@ -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);
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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
);
}
}

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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
);
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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);
}