royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: [royale-asjs] branch develop updated: remove invalid "; utf8" in all inlined svg images
Date Mon, 04 Jun 2018 10:33:02 GMT
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 <carlosrovira@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.


Mime
View raw message