This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new c23b264 fix flat check and radio and disabled textfield
c23b264 is described below
commit c23b2648ad30d52af550a46665aa610e00a654f6
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Apr 5 12:44:05 2018 +0200
fix flat check and radio and disabled textfield
---
.../JewelTheme/src/main/resources/defaults.css | 18 ++++++++++--
.../src/main/sass/components/_checkbox.sass | 32 ++++++++++++++--------
.../src/main/sass/components/_radiobutton.sass | 26 ++++++++++++++----
.../src/main/sass/components/_textfield.sass | 8 ++++--
4 files changed, 63 insertions(+), 21 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 50e8227..8912ace 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -254,11 +254,18 @@ j|Alert {
width: 22px;
height: 22px;
line-height: 22px;
- background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
+ background: linear-gradient(white, #f3f3f3);
border-radius: 3px;
}
.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#3CADF1' points='3 13
9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #d9d9d9;
+ background-repeat: no-repeat;
+ background-size: 90%;
+ background-position: center;
+ background-attachment: fixed;
+}
+.jewel.checkbox input:checked:checked:focus, .jewel.checkbox
input:checked:checked:active:focus, .jewel.checkbox
input:checked:active:checked:focus, .jewel.checkbox
input:checked:active:checked:active:focus {
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#3CADF1' points='3 13
9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 90%;
@@ -321,11 +328,18 @@ j|Alert {
width: 22px;
height: 22px;
line-height: 22px;
- background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
+ background: linear-gradient(white, #f3f3f3);
border-radius: 50%;
}
.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#3CADF1' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #d9d9d9;
+ background-repeat: no-repeat;
+ background-size: 60%;
+ background-position: center;
+ background-attachment: fixed;
+}
+.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton
input:checked:checked:active:focus, .jewel.radiobutton
input:checked:active:checked:focus, .jewel.radiobutton
input:checked:active:checked:active:focus {
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#3CADF1' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 60%;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 7ab546f..f9a3a25 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -51,42 +51,52 @@ $checkbox-label-font-size: 16px
line-height: $checkbox-button-size
@if $flat
- border: 0px solid
+ border: 1px solid transparent
background: $default-color
@else
- background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
border: 1px solid darken($default-color, 15%)
+ background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
border-radius: $checkbox-border-radius
- &:checked, &:checked:active
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#{$primary-color}'
points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"),
lighten($primary-color, 25%)
+ &:checked, &:checked:active
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><polygon fill='#{$primary-color}'
points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"),
$default-color
background-repeat: no-repeat
background-size: 90%
background-position: center
background-attachment: fixed
- // @if $flat
- // background: lighten($primary-color, 25%)
- // @else
- // border: 1px solid darken($primary-color, 15%)
+
+ &:checked:focus, &:checked:active:focus
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16
13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon
fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></svg>"), lighten($primary-color, 25%)
+ background-repeat: no-repeat
+ background-size: 90%
+ background-position: center
+ background-attachment: fixed
&:focus
outline: none
@if $flat
+ border: 1px solid transparent
background: lighten($primary-color, 25%)
@else
border: 1px solid darken($primary-color, 15%)
&[disabled]
cursor: unset
- border: 1px solid $disabled-border-color// .094em
+ @if $flat
+ border: 1px solid transparent
+ @else
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
-
+
& + span
cursor: unset
color: $disabled-font-color
&:checked
- border: 1px solid $disabled-border-color// .094em
+ @if $flat
+ border: 1px solid transparent
+ @else
+ border: 1px solid $disabled-border-color// .094em
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16
13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon
fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></svg>"), $disabled-color
background-size: 90%
background-position: center
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index ce73c9a..91cbcad 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -51,30 +51,41 @@ $radiobutton-label-font-size: 16px
line-height: $radiobutton-button-size
@if $flat
- border: 0px solid
+ border: 1px solid transparent
background: $default-color
@else
- background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
border: 1px solid darken($default-color, 15%)
+ background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
border-radius: $radiobutton-border-radius
- &:checked, &:checked:active
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#{$primary-color}'
cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
+ &:checked, &:checked:active
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12'
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616,
-350)'><g transform='translate(611, 345)'><circle fill='#{$primary-color}'
cx='11' cy='11' r='6'></circle></g></g></svg>"), $default-color
background-repeat: no-repeat
background-size: 60%
background-position: center
background-attachment: fixed
+
+ &:checked:focus, &:checked:active:focus
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12
12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle
fill='#{$primary-color}' cx='11' cy='11' r='6'></circle></g></g></svg>"),
lighten($primary-color, 25%)
+ background-repeat: no-repeat
+ background-size: 60%
+ background-position: center
+ background-attachment: fixed
&:focus
outline: none
@if $flat
+ border: 1px solid transparent
background: lighten($primary-color, 25%)
@else
border: 1px solid darken($primary-color, 15%)
&[disabled]
cursor: unset
- border: 1px solid $disabled-border-color// .094em
+ @if $flat
+ border: 1px solid transparent
+ @else
+ border: 1px solid $disabled-border-color// .094em
background: $disabled-color
& + span
@@ -82,7 +93,10 @@ $radiobutton-label-font-size: 16px
color: $disabled-font-color
&:checked
- border: 1px solid $disabled-border-color// .094em
+ @if $flat
+ border: 1px solid transparent
+ @else
+ border: 1px solid $disabled-border-color// .094em
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12
12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle
fill='#{darken($disabled-color, 15%)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), $disabled-color
background-size: 60%
background-position: center
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index e11d3bd..b3b57f5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -81,8 +81,12 @@ $textfield-border-radius: 3px
&[disabled]
cursor: unset
- border: 1px solid $disabled-border-color// .094em
- background: $disabled-color
+ @if $flat
+ border: 0px solid
+ background: $disabled-color
+ @else
+ border: 1px solid $disabled-border-color//
.094em
+ background: $disabled-color
box-shadow: none
color: $disabled-font-color
--
To stop receiving notification emails like this one, please contact
[email protected].
