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 1af861a radio button fixed for IE11
1af861a is described below
commit 1af861a4d161c72bf7c2df2f730032f6b05a7965
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Jun 12 20:31:48 2018 +0200
radio button fixed for IE11
---
.../src/main/resources/assets/checkbox-tick.svg | 5 +-
.../main/resources/assets/radiobutton-circle.svg | 5 +-
.../main/sass/components-primary/_checkbox.sass | 4 +-
.../main/sass/components-primary/_radiobutton.sass | 98 ++++++++++++----------
4 files changed, 64 insertions(+), 48 deletions(-)
diff --git
a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
index f95ec08..2c7ca9c 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
@@ -16,4 +16,7 @@
limitations under the License.
-->
-<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)"><g><polygon points="3 13 9 18 19 7 16 5 9 13 6
10"></polygon></g></g></g></svg>
\ No newline at end of file
+<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 newline at end of file
diff --git
a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
index 07beb17..b2af818 100644
---
a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++
b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
@@ -16,4 +16,7 @@
limitations under the License.
-->
-<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)"><g><circle
cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+<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>
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 9bd04fd..c8b2729 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -81,7 +81,7 @@ $checkbox-button-yoffset: 0px
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";><g><g><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"/></g></g></svg>') no-repeat center center
+ 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
@@ -117,7 +117,7 @@ $checkbox-button-yoffset: 0px
color: $disabled-font-color
& + span::after
- background: encodeSVG('<svg viewBox="0 0 22 22" version="1.1"
xmlns="http://www.w3.org/2000/svg";><g><g><rect x="0" y="0" width="22"
height="22" fill-opacity="0"/><polygon fill="#{darken($disabled-color, 15%)}"
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"/></g></g></svg>') no-repeat center center
+ 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="#{darken($disabled-color, 15%)}"
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
// -- LABEL
span
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 31d0458..0e5f999 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
@@ -22,8 +22,10 @@
// RadioButton variables
$radiobutton-button-size: 22px
$radiobutton-border-radius: 50%
-$radiobutton-label-separation: 6px
+$radiobutton-label-separation: 8px
$radiobutton-label-font-size: 16px
+$radiobutton-button-xoffset: 0px
+$radiobutton-button-yoffset: 0px
.jewel.radiobutton
display: inline-block
@@ -49,75 +51,83 @@ $radiobutton-label-font-size: 16px
height: $radiobutton-button-size
line-height: $radiobutton-button-size
+ opacity: 0
- @if $flat
- background: $default-color
- border: 1px solid transparent
- @else
- background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
- border-radius: $radiobutton-border-radius
+ + span::before
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
- &:checked, &:checked:active
@if $flat
- background: url("data:image/svg+xml,<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='#{encodecolor($primary-color)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), $default-color
+ background: $default-color
+ border: 1px solid transparent
@else
- background: url("data:image/svg+xml,<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='#{encodecolor($primary-color)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), lighten($default-color,
12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color,
10%))
- background-repeat: no-repeat
- background-size: 60%
- background-position: center
- background-attachment: fixed
+ background: linear-gradient(lighten($default-color, 15%),
lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $radiobutton-border-radius
- &:checked:focus, &:checked:active:focus
- @if $flat
- background: url("data:image/svg+xml,<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='#{encodecolor($primary-color)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
- @else
- background: url("data:image/svg+xml,<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='#{encodecolor($primary-color)}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
- background-repeat: no-repeat
- background-size: 60%
- background-position: center
- background-attachment: fixed
+ + span::after
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
- &:focus
+ 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
@else
+ background: linear-gradient(lighten($primary-color, 30%),
lighten($primary-color, 20%))
border: 1px solid darken($primary-color, 15%)
&[disabled]
cursor: unset
- background: $disabled-color
- @if $flat
- border: 1px solid transparent
- @else
- border: 1px solid $disabled-border-color// .094em
-
- & + span
- cursor: unset
- color: $disabled-font-color
-
- &:checked
- background: url("data:image/svg+xml,<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='#{encodecolor(darken($disabled-color, 15%))}' cx='11' cy='11'
r='6'></circle></g></g></svg>"), $disabled-color
- background-size: 60%
- background-position: center
- background-repeat: no-repeat
- background-attachment: fixed
+
+ & + span::before
+ background: $disabled-color
@if $flat
border: 1px solid transparent
@else
border: 1px solid $disabled-border-color// .094em
-
+
+ & + span
+ cursor: unset
+ color: $disabled-font-color
+
+ & + span::after
+ 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="#{darken($disabled-color, 15%)}" cx="11"
cy="11" r="6"/></svg>') no-repeat center center
+
// -- LABEL
span
cursor: pointer
- position: relative
margin: 0
padding-left: $radiobutton-label-separation
vertical-align: top
- line-height: $radiobutton-button-size
+ line-height: $radiobutton-button-size + 2
font-size: $radiobutton-label-font-size
+
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.
