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/03/21 12:00:25 UTC
[royale-asjs] branch develop updated: jewel-layouts: rework some
layout cases to make it work (fix #767)
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 509b38c jewel-layouts: rework some layout cases to make it work (fix #767)
509b38c is described below
commit 509b38c1788bb3980127138fb0f904062b20a660
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 21 13:00:22 2020 +0100
jewel-layouts: rework some layout cases to make it work (fix #767)
---
.../projects/Jewel/src/main/resources/defaults.css | 46 +++++++++++++++-------
.../Jewel/src/main/sass/components/_layout.sass | 39 ++++++++++++------
2 files changed, 60 insertions(+), 25 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 48bc5e2..24837c4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3112,38 +3112,56 @@ j|Label {
width: calc(100% - 10px);
}
}
+.layout.horizontal.itemsSpaceBetween, .layout.vertical.itemsSpaceBetween, .layout.grid.itemsSpaceBetween {
+ justify-content: space-between;
+}
+.layout.horizontal.itemsSpaceAround, .layout.vertical.itemsSpaceAround, .layout.grid.itemsSpaceAround {
+ justify-content: space-around;
+}
.layout.horizontal.itemsSameHeight > * > *, .layout.vertical.itemsSameHeight > * > *, .layout.grid.itemsSameHeight > * > * {
min-height: 100%;
}
-.layout.horizontal.itemsCentered, .layout.vertical.itemsCentered, .layout.grid.itemsCentered {
+.layout.horizontal.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
+ width: 100%;
+}
+.layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
+ flex: 1 0 auto;
+}
+.layout.horizontal.itemsCentered, .layout.grid.itemsCentered {
align-items: center;
}
-.layout.horizontal.itemsTop, .layout.vertical.itemsTop, .layout.grid.itemsTop {
+.layout.horizontal.itemsTop, .layout.grid.itemsTop {
align-items: flex-start;
}
-.layout.horizontal.itemsBottom, .layout.vertical.itemsBottom, .layout.grid.itemsBottom {
+.layout.horizontal.itemsBottom, .layout.grid.itemsBottom {
align-items: flex-end;
}
-.layout.horizontal.itemsLeft, .layout.vertical.itemsLeft, .layout.grid.itemsLeft {
+.layout.horizontal.itemsLeft, .layout.grid.itemsLeft {
justify-content: flex-start;
}
-.layout.horizontal.itemsCenter, .layout.vertical.itemsCenter, .layout.grid.itemsCenter {
+.layout.horizontal.itemsCenter, .layout.grid.itemsCenter {
justify-content: center;
}
-.layout.horizontal.itemsRight, .layout.vertical.itemsRight, .layout.grid.itemsRight {
+.layout.horizontal.itemsRight, .layout.grid.itemsRight {
justify-content: flex-end;
}
-.layout.horizontal.itemsSpaceBetween, .layout.vertical.itemsSpaceBetween, .layout.grid.itemsSpaceBetween {
- justify-content: space-between;
+.layout.vertical.itemsCentered {
+ justify-content: center;
}
-.layout.horizontal.itemsSpaceAround, .layout.vertical.itemsSpaceAround, .layout.grid.itemsSpaceAround {
- justify-content: space-around;
+.layout.vertical.itemsTop {
+ justify-content: flex-start;
}
-.layout.horizontal.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
- width: 100%;
+.layout.vertical.itemsBottom {
+ justify-content: flex-end;
}
-.layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
- flex: 1 0 auto;
+.layout.vertical.itemsLeft {
+ align-items: flex-start;
+}
+.layout.vertical.itemsCenter {
+ align-items: center;
+}
+.layout.vertical.itemsRight {
+ align-items: flex-end;
}
.layout.table {
display: table;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 46e262d..1227acd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -186,14 +186,23 @@ $gap-size: 10px !default
@for $j from 1 through $i
.#{$size}-col-#{$j}-#{$i}
width: calc(#{percentage($j / $i)} - #{$gap-size})
-
&.horizontal, &.vertical, &.grid
- // Vertical Items Align
+ &.itemsSpaceBetween
+ justify-content: space-between
+ &.itemsSpaceAround
+ justify-content: space-around
&.itemsSameHeight
//align-items: stretch --> this doen't seems to work as expected
> *
> *
min-height: 100%
+ &.itemsExpand
+ width: 100%
+ > *
+ flex: 1 0 auto
+
+ &.horizontal, &.grid
+ // Vertical Items Align
&.itemsCentered
align-items: center
&.itemsTop
@@ -208,16 +217,24 @@ $gap-size: 10px !default
justify-content: center
&.itemsRight
justify-content: flex-end
- &.itemsSpaceBetween
- justify-content: space-between
- &.itemsSpaceAround
- justify-content: space-around
-
- &.itemsExpand
- width: 100%
- > *
- flex: 1 0 auto
+
+ &.vertical
+ // Vertical Items Align
+ &.itemsCentered
+ justify-content: center
+ &.itemsTop
+ justify-content: flex-start
+ &.itemsBottom
+ justify-content: flex-end
+ // Horizontal Items Align
+ &.itemsLeft
+ align-items: flex-start
+ &.itemsCenter
+ align-items: center
+ &.itemsRight
+ align-items: flex-end
+
&.table
display: table