You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by gr...@apache.org on 2019/11/05 05:21:41 UTC
[royale-asjs] branch develop updated: Still figuring out the sass
stuff... refactor setup for VSlider into Jewel. TBC via Carlos...
This is an automated email from the ASF dual-hosted git repository.
gregdove 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 40c6997 Still figuring out the sass stuff... refactor setup for VSlider into Jewel. TBC via Carlos...
40c6997 is described below
commit 40c69978b58ee5dd41e2d1aa52f5d724f997717e
Author: greg-dove <gr...@gmail.com>
AuthorDate: Tue Nov 5 18:21:20 2019 +1300
Still figuring out the sass stuff... refactor setup for VSlider into Jewel. TBC via Carlos...
---
.../projects/Jewel/src/main/resources/defaults.css | 36 ++++++++++++
.../Jewel/src/main/sass/components}/_vslider.sass | 68 ++++++++++++----------
.../projects/Jewel/src/main/sass/defaults.sass | 3 +-
.../JewelTheme/src/main/resources/defaults.css | 39 -------------
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 -
5 files changed, 75 insertions(+), 72 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index bc02538..cf86acc 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3446,6 +3446,42 @@ j|Slider {
iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
}
}
+.vslider {
+ min-width: 27px;
+ min-height: 150px;
+ position: relative;
+ display: inline-block;
+}
+.vslider .transform-container {
+ height: 100%;
+ display: inline-block;
+ position: absolute;
+ margin-left: calc(50% - 13.5px);
+}
+.vslider .sizer {
+ height: 100%;
+ visibility: hidden;
+}
+.vslider .jewel.slider {
+ transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 27px;
+ position: absolute;
+}
+.vslider .jewel.slider input {
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+}
+.vslider .slider-track-container {
+ margin: 0;
+ width: 100%;
+ padding-left: 5px;
+ padding-right: 5px;
+}
+
.jewel.snackbar {
bottom: 0;
position: fixed;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
similarity index 58%
rename from frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
rename to frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
index 35437a9..94dd970 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
@@ -19,39 +19,45 @@
// Jewel VSlider
+// VSlider variables
+@import "slider"
+//I could not get "$slider-container-height / 2" , so recalculating from components :
+$vslider-half-width: #{($slider-thumb-size + round($slider-thumb-size/2))/2}
+$vslider-margin-left: calc(50% - #{$vslider-half-width})
+$vslider-container-min-height: 150px
+
+// Jewel VSlider
+
//mainly uses the base (horizontal) 'slider' styles, but has various extras to override or set styles to support the
//layout via internal rotation transform of the original component approach in nested div elements
//there is some tricky use of a non-visual img element to get layout working with the css transform approach
.vslider
- min-width: 27px
- min-height: 150px
- position: relative
- display: inline-block
- .transform-container
- height: 100%
- display: inline-block
- position: absolute
- margin-left: calc(50% - 13.5px)
- .sizer
- height: 100%
- visibility: hidden
- .jewel.slider
- transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)'
- left: 0
- right: 0
- top: 0
- height: 27px
- position: absolute
- input
- margin-left: 0
- margin-right: 0
- width: 100%
- .slider-track-container
- margin-top: 0
- margin-right: 0
- padding-left: 5px
- margin-bottom: 0
- margin-left: 0px
- width: 100%
- padding-right: 5px
+ min-width: $slider-container-height
+ min-height: $vslider-container-min-height
+ position: relative
+ display: inline-block
+ .transform-container
+ height: 100%
+ display: inline-block
+ position: absolute
+ margin-left: $vslider-margin-left
+ .sizer
+ height: 100%
+ visibility: hidden
+ .jewel.slider
+ transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)'
+ left: 0
+ right: 0
+ top: 0
+ height: $slider-container-height
+ position: absolute
+ input
+ margin-left: 0
+ margin-right: 0
+ width: 100%
+ .slider-track-container
+ margin: 0
+ width: 100%
+ padding-left: 5px
+ padding-right: 5px
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 6195246..d17b721 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -49,7 +49,8 @@
@import "components/popup"
@import "components/radiobutton"
@import "components/sectioncontent"
-@import "components/slider"
+//vslider imports slider as well here:
+@import "components/vslider"
@import "components/snackbar"
@import "components/tabbar"
@import "components/table"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index a2fd038..b0ed671 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -816,45 +816,6 @@ j|FormItem {
border-radius: 3px;
}
-.vslider {
- min-width: 27px;
- min-height: 150px;
- position: relative;
- display: inline-block;
-}
-.vslider .transform-container {
- height: 100%;
- display: inline-block;
- position: absolute;
- margin-left: calc(50% - 13.5px);
-}
-.vslider .sizer {
- height: 100%;
- visibility: hidden;
-}
-.vslider .jewel.slider {
- transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
- left: 0;
- right: 0;
- top: 0;
- height: 27px;
- position: absolute;
-}
-.vslider .jewel.slider input {
- margin-left: 0;
- margin-right: 0;
- width: 100%;
-}
-.vslider .slider-track-container {
- margin-top: 0;
- margin-right: 0;
- padding-left: 5px;
- margin-bottom: 0;
- margin-left: 0px;
- width: 100%;
- padding-right: 5px;
-}
-
.jewel.snackbar {
will-change: transform;
transform: translate(0, 100%);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 80b9bbd..9d6257b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -50,7 +50,6 @@
@import "components-primary/popup"
@import "components-primary/radiobutton"
@import "components-primary/slider"
-@import "components-primary/vslider"
@import "components-primary/snackbar"
@import "components-primary/tabbar"
@import "components-primary/table"
Re: [royale-asjs] branch develop updated: Still figuring out the sass
stuff... refactor setup for VSlider into Jewel. TBC via Carlos...
Posted by Carlos Rovira <ca...@apache.org>.
Ops, sorry, I saw you already did it :)
thanks!
El mar., 5 nov. 2019 a las 20:08, Carlos Rovira (<ca...@apache.org>)
escribió:
> Hi Greg,
> thanks for adding this. I'll try to see SASS things on week end.
> Can you add example(s) to Slider page in Tour de Jewel?
> thanks!
>
> El mar., 5 nov. 2019 a las 6:21, <gr...@apache.org> escribió:
>
>> This is an automated email from the ASF dual-hosted git repository.
>>
>> gregdove 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 40c6997 Still figuring out the sass stuff... refactor setup for
>> VSlider into Jewel. TBC via Carlos...
>> 40c6997 is described below
>>
>> commit 40c69978b58ee5dd41e2d1aa52f5d724f997717e
>> Author: greg-dove <gr...@gmail.com>
>> AuthorDate: Tue Nov 5 18:21:20 2019 +1300
>>
>> Still figuring out the sass stuff... refactor setup for VSlider into
>> Jewel. TBC via Carlos...
>> ---
>> .../projects/Jewel/src/main/resources/defaults.css | 36 ++++++++++++
>> .../Jewel/src/main/sass/components}/_vslider.sass | 68
>> ++++++++++++----------
>> .../projects/Jewel/src/main/sass/defaults.sass | 3 +-
>> .../JewelTheme/src/main/resources/defaults.css | 39 -------------
>> .../themes/JewelTheme/src/main/sass/defaults.sass | 1 -
>> 5 files changed, 75 insertions(+), 72 deletions(-)
>>
>> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
>> b/frameworks/projects/Jewel/src/main/resources/defaults.css
>> index bc02538..cf86acc 100644
>> --- a/frameworks/projects/Jewel/src/main/resources/defaults.css
>> +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
>> @@ -3446,6 +3446,42 @@ j|Slider {
>> iTrackView:
>> ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
>> }
>> }
>> +.vslider {
>> + min-width: 27px;
>> + min-height: 150px;
>> + position: relative;
>> + display: inline-block;
>> +}
>> +.vslider .transform-container {
>> + height: 100%;
>> + display: inline-block;
>> + position: absolute;
>> + margin-left: calc(50% - 13.5px);
>> +}
>> +.vslider .sizer {
>> + height: 100%;
>> + visibility: hidden;
>> +}
>> +.vslider .jewel.slider {
>> + transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
>> + left: 0;
>> + right: 0;
>> + top: 0;
>> + height: 27px;
>> + position: absolute;
>> +}
>> +.vslider .jewel.slider input {
>> + margin-left: 0;
>> + margin-right: 0;
>> + width: 100%;
>> +}
>> +.vslider .slider-track-container {
>> + margin: 0;
>> + width: 100%;
>> + padding-left: 5px;
>> + padding-right: 5px;
>> +}
>> +
>> .jewel.snackbar {
>> bottom: 0;
>> position: fixed;
>> diff --git
>> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
>> b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
>> similarity index 58%
>> rename from
>> frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
>> rename to frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
>> index 35437a9..94dd970 100644
>> ---
>> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
>> +++ b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
>> @@ -19,39 +19,45 @@
>>
>> // Jewel VSlider
>>
>> +// VSlider variables
>> +@import "slider"
>> +//I could not get "$slider-container-height / 2" , so recalculating from
>> components :
>> +$vslider-half-width: #{($slider-thumb-size +
>> round($slider-thumb-size/2))/2}
>> +$vslider-margin-left: calc(50% - #{$vslider-half-width})
>> +$vslider-container-min-height: 150px
>> +
>> +// Jewel VSlider
>> +
>> //mainly uses the base (horizontal) 'slider' styles, but has various
>> extras to override or set styles to support the
>> //layout via internal rotation transform of the original component
>> approach in nested div elements
>> //there is some tricky use of a non-visual img element to get layout
>> working with the css transform approach
>> .vslider
>> - min-width: 27px
>> - min-height: 150px
>> - position: relative
>> - display: inline-block
>> - .transform-container
>> - height: 100%
>> - display: inline-block
>> - position: absolute
>> - margin-left: calc(50% - 13.5px)
>> - .sizer
>> - height: 100%
>> - visibility: hidden
>> - .jewel.slider
>> - transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%,
>> 50%)'
>> - left: 0
>> - right: 0
>> - top: 0
>> - height: 27px
>> - position: absolute
>> - input
>> - margin-left: 0
>> - margin-right: 0
>> - width: 100%
>> - .slider-track-container
>> - margin-top: 0
>> - margin-right: 0
>> - padding-left: 5px
>> - margin-bottom: 0
>> - margin-left: 0px
>> - width: 100%
>> - padding-right: 5px
>> + min-width: $slider-container-height
>> + min-height: $vslider-container-min-height
>> + position: relative
>> + display: inline-block
>> + .transform-container
>> + height: 100%
>> + display: inline-block
>> + position: absolute
>> + margin-left: $vslider-margin-left
>> + .sizer
>> + height: 100%
>> + visibility: hidden
>> + .jewel.slider
>> + transform: 'translate(-50%, -50%) rotate(270deg)
>> translate(-50%, 50%)'
>> + left: 0
>> + right: 0
>> + top: 0
>> + height: $slider-container-height
>> + position: absolute
>> + input
>> + margin-left: 0
>> + margin-right: 0
>> + width: 100%
>> + .slider-track-container
>> + margin: 0
>> + width: 100%
>> + padding-left: 5px
>> + padding-right: 5px
>>
>> diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass
>> b/frameworks/projects/Jewel/src/main/sass/defaults.sass
>> index 6195246..d17b721 100644
>> --- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
>> +++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
>> @@ -49,7 +49,8 @@
>> @import "components/popup"
>> @import "components/radiobutton"
>> @import "components/sectioncontent"
>> -@import "components/slider"
>> +//vslider imports slider as well here:
>> +@import "components/vslider"
>> @import "components/snackbar"
>> @import "components/tabbar"
>> @import "components/table"
>> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>> b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>> index a2fd038..b0ed671 100644
>> --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>> +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
>> @@ -816,45 +816,6 @@ j|FormItem {
>> border-radius: 3px;
>> }
>>
>> -.vslider {
>> - min-width: 27px;
>> - min-height: 150px;
>> - position: relative;
>> - display: inline-block;
>> -}
>> -.vslider .transform-container {
>> - height: 100%;
>> - display: inline-block;
>> - position: absolute;
>> - margin-left: calc(50% - 13.5px);
>> -}
>> -.vslider .sizer {
>> - height: 100%;
>> - visibility: hidden;
>> -}
>> -.vslider .jewel.slider {
>> - transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
>> - left: 0;
>> - right: 0;
>> - top: 0;
>> - height: 27px;
>> - position: absolute;
>> -}
>> -.vslider .jewel.slider input {
>> - margin-left: 0;
>> - margin-right: 0;
>> - width: 100%;
>> -}
>> -.vslider .slider-track-container {
>> - margin-top: 0;
>> - margin-right: 0;
>> - padding-left: 5px;
>> - margin-bottom: 0;
>> - margin-left: 0px;
>> - width: 100%;
>> - padding-right: 5px;
>> -}
>> -
>> .jewel.snackbar {
>> will-change: transform;
>> transform: translate(0, 100%);
>> diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
>> b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
>> index 80b9bbd..9d6257b 100644
>> --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
>> +++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
>> @@ -50,7 +50,6 @@
>> @import "components-primary/popup"
>> @import "components-primary/radiobutton"
>> @import "components-primary/slider"
>> -@import "components-primary/vslider"
>> @import "components-primary/snackbar"
>> @import "components-primary/tabbar"
>> @import "components-primary/table"
>>
>>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: Still figuring out the sass
stuff... refactor setup for VSlider into Jewel. TBC via Carlos...
Posted by Carlos Rovira <ca...@apache.org>.
Hi Greg,
thanks for adding this. I'll try to see SASS things on week end.
Can you add example(s) to Slider page in Tour de Jewel?
thanks!
El mar., 5 nov. 2019 a las 6:21, <gr...@apache.org> escribió:
> This is an automated email from the ASF dual-hosted git repository.
>
> gregdove 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 40c6997 Still figuring out the sass stuff... refactor setup for
> VSlider into Jewel. TBC via Carlos...
> 40c6997 is described below
>
> commit 40c69978b58ee5dd41e2d1aa52f5d724f997717e
> Author: greg-dove <gr...@gmail.com>
> AuthorDate: Tue Nov 5 18:21:20 2019 +1300
>
> Still figuring out the sass stuff... refactor setup for VSlider into
> Jewel. TBC via Carlos...
> ---
> .../projects/Jewel/src/main/resources/defaults.css | 36 ++++++++++++
> .../Jewel/src/main/sass/components}/_vslider.sass | 68
> ++++++++++++----------
> .../projects/Jewel/src/main/sass/defaults.sass | 3 +-
> .../JewelTheme/src/main/resources/defaults.css | 39 -------------
> .../themes/JewelTheme/src/main/sass/defaults.sass | 1 -
> 5 files changed, 75 insertions(+), 72 deletions(-)
>
> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
> b/frameworks/projects/Jewel/src/main/resources/defaults.css
> index bc02538..cf86acc 100644
> --- a/frameworks/projects/Jewel/src/main/resources/defaults.css
> +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
> @@ -3446,6 +3446,42 @@ j|Slider {
> iTrackView:
> ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
> }
> }
> +.vslider {
> + min-width: 27px;
> + min-height: 150px;
> + position: relative;
> + display: inline-block;
> +}
> +.vslider .transform-container {
> + height: 100%;
> + display: inline-block;
> + position: absolute;
> + margin-left: calc(50% - 13.5px);
> +}
> +.vslider .sizer {
> + height: 100%;
> + visibility: hidden;
> +}
> +.vslider .jewel.slider {
> + transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
> + left: 0;
> + right: 0;
> + top: 0;
> + height: 27px;
> + position: absolute;
> +}
> +.vslider .jewel.slider input {
> + margin-left: 0;
> + margin-right: 0;
> + width: 100%;
> +}
> +.vslider .slider-track-container {
> + margin: 0;
> + width: 100%;
> + padding-left: 5px;
> + padding-right: 5px;
> +}
> +
> .jewel.snackbar {
> bottom: 0;
> position: fixed;
> diff --git
> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
> b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
> similarity index 58%
> rename from
> frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
> rename to frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
> index 35437a9..94dd970 100644
> ---
> a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_vslider.sass
> +++ b/frameworks/projects/Jewel/src/main/sass/components/_vslider.sass
> @@ -19,39 +19,45 @@
>
> // Jewel VSlider
>
> +// VSlider variables
> +@import "slider"
> +//I could not get "$slider-container-height / 2" , so recalculating from
> components :
> +$vslider-half-width: #{($slider-thumb-size +
> round($slider-thumb-size/2))/2}
> +$vslider-margin-left: calc(50% - #{$vslider-half-width})
> +$vslider-container-min-height: 150px
> +
> +// Jewel VSlider
> +
> //mainly uses the base (horizontal) 'slider' styles, but has various
> extras to override or set styles to support the
> //layout via internal rotation transform of the original component
> approach in nested div elements
> //there is some tricky use of a non-visual img element to get layout
> working with the css transform approach
> .vslider
> - min-width: 27px
> - min-height: 150px
> - position: relative
> - display: inline-block
> - .transform-container
> - height: 100%
> - display: inline-block
> - position: absolute
> - margin-left: calc(50% - 13.5px)
> - .sizer
> - height: 100%
> - visibility: hidden
> - .jewel.slider
> - transform: 'translate(-50%, -50%) rotate(270deg) translate(-50%,
> 50%)'
> - left: 0
> - right: 0
> - top: 0
> - height: 27px
> - position: absolute
> - input
> - margin-left: 0
> - margin-right: 0
> - width: 100%
> - .slider-track-container
> - margin-top: 0
> - margin-right: 0
> - padding-left: 5px
> - margin-bottom: 0
> - margin-left: 0px
> - width: 100%
> - padding-right: 5px
> + min-width: $slider-container-height
> + min-height: $vslider-container-min-height
> + position: relative
> + display: inline-block
> + .transform-container
> + height: 100%
> + display: inline-block
> + position: absolute
> + margin-left: $vslider-margin-left
> + .sizer
> + height: 100%
> + visibility: hidden
> + .jewel.slider
> + transform: 'translate(-50%, -50%) rotate(270deg)
> translate(-50%, 50%)'
> + left: 0
> + right: 0
> + top: 0
> + height: $slider-container-height
> + position: absolute
> + input
> + margin-left: 0
> + margin-right: 0
> + width: 100%
> + .slider-track-container
> + margin: 0
> + width: 100%
> + padding-left: 5px
> + padding-right: 5px
>
> diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass
> b/frameworks/projects/Jewel/src/main/sass/defaults.sass
> index 6195246..d17b721 100644
> --- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
> +++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
> @@ -49,7 +49,8 @@
> @import "components/popup"
> @import "components/radiobutton"
> @import "components/sectioncontent"
> -@import "components/slider"
> +//vslider imports slider as well here:
> +@import "components/vslider"
> @import "components/snackbar"
> @import "components/tabbar"
> @import "components/table"
> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> index a2fd038..b0ed671 100644
> --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> @@ -816,45 +816,6 @@ j|FormItem {
> border-radius: 3px;
> }
>
> -.vslider {
> - min-width: 27px;
> - min-height: 150px;
> - position: relative;
> - display: inline-block;
> -}
> -.vslider .transform-container {
> - height: 100%;
> - display: inline-block;
> - position: absolute;
> - margin-left: calc(50% - 13.5px);
> -}
> -.vslider .sizer {
> - height: 100%;
> - visibility: hidden;
> -}
> -.vslider .jewel.slider {
> - transform: "translate(-50%, -50%) rotate(270deg) translate(-50%, 50%)";
> - left: 0;
> - right: 0;
> - top: 0;
> - height: 27px;
> - position: absolute;
> -}
> -.vslider .jewel.slider input {
> - margin-left: 0;
> - margin-right: 0;
> - width: 100%;
> -}
> -.vslider .slider-track-container {
> - margin-top: 0;
> - margin-right: 0;
> - padding-left: 5px;
> - margin-bottom: 0;
> - margin-left: 0px;
> - width: 100%;
> - padding-right: 5px;
> -}
> -
> .jewel.snackbar {
> will-change: transform;
> transform: translate(0, 100%);
> diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
> b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
> index 80b9bbd..9d6257b 100644
> --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
> +++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
> @@ -50,7 +50,6 @@
> @import "components-primary/popup"
> @import "components-primary/radiobutton"
> @import "components-primary/slider"
> -@import "components-primary/vslider"
> @import "components-primary/snackbar"
> @import "components-primary/tabbar"
> @import "components-primary/table"
>
>
--
Carlos Rovira
http://about.me/carlosrovira