royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: improving DateChooser and DateField styles
Date Mon, 20 Aug 2018 08:59:45 GMT
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 <carlosrovira@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 [...]


Mime
View raw message