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/04 10:19:54 UTC
[royale-asjs] branch develop updated: remove invalid ";
utf8" in all inlined svg images
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 9525660 remove invalid ";utf8" in all inlined svg images
new db4b818 Merge branch 'develop' of https://github.com/apache/royale-asjs into develop
9525660 is described below
commit 95256606096972af65d00a578741afd697a39c1e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Jun 4 12:18:50 2018 +0200
remove invalid ";utf8" in all inlined svg images
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12 ++++++------
.../src/main/sass/components-primary/_checkbox.sass | 10 +++++-----
.../src/main/sass/components-primary/_radiobutton.sass | 10 +++++-----
.../JewelTheme/src/main/sass/components-primary/_slider.sass | 2 +-
4 files changed, 17 insertions(+), 17 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 0663ee5..253b8c0 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -236,14 +236,14 @@ j|Card {
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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
+ background: url("data:image/svg+xml,<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>"), #f8f8f8;
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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
+ background: url("data:image/svg+xml,<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;
@@ -263,7 +263,7 @@ j|Card {
color: silver;
}
.jewel.checkbox input[disabled]:checked {
- 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: url("data:image/svg+xml,<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;
@@ -371,14 +371,14 @@ j|Card {
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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
+ 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
+ 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
@@ -398,7 +398,7 @@ j|Card {
color: silver;
}
.jewel.radiobutton input[disabled]:checked {
- 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: 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='%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/components-primary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
index d7e1dbc..6c3aa79 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -60,9 +60,9 @@ $checkbox-label-font-size: 16px
&:checked, &:checked:active
@if $flat
- 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: url("data:image/svg+xml,<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
@else
- 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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ background: url("data:image/svg+xml,<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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
background-repeat: no-repeat
background-size: 90%
background-position: center
@@ -70,9 +70,9 @@ $checkbox-label-font-size: 16px
&:checked:focus, &:checked:active:focus
@if $flat
- 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: url("data:image/svg+xml,<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%)
@else
- 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%)//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
+ background: url("data:image/svg+xml,<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%)//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
background-repeat: no-repeat
background-size: 90%
background-position: center
@@ -99,7 +99,7 @@ $checkbox-label-font-size: 16px
color: $disabled-font-color
&:checked
- 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: url("data:image/svg+xml,<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 945c4b3..31d0458 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
@@ -60,9 +60,9 @@ $radiobutton-label-font-size: 16px
&:checked, &:checked:active
@if $flat
- 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: 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
@else
- 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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ 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
@@ -70,9 +70,9 @@ $radiobutton-label-font-size: 16px
&:checked:focus, &:checked:active:focus
@if $flat
- 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: 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;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%) //linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
+ 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
@@ -99,7 +99,7 @@ $radiobutton-label-font-size: 16px
color: $disabled-font-color
&:checked
- 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: 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
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 f0b545b..d2a25d3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
@@ -75,7 +75,7 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
border: 0
@else
background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
- // background: url("data:image/svg+xml;utf8,<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' fi [...]
+ // 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
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
Re: [royale-asjs] branch develop updated: remove invalid "; utf8" in
all inlined svg images
Posted by Carlos Rovira <ca...@apache.org>.
Hi Harbs,
I think I tried that but not worked for inline SVG in CSS
SVG inlined is a very fragile feature, and is not supported well cross
browser.
Maybe I'll give it a try again since I'm getting a blocking issue in IE11,
I think is this [1]
and can't get it working. IE11 does not process inline styles in SVG.
Maybe getting to load the SVG can make it work, but I think I can find
again the problem that made
me go the actual route.
Let's see what happen. IE11 is a real pain to make ir work... :_(
[1] https://github.com/kisenka/svg-sprite-loader/issues/163
2018-06-04 12:33 GMT+02:00 Harbs <ha...@gmail.com>:
> Looking at the Jewel themes, I thought of a possible suggestion for
> specifying SVG color:
>
> Instead of inlining fill='#{encodecolor($primary-color)}’, I’m wondering
> if it might be better to give the elements a class. Something like this:
>
> <polygon class=“primary-fill” points='3 13 9 18 19 7 16 5 9 13 6
> 10'></polygon>
>
> and elsewhere:
> .primary-fill{
> fill: $primary-color;
> }
>
> The same for secondary, strokes, etc.
>
> It might even make sense to specify classes for primary and secondary
> colors and background colors, etc.
>
> Doing so, might make it easier to swap color schemes. It’ll probably also
> result in simpler CSS.
>
> Just a thought, :-)
> Harbs
>
> > On Jun 4, 2018, at 1:19 PM, carlosrovira@apache.org wrote:
> >
> > 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 9525660 remove invalid ";utf8" in all inlined svg images
> > new db4b818 Merge branch 'develop' of https://github.com/apache/
> royale-asjs into develop
> > 9525660 is described below
> >
> > commit 95256606096972af65d00a578741afd697a39c1e
> > Author: Carlos Rovira <ca...@apache.org>
> > AuthorDate: Mon Jun 4 12:18:50 2018 +0200
> >
> > remove invalid ";utf8" in all inlined svg images
> > ---
> > frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12
> ++++++------
> > .../src/main/sass/components-primary/_checkbox.sass | 10
> +++++-----
> > .../src/main/sass/components-primary/_radiobutton.sass | 10
> +++++-----
> > .../JewelTheme/src/main/sass/components-primary/_slider.sass | 2 +-
> > 4 files changed, 17 insertions(+), 17 deletions(-)
> >
> > diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> > index 0663ee5..253b8c0 100644
> > --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> > +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> > @@ -236,14 +236,14 @@ j|Card {
> > 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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6
> 10'></polygon></g></g></svg>"), #f8f8f8;
> > + background: url("data:image/svg+xml,<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>"), #f8f8f8;
> > 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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6
> 10'></polygon></g></g></svg>"), #b3dffa;
> > + background: url("data:image/svg+xml,<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;
> > @@ -263,7 +263,7 @@ j|Card {
> > color: silver;
> > }
> > .jewel.checkbox input[disabled]:checked {
> > - 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: url("data:image/svg+xml,<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;
> > @@ -371,14 +371,14 @@ j|Card {
> > 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='%233CADF1' cx='11' cy='11'
> r='6'></circle></g></g></svg>"), #f8f8f8;
> > + 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='%233CADF1' cx='11' cy='11'
> r='6'></circle></g></g></svg>"), #f8f8f8;
> > 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='%233CADF1' cx='11' cy='11'
> r='6'></circle></g></g></svg>"), #b3dffa;
> > + 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='%233CADF1' cx='11' cy='11'
> r='6'></circle></g></g></svg>"), #b3dffa;
> > background-repeat: no-repeat;
> > background-size: 60%;
> > background-position: center;
> > @@ -398,7 +398,7 @@ j|Card {
> > color: silver;
> > }
> > .jewel.radiobutton input[disabled]:checked {
> > - 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: 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='%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/
> components-primary/_checkbox.sass b/frameworks/themes/
> JewelTheme/src/main/sass/components-primary/_checkbox.sass
> > index d7e1dbc..6c3aa79 100644
> > --- a/frameworks/themes/JewelTheme/src/main/sass/
> components-primary/_checkbox.sass
> > +++ b/frameworks/themes/JewelTheme/src/main/sass/
> components-primary/_checkbox.sass
> > @@ -60,9 +60,9 @@ $checkbox-label-font-size: 16px
> >
> > &:checked, &:checked:active
> > @if $flat
> > - 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: url("data:image/svg+xml,<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
> > @else
> > - 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($default-color,
> 12%)//linear-gradient(lighten($default-color, 15%),
> lighten($default-color, 10%))
> > + background: url("data:image/svg+xml,<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($default-color,
> 12%)//linear-gradient(lighten($default-color, 15%),
> lighten($default-color, 10%))
> > background-repeat: no-repeat
> > background-size: 90%
> > background-position: center
> > @@ -70,9 +70,9 @@ $checkbox-label-font-size: 16px
> >
> > &:checked:focus, &:checked:active:focus
> > @if $flat
> > - 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: url("data:image/svg+xml,<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%)
> > @else
> > - 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%)//linear-gradient(lighten($default-color, 25%),
> lighten($default-color, 20%))
> > + background: url("data:image/svg+xml,<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%)//linear-gradient(lighten($default-color, 25%),
> lighten($default-color, 20%))
> > background-repeat: no-repeat
> > background-size: 90%
> > background-position: center
> > @@ -99,7 +99,7 @@ $checkbox-label-font-size: 16px
> > color: $disabled-font-color
> >
> > &:checked
> > - 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: url("data:image/svg+xml,<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 945c4b3..31d0458 100644
> > --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_
> radiobutton.sass
> > +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_
> radiobutton.sass
> > @@ -60,9 +60,9 @@ $radiobutton-label-font-size: 16px
> >
> > &:checked, &:checked:active
> > @if $flat
> > - 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: 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
> > @else
> > - 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($default-color,
> 12%)//linear-gradient(lighten($default-color, 15%),
> lighten($default-color, 10%))
> > + 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
> > @@ -70,9 +70,9 @@ $radiobutton-label-font-size: 16px
> >
> > &:checked:focus, &:checked:active:focus
> > @if $flat
> > - 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: 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;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%)
> //linear-gradient(lighten($default-color, 25%), lighten($default-color,
> 20%))
> > + 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
> > @@ -99,7 +99,7 @@ $radiobutton-label-font-size: 16px
> > color: $disabled-font-color
> >
> > &:checked
> > - 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: 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
> > 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 f0b545b..d2a25d3 100644
> > --- a/frameworks/themes/JewelTheme/src/main/sass/
> components-primary/_slider.sass
> > +++ b/frameworks/themes/JewelTheme/src/main/sass/
> components-primary/_slider.sass
> > @@ -75,7 +75,7 @@ $slider-container-height: #{$slider-thumb-size +
> round($slider-thumb-size/2)}
> > border: 0
> > @else
> > background: linear-gradient(lighten($primary-color,
> 3%), darken($primary-color, 3%))
> > - // background: url("data:image/svg+xml;utf8,<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' fi [...]
> > + // 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
> >
> > --
> > To stop receiving notification emails like this one, please contact
> > carlosrovira@apache.org.
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [royale-asjs] branch develop updated: remove invalid "; utf8" in
all inlined svg images
Posted by Harbs <ha...@gmail.com>.
Looking at the Jewel themes, I thought of a possible suggestion for specifying SVG color:
Instead of inlining fill='#{encodecolor($primary-color)}’, I’m wondering if it might be better to give the elements a class. Something like this:
<polygon class=“primary-fill” points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
and elsewhere:
.primary-fill{
fill: $primary-color;
}
The same for secondary, strokes, etc.
It might even make sense to specify classes for primary and secondary colors and background colors, etc.
Doing so, might make it easier to swap color schemes. It’ll probably also result in simpler CSS.
Just a thought, :-)
Harbs
> On Jun 4, 2018, at 1:19 PM, carlosrovira@apache.org wrote:
>
> 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 9525660 remove invalid ";utf8" in all inlined svg images
> new db4b818 Merge branch 'develop' of https://github.com/apache/royale-asjs into develop
> 9525660 is described below
>
> commit 95256606096972af65d00a578741afd697a39c1e
> Author: Carlos Rovira <ca...@apache.org>
> AuthorDate: Mon Jun 4 12:18:50 2018 +0200
>
> remove invalid ";utf8" in all inlined svg images
> ---
> frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12 ++++++------
> .../src/main/sass/components-primary/_checkbox.sass | 10 +++++-----
> .../src/main/sass/components-primary/_radiobutton.sass | 10 +++++-----
> .../JewelTheme/src/main/sass/components-primary/_slider.sass | 2 +-
> 4 files changed, 17 insertions(+), 17 deletions(-)
>
> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> index 0663ee5..253b8c0 100644
> --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
> @@ -236,14 +236,14 @@ j|Card {
> 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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
> + background: url("data:image/svg+xml,<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>"), #f8f8f8;
> 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='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
> + background: url("data:image/svg+xml,<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;
> @@ -263,7 +263,7 @@ j|Card {
> color: silver;
> }
> .jewel.checkbox input[disabled]:checked {
> - 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: url("data:image/svg+xml,<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;
> @@ -371,14 +371,14 @@ j|Card {
> 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
> + 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
> 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
> + 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='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
> background-repeat: no-repeat;
> background-size: 60%;
> background-position: center;
> @@ -398,7 +398,7 @@ j|Card {
> color: silver;
> }
> .jewel.radiobutton input[disabled]:checked {
> - 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: 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='%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/components-primary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
> index d7e1dbc..6c3aa79 100644
> --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
> +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
> @@ -60,9 +60,9 @@ $checkbox-label-font-size: 16px
>
> &:checked, &:checked:active
> @if $flat
> - 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: url("data:image/svg+xml,<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
> @else
> - 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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
> + background: url("data:image/svg+xml,<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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
> background-repeat: no-repeat
> background-size: 90%
> background-position: center
> @@ -70,9 +70,9 @@ $checkbox-label-font-size: 16px
>
> &:checked:focus, &:checked:active:focus
> @if $flat
> - 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: url("data:image/svg+xml,<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%)
> @else
> - 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%)//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
> + background: url("data:image/svg+xml,<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%)//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
> background-repeat: no-repeat
> background-size: 90%
> background-position: center
> @@ -99,7 +99,7 @@ $checkbox-label-font-size: 16px
> color: $disabled-font-color
>
> &:checked
> - 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: url("data:image/svg+xml,<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 945c4b3..31d0458 100644
> --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
> +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
> @@ -60,9 +60,9 @@ $radiobutton-label-font-size: 16px
>
> &:checked, &:checked:active
> @if $flat
> - 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: 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
> @else
> - 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($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
> + 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
> @@ -70,9 +70,9 @@ $radiobutton-label-font-size: 16px
>
> &:checked:focus, &:checked:active:focus
> @if $flat
> - 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: 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;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%) //linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
> + 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
> @@ -99,7 +99,7 @@ $radiobutton-label-font-size: 16px
> color: $disabled-font-color
>
> &:checked
> - 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: 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
> 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 f0b545b..d2a25d3 100644
> --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
> +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
> @@ -75,7 +75,7 @@ $slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
> border: 0
> @else
> background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
> - // background: url("data:image/svg+xml;utf8,<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' fi [...]
> + // 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
>
> --
> To stop receiving notification emails like this one, please contact
> carlosrovira@apache.org.