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, carlosrov...@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 <carlosrov...@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
> carlosrov...@apache.org.
