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 2019/01/29 14:59:13 UTC
[royale-asjs] branch develop updated: Rewrite jewel alignments to
avoid !important and make more easily override by he user if needed
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 dc33287 Rewrite jewel alignments to avoid !important and make more easily override by he user if needed
dc33287 is described below
commit dc33287fad781e9e00cc911871c3c5544deaaeda
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jan 29 15:59:05 2019 +0100
Rewrite jewel alignments to avoid !important and make more easily override by he user if needed
---
.../projects/Jewel/src/main/resources/defaults.css | 71 +++++++++++-----------
.../royale/org/apache/royale/jewel/Snackbar.as | 2 +-
.../Jewel/src/main/sass/components/_layout.sass | 65 ++++++++++----------
.../Jewel/src/main/sass/components/_snackbar.sass | 1 +
4 files changed, 71 insertions(+), 68 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 6134d9a..3b56fa6 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -906,41 +906,8 @@ j|Label {
.layout {
display: flex;
}
-.layout.itemsSameHeight > * > * {
- min-height: 100%;
-}
-.layout.itemsCentered {
- align-items: center !important;
-}
-.layout.itemsTop {
- align-items: flex-start !important;
-}
-.layout.itemsBottom {
- align-items: flex-end !important;
-}
-.layout.itemsLeft {
- justify-content: flex-start !important;
-}
-.layout.itemsCenter {
- justify-content: center !important;
-}
-.layout.itemsRight {
- justify-content: flex-end !important;
-}
-.layout.itemsSpaceBetween {
- justify-content: space-between !important;
-}
-.layout.itemsSpaceAround {
- justify-content: space-around !important;
-}
-.layout.itemsExpand {
- width: 100%;
-}
-.layout.itemsExpand > * {
- flex: 1 0 auto !important;
-}
.layout.horizontal {
- flex-direction: row !important;
+ flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
@@ -1020,7 +987,7 @@ j|Label {
margin: 0px 0px 0px 30px;
}
.layout.vertical {
- flex-direction: column !important;
+ flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
}
@@ -3001,6 +2968,39 @@ j|Label {
width: calc(100% - 10px);
}
}
+.layout.horizontal.itemsSameHeight > * > *, .layout.vertical.itemsSameHeight > * > *, .layout.grid.itemsSameHeight > * > * {
+ min-height: 100%;
+}
+.layout.horizontal.itemsCentered, .layout.vertical.itemsCentered, .layout.grid.itemsCentered {
+ align-items: center;
+}
+.layout.horizontal.itemsTop, .layout.vertical.itemsTop, .layout.grid.itemsTop {
+ align-items: flex-start;
+}
+.layout.horizontal.itemsBottom, .layout.vertical.itemsBottom, .layout.grid.itemsBottom {
+ align-items: flex-end;
+}
+.layout.horizontal.itemsLeft, .layout.vertical.itemsLeft, .layout.grid.itemsLeft {
+ justify-content: flex-start;
+}
+.layout.horizontal.itemsCenter, .layout.vertical.itemsCenter, .layout.grid.itemsCenter {
+ justify-content: center;
+}
+.layout.horizontal.itemsRight, .layout.vertical.itemsRight, .layout.grid.itemsRight {
+ justify-content: flex-end;
+}
+.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.itemsExpand, .layout.vertical.itemsExpand, .layout.grid.itemsExpand {
+ width: 100%;
+}
+.layout.horizontal.itemsExpand > *, .layout.vertical.itemsExpand > *, .layout.grid.itemsExpand > * {
+ flex: 1 0 auto;
+}
.layout.table {
display: table;
}
@@ -3424,6 +3424,7 @@ j|Slider {
position: fixed;
width: 100%;
z-index: 5;
+ justify-content: center;
}
.jewel.snackbar-content {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Snackbar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Snackbar.as
index 2197f69..3af4d76 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Snackbar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Snackbar.as
@@ -63,7 +63,7 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel snackbar layout itemsCenter";
+ typeNames = "jewel snackbar layout";
}
/**
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 1414089..4856561 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -46,39 +46,9 @@ $gap-size: 10px !default
display: flex
//position: relative
- // Vertical Items Align
- &.itemsSameHeight
- //align-items: stretch --> this doen't seems to work as expected
- > *
- > *
- min-height: 100%
- &.itemsCentered
- align-items: center !important
- &.itemsTop
- align-items: flex-start !important
- &.itemsBottom
- align-items: flex-end !important
-
- // Horizontal Items Align
- &.itemsLeft
- justify-content: flex-start !important
- &.itemsCenter
- justify-content: center !important
- &.itemsRight
- justify-content: flex-end !important
- &.itemsSpaceBetween
- justify-content: space-between !important
- &.itemsSpaceAround
- justify-content: space-around !important
-
- &.itemsExpand
- width: 100%
- > *
- flex: 1 0 auto !important
-
// Horizontal
&.horizontal
- flex-direction: row !important
+ flex-direction: row
flex-wrap: nowrap
align-items: flex-start
@@ -105,7 +75,7 @@ $gap-size: 10px !default
// Vertical
&.vertical
- flex-direction: column !important
+ flex-direction: column
flex-wrap: nowrap
align-items: flex-start
@@ -173,6 +143,37 @@ $gap-size: 10px !default
.#{$size}-col-#{$j}-#{$i}
width: calc(#{percentage($j / $i)} - #{$gap-size})
+ &.horizontal, &.vertical, &.grid
+ // Vertical Items Align
+ &.itemsSameHeight
+ //align-items: stretch --> this doen't seems to work as expected
+ > *
+ > *
+ min-height: 100%
+ &.itemsCentered
+ align-items: center
+ &.itemsTop
+ align-items: flex-start
+ &.itemsBottom
+ align-items: flex-end
+
+ // Horizontal Items Align
+ &.itemsLeft
+ justify-content: flex-start
+ &.itemsCenter
+ 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
+
&.table
display: table
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
index ed1ff3f..90bbb24 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
@@ -27,6 +27,7 @@
position: fixed
width: 100%
z-index: 5
+ justify-content: center
&.open