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 <carlosrov...@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 [...]