royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: radio button fixed for IE11
Date Tue, 12 Jun 2018 18:32:00 GMT
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 <carlosrovira@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
carlosrovira@apache.org.

Mime
View raw message