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 2a86dbe jewel checkbox latest touches
2a86dbe is described below
commit 2a86dbe0b09cc4fff65bcd910370d9f49ad8be5a
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Jun 12 12:06:14 2018 +0200
jewel checkbox latest touches
---
.../JewelTheme/src/main/resources/defaults.css | 20 ++++-----
.../src/main/resources/svgs/checkbox-tick.svg | 27 +++----------
.../main/sass/components-primary/_checkbox.sass | 47 +++++++++-------------
3 files changed, 31 insertions(+), 63 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 9e2da10..ba671df 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -240,26 +240,25 @@ j|Card {
top: 0px;
width: 22px;
height: 22px;
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1'
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285
4.96948242 9 12.0758057 6.47851562
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1'
points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
border: 1px solid transparent;
opacity: 0;
transition: all 0.3s ease;
transform: scale(0);
}
-.jewel.checkbox input:checked + span::after {
+.jewel.checkbox input:checked + span::after, .jewel.checkbox
input:checked:active + span::after {
opacity: 1;
transform: scale(1);
}
-.jewel.checkbox input:checked:active + span::after {
- opacity: 1;
- transform: scale(1);
-}
-.jewel.checkbox input:focus {
+.jewel.checkbox input:focus + span::before, .jewel.checkbox
input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus
+ span::before {
outline: none;
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
.jewel.checkbox input[disabled] {
cursor: unset;
+}
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
@@ -268,17 +267,14 @@ j|Card {
color: silver;
}
.jewel.checkbox input[disabled] + span::after {
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc'
points='3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285
4.96948242 9 12.0758057 6.47851562
9.51098633'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
-}
-.jewel.checkbox input[disabled]:checked {
- border: 1px solid #d9d9d9;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Crect x='0' y='0'
width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc'
points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
cursor: pointer;
margin: 0;
padding-left: 6px;
vertical-align: top;
- line-height: 22px;
+ line-height: 24px;
font-size: 16px;
}
diff --git
a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
index e4d5091..4af1585 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
@@ -16,28 +16,11 @@
limitations under the License.
-->
-<svg viewBox='0 0 16 13' preserveAspectRatio='xMinYMid' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
- <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
- <g transform='translate(-763.000000, -350.000000)' fill='#777777'>
- <g transform='translate(760.000000, 345.000000)'>
- <g>
- <polygon points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
- </g>
- </g>
- </g>
- </g>
-</svg>
-
-
-<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'>
- <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
- <g transform='translate(-763.000000, -290.000000)'>
- <g transform='translate(760.000000, 285.000000)'>
- <g>
- <rect id='Bounds' x='0' y='0' width='22'
height='22'></rect>
- <polygon fill='#777777' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon>
- </g>
- </g>
+<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg";>
+ <g>
+ <g>
+ <rect x="0" y="0" width="22" height="22" fill-opacity="0.5"/>
+ <polygon fill="#{$primary-color}" points="3.50018311 12.4854126
8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363
11.5650024 6.52087402 9.47265625"/>
</g>
</g>
</svg>
\ No newline at end of file
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 1453b8a..dd57689 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -24,8 +24,8 @@ $checkbox-button-size: 22px
$checkbox-border-radius: 3px
$checkbox-label-separation: 6px
$checkbox-label-font-size: 16px
-$checkbox-button-xoffset: 0px//-23px
-$checkbox-button-yoffset: 0px//-5px
+$checkbox-button-xoffset: 0px
+$checkbox-button-yoffset: 0px
.jewel.checkbox
display: inline-block
@@ -81,7 +81,7 @@ $checkbox-button-yoffset: 0px//-5px
width: $checkbox-button-size
height: $checkbox-button-size
- background: encodeSVG('<svg viewBox="0 0 22 22" version="1.1"
xmlns="http://www.w3.org/2000/svg";><g><g><g><rect x="0" y="0" width="22"
height="22" fill-opacity="0"/><polygon fill="#{$primary-color}"
points="3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285
4.96948242 9 12.0758057 6.47851562 9.51098633"/></g></g></g></svg>') no-repeat
center center
+ background: encodeSVG('<svg viewBox="0 0 22 22" version="1.1"
xmlns="http://www.w3.org/2000/svg";><g><g><rect x="0" y="0" width="22"
height="22" fill-opacity="0"/><polygon fill="#{$primary-color}"
points="3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625"/></g></g></svg>') no-repeat center center
border: 1px solid transparent
opacity: 0
@@ -89,56 +89,45 @@ $checkbox-button-yoffset: 0px//-5px
transition: all .3s ease
transform: scale(0)
- &:checked + span::after
- opacity: 1
-
- transform: scale(1)
-
- &:checked:active + span::after
- opacity: 1
-
+ &:checked + span::after, &:checked:active + span::after
+ opacity: 1
transform: scale(1)
-
- //&:checked:focus, &:checked:active:focus
-
- &:focus
+
+ &:focus + span::before, &:checked:focus + span::before,
&:checked:active:focus + span::before
outline: none
@if $flat
- background: lighten($primary-color, 25%)
border: 1px solid transparent
+ background: lighten($primary-color, 25%)
@else
+ background: linear-gradient(lighten($primary-color, 30%),
lighten($primary-color, 20%))
border: 1px solid darken($primary-color, 15%)
&[disabled]
cursor: unset
- background: $disabled-color
- @if $flat
- border: 1px solid transparent
- @else
- border: 1px solid $disabled-border-color// .094em
+
+ & + span::before
+ background: $disabled-color
+ @if $flat
+ border: 1px solid transparent
+ @else
+ border: 1px solid $disabled-border-color// .094em
& + span
cursor: unset
color: $disabled-font-color
& + span::after
- background: encodeSVG('<svg viewBox="0 0 22 22" version="1.1"
xmlns="http://www.w3.org/2000/svg";><g><g><g><rect x="0" y="0" width="22"
height="22" fill-opacity="0"/><polygon fill="#{darken($disabled-color, 15%)}"
points="3.51452637 12.5264893 9 17.9205322 18.9342041 8.02331543 16.0217285
4.96948242 9 12.0758057 6.47851562 9.51098633"/></g></g></g></svg>') no-repeat
center center
+ background: encodeSVG('<svg viewBox="0 0 22 22" version="1.1"
xmlns="http://www.w3.org/2000/svg";><g><g><rect x="0" y="0" width="22"
height="22" fill-opacity="0"/><polygon fill="#{darken($disabled-color, 15%)}"
points="3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111
15.5010376 4.51739502 8.48547363 11.5650024 6.52087402
9.47265625"/></g></g></svg>') no-repeat center center
- &:checked
- @if $flat
- border: 1px solid transparent
- @else
- border: 1px solid $disabled-border-color// .094em
// -- LABEL
span
cursor: pointer
- // position: relative
margin: 0
padding-left: $checkbox-label-separation
vertical-align: top
- line-height: $checkbox-button-size
+ line-height: $checkbox-button-size + 2
font-size: $checkbox-label-font-size
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrov...@apache.org.
