Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New Transform mixin

Supports rotate, skewXY&Z, scaleXY&Z, and translateXY&Z
  • Loading branch information...
commit f353f1e230fe916b1cdec11c7a47d31ea96a4460 1 parent bdfd0b9
James Finley jamesfinley authored
Showing with 117 additions and 12 deletions.
  1. +117 −12 _mixins.scss
129 _mixins.scss
View
@@ -132,20 +132,19 @@
background-image: radial-gradient($origin, $kind, $firstStop, $secondStop)
}
-@mixin linear-gradient-legacy($first, $last) {
- background: $first; /* Old browsers */
- background: -moz-linear-gradient(top, $first 0%, $last 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$last)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, $first 0%,$last 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, $first 0%,$last 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top, $first 0%,$last 100%); /* IE10+ */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$first}', endColorstr='#{$last}',GradientType=0); /*IE6-9 */
- background: linear-gradient(top, $first 0%,$last 100%); /* W3C */
-}
-
@mixin linear-gradient($colors, $stops, $direction: top) {
@if type-of($colors) != list {
- @include linear-gradient-legacy($colors, $stops);
+ $first: $colors;
+ $last: $stops;
+
+ background: $first; /* Old browsers */
+ background: -moz-linear-gradient(top, $first 0%, $last 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$last)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, $first 0%,$last 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, $first 0%,$last 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, $first 0%,$last 100%); /* IE10+ */
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$first}', endColorstr='#{$last}',GradientType=0); /*IE6-9 */
+ background: linear-gradient(top, $first 0%,$last 100%); /* W3C */
}
@else {
$firstColor: '';
@@ -199,4 +198,110 @@
@mixin user-select($value) {
@include experimental-property(-webkit -moz -o, user-select, $value);
+}
+
+@mixin transform($scaleX: false, $scaleY: false, $scaleZ: false, $translateX: false, $translateY: false, $translateZ: false, $skewX: false, $skewY: false, $skewZ: false, $rotate: false) {
+ $list: 0;
+
+ @if $scaleX {
+ $list_item: scaleX($scaleX);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $scaleY {
+ $list_item: scaleY($scaleY);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $scaleZ {
+ $list_item: scaleZ($scaleZ);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $translateX {
+ $list_item: translateX($translateX);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $translateY {
+ $list_item: translateY($translateY);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $translateZ {
+ $list_item: translateZ($translateZ);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $skewX {
+ $list_item: skewX($skewX);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $skewY {
+ $list_item: skewY($skewY);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $skewZ {
+ $list_item: skewZ($skewZ);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @if $rotate {
+ $list_item: rotate($rotate);
+ @if $list == 0 {
+ $list: $list_item;
+ }
+ @else {
+ $list: $list $list_item;
+ }
+ }
+
+ @include experimental-property(-moz -webkit -o, transform, $list);
}
Please sign in to comment.
Something went wrong with that request. Please try again.