[royale-asjs] branch develop updated: jewel-themes: fix a bug for slider not changing thumb theme at runtime. webkit is unable to override css rules if it find other definitions on the same line, so we need to separate the whole definition. Debug this was really hard and many hours involved

[ca...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 4004b62  jewel-themes: fix a bug for slider not changing thumb theme at runtime. webkit is unable to override css rules if it find other definitions on the same line, so we need to separate the whole definition. Debug this was really hard and many hours involved
4004b62 is described below

commit 4004b626797b2c0cd8f6e3f60030e978887b6592
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jan 5 12:10:55 2020 +0100

    jewel-themes: fix a bug for slider not changing thumb theme at runtime. webkit is unable to override css rules if it find other definitions on the same line, so we need to separate the whole definition. Debug this was really hard and many hours involved
---
 .../themes/JewelTheme/src/main/resources/defaults.css    | 10 +++++++++-
 .../src/main/sass/components-primary/_slider.sass        | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 2f94f05..beaa5d7 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -790,7 +790,15 @@ j|FormItem {
   border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
-.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
+.jewel.slider input::-webkit-slider-thumb {
+  width: 18px;
+  height: 18px;
+  background: linear-gradient(#4ab3f2, #2ea7f0);
+  border: 1px solid #0f88d1;
+  box-shadow: inset 0 1px 0 #9bd5f8, 0 0 0 1px rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+}
+.jewel.slider input::-moz-range-thumb {
   width: 18px;
   height: 18px;
   background: linear-gradient(#4ab3f2, #2ea7f0);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
index 1f68c92..7f4c538 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
@@ -48,8 +48,20 @@ $slider-scale-transform: 1.4
                 border: 1px solid darken($default-color, 15%)
             border-radius: $slider-track-border-radius
 
-        // -- THUMB
-        &::-webkit-slider-thumb, &::-moz-range-thumb
+        // -- THUMB - Notice that we need to separate webkit and moz thumb whole definitions since webkit is unable to work with both mixed
+        &::-webkit-slider-thumb
+            width: $slider-thumb-size
+            height: $slider-thumb-size
+            @if $flat
+                background: $primary-color
+                border: 0
+            @else
+                background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
+                border: 1px solid darken($primary-color, 15%)
+                box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
+            border-radius: $slider-border-radius
+        
+        &::-moz-range-thumb
             width: $slider-thumb-size
             height: $slider-thumb-size
             @if $flat