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 3541db2 Fixin inline SVG colors for Firefox. FF needs colors inside
inline SVGs to change "#" by "%23"
3541db2 is described below
commit 3541db259bbc50fa9158f423787af7bd1f638ba3
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Apr 10 12:32:59 2018 +0200
Fixin inline SVG colors for Firefox. FF needs colors inside inline SVGs to
change "#" by "%23"
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12 ++++++------
frameworks/themes/JewelTheme/src/main/sass/_functions.sass | 8 ++++++++
.../src/main/sass/components-primary/_checkbox.sass | 6 +++---
.../src/main/sass/components-primary/_radiobutton.sass | 6 +++---
4 files changed, 20 insertions(+), 12 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 0443b99..a9849b5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -230,14 +230,14 @@ j|Alert {
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: 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='%233CADF1' 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: 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='%233CADF1' 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%;
background-position: center;
@@ -258,7 +258,7 @@ j|Alert {
}
.jewel.checkbox input[disabled]:checked {
border: 1px solid #d9d9d9;
- 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='#cccccc' points='3 13
9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
+ 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='%23cccccc' points='3
13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
@@ -304,14 +304,14 @@ j|Alert {
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: 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='%233CADF1' 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: 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='%233CADF1' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
@@ -332,7 +332,7 @@ j|Alert {
}
.jewel.radiobutton input[disabled]:checked {
border: 1px solid #d9d9d9;
- 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='#cccccc' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
+ 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='%23cccccc' cx='11'
cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
index 0c6fb82..f37e986 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -16,3 +16,11 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+
+// Firefox needs colors inside inline SVGs to be encoded changing # for %23,
i.e: #FF0000 needs to be %23FF0000
+@function encodecolor($string)
+
+ @if type-of($string) == 'color'
+ $string: unquote('#{str-slice('' + $string, 2)}')
+
+ @return '%23' + $string
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 f9a3a25..843b657 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -59,14 +59,14 @@ $checkbox-label-font-size: 16px
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>"),
$default-color
+ 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='#{encodecolor($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
&: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: 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='#{encodecolor($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
@@ -97,7 +97,7 @@ $checkbox-label-font-size: 16px
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: 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='#{encodecolor(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
background-repeat: no-repeat
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 91cbcad..56c241d 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
@@ -59,14 +59,14 @@ $radiobutton-label-font-size: 16px
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>"), $default-color
+ 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='#{encodecolor($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: 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='#{encodecolor($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
@@ -97,7 +97,7 @@ $radiobutton-label-font-size: 16px
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: 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='#{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
--
To stop receiving notification emails like this one, please contact
[email protected].
