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 2018/08/20 08:59:45 UTC
[royale-asjs] branch develop updated: improving DateChooser and
DateField styles
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 0d5be04 improving DateChooser and DateField styles
0d5be04 is described below
commit 0d5be04a4d264250742bfa901b6ea23666f24a89
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Aug 20 10:59:40 2018 +0200
improving DateChooser and DateField styles
---
.../projects/Jewel/src/main/resources/defaults.css | 30 +++++++++++--------
.../src/main/sass/components/_datechooser.sass | 12 +-------
.../Jewel/src/main/sass/components/_datefield.sass | 35 ++++++++++++++++++----
.../JewelTheme/src/main/resources/defaults.css | 21 +++++++++++--
.../main/sass/components-primary/_datechooser.sass | 15 +++-------
.../main/sass/components-primary/_datefield.sass | 19 ++++++++++--
6 files changed, 88 insertions(+), 44 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 5b839af..39bc320 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -246,9 +246,6 @@ j|ControlBar {
IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
}
}
-.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .jewel.button {
- margin: 2px;
-}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::before, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::before {
margin: 0;
padding: 0;
@@ -269,7 +266,7 @@ j|ControlBar {
top: calc(50% - 11px);
}
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
- padding: 0px;
+ padding: 4px;
}
.jewel.datechooser .jewel.table .jewel.tableitem {
width: 42px;
@@ -295,15 +292,24 @@ j|DateChooser {
.jewel.datefield {
display: inline-flex;
}
-.jewel.datefield .jewel.textinput input {
- border-bottom-right-radius: 0px;
- border-top-right-radius: 0px;
- border-right: 0px;
- width: 8em;
+.jewel.datefield .jewel.button::before {
+ margin: 0;
+ padding: 0;
+ line-height: 22px;
+ content: " ";
+ position: absolute;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
+ width: 22px;
+ height: 22px;
}
-.jewel.datefield .jewel.button {
- border-bottom-left-radius: 0px;
- border-top-left-radius: 0px;
+.jewel.datefield .jewel.button::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
}
.dateChooserPopUp {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index 68534b9..f0d24d1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -25,14 +25,11 @@ $datechooser-button-xoffset: calc(50% - #{$datechooser-button-size/2})
$datechooser-button-yoffset: calc(50% - #{$datechooser-button-size/2})
$datechooser-tableitem-size: 42px
-
.jewel.datechooser
.jewel.table
.jewel.tableheadercell.buttonsRow
- .jewel.button
- margin: 2px
.prevMonthButton::before, .nextMonthButton::before
margin: 0
@@ -58,16 +55,9 @@ $datechooser-tableitem-size: 42px
left: $datechooser-button-xoffset
top: $datechooser-button-yoffset
- thead
-
-
- th
-
.jewel.tableheadercell.buttonsRow
- padding: 0px
+ padding: 4px
- tbody
- tr
// td
.jewel.tableitem
width: $datechooser-tableitem-size
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index 0439668..2b0d6ab 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -20,19 +20,42 @@
// Jewel DateField
// DateField variables
+$datefield-button-size: 22px
+$datefield-button-xoffset: calc(50% - #{$datefield-button-size/2})
+$datefield-button-yoffset: calc(50% - #{$datefield-button-size/2})
.jewel.datefield
display: inline-flex
.jewel.textinput
input
- border-bottom-right-radius: 0px
- border-top-right-radius: 0px
- border-right: 0px
- width: 8em
+
.jewel.button
- border-bottom-left-radius: 0px
- border-top-left-radius: 0px
+
+ &::before
+ margin: 0
+ padding: 0
+
+ line-height: $datefield-button-size
+ content: ' '
+ position: absolute
+
+ left: $datefield-button-xoffset
+ top: $datefield-button-yoffset
+
+ width: $datefield-button-size
+ height: $datefield-button-size
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $datefield-button-size
+ height: $datefield-button-size
+
+ left: $datefield-button-xoffset
+ top: $datefield-button-yoffset
+
.dateChooserPopUp
position: absolute
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5568ee5..bb9c435 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -270,14 +270,15 @@ j|Card {
.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' 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(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath 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.482210 [...]
}
-.jewel.datechooser .jewel.table th {
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
background: white;
box-shadow: none;
border-left: 0px;
}
-.jewel.datechooser .jewel.table td {
+.jewel.datechooser .jewel.table .jewel.tablecell {
border-top: 0px;
border-left: 0px;
+ padding: 4px;
}
.calendar.item {
@@ -290,6 +291,22 @@ j|Card {
color: grey;
}
+.jewel.datefield .jewel.textinput input {
+ border-bottom-right-radius: 0px;
+ border-top-right-radius: 0px;
+ border-right-color: transparent;
+ width: 8em;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 75%;
+ 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 [...]
+}
+
.jewel.divider {
border-bottom-color: #d9d9d9;
border-bottom-width: 1px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
index 52d7b21..578aee7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -23,12 +23,10 @@
$datechooser-border-radius: $border-radius
$datechooser-buttons-border-radius: 50%
-
.jewel.datechooser
background: lighten($default-color, 20%)
border: 1px solid $default-color
border-radius: $datechooser-border-radius
- // width: 282px
.jewel.table
background: lighten($default-color, 20%)
@@ -53,15 +51,8 @@ $datechooser-buttons-border-radius: 50%
.prevMonthButton::before, .nextMonthButton::before
-
-
.prevMonthButton::after, .nextMonthButton::after
-
background-size: 40%
- // border: 1px solid transparent
-
- // transition: all .3s ease
- // transform: scale(0)
.prevMonthButton::after
background: encodeSVG("<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.1196 [...]
@@ -70,16 +61,18 @@ $datechooser-buttons-border-radius: 50%
.nextMonthButton::after
background: encodeSVG("<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.1196 [...]
- th
+ .jewel.tableheadercell
@if $flat
background: lighten($default-color, 20%)
@else
background: lighten($default-color, 20%)
box-shadow: none
border-left: 0px
- td
+
+ .jewel.tablecell
border-top: 0px
border-left: 0px
+ padding: 4px
.calendar
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
index ba1d362..852862b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
@@ -22,5 +22,20 @@
// DateField variables
.jewel.datefield
-
-
+
+ .jewel.textinput
+ input
+ border-bottom-right-radius: 0px
+ border-top-right-radius: 0px
+ border-right-color: transparent
+ width: 8em
+ .jewel.button
+ color: transparent
+ border-bottom-left-radius: 0px
+ border-top-left-radius: 0px
+
+ &::before
+
+ &::after
+ background-size: 75%
+ 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.833 [...]