Fix #150 - Fix colour editor for use in browsers that don't use -webk…

…it- prefix
mozilla · Apr 24, 2015 · ac9d939 · ac9d939
1 parent a7def69
commit ac9d939
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js
@@ -171,8 +171,8 @@ 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(to bottom, " + hueColor + " 0%, rgba(0,0,0,0) 100%)");
+
         // Update slider thumb positions
         this.$hueSelector.css("bottom", (this._hsv.h / 360 * 100) + "%");
         this.$opacitySelector.css("bottom", (this._hsv.a * 100) + "%");

diff --git a/src/extensions/default/InlineColorEditor/css/main.less b/src/extensions/default/InlineColorEditor/css/main.less
@@ -137,10 +137,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 right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
 }
 .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(to top, #000000 0%, rgba(255,255,255,0) 100%);
 }
 .color-editor section .color-selection-field .selector-base {
     width: 12px;
@@ -202,7 +202,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(to bottom, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00);
 }
 .color-editor section footer {
     font-size: 100%;