Commit e2b8df7e by Toby Lawrence

Clear out usages of deprecated vendor prefixes.

parent a3caac1f
...@@ -3,50 +3,50 @@ ...@@ -3,50 +3,50 @@
// Official animation shorthand property. // Official animation shorthand property.
@mixin animation ($animations...) { @mixin animation ($animations...) {
@include prefixer(animation, $animations, webkit moz spec); @include prefixer(animation, $animations, spec);
} }
// Individual Animation Properties // Individual Animation Properties
@mixin animation-name ($names...) { @mixin animation-name ($names...) {
@include prefixer(animation-name, $names, webkit moz spec); @include prefixer(animation-name, $names, spec);
} }
@mixin animation-duration ($times...) { @mixin animation-duration ($times...) {
@include prefixer(animation-duration, $times, webkit moz spec); @include prefixer(animation-duration, $times, spec);
} }
@mixin animation-timing-function ($motions...) { @mixin animation-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out // ease | linear | ease-in | ease-out | ease-in-out
@include prefixer(animation-timing-function, $motions, webkit moz spec); @include prefixer(animation-timing-function, $motions, spec);
} }
@mixin animation-iteration-count ($values...) { @mixin animation-iteration-count ($values...) {
// infinite | <number> // infinite | <number>
@include prefixer(animation-iteration-count, $values, webkit moz spec); @include prefixer(animation-iteration-count, $values, spec);
} }
@mixin animation-direction ($directions...) { @mixin animation-direction ($directions...) {
// normal | alternate // normal | alternate
@include prefixer(animation-direction, $directions, webkit moz spec); @include prefixer(animation-direction, $directions, spec);
} }
@mixin animation-play-state ($states...) { @mixin animation-play-state ($states...) {
// running | paused // running | paused
@include prefixer(animation-play-state, $states, webkit moz spec); @include prefixer(animation-play-state, $states, spec);
} }
@mixin animation-delay ($times...) { @mixin animation-delay ($times...) {
@include prefixer(animation-delay, $times, webkit moz spec); @include prefixer(animation-delay, $times, spec);
} }
@mixin animation-fill-mode ($modes...) { @mixin animation-fill-mode ($modes...) {
// none | forwards | backwards | both // none | forwards | backwards | both
@include prefixer(animation-fill-mode, $modes, webkit moz spec); @include prefixer(animation-fill-mode, $modes, spec);
} }
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
// Backface-visibility mixin // Backface-visibility mixin
//************************************************************************// //************************************************************************//
@mixin backface-visibility($visibility) { @mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec); @include prefixer(backface-visibility, $visibility, spec);
} }
...@@ -4,11 +4,9 @@ ...@@ -4,11 +4,9 @@
//************************************************************************// //************************************************************************//
@mixin background($backgrounds...) { @mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: (); $spec-backgrounds: ();
@each $background in $backgrounds { @each $background in $backgrounds {
$webkit-background: ();
$spec-background: (); $spec-background: ();
$background-type: type-of($background); $background-type: type-of($background);
...@@ -19,37 +17,30 @@ ...@@ -19,37 +17,30 @@
$gradient-type: str-slice($background-str, 0, 6); $gradient-type: str-slice($background-str, 0, 6);
@if $url-str == "url" { @if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background; $spec-background: $background;
} }
@else if $gradient-type == "linear" { @else if $gradient-type == "linear" {
$gradients: _linear-gradient-parser("#{$background}"); $gradients: _linear-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image); $spec-background: map-get($gradients, spec-image);
$spec-background: map-get($gradients, spec-image);
} }
@else if $gradient-type == "radial" { @else if $gradient-type == "radial" {
$gradients: _radial-gradient-parser("#{$background}"); $gradients: _radial-gradient-parser("#{$background}");
$webkit-background: map-get($gradients, webkit-image); $spec-background: map-get($gradients, spec-image);
$spec-background: map-get($gradients, spec-image);
} }
@else { @else {
$webkit-background: $background;
$spec-background: $background; $spec-background: $background;
} }
} }
@else { @else {
$webkit-background: $background;
$spec-background: $background; $spec-background: $background;
} }
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
} }
background: $webkit-backgrounds;
background: $spec-backgrounds; background: $spec-backgrounds;
} }
@mixin box-sizing ($box) { @mixin box-sizing ($box) {
// content-box | border-box | inherit // content-box | border-box | inherit
@include prefixer(box-sizing, $box, webkit moz spec); @include prefixer(box-sizing, $box, spec);
} }
@mixin perspective($depth: none) { @mixin perspective($depth: none) {
// none | <length> // none | <length>
@include prefixer(perspective, $depth, webkit moz spec); @include prefixer(perspective, $depth, spec);
} }
@mixin perspective-origin($value: 50% 50%) { @mixin perspective-origin($value: 50% 50%) {
@include prefixer(perspective-origin, $value, webkit moz spec); @include prefixer(perspective-origin, $value, spec);
} }
...@@ -34,6 +34,5 @@ ...@@ -34,6 +34,5 @@
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
background-color: $fallback-color; 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})"); background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
} }
@mixin transform($property: none) { @mixin transform($property: none) {
// none | <transform-function> // none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec); @include prefixer(transform, $property, spec);
} }
@mixin transform-origin($axes: 50%) { @mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | % // x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | % // y-axis - top | center | bottom | length | %
// z-axis - length // z-axis - length
@include prefixer(transform-origin, $axes, webkit moz ms o spec); @include prefixer(transform-origin, $axes, spec);
} }
@mixin transform-style ($style: flat) { @mixin transform-style ($style: flat) {
@include prefixer(transform-style, $style, webkit moz ms o spec); @include prefixer(transform-style, $style, spec);
} }
...@@ -4,74 +4,29 @@ ...@@ -4,74 +4,29 @@
// @include transition-property (transform, opacity); // @include transition-property (transform, opacity);
@mixin transition ($properties...) { @mixin transition ($properties...) {
// Fix for vendor-prefix transform property @if length($properties) >= 1 {
$needs-prefixes: false; @include prefixer(transition, $properties, spec);
$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 { @else {
@if length($properties) >= 1 { $properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec); @include prefixer(transition, $properties, spec);
}
@else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec);
}
} }
} }
@mixin transition-property ($properties...) { @mixin transition-property ($properties...) {
-webkit-transition-property: transition-property-names($properties, 'webkit'); transition-property: transition-property-names($properties, false);
-moz-transition-property: transition-property-names($properties, 'moz');
transition-property: transition-property-names($properties, false);
} }
@mixin transition-duration ($times...) { @mixin transition-duration ($times...) {
@include prefixer(transition-duration, $times, webkit moz spec); @include prefixer(transition-duration, $times, spec);
} }
@mixin transition-timing-function ($motions...) { @mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, webkit moz spec); @include prefixer(transition-timing-function, $motions, spec);
} }
@mixin transition-delay ($times...) { @mixin transition-delay ($times...) {
@include prefixer(transition-delay, $times, webkit moz spec); @include prefixer(transition-delay, $times, spec);
} }
@mixin user-select($arg: none) { @mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit moz ms spec); @include prefixer(user-select, $arg, spec);
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment