Przeglądaj źródła

Streamline prefixes for mixins

Chris J. Lebron 13 lat temu
rodzic
commit
f4d665278b
2 zmienionych plików z 24 dodań i 31 usunięć
  1. 17 21
      library/less/mixins.less
  2. 7 10
      library/scss/mixins.scss

+ 17 - 21
library/less/mixins.less

@@ -137,32 +137,31 @@ BORDER RADIUS
 *********************/
 *********************/
 
 
 /* .rounded(4px); */
 /* .rounded(4px); */
+/* NOTE: For older browser support (and some mobile), don't use the shorthand to define *different* corners. */
 .rounded(@radius: 4px) {
 .rounded(@radius: 4px) {
   -webkit-border-radius: @radius;
   -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      -moz-border-radius: @radius;
-      -ms-border-radius: @radius;
-       -o-border-radius: @radius;
           border-radius: @radius;
           border-radius: @radius;
 }
 }
 
 
 /* .rounded-left(4px); */
 /* .rounded-left(4px); */
 .rounded-left(@radius: 4px) {
 .rounded-left(@radius: 4px) {
 	-webkit-border-bottom-left-radius: @radius;
 	-webkit-border-bottom-left-radius: @radius;
-  	   -webkit-border-top-left-radius: @radius;
-		-moz-border-radius-bottomleft: @radius;
-		   -moz-border-radius-topleft: @radius;
-			border-bottom-left-radius: @radius;
-			   border-top-left-radius: @radius;
+  	 -webkit-border-top-left-radius: @radius;
+			-moz-border-radius-bottomleft: @radius;
+		   	 -moz-border-radius-topleft: @radius;
+					border-bottom-left-radius: @radius;
+			   		 border-top-left-radius: @radius;
 }
 }
 
 
 /* .rounded-right(4px); */
 /* .rounded-right(4px); */
 .rounded-right(@radius: 4px) {
 .rounded-right(@radius: 4px) {
 	-webkit-border-bottom-right-radius: @radius;
 	-webkit-border-bottom-right-radius: @radius;
-  	   -webkit-border-top-right-radius: @radius;
-		-moz-border-radius-bottomright: @radius;
-		   -moz-border-radius-topright: @radius;
-			border-bottom-right-radius: @radius;
-			   border-top-right-radius: @radius;
+  	 -webkit-border-top-right-radius: @radius;
+			-moz-border-radius-bottomright: @radius;
+		   	 -moz-border-radius-topright: @radius;
+					border-bottom-right-radius: @radius;
+			   		 border-top-right-radius: @radius;
 }
 }
 
 
 /* .rounded-bottom(4px); */
 /* .rounded-bottom(4px); */
@@ -193,7 +192,6 @@ TRANISTION
 .transition(@what: all, @time: 0.2s) {
 .transition(@what: all, @time: 0.2s) {
 	-webkit-transition: @what @time ease-out;
 	-webkit-transition: @what @time ease-out;
 	   -moz-transition: @what @time ease-out;
 	   -moz-transition: @what @time ease-out;
- 	    -ms-transition: @what @time ease-out;
 	     -o-transition: @what @time ease-out;
 	     -o-transition: @what @time ease-out;
 	        transition: @what @time ease-out;
 	        transition: @what @time ease-out;
 }
 }
@@ -211,8 +209,7 @@ really slow down your CSS. Don't overdue it.
 	background-image: -webkit-linear-gradient(top, @from, @to);
 	background-image: -webkit-linear-gradient(top, @from, @to);
 	background-image: -moz-linear-gradient(top, @from, @to);
 	background-image: -moz-linear-gradient(top, @from, @to);
 	background-image: -o-linear-gradient(top, @from, @to);
 	background-image: -o-linear-gradient(top, @from, @to);
-	background-image: -ms-linear-gradient(top, @from, @to);
-	background-image: linear-gradient(top, @from, @to);
+	background-image: linear-gradient(to bottom, @from, @to);
 }
 }
 
 
 /*********************
 /*********************
@@ -220,12 +217,13 @@ BOX SIZING
 *********************/
 *********************/
 
 
 /* .boxSizing(border-box); */
 /* .boxSizing(border-box); */
+/* NOTE: value of "padding-box" is only supported in Gecko. So 
+probably best not to use it. I mean, were you going to anyway? */
 .boxSizing(@type: border-box) {
 .boxSizing(@type: border-box) {
 	-webkit-box-sizing: @type;
 	-webkit-box-sizing: @type;
 	   -moz-box-sizing: @type;
 	   -moz-box-sizing: @type;
-		-ms-box-sizing: @type;
-	     -o-box-sizing: @type; 
-			box-sizing: @type; 
+			-ms-box-sizing: @type;
+					box-sizing: @type;
 }
 }
 
 
 /*********************
 /*********************
@@ -236,9 +234,7 @@ BOX SHADOW
 .boxShadow(@x: 0, @y: 0, @radius: 4px, @spread: 0, @color: rgba(0,0,0,0.5)) {
 .boxShadow(@x: 0, @y: 0, @radius: 4px, @spread: 0, @color: rgba(0,0,0,0.5)) {
 	-webkit-box-shadow: @x @y @radius @spread @color;
 	-webkit-box-shadow: @x @y @radius @spread @color;
 	   -moz-box-shadow: @x @y @radius @spread @color;
 	   -moz-box-shadow: @x @y @radius @spread @color;
-		-ms-box-shadow: @x @y @radius @spread @color;
-	     -o-box-shadow: @x @y @radius @spread @color; 
-			box-shadow: @x @y @radius @spread @color; 
+					box-shadow: @x @y @radius @spread @color; 
 }
 }
 
 
 /*********************
 /*********************

+ 7 - 10
library/scss/mixins.scss

@@ -136,11 +136,11 @@ BORDER RADIUS
 *********************/
 *********************/
 
 
 /* @include rounded(4px); */
 /* @include rounded(4px); */
+/* NOTE: For older browser support (and some mobile), 
+don't use the shorthand to define *different* corners. */
 @mixin rounded($radius: 4px) {
 @mixin rounded($radius: 4px) {
 	-webkit-border-radius: $radius;
 	-webkit-border-radius: $radius;
 	   -moz-border-radius: $radius;
 	   -moz-border-radius: $radius;
-	    -ms-border-radius: $radius;
-   	     -o-border-radius: $radius;
 	        border-radius: $radius;
 	        border-radius: $radius;
 }
 }
 
 
@@ -192,7 +192,6 @@ TRANISTION
 @mixin css-transition($what: all, $time: 0.2s, $how: ease-out) {
 @mixin css-transition($what: all, $time: 0.2s, $how: ease-out) {
 	-webkit-transition: $what $time $how;
 	-webkit-transition: $what $time $how;
 	   -moz-transition: $what $time $how;
 	   -moz-transition: $what $time $how;
- 	    -ms-transition: $what $time $how;
 	     -o-transition: $what $time $how;
 	     -o-transition: $what $time $how;
 	        transition: $what $time $how;
 	        transition: $what $time $how;
 }
 }
@@ -211,8 +210,6 @@ BOX SHADOWS
 
 
   -webkit-box-shadow: $full;
   -webkit-box-shadow: $full;
      -moz-box-shadow: $full;
      -moz-box-shadow: $full;
-      -ms-box-shadow: $full;
-       -o-box-shadow: $full;
           box-shadow: $full;
           box-shadow: $full;
 }
 }
 
 
@@ -229,8 +226,7 @@ really slow down your CSS. Don't overdue it.
 	background-image: -webkit-linear-gradient(top, $from, $to);
 	background-image: -webkit-linear-gradient(top, $from, $to);
 	background-image: -moz-linear-gradient(top, $from, $to);
 	background-image: -moz-linear-gradient(top, $from, $to);
 	background-image: -o-linear-gradient(top, $from, $to);
 	background-image: -o-linear-gradient(top, $from, $to);
-	background-image: -ms-linear-gradient(top, $from, $to);
-	background-image: linear-gradient(top, $from, $to);
+	background-image: linear-gradient(to bottom, $from, $to);
 }
 }
 
 
 /*********************
 /*********************
@@ -238,12 +234,13 @@ BOX SIZING
 *********************/
 *********************/
 
 
 /* @include box-sizing(border-box); */
 /* @include box-sizing(border-box); */
+/* NOTE: value of "padding-box" is only supported in Gecko. So 
+probably best not to use it. I mean, were you going to anyway? */
 @mixin box-sizing($type: border-box) {
 @mixin box-sizing($type: border-box) {
 	-webkit-box-sizing: $type;
 	-webkit-box-sizing: $type;
 	   -moz-box-sizing: $type;
 	   -moz-box-sizing: $type;
-		-ms-box-sizing: $type;
-	     -o-box-sizing: $type; 
-			box-sizing: $type; 
+		  -ms-box-sizing: $type;
+	        box-sizing: $type;
 }
 }