You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/06/14 09:12:01 UTC
[royale-asjs] branch develop updated: Move css that is structure to
Jewel theme and left only things that are really themeizable on themes css
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 09a04b4 Move css that is structure to Jewel theme and left only things that are really themeizable on themes css
09a04b4 is described below
commit 09a04b482560f09f1b9d3534bf02d3860319b038
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 14 11:11:51 2018 +0200
Move css that is structure to Jewel theme and left only things that are really themeizable on themes css
---
.../projects/Jewel/src/main/resources/defaults.css | 223 +++++++++++++++++++++
.../{components/_checkbox.sass => _mixins.sass} | 18 +-
.../Jewel/src/main/sass/components/_button.sass | 4 +-
.../Jewel/src/main/sass/components/_checkbox.sass | 73 +++++++
.../src/main/sass/components/_radiobutton.sass | 73 +++++++
.../Jewel/src/main/sass/components/_slider.sass | 98 ++++++++-
.../Jewel/src/main/sass/components/_textinput.sass | 29 +++
.../projects/Jewel/src/main/sass/defaults.sass | 3 +-
.../JewelTheme/src/main/resources/defaults.css | 176 ----------------
.../themes/JewelTheme/src/main/sass/_mixins.sass | 15 --
.../src/main/sass/components-primary/_button.sass | 1 -
.../main/sass/components-primary/_checkbox.sass | 55 -----
.../main/sass/components-primary/_radiobutton.sass | 57 +-----
.../src/main/sass/components-primary/_slider.sass | 89 +-------
.../main/sass/components-primary/_textinput.sass | 29 +--
15 files changed, 519 insertions(+), 424 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 6b521dd..6dfc62c 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -119,6 +119,65 @@ j|Card {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
}
+.jewel.checkbox {
+ display: inline-block;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 22px;
+}
+.jewel.checkbox input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ opacity: 0;
+}
+.jewel.checkbox input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+}
+.jewel.checkbox input + span::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: 0px;
+ top: 0px;
+ opacity: 0;
+}
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ opacity: 1;
+}
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ outline: none;
+}
+.jewel.checkbox input[disabled] {
+ cursor: unset;
+}
+.jewel.checkbox input[disabled] + span {
+ cursor: unset;
+}
+.jewel.checkbox span {
+ cursor: pointer;
+ margin: 0;
+ vertical-align: top;
+ line-height: 24px;
+}
+
@media -royale-swf {
j|CheckBox {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView");
@@ -354,15 +413,157 @@ j|List {
IContentView: ClassReference("org.apache.royale.core.supportClasses.DataGroup");
}
}
+.jewel.radiobutton {
+ display: inline-block;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 22px;
+}
+.jewel.radiobutton input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ opacity: 0;
+}
+.jewel.radiobutton input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+}
+.jewel.radiobutton input + span::after {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+ opacity: 0;
+}
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ opacity: 1;
+}
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ outline: none;
+}
+.jewel.radiobutton input[disabled] {
+ cursor: unset;
+}
+.jewel.radiobutton input[disabled] + span {
+ cursor: unset;
+}
+.jewel.radiobutton span {
+ cursor: pointer;
+ margin: 0;
+ vertical-align: top;
+ line-height: 24px;
+}
+
@media -royale-swf {
j|RadioButton {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.RadioButtonView");
}
}
+.jewel.slider {
+ position: relative;
+ height: 27px;
+ display: flex !important;
+ flex-direction: row;
+ background: none;
+}
+.jewel.slider input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ outline: 0;
+ cursor: pointer;
+ user-select: none;
+ align-self: center;
+ z-index: 1;
+ margin: 0 20px;
+ padding: 0;
+ width: calc(100% - 40px);
+ height: 36px;
+ background: transparent;
+}
+.jewel.slider input::-webkit-slider-runnable-track {
+ background: transparent;
+}
+.jewel.slider input::-moz-range-track {
+ background: transparent;
+ border: none;
+}
+.jewel.slider input::-ms-track {
+ width: 100%;
+ height: 6px;
+ background: none;
+ border: none;
+ color: transparent;
+}
+.jewel.slider input::-ms-fill-lower {
+ padding: 0;
+}
+.jewel.slider input::-ms-fill-upper {
+ padding: 0;
+}
+.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+}
+.jewel.slider input:focus {
+ outline: none;
+}
+.jewel.slider input[disabled] {
+ cursor: unset;
+}
.jewel.slider input::-ms-tooltip {
display: none;
}
+.slider-track-container {
+ position: absolute;
+ display: flex;
+ overflow: hidden;
+ transform: translate(0, -3px);
+ margin: 0 29px;
+ padding: 0;
+ left: 0;
+ width: calc(100% - 58px);
+ height: 6px;
+ background: transparent;
+ border: 0;
+}
+
+.slider-track-fill {
+ position: relative;
+ flex: 0;
+ padding: 0;
+}
+
+.slider-track {
+ position: relative;
+ flex: 0;
+ padding: 0;
+}
+
j|Slider {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SliderView");
@@ -375,6 +576,28 @@ j|Slider {
iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
}
}
+.jewel.textinput {
+ position: relative;
+ display: inline-flex;
+}
+.jewel.textinput input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0.72em 1.12em;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ text-align: left;
+ line-height: normal !important;
+}
+.jewel.textinput input[disabled] {
+ cursor: unset;
+}
+
j|TextInput {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
similarity index 78%
copy from frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
copy to frameworks/projects/Jewel/src/main/sass/_mixins.sass
index d1c7438..430bd51 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
@@ -17,11 +17,15 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.checkbox
+=appear($val)
+ -webkit-appearance: $val
+ -moz-appearance: $val
+ -o-appearance: $val
+ -ms-appearance: $val
+ appearance: $val
-@media -royale-swf
- j|CheckBox
- // --- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
- //font-size: 11px
- //font-family: Arial
+//=trans($val...)
+// -webkit-transition: $val
+// -moz-transition: $val
+// -o-transition: $val
+// transition: $val
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
index ea0c8ae..368d4a0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -22,8 +22,8 @@
// Button variables
$button-margin: 0 !default
$button-padding: 0.72em 1.12em !default
-$button-min-height: 28px !default
-$button-min-width: 74px !default
+// $button-min-height: 28px !default
+// $button-min-width: 74px !default
.jewel.button
margin: $button-margin
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index d1c7438..a794718 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -17,7 +17,80 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-button-size: 22px
+$checkbox-button-xoffset: 0px
+$checkbox-button-yoffset: 0px
+
.jewel.checkbox
+ display: inline-block
+ position: relative
+
+ margin: 0
+ padding: 0
+
+ width: 100%
+ height: $checkbox-button-size
+
+ // -- INPUT
+ input
+ +appear(none)
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ line-height: $checkbox-button-size
+ opacity: 0
+
+ + span::before
+ content: ' '
+ position: absolute
+
+ left: $checkbox-button-xoffset
+ top: $checkbox-button-yoffset
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ + span::after
+ content: ' '
+ position: absolute
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ left: $checkbox-button-xoffset
+ top: $checkbox-button-yoffset
+
+ opacity: 0
+
+ &:checked + span::after, &:checked:active + span::after
+ opacity: 1
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
+ & + span
+ cursor: unset
+
+ // -- LABEL
+ span
+ cursor: pointer
+
+ margin: 0
+ vertical-align: top
+
+ line-height: $checkbox-button-size + 2
@media -royale-swf
j|CheckBox
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
index a5471c4..dcae3ce 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
@@ -17,7 +17,80 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-button-xoffset: 0px
+$radiobutton-button-yoffset: 0px
+
.jewel.radiobutton
+ display: inline-block
+ position: relative
+
+ margin: 0
+ padding: 0
+
+ width: 100%
+ height: $radiobutton-button-size
+
+ // -- INPUT
+ input
+ +appear(none)
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ line-height: $radiobutton-button-size
+ opacity: 0
+
+ + span::before
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ + span::after
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ opacity: 0
+
+ &:checked + span::after, &:checked:active + span::after
+ opacity: 1
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
+ & + span
+ cursor: unset
+
+ // -- LABEL
+ span
+ cursor: pointer
+
+ margin: 0
+ vertical-align: top
+
+ line-height: $radiobutton-button-size + 2
@media -royale-swf
j|RadioButton
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index f537597..bb4c187 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -17,14 +17,106 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Slider
+
+// Slider variables
+$slider-margin: 20px
+$slider-padding: 0
+$slider-min-width: calc(100% - #{2 * $slider-margin})
+$slider-track-min-height: 6px
+$slider-thumb-size: 18px
+$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
+
.jewel.slider
- //width: 100px
- //height: 30px
- //position: relative
+ position: relative
+ height: $slider-container-height
+
+ display: flex !important
+ flex-direction: row
+
+ background: none
+
+ // -- INPUT
input
+ +appear(none)
+ outline: 0
+
+ cursor: pointer
+ user-select: none
+
+ align-self: center
+ z-index: 1
+
+ margin: 0 $slider-margin
+ padding: $slider-padding
+
+ width: $slider-min-width
+ height: $slider-thumb-size * 2 //needed for IE11
+
+ background: transparent
+
+ // -- TRACK
+ &::-webkit-slider-runnable-track
+ background: transparent
+
+ &::-moz-range-track
+ background: transparent
+ border: none
+
+ &::-ms-track
+ width: 100%
+ height: $slider-track-min-height
+ background: none
+ border: none
+ color: transparent
+
+ &::-ms-fill-lower
+ padding: 0
+ &::-ms-fill-upper
+ padding: 0
+
+ // -- THUMB
+ &::-webkit-slider-thumb, &::-moz-range-thumb
+ +appear(none)
+
+ &:focus
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
&::-ms-tooltip
display: none
+.slider-track-container
+ position: absolute
+ display: flex
+
+ overflow: hidden
+ transform: translate(0, -#{ round($slider-track-min-height/2) })
+
+ margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
+ padding: 0
+
+ left: 0
+
+ width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
+ height: $slider-track-min-height
+
+ background: transparent
+ border: 0
+
+.slider-track-fill
+ position: relative
+ flex: 0
+ padding: 0
+
+.slider-track
+ position: relative
+ flex: 0
+ padding: 0
+
+
j|Slider
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SliderView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index fb459f5..24fb4e3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -17,7 +17,36 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel textinput
+
+// textinput variables
+$textinput-margin: 0 !default
+$textinput-padding: .72em 1.12em !default
+// $textinput-min-height: 34px !default
+// $textinput-min-width: 74px !default
+
+$textinput-border-radius: 3px
+
.jewel.textinput
+ position: relative
+ display: inline-flex
+
+ input
+ +appear(none)
+ margin: $textinput-margin
+ padding: $textinput-padding
+
+ max-width: 100%
+
+ flex: 1 0 auto
+ outline: none
+
+ text:
+ align: left
+ line-height: normal !important
+
+ &[disabled]
+ cursor: unset
j|TextInput
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index ffa6acd..d83dc6e 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -16,7 +16,8 @@
*/
// Variables
-
+@import "mixins"
+
// Global
@import "global"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8b7ccac..2b2cccd 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -193,82 +193,36 @@ j|Card {
gap: 10;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
-}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- -ms-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
- opacity: 0;
-}
.jewel.checkbox input + span::before {
- content: " ";
- position: absolute;
- left: 0px;
- top: 0px;
- width: 22px;
- height: 22px;
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
.jewel.checkbox input + span::after {
- content: " ";
- position: absolute;
- left: 0px;
- top: 0px;
- width: 22px;
- height: 22px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
border: 1px solid transparent;
- opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
}
.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
- opacity: 1;
transform: scale(1);
}
.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
- outline: none;
background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
-}
.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
.jewel.checkbox input[disabled] + span::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- margin: 0;
padding-left: 8px;
- vertical-align: top;
- line-height: 24px;
font-size: 16px;
}
@@ -338,143 +292,54 @@ j|Card {
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
-}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- -ms-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
- opacity: 0;
-}
.jewel.radiobutton input + span::before {
- content: " ";
- position: absolute;
- left: 0px;
- top: 0px;
- width: 22px;
- height: 22px;
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
.jewel.radiobutton input + span::after {
- content: " ";
- position: absolute;
- left: 0px;
- top: 0px;
- width: 22px;
- height: 22px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233CADF1' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
border: 1px solid transparent;
- opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
}
.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
- opacity: 1;
transform: scale(1);
}
.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
- outline: none;
background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
-}
.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
.jewel.radiobutton input[disabled] + span::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- margin: 0;
padding-left: 8px;
- vertical-align: top;
- line-height: 24px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- -ms-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 36px;
- background: transparent;
color: #3CADF1;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
-}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
-}
-.jewel.slider input::-ms-track {
- width: 100%;
- height: 6px;
- background: none;
- border: none;
- color: transparent;
-}
.jewel.slider input::-ms-fill-lower {
- padding: 0;
background: linear-gradient(#4ab3f2, #2ea7f0);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
}
.jewel.slider input::-ms-fill-upper {
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- -ms-appearance: none;
- appearance: none;
width: 18px;
height: 18px;
background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -496,12 +361,6 @@ j|Card {
.jewel.slider input:active::-ms-thumb {
transform: scale(0.8);
}
-.jewel.slider input:focus {
- outline: none;
-}
-.jewel.slider input[disabled] {
- cursor: unset;
-}
.jewel.slider input[disabled]::-ms-fill-lower {
background: #e6e6e6;
border: 1px solid silver;
@@ -532,24 +391,10 @@ j|Card {
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#4ab3f2, #2ea7f0);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
@@ -557,32 +402,12 @@ j|Card {
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textinput {
- position: relative;
- display: inline-flex;
-}
.jewel.textinput input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- -ms-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
@@ -600,7 +425,6 @@ j|Card {
color: #a6a6a6;
}
.jewel.textinput input[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index d6467d8..9f291c9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,21 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-
-=appear($val)
- -webkit-appearance: $val
- -moz-appearance: $val
- -o-appearance: $val
- -ms-appearance: $val
- appearance: $val
-
-//=trans($val...)
-// -webkit-transition: $val
-// -moz-transition: $val
-// -o-transition: $val
-// transition: $val
-
-
=jewel-bg-border($state, $bg-color, $border-radius: 0px)
@if ($state == "normal")
@if $flat
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
index cfa3571..6b2d4fa 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -24,7 +24,6 @@
// $button-padding: 0.72em 1.12em !default
// $button-min-height: 28px !default
// $button-min-width: 74px !default
-
$button-border-radius: 3px
=button-theme($button-color, $text-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
index 6231754..6aa2e75 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -20,49 +20,16 @@
// Jewel CheckBox
// CheckBox variables
-$checkbox-button-size: 22px
$checkbox-border-radius: 3px
$checkbox-label-separation: 8px
$checkbox-label-font-size: 16px
-$checkbox-button-xoffset: 0px
-$checkbox-button-yoffset: 0px
.jewel.checkbox
- display: inline-block
-
- margin: 0
- padding: 0
-
- position: relative
- width: 100%
- height: $checkbox-button-size
-
// -- INPUT
input
- +appear(none)
- cursor: pointer
- display: inline-block
-
- margin: 0
- padding: 0
- width: $checkbox-button-size
- height: $checkbox-button-size
-
- line-height: $checkbox-button-size
- opacity: 0
-
+ span::before
- content: ' '
- position: absolute
-
- left: $checkbox-button-xoffset
- top: $checkbox-button-yoffset
-
- width: $checkbox-button-size
- height: $checkbox-button-size
-
@if $flat
background: $default-color
border: 1px solid transparent
@@ -72,29 +39,16 @@ $checkbox-button-yoffset: 0px
border-radius: $checkbox-border-radius
+ span::after
- content: ' '
- position: absolute
-
- left: $checkbox-button-xoffset
- top: $checkbox-button-yoffset
-
- width: $checkbox-button-size
- height: $checkbox-button-size
-
background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{$primary-color}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
border: 1px solid transparent
- opacity: 0
-
transition: all .3s ease
transform: scale(0)
&:checked + span::after, &:checked:active + span::after
- opacity: 1
transform: scale(1)
&:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
- outline: none
@if $flat
background: lighten($primary-color, 25%)
border: 1px solid transparent
@@ -103,7 +57,6 @@ $checkbox-button-yoffset: 0px
border: 1px solid darken($primary-color, 15%)
&[disabled]
- cursor: unset
& + span::before
background: $disabled-color
@@ -113,7 +66,6 @@ $checkbox-button-yoffset: 0px
border: 1px solid $disabled-border-color// .094em
& + span
- cursor: unset
color: $disabled-font-color
& + span::after
@@ -121,13 +73,6 @@ $checkbox-button-yoffset: 0px
// -- LABEL
span
- cursor: pointer
-
- margin: 0
padding-left: $checkbox-label-separation
-
- vertical-align: top
- line-height: $checkbox-button-size + 2
-
font-size: $checkbox-label-font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
index 92fbbfd..7ea4cd8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
@@ -20,49 +20,16 @@
// Jewel RadioButton
// RadioButton variables
-$radiobutton-button-size: 22px
$radiobutton-border-radius: 50%
$radiobutton-label-separation: 8px
$radiobutton-label-font-size: 16px
-$radiobutton-button-xoffset: 0px
-$radiobutton-button-yoffset: 0px
.jewel.radiobutton
- display: inline-block
-
- margin: 0
- padding: 0
-
- position: relative
-
- width: 100%
- height: $radiobutton-button-size
// -- INPUT
input
- +appear(none)
- cursor: pointer
- display: inline-block
-
- margin: 0
- padding: 0
-
- width: $radiobutton-button-size
- height: $radiobutton-button-size
-
- line-height: $radiobutton-button-size
- opacity: 0
+ span::before
- content: ' '
- position: absolute
-
- left: $radiobutton-button-xoffset
- top: $radiobutton-button-yoffset
-
- width: $radiobutton-button-size
- height: $radiobutton-button-size
-
@if $flat
background: $default-color
border: 1px solid transparent
@@ -72,29 +39,16 @@ $radiobutton-button-yoffset: 0px
border-radius: $radiobutton-border-radius
+ span::after
- content: ' '
- position: absolute
-
- left: $radiobutton-button-xoffset
- top: $radiobutton-button-yoffset
-
- width: $radiobutton-button-size
- height: $radiobutton-button-size
-
background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><circle fill='#{$primary-color}' cx='11' cy='11' r='6'/></svg>") no-repeat center center
border: 1px solid transparent
- opacity: 0
-
transition: all .3s ease
transform: scale(0)
&:checked + span::after, &:checked:active + span::after
- opacity: 1
transform: scale(1)
&:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
- outline: none
@if $flat
background: lighten($primary-color, 25%)
border: 1px solid transparent
@@ -103,8 +57,7 @@ $radiobutton-button-yoffset: 0px
border: 1px solid darken($primary-color, 15%)
&[disabled]
- cursor: unset
-
+
& + span::before
background: $disabled-color
@if $flat
@@ -113,7 +66,6 @@ $radiobutton-button-yoffset: 0px
border: 1px solid $disabled-border-color// .094em
& + span
- cursor: unset
color: $disabled-font-color
& + span::after
@@ -121,13 +73,6 @@ $radiobutton-button-yoffset: 0px
// -- LABEL
span
- cursor: pointer
-
- margin: 0
padding-left: $radiobutton-label-separation
-
- vertical-align: top
- line-height: $radiobutton-button-size + 2
-
font-size: $radiobutton-label-font-size
\ No newline at end of file
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 3c63929..f59a358 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
@@ -20,62 +20,18 @@
// Jewel Slider
// Slider variables
-$slider-margin: 20px
-$slider-padding: 0
-$slider-min-width: calc(100% - #{2 * $slider-margin})
-$slider-track-min-height: 6px
+$slider-thumb-size: 18px // TODO (carlos_rovira) this is as well part of structure, need revision
$slider-track-border-radius: 3px
-$slider-thumb-size: 18px
$slider-border-radius: 50%
-$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
$slider-scale-transform: 1.4
.jewel.slider
- position: relative
- height: $slider-container-height
- display: flex !important
- flex-direction: row
-
- background: none
-
+ // -- INPUT
input
- cursor: pointer
- user-select: none
-
- +appear(none)
- outline: 0
-
- align-self: center
- z-index: 1
-
- margin: 0 $slider-margin
- padding: $slider-padding
-
- width: $slider-min-width
- height: $slider-thumb-size*2//$slider-track-min-height //needed for IE11
-
- background: transparent
color: $primary-color
- // TRACK
- &::-webkit-slider-runnable-track
- background: transparent
-
- &::-moz-range-track
- background: transparent
- border: none
-
- &::-ms-track
- width: 100%
- height: $slider-track-min-height
- background: none
- border: none //($slider-thumb-size / 2) * $slider-scale-transform solid red
- color: transparent
-
&::-ms-fill-lower
- padding: 0
-
@if $flat
background: $primary-color
border: 0
@@ -86,8 +42,6 @@ $slider-scale-transform: 1.4
border-radius: $slider-track-border-radius
&::-ms-fill-upper
- padding: 0
-
@if $flat
background: $default-color
border: 0
@@ -96,9 +50,8 @@ $slider-scale-transform: 1.4
border: 1px solid darken($default-color, 15%)
border-radius: $slider-track-border-radius
- // THUMB
+ // -- THUMB
&::-webkit-slider-thumb, &::-moz-range-thumb
- +appear(none)
width: $slider-thumb-size
height: $slider-thumb-size
@if $flat
@@ -106,17 +59,11 @@ $slider-scale-transform: 1.4
border: 0
@else
background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
- // background: url("data:image/svg+xml,<svg viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><radialGradient cx='6.43382353%' cy='50%' fx='6.43382353%' fy='50%' r='85.5152803%' id='radialGradient-1'><stop stop-color='#54B7F4' offset='0%'></stop><stop stop-color='#26A3EF' offset='100%'></stop></radialGradient><circle id='path-2' cx='9' cy='9' r='9'></circle></defs><g stroke='none' stroke-width='1' fill='n [...]
- // background-repeat: no-repeat
- // background-size: 100%
- // background-position: center
- // background-attachment: fixed
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
&::-ms-thumb
- //+appear(none)
width: $slider-thumb-size
height: $slider-thumb-size
@if $flat
@@ -134,11 +81,7 @@ $slider-scale-transform: 1.4
&:active::-ms-thumb
transform: scale(.8) //$slider-scale-transform) in IE thumb is cut by track
- &:focus
- outline: none
-
&[disabled]
- cursor: unset
&::-ms-fill-lower
background: darken($disabled-color, 5%)
@@ -169,30 +112,9 @@ $slider-scale-transform: 1.4
box-shadow: none
.slider-track-container
- position: absolute
- display: flex
-
- overflow: hidden
- transform: translate(0, -#{ round($slider-track-min-height/2) })
-
- margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
- padding: 0
-
top: $slider-border-radius
- left: 0
-
- width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
- height: $slider-track-min-height
-
- background: transparent
- border: 0
.slider-track-fill
- position: relative
- flex: 0
-
- padding: 0
-
@if $flat
background: $primary-color
border: 0
@@ -203,11 +125,6 @@ $slider-scale-transform: 1.4
border-radius: $slider-track-border-radius
.slider-track
- position: relative
- flex: 0
-
- padding: 0
-
@if $flat
background: $default-color
border: 0
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
index 321773a..328c54f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -20,36 +20,22 @@
// Jewel textinput
// textinput variables
-$textinput-margin: 0 !default
-$textinput-padding: .67em 1em !default
-//10px 16px
-$textinput-min-height: 34px !default
-$textinput-min-width: 74px !default
+// $textinput-margin: 0 !default
+// $textinput-padding: .67em 1em !default
+// $textinput-min-height: 34px !default
+// $textinput-min-width: 74px !default
$textinput-border-radius: 3px
=textinput-theme($textinput-text-color)
- position: relative
- display: inline-flex
- input
- +appear(none)
- margin: $textinput-margin
- padding: $textinput-padding
-
- max-width: 100%
-
- flex: 1 0 auto
- outline: none
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-
- text-align: left
- line-height: 1.4em
-
+ input
+ // -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
font:
family: $font-stack
size: $font-size
weight: normal
+
color: $textinput-text-color
@if $flat
@@ -80,7 +66,6 @@ $textinput-border-radius: 3px
color: lighten($textinput-text-color, 15%)
&[disabled]
- cursor: unset
@if $flat
background: $disabled-color
border: 0px solid
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.