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/06/24 15:45:31 UTC
[royale-asjs] branch develop updated: jewel-numericstepper: some
cleaning and distribution of code to theme
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 f0242a5 jewel-numericstepper: some cleaning and distribution of code to theme
f0242a5 is described below
commit f0242a59a194026ee7b41cae4b76522dac49acf9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Jun 24 17:45:19 2020 +0200
jewel-numericstepper: some cleaning and distribution of code to theme
---
.../projects/Jewel/src/main/resources/defaults.css | 9 --------
.../src/main/sass/components/_numericstepper.sass | 6 ------
.../JewelTheme/src/main/resources/defaults.css | 12 +++++++++++
.../sass/components-primary/_numericstepper.sass | 24 +++++++++-------------
4 files changed, 22 insertions(+), 29 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index e8a132c..6d160c8 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3307,21 +3307,16 @@ j|CollapsibleNavigationSectionRenderer {
.jewel.numericstepper {
display: flex;
flex-flow: column wrap;
- height: 38px;
}
.jewel.numericstepper .jewel.spinner {
display: none;
order: -1;
}
.jewel.numericstepper .jewel.textinput {
- width: calc(100% - 38px);
display: inline-flex;
order: 0;
z-index: 1;
}
-.jewel.numericstepper .jewel.button {
- width: 38px;
-}
.jewel.numericstepper .jewel.button::after {
content: " ";
position: absolute;
@@ -3332,10 +3327,6 @@ j|CollapsibleNavigationSectionRenderer {
.jewel.numericstepper .jewel.button.down {
order: 2;
}
-.jewel.numericstepper .jewel.button.up, .jewel.numericstepper .jewel.button.down {
- height: 16.5px;
- padding: 8.5px 16px;
-}
@media (max-width: 992px) {
.jewel.numericstepper {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
index 4ea4eea..e75a118 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -24,18 +24,15 @@
.jewel.numericstepper
display: flex
flex-flow: column wrap
- height: 38px
.jewel.spinner
display: none
order: -1
.jewel.textinput
- width: calc(100% - 38px)
display: inline-flex
order: 0
z-index: 1
.jewel.button
- width: 38px
&::after
content: ' '
position: absolute
@@ -43,9 +40,6 @@
order: 1
&.down
order: 2
- &.up, &.down
- height: 16.5px
- padding: 8.5px 16px
@media (max-width: $desktop)
.jewel.numericstepper
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 49a17e7..584ffe4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -910,16 +910,28 @@ j|FormItem {
padding-left: 34px;
}
+.jewel.numericstepper {
+ height: 38px;
+}
+.jewel.numericstepper .jewel.textinput {
+ width: calc(100% - 33px);
+}
.jewel.numericstepper .jewel.textinput input {
border-radius: 0.25rem 0px 0px 0.25rem;
}
.jewel.numericstepper .jewel.button {
border-radius: 0 0.25rem 0.25rem 0;
border-left: 0px;
+ width: 12%;
+ width: 33px;
}
.jewel.numericstepper .jewel.button, .jewel.numericstepper .jewel.button:hover, .jewel.numericstepper .jewel.button:hover:focus, .jewel.numericstepper .jewel.button:active, .jewel.numericstepper .jewel.button:active:focus {
color: transparent;
}
+.jewel.numericstepper .jewel.button.up, .jewel.numericstepper .jewel.button.down {
+ height: 16.5px;
+ padding: 8.5px 16px;
+}
.jewel.numericstepper .jewel.button.up {
border-bottom-right-radius: 0px;
}
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 8f8c937..df98a94 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -20,29 +20,31 @@
// Jewel NumericStepper
// NumericStepper variables
-$numericstepper-input-width: 8em
$numericstepper-border-radius: $border-radius
+$numericstepper-default-button-width: 33px
$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
+ height: 38px
+
.jewel.textinput
+ width: calc(100% - #{$numericstepper-default-button-width})
+
input
- // width: $numericstepper-input-width
border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius
.jewel.button
- // padding: 0px
- // height: 19px
-
border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
border-left: 0px
+ width: 12%
+ width: $numericstepper-default-button-width
&, &:hover, &:hover:focus, &:active, &:active:focus
color: transparent
-
+ &.up, &.down
+ height: 16.5px
+ padding: 8.5px 16px
&.up
border-bottom-right-radius: 0px
@@ -51,9 +53,6 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
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
@@ -64,9 +63,6 @@ $numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
width: $numericstepper-button-width
height: $numericstepper-button-height
- // left: $numericstepper-button-xoffset
- // top: $numericstepper-button-yoffset
-
@media (max-width: $desktop)
.jewel.numericstepper