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 46831de jewel numeric stepper style
46831de is described below
commit 46831de5303b1fb30abbe50ed1506184687b1b9e
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Aug 25 11:33:05 2018 +0200
jewel numeric stepper style
---
.../projects/Jewel/src/main/resources/defaults.css | 24 +++++++++++++++---
.../Jewel/src/main/sass/components/_button.sass | 2 +-
.../src/main/sass/components/_numericstepper.sass | 29 +++++++++++++++++++++-
.../Jewel/src/main/sass/components/_textinput.sass | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 16 +++++++-----
.../src/main/resources/svgs/checkbox-tick.svg | 8 +++++-
.../sass/components-primary/_numericstepper.sass | 20 ++++++++-------
7 files changed, 78 insertions(+), 23 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 20bf8c3..10128eb 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -139,7 +139,7 @@ j|Alert {
.jewel.button {
margin: 0;
- padding: 0.72em 1.12em;
+ padding: 0.68em 1.12em;
cursor: pointer;
user-select: none;
display: inline-flex;
@@ -2744,11 +2744,27 @@ j|NumericStepper {
.jewel.spinner {
display: inline-flex;
flex-direction: column;
- vertical-align: middle;
+ vertical-align: top;
}
.jewel.spinner .jewel.button {
display: flex;
}
+.jewel.spinner .jewel.button.up::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 10px;
+ left: calc(50% - 11px);
+ top: calc(50% - 5px);
+}
+.jewel.spinner .jewel.button.down::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 10px;
+ left: calc(50% - 11px);
+ top: calc(50% - 5px);
+}
j|Spinner {
IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.RangeModel");
@@ -3049,7 +3065,7 @@ j|TableItemRenderer {
-ms-appearance: none;
appearance: none;
margin: 0;
- padding: 0.72em 1.12em;
+ padding: 0.68em 1.12em;
max-width: 100%;
flex: 1 0 auto;
outline: none;
@@ -3125,7 +3141,7 @@ j|TitleBar {
.jewel.togglebutton {
margin: 0;
- padding: 0.72em 1.12em;
+ padding: 0.68em 1.12em;
cursor: pointer;
user-select: none;
display: inline-flex;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
index 24bb5dc..0eb7141 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -21,7 +21,7 @@
// Button variables
$button-margin: 0 !default
-$button-padding: 0.72em 1.12em !default
+$button-padding: 0.68em 1.12em !default
.jewel.button
margin: $button-margin
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index 61db15e..19b95d8 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -20,6 +20,10 @@
// Jewel NumericStepper
// NumericStepper variables
+$numericstepper-button-width: 22px
+$numericstepper-button-height: 10px
+$numericstepper-button-xoffset: calc(50% - #{$numericstepper-button-width/2})
+$numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
.jewel.numericstepper
.jewel.textinput
@@ -43,9 +47,32 @@ j|NumericStepper
.jewel.spinner
display: inline-flex
flex-direction: column
- vertical-align: middle
+ vertical-align: top
.jewel.button
display: flex
+
+ &.up
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
+ &.down
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
j|Spinner
IBeadModel:
ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 68ead0e..e7e35a4 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -21,7 +21,7 @@
// TextInput variables
$textinput-margin: 0 !default
-$textinput-padding-vertical: .72em !default
+$textinput-padding-vertical: .68em !default
$textinput-padding-horizontal: 1.12em !default
.jewel
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index e3833e0..892d6d4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -458,27 +458,31 @@ j|Card {
border-radius: 0.25rem 0px 0px 0.25rem;
}
+.jewel.spinner {
+ width: 40px;
+}
.jewel.spinner .jewel.button {
color: transparent;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-left: 0px;
- padding: 6px;
- height: 20px;
+ height: 19px;
+ padding: 0px;
}
.jewel.spinner .jewel.button.up {
border-bottom-right-radius: 0px;
}
.jewel.spinner .jewel.button.up::after {
- background-size: 40%;
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22'
height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333
[...]
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000,
-1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg
transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8
3.83 12.59 8.41 14 7 8 1 2
7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
}
.jewel.spinner .jewel.button.down {
border-top-right-radius: 0px;
+ border-top-style: groove;
}
.jewel.spinner .jewel.button.down::after {
- background-size: 40%;
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22'
height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333
[...]
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1'
xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000,
-1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg
transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon
transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000,
-4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2
7'%3E%3C/polygon%3E%3C/g [...]
}
.jewel.radiobutton input + span::before {
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 976947c..075b904 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
@@ -28,4 +28,10 @@
<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g
transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22'
height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401
14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931
14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834
L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14 [...]
-<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0'
y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575
1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 [...]
\ No newline at end of file
+<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0'
y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575
1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 [...]
+
+
+<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g
transform='translate(0.000000, -1.000000)' fill='#000000'
fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon
points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>
+
+
+<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g
transform='translate(0.000000, -1.000000)' fill='#000000'
fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon
transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000,
-4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2
7'></polygon></g></g></g></svg>
\ No newline at end of file
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
index 5384f33..829d01b 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -35,27 +35,29 @@ $numericstepper-border-radius: $border-radius
// Spinner variables
.jewel.spinner
+ width: 34px
.jewel.button
color: transparent
border-bottom-left-radius: 0px
border-top-left-radius: 0px
border-left: 0px
-
- padding: 6px
- height: 20px
+ height: 19px
+ padding: 0px
&.up
border-bottom-right-radius: 0px
&::after
- background-size: 40%
- background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22'
height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575
1.83333333,4.58333333 L1 [...]
-
+ background-size: 46%
+ background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)'
fill='#{$default-font-color}' fill-rule='nonzero'><g
transform='translate(-2.000000, 0.000000)'><polygon points='3.41 8.41 8 3.83
12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center
+
&.down
border-top-right-radius: 0px
-
+ // border-top: 0px
+ border-top-style: groove
+
&::after
- background-size: 40%
- background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22'
height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75
L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75
L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667
L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575
1.83333333,4.58333333 L1 [...]
+ background-size: 46%
+ background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1'
fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)'
fill='#{$default-font-color}' fill-rule='nonzero'><g
transform='translate(-2.000000, 0.000000)'><polygon
transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000,
-4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2
7'></polygon></g></g></g></s [...]
\ No newline at end of file
