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 2020/04/08 18:39:16 UTC
[royale-asjs] branch develop updated: jewel-numericstepper: fix
button icons and text color on hover and active states
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 6dc74fd jewel-numericstepper: fix button icons and text color on hover and active states
6dc74fd is described below
commit 6dc74fdd1b03ea6b17d372b415b6a2f95cd0a4b7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Apr 8 20:39:11 2020 +0200
jewel-numericstepper: fix button icons and text color on hover and active states
---
.../projects/Jewel/src/main/resources/defaults.css | 31 +----------------
.../src/main/sass/components/_numericstepper.sass | 39 +++------------------
.../JewelTheme/src/main/resources/defaults.css | 31 +++++++++++++++--
.../sass/components-primary/_numericstepper.sass | 40 +++++++++++++++++++---
4 files changed, 69 insertions(+), 72 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e8ac70e..fd58f04 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3287,14 +3287,9 @@ j|NavigationLinkItemRenderer {
}
@media (max-width: 992px) {
- .jewel.numericstepper {
- width: 190px;
- height: 39px;
- }
.jewel.numericstepper .jewel.textinput {
z-index: 1;
position: relative;
- left: 38px;
}
}
j|NumericStepper {
@@ -3310,39 +3305,15 @@ j|NumericStepper {
.jewel.spinner .jewel.button {
display: flex;
}
-.jewel.spinner .jewel.button.up::after {
+.jewel.spinner .jewel.button.up::after, .jewel.spinner .jewel.button.down::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);
}
@media (max-width: 992px) {
.jewel.spinner {
position: relative;
- left: -112px;
flex-direction: row;
- width: auto;
- }
- .jewel.spinner .jewel.button {
- width: 39px;
- height: 38px;
- }
- .jewel.spinner .jewel.button.up {
- left: 149px;
- }
- .jewel.spinner .jewel.button.down {
- left: -39px;
}
}
j|Spinner {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index 59daacd..c78b002 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -20,10 +20,6 @@
// 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
@@ -31,12 +27,10 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
@media (max-width: $desktop)
.jewel.numericstepper
- width: 190px
- height: 39px
.jewel.textinput
z-index: 1
position: relative
- left: 38px
+
j|NumericStepper
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
@@ -60,47 +54,24 @@ j|NumericStepper
.jewel.button
display: flex
- &.up
-
+ &.up, &.down
&::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
-
@media (max-width: $desktop)
.jewel.spinner
position: relative
- left: -112px
flex-direction: row
- width: auto
+
.jewel.button
- width: 39px
- height: 38px
&.up
// position: absolute
- left: 149px
+
&.down
// position: absolute
- left: -39px
-
-
+
j|Spinner
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SpinnerView")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5c135a4..3bfc323 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -891,6 +891,13 @@ j|List {
}
@media (max-width: 992px) {
+ .jewel.numericstepper {
+ width: 190px;
+ height: 39px;
+ }
+ .jewel.numericstepper .jewel.textinput {
+ left: 38px;
+ }
.jewel.numericstepper .jewel.textinput input {
border-radius: 0;
}
@@ -901,32 +908,50 @@ j|List {
.jewel.spinner .jewel.button {
padding: 0px;
height: 19px;
- color: transparent;
border-radius: 0 0.25rem 0.25rem 0;
border-left: 0px;
}
+.jewel.spinner .jewel.button, .jewel.spinner .jewel.button:hover, .jewel.spinner .jewel.button:hover:focus, .jewel.spinner .jewel.button:active, .jewel.spinner .jewel.button:active:focus {
+ color: transparent;
+}
.jewel.spinner .jewel.button.up {
border-bottom-right-radius: 0px;
}
.jewel.spinner .jewel.button.up::after {
- 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='%233CADF1' 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;
+ width: 12px;
+ height: 7px;
+ left: calc(50% - 6px);
+ top: calc(50% - 3.5px);
}
.jewel.spinner .jewel.button.down {
border-top-right-radius: 0px;
border-top-style: groove;
}
.jewel.spinner .jewel.button.down::after {
- 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='%233CADF1' 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 [...]
+ width: 12px;
+ height: 7px;
+ left: calc(50% - 6px);
+ top: calc(50% - 3.5px);
}
@media (max-width: 992px) {
+ .jewel.spinner {
+ left: -112px;
+ width: auto;
+ }
+ .jewel.spinner .jewel.button {
+ width: 39px;
+ height: 38px;
+ }
.jewel.spinner .jewel.button.up {
+ left: 149px;
border: 1px solid #b3b3b3;
border-radius: 0 0.25rem 0.25rem 0;
}
.jewel.spinner .jewel.button.down {
+ left: -39px;
border: 1px solid #b3b3b3;
border-radius: 0.25rem 0 0 0.25rem;
border-top-style: solid;
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 4ab0c73..81483dc 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -22,6 +22,10 @@
// NumericStepper variables
$numericstepper-input-width: 8em
$numericstepper-border-radius: $border-radius
+$numericstepper-button-width: 12px
+$numericstepper-button-height: 7px
+$numericstepper-button-xoffset: calc(50% - #{$numericstepper-button-width/2})
+$numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
.jewel.numericstepper
.jewel.textinput
@@ -31,7 +35,12 @@ $numericstepper-border-radius: $border-radius
@media (max-width: $desktop)
.jewel.numericstepper
+ width: 190px
+ height: 39px
+
.jewel.textinput
+ left: 38px
+
input
border-radius: 0
@@ -46,32 +55,53 @@ $numericstepper-border-radius: $border-radius
padding: 0px
height: 19px
- color: transparent
border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
border-left: 0px
+
+ &, &:hover, &:hover:focus, &:active, &:active:focus
+ color: transparent
&.up
border-bottom-right-radius: 0px
&::after
- background-size: 46%
+ // 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='#{$primary-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
-
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
&.down
border-top-right-radius: 0px
border-top-style: groove
&::after
- background-size: 46%
+ // 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='#{$primary-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></svg>") [...]
-
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
+
@media (max-width: $desktop)
.jewel.spinner
+ left: -112px
+ width: auto
+
.jewel.button
+ width: 39px
+ height: 38px
+
&.up
+ left: 149px
+
border: 1px solid darken($default-color, 15%)
border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
&.down
+ left: -39px
+
border: 1px solid darken($default-color, 15%)
border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
border-top-style: solid