From commits-return-5161-archive-asf-public=cust-asf.ponee.io@royale.apache.org Mon Aug 20 10:59:48 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 25A5A180663 for ; Mon, 20 Aug 2018 10:59:46 +0200 (CEST) Received: (qmail 59924 invoked by uid 500); 20 Aug 2018 08:59:46 -0000 Mailing-List: contact commits-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list commits@royale.apache.org Received: (qmail 59915 invoked by uid 99); 20 Aug 2018 08:59:46 -0000 Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 20 Aug 2018 08:59:46 +0000 Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33) id A1131808B3; Mon, 20 Aug 2018 08:59:45 +0000 (UTC) Date: Mon, 20 Aug 2018 08:59:45 +0000 To: "commits@royale.apache.org" Subject: [royale-asjs] branch develop updated: improving DateChooser and DateField styles MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit Message-ID: <153475558558.1542.11610470392526041269@gitbox.apache.org> From: carlosrovira@apache.org X-Git-Host: gitbox.apache.org X-Git-Repo: royale-asjs X-Git-Refname: refs/heads/develop X-Git-Reftype: branch X-Git-Oldrev: ed7738ddf1d4389535f83be9bd77736f72aaac7e X-Git-Newrev: 0d5be04a4d264250742bfa901b6ea23666f24a89 X-Git-Rev: 0d5be04a4d264250742bfa901b6ea23666f24a89 X-Git-NotificationType: ref_changed_plus_diff X-Git-Multimail-Version: 1.5.dev Auto-Submitted: auto-generated 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 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("