Use standard CSS gradients in Color Editor (#12861)

valtlai · petetnt · commit c77d4f860ee0 · 2016-10-30T18:10:21.000+02:00
diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js
@@ -171,7 +171,7 @@ define(function (require, exports, module) {
 
         // Update gradients in color square & opacity slider
         this.$selectionBase.css("background-color", colorObject.toHexString());
-        this.$opacityGradient.css("background-image", "-webkit-gradient(linear, 0% 0%, 0% 100%, from(" + hueColor + "), to(transparent))");
+        this.$opacityGradient.css("background-image", "linear-gradient(" + hueColor + ", transparent)");
 
         // Update slider thumb positions
         this.$hueSelector.css("bottom", (this._hsv.h / 360 * 100) + "%");
diff --git a/src/extensions/default/InlineColorEditor/css/main.less b/src/extensions/default/InlineColorEditor/css/main.less
@@ -135,10 +135,10 @@
     float: left;
 }
 .color-editor section .color-selection-field .saturation-gradient {
-    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#fff), to(rgba(255,255,255,0)));
+    background-image: linear-gradient(to left, hsla(0,0%,100%,0), #fff);
 }
 .color-editor section .color-selection-field .luminosity-gradient {
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
+    background-image: linear-gradient(hsla(0,0%,100%,0), #000);
 }
 .color-editor section .color-selection-field .selector-base {
     width: 12px;
@@ -200,7 +200,7 @@
     margin-right: 0px;  
 }
 .color-editor section .hue-slider {
-    background-image: -webkit-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
+    background-image: linear-gradient(#f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
 }
 .color-editor section footer {
     font-size: 100%;

Original file line number	Diff line number	Diff line change
`@@ -135,10 +135,10 @@`
`135`	`135`	`float: left;`
`136`	`136`	`}`
`137`	`137`	`.color-editor section .color-selection-field .saturation-gradient {`
`138`		`- background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#fff), to(rgba(255,255,255,0)));`
	`138`	`+ background-image: linear-gradient(to left, hsla(0,0%,100%,0), #fff);`
`139`	`139`	`}`
`140`	`140`	`.color-editor section .color-selection-field .luminosity-gradient {`
`141`		`- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));`
	`141`	`+ background-image: linear-gradient(hsla(0,0%,100%,0), #000);`
`142`	`142`	`}`
`143`	`143`	`.color-editor section .color-selection-field .selector-base {`
`144`	`144`	`width: 12px;`
`@@ -200,7 +200,7 @@`
`200`	`200`	`margin-right: 0px;`
`201`	`201`	`}`
`202`	`202`	`.color-editor section .hue-slider {`
`203`		`- background-image: -webkit-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);`
	`203`	`+ background-image: linear-gradient(#f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);`
`204`	`204`	`}`
`205`	`205`	`.color-editor section footer {`
`206`	`206`	`font-size: 100%;`