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 cdace58  more work on slider
cdace58 is described below

commit cdace58af1159842f64b37df06dccd85c8e003bf
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Thu Apr 12 14:45:07 2018 +0200

    more work on slider
---
 .../JewelTheme/src/main/resources/defaults.css     | 37 +++++------
 .../src/main/sass/components-primary/_slider.sass  | 73 +++++++++++++++-------
 2 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ff93b93..50d27fe 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -350,7 +350,7 @@ j|Alert {
 
 .jewel.slider {
   position: relative;
-  height: 18px;
+  height: 27px;
   display: flex !important;
   flex-direction: row;
   background: none;
@@ -365,7 +365,7 @@ j|Alert {
   margin: 0 20px;
   padding: 0;
   width: calc(100% - 40px);
-  height: 2px;
+  height: 5px;
   background: transparent;
   user-select: none;
   color: #3CADF1;
@@ -384,17 +384,13 @@ j|Alert {
   -moz-appearance: none;
   -o-appearance: none;
   appearance: none;
-  width: 12px;
-  height: 12px;
+  width: 18px;
+  height: 18px;
+  background: linear-gradient(#4ab3f2, #2ea7f0);
+  border: 1px solid #0f88d1;
   border-radius: 50%;
-  background: #3CADF1;
-  border: none;
-}
-.jewel.slider input:focus:not(:active)::-webkit-slider-thumb, .jewel.slider 
input:focus:not(:active)::-moz-range-thumb {
-  box-shadow: 0 0 0 10px rgba(60, 173, 241, 0.26);
 }
 .jewel.slider input:active::-webkit-slider-thumb, .jewel.slider 
input:active::-moz-range-thumb {
-  background-image: none;
   transform: scale(1.5);
 }
 .jewel.slider input:focus {
@@ -405,14 +401,17 @@ j|Alert {
 }
 .jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider 
input[disabled]::-moz-range-thumb {
   background: #d9d9d9;
+  border: 1px solid #b3b3b3;
 }
 .jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider 
input[disabled]:active::-moz-range-thumb {
   transform: scale(1);
 }
 .jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
+  border: 1px solid #b3b3b3;
   background: #d9d9d9;
 }
 .jewel.slider input[disabled] + .slider-track-container > .slider-track {
+  border: 1px solid #b3b3b3;
   background: #d9d9d9;
 }
 
@@ -420,13 +419,13 @@ j|Alert {
   position: absolute;
   display: flex;
   overflow: hidden;
-  transform: translate(0, -1px);
-  margin: 0 26px;
+  transform: translate(0, -2px);
+  margin: 0 29px;
   padding: 0;
   top: 50%;
   left: 0;
-  width: calc(100% - 52px);
-  height: 2px;
+  width: calc(100% - 58px);
+  height: 5px;
   background: transparent;
   border: 0;
 }
@@ -435,16 +434,18 @@ j|Alert {
   position: relative;
   flex: 0;
   padding: 0;
-  background: #3CADF1;
-  border: 0;
+  background: linear-gradient(#4ab3f2, #2ea7f0);
+  border: 1px solid #0f88d1;
+  border-radius: 3px;
 }
 
 .slider-track {
   position: relative;
   flex: 0;
   padding: 0;
-  background: #d9d9d9;
-  border: 0;
+  background: linear-gradient(#e6e6e6, #cccccc);
+  border: 1px solid #b3b3b3;
+  border-radius: 3px;
 }
 
 .jewel.textbutton {
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 de0c99b..dc408df 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
@@ -20,13 +20,14 @@
 // Jewel Slider
 
 // Slider variables
-$slider-margin: 0 20px
+$slider-margin: 20px
 $slider-padding: 0
-$slider-min-width: calc(100% - 40px)
-$slider-min-height: 2px
-$slider-container-height: 18px
-$slider-thumb-size: 12px
+$slider-min-width: calc(100% - #{2 * $slider-margin})
+$slider-track-min-height: 5px
+$slider-track-border-radius: 3px
+$slider-thumb-size: 18px
 $slider-border-radius: 50%
+$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
 
 .jewel.slider
     position: relative
@@ -41,10 +42,10 @@ $slider-border-radius: 50%
         outline: 0
         cursor: pointer
         +appear(none)
-        margin: $slider-margin
+        margin: 0 $slider-margin
         padding: $slider-padding
         width: $slider-min-width
-        height: $slider-min-height
+        height: $slider-track-min-height
         background: transparent
         user-select: none
         color: $primary-color
@@ -64,20 +65,25 @@ $slider-border-radius: 50%
             +appear(none)
             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%)
+                //background: url("data:image/svg+xml;utf8,<?xml version='1.0' 
encoding='UTF-8'?><svg version='1.1' viewBox='0 0 18 17' 
xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink'><defs><linearGradient id='b' 
x1='50%' x2='50%' y2='100%'><stop stop-color='#54B7F4' offset='0'/><stop 
stop-color='#26A3EF' offset='1'/></linearGradient><circle id='a' cx='9.5' 
cy='8.5' r='8.5'/></defs><g fill='none' fill-rule='evenodd'><g 
transform='translate(-664 -229)'><g tra [...]
+                // background-repeat: no-repeat
+                // background-size: 100%
+                // background-position: center
+                // background-attachment: fixed
             border-radius: $slider-border-radius
-            background: $primary-color
-            border: none
             
-        &:focus:not(:active)::-webkit-slider-thumb, 
&:focus:not(:active)::-moz-range-thumb
-            box-shadow: 0 0 0 10px rgba($primary-color, 0.26)
+        //&:focus:not(:active)::-webkit-slider-thumb, 
&:focus:not(:active)::-moz-range-thumb
+        //    box-shadow: 0 0 0 10px rgba($primary-color, 0.26)
         
         &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
-            background-image: none
             transform: scale(1.5)
-            
-        //&:hover
-          //  transform: scale(1.25)
-
+        
         &:focus
             outline: none
 
@@ -86,14 +92,17 @@ $slider-border-radius: 50%
             
             &::-webkit-slider-thumb, &::-moz-range-thumb
                 background: $disabled-border-color
+                border: 1px solid darken($disabled-border-color, 15%)
 
             &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
                 transform: scale(1.0)
 
             + .slider-track-container > .slider-track-fill
+                border: 1px solid darken($disabled-border-color, 15%)
                 background: $disabled-border-color
 
             + .slider-track-container > .slider-track
+                border: 1px solid darken($disabled-border-color, 15%)
                 background: $disabled-border-color
 
 
@@ -102,16 +111,16 @@ $slider-border-radius: 50%
     display: flex
     
     overflow: hidden
-    transform: translate(0, -1px)
+    transform: translate(0, -2px)
     
-    margin: 0 26px
+    margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
     padding: 0
     
     top: $slider-border-radius
     left: 0
     
-    width: calc(100% - 52px)
-    height: $slider-min-height
+    width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
+    height: $slider-track-min-height
     
     background: transparent
     border: 0
@@ -122,8 +131,16 @@ $slider-border-radius: 50%
     
     padding: 0
     
-    background: $primary-color
-    border: 0
+    //background: $primary-color
+    //border: 0
+
+    @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%)
+    border-radius: $slider-track-border-radius
 
 .slider-track
     position: relative
@@ -131,5 +148,13 @@ $slider-border-radius: 50%
     
     padding: 0
     
-    background: $default-color
-    border: 0
\ No newline at end of file
+    //background: $default-color
+    //border: 0
+
+    @if $flat
+        background: $default-color
+        border: 0
+    @else
+        background: linear-gradient(lighten($default-color, 5%), 
darken($default-color, 5%))
+        border: 1px solid darken($default-color, 15%)
+    border-radius: $slider-track-border-radius
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.

Reply via email to