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 <[email protected]>
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
[email protected].
