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 c1e88f5 jewel CSS based layout classes. mostly working, but still
need to see final shape of some things in the works: * New GridLayout and
GridCellLayout and its components (Grid and GridCell) * Responsive CSS Layout
for Grid * VerticalLayout and HorizontalLayout refactor to *only CSS* * HGroup
and VGroup for Jewel updated to CSS layouts * Updated Jewel Example to use this
changes (still need some refactor on blog examples)
c1e88f5 is described below
commit c1e88f54b55a72ac9bd868633309cd8c96fd8c0e
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Tue Jun 19 01:23:19 2018 +0200
jewel CSS based layout classes. mostly working, but still need to see final
shape of some things in the works:
* New GridLayout and GridCellLayout and its components (Grid and GridCell)
* Responsive CSS Layout for Grid
* VerticalLayout and HorizontalLayout refactor to *only CSS*
* HGroup and VGroup for Jewel updated to CSS layouts
* Updated Jewel Example to use this changes (still need some refactor on
blog examples)
---
.../src/main/resources/jewel-example-styles.css | 4 +-
.../royale/JewelExample/src/main/royale/App.mxml | 2 +-
.../src/main/royale/DropDownListPlayGround.mxml | 2 +-
.../JewelExample/src/main/royale/MainContent.mxml | 38 +-
.../src/main/royale/TextInputPlayGround.mxml | 4 +-
.../projects/Jewel/src/main/resources/defaults.css | 2093 +++++++++++++++++++-
.../Jewel/src/main/resources/jewel-manifest.xml | 3 +-
.../main/royale/org/apache/royale/jewel/Card.as | 63 +-
.../main/royale/org/apache/royale/jewel/Cell.as | 51 -
.../main/royale/org/apache/royale/jewel/Grid.as | 37 +-
.../royale/org/apache/royale/jewel/GridCell.as | 268 +++
.../main/royale/org/apache/royale/jewel/Group.as | 24 +
.../main/royale/org/apache/royale/jewel/HGroup.as | 59 +
.../main/royale/org/apache/royale/jewel/VGroup.as | 59 +
.../royale/jewel/beads/layouts/BasicLayout.as | 21 +-
.../royale/jewel/beads/layouts/GridCellLayout.as | 426 ++++
.../royale/jewel/beads/layouts/GridLayout.as | 84 +-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 165 +-
.../jewel/beads/layouts/SimpleHorizontalLayout.as | 26 +-
.../jewel/beads/layouts/SimpleVerticalLayout.as | 23 +-
.../royale/jewel/beads/layouts/VerticalLayout.as | 212 +-
.../projects/Jewel/src/main/sass/_global.sass | 2 +-
.../Jewel/src/main/sass/components/_layout.sass | 90 +-
.../JewelTheme/src/main/resources/defaults.css | 6 +-
.../themes/JewelTheme/src/main/sass/_global.sass | 4 +-
.../src/main/sass/components-primary/_card.sass | 2 +-
26 files changed, 3416 insertions(+), 352 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index f9a01eb..2c23b0e 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -21,4 +21,6 @@
@namespace "http://www.w3.org/1999/xhtml";;
-
\ No newline at end of file
+.royale {
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml
b/examples/royale/JewelExample/src/main/royale/App.mxml
index c318cb1..7b6b8aa 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -32,7 +32,7 @@
<j:initialView>
<j:View>
<j:beads>
- <j:VerticalLayout gap="10"/>
+ <j:VerticalLayout gap="3"/>
</j:beads>
<html:H1 text="Apache Royale Jewel UI Set Theme
Showcase"/>
<local:MainContent/>
diff --git
a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index 08f5b75..8377576 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -40,7 +40,7 @@ limitations under the License.
</fx:Script>
<j:beads>
- <j:HorizontalLayout gap="10"/>
+ <j:HorizontalLayout gap="3"/>
<js:ViewDataBinding />
</j:beads>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 2d71575..5e2e9f8 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -17,46 +17,30 @@ See the License for the specific language governing
permissions and
limitations under the License.
-->
-<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009";
+<j:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:local="*">
+ xmlns:local="*" gap="3">
- <j:beads>
- <j:HorizontalLayout gap="10"/>
- </j:beads>
-
- <j:Group>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
+ <j:VGroup gap="3">
<local:LabelPlayGround/>
<local:ButtonPlayGround/>
- </j:Group>
+ </j:VGroup>
- <j:Group>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
+ <j:VGroup gap="3">
<local:TextInputPlayGround/>
<local:CheckBoxPlayGround/>
<local:RadioButtonPlayGround/>
- </j:Group>
+ </j:VGroup>
- <j:Group>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
+ <j:VGroup gap="3">
<local:SliderPlayGround/>
<local:ListPlayGround/>
- </j:Group>
+ </j:VGroup>
- <j:Group>
- <j:beads>
- <j:VerticalLayout gap="10"/>
- </j:beads>
+ <j:VGroup gap="3">
<local:AlertPlayGround/>
<local:HeadingsAndText/>
<local:DropDownListPlayGround/>
- </j:Group>
+ </j:VGroup>
-</j:Group>
+</j:HGroup>
diff --git
a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 2d64568..3284130 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -26,7 +26,7 @@ limitations under the License.
<j:Group>
<j:beads>
- <j:HorizontalLayout gap="10"/>
+ <j:HorizontalLayout gap="3"/>
</j:beads>
<j:Button text="Check it!" emphasis="primary"/>
<j:TextInput text="A TextInput"/>
@@ -34,7 +34,7 @@ limitations under the License.
<j:Group>
<j:beads>
- <j:HorizontalLayout gap="10"/>
+ <j:HorizontalLayout gap="3"/>
</j:beads>
<j:TextInput>
<j:beads>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 7ad6402..0bca95d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -34,6 +34,7 @@ button, input, textarea {
j|View {
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
}
j|Group {
@@ -240,15 +241,13 @@ j|Label {
}
/* Absolute */
-.layout.absolute {
- position: relative;
-}
.layout.absolute > * {
position: absolute;
}
.layout {
display: flex;
+ position: relative;
}
/* Horizontal */
@@ -256,143 +255,2043 @@ j|Label {
flex-flow: row nowrap;
align-items: flex-start;
}
-
-/* Vertical */
-.layout.vertical {
- flex-flow: column nowrap;
- align-items: flex-start;
+.layout.horizontal.gap-1x3px > *:first-child {
+ margin: 0px;
}
-
-.layout.horizontal.space {
- justify-content: space-between;
+.layout.horizontal.gap-1x3px > * {
+ margin: 0px 0px 0px 3px;
}
-
-/* Grid */
-.layout.grid {
- flex-wrap: wrap;
+.layout.horizontal.gap-2x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid > * {
- flex: 1;
+.layout.horizontal.gap-2x3px > * {
+ margin: 0px 0px 0px 6px;
}
-.layout.grid.gap-1dp {
- margin: -1em 0 1em -1em;
+.layout.horizontal.gap-3x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-1dp > * {
- padding: 1em 0 0 1em;
+.layout.horizontal.gap-3x3px > * {
+ margin: 0px 0px 0px 9px;
}
-.layout.grid.gap-2dp {
- margin: -2em 0 2em -2em;
+.layout.horizontal.gap-4x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-2dp > * {
- padding: 2em 0 0 2em;
+.layout.horizontal.gap-4x3px > * {
+ margin: 0px 0px 0px 12px;
}
-.layout.grid.gap-3dp {
- margin: -3em 0 3em -3em;
+.layout.horizontal.gap-5x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-3dp > * {
- padding: 3em 0 0 3em;
+.layout.horizontal.gap-5x3px > * {
+ margin: 0px 0px 0px 15px;
}
-.layout.grid.gap-4dp {
- margin: -4em 0 4em -4em;
+.layout.horizontal.gap-6x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-4dp > * {
- padding: 4em 0 0 4em;
+.layout.horizontal.gap-6x3px > * {
+ margin: 0px 0px 0px 18px;
}
-.layout.grid.gap-5dp {
- margin: -5em 0 5em -5em;
+.layout.horizontal.gap-7x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-5dp > * {
- padding: 5em 0 0 5em;
+.layout.horizontal.gap-7x3px > * {
+ margin: 0px 0px 0px 21px;
}
-.layout.grid.gap-6dp {
- margin: -6em 0 6em -6em;
+.layout.horizontal.gap-8x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-6dp > * {
- padding: 6em 0 0 6em;
+.layout.horizontal.gap-8x3px > * {
+ margin: 0px 0px 0px 24px;
}
-.layout.grid.gap-7dp {
- margin: -7em 0 7em -7em;
+.layout.horizontal.gap-9x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-7dp > * {
- padding: 7em 0 0 7em;
+.layout.horizontal.gap-9x3px > * {
+ margin: 0px 0px 0px 27px;
}
-.layout.grid.gap-8dp {
- margin: -8em 0 8em -8em;
+.layout.horizontal.gap-10x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-8dp > * {
- padding: 8em 0 0 8em;
+.layout.horizontal.gap-10x3px > * {
+ margin: 0px 0px 0px 30px;
}
-.layout.grid.gap-9dp {
- margin: -9em 0 9em -9em;
+
+/* Vertical */
+.layout.vertical {
+ flex-flow: column nowrap;
+ align-items: flex-start;
+}
+.layout.vertical.gap-1x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-1x3px > * {
+ margin: 3px 0px 0px;
+}
+.layout.vertical.gap-2x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-9dp > * {
- padding: 9em 0 0 9em;
+.layout.vertical.gap-2x3px > * {
+ margin: 6px 0px 0px;
}
-.layout.grid.gap-10dp {
- margin: -10em 0 10em -10em;
+.layout.vertical.gap-3x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-10dp > * {
- padding: 10em 0 0 10em;
+.layout.vertical.gap-3x3px > * {
+ margin: 9px 0px 0px;
}
-.layout.grid.gap-11dp {
- margin: -11em 0 11em -11em;
+.layout.vertical.gap-4x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-11dp > * {
- padding: 11em 0 0 11em;
+.layout.vertical.gap-4x3px > * {
+ margin: 12px 0px 0px;
}
-.layout.grid.gap-12dp {
- margin: -12em 0 12em -12em;
+.layout.vertical.gap-5x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-12dp > * {
- padding: 12em 0 0 12em;
+.layout.vertical.gap-5x3px > * {
+ margin: 15px 0px 0px;
}
-.layout.grid.gap-13dp {
- margin: -13em 0 13em -13em;
+.layout.vertical.gap-6x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-13dp > * {
- padding: 13em 0 0 13em;
+.layout.vertical.gap-6x3px > * {
+ margin: 18px 0px 0px;
}
-.layout.grid.gap-14dp {
- margin: -14em 0 14em -14em;
+.layout.vertical.gap-7x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-14dp > * {
- padding: 14em 0 0 14em;
+.layout.vertical.gap-7x3px > * {
+ margin: 21px 0px 0px;
}
-.layout.grid.gap-15dp {
- margin: -15em 0 15em -15em;
+.layout.vertical.gap-8x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-15dp > * {
- padding: 15em 0 0 15em;
+.layout.vertical.gap-8x3px > * {
+ margin: 24px 0px 0px;
}
-.layout.grid.gap-16dp {
- margin: -16em 0 16em -16em;
+.layout.vertical.gap-9x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-16dp > * {
- padding: 16em 0 0 16em;
+.layout.vertical.gap-9x3px > * {
+ margin: 27px 0px 0px;
}
-.layout.grid.gap-17dp {
- margin: -17em 0 17em -17em;
+.layout.vertical.gap-10x3px > *:first-child {
+ margin: 0px;
}
-.layout.grid.gap-17dp > * {
- padding: 17em 0 0 17em;
+.layout.vertical.gap-10x3px > * {
+ margin: 30px 0px 0px;
+}
+
+/* Vertical */
+.layout.tile {
+ flex-flow: row wrap;
+ align-items: flex-start;
+}
+
+.layout.horizontal.space {
+ justify-content: space-between;
}
-.layout.grid.gap-18dp {
- margin: -18em 0 18em -18em;
+
+/* Grid */
+.layout.grid {
+ flex-flow: row wrap;
+ align-items: stretch;
+ width: 100%;
}
-.layout.grid.gap-18dp > * {
- padding: 18em 0 0 18em;
+.layout.grid > * {
+ max-width: 100%;
+ width: 100%;
}
-.layout.grid.gap-19dp {
- margin: -19em 0 19em -19em;
+.layout.grid.gap > .cell {
+ margin: 5px;
}
-.layout.grid.gap-19dp > * {
- padding: 19em 0 0 19em;
+@media (min-width: 0px) {
+ .layout.grid.gap .phone-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .phone-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-12-12 {
+ width: calc(100% - 10px);
+ }
}
-.layout.grid.gap-20dp {
- margin: -20em 0 20em -20em;
+@media (min-width: 768px) {
+ .layout.grid.gap .tablet-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .tablet-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-12-12 {
+ width: calc(100% - 10px);
+ }
}
-.layout.grid.gap-20dp > * {
- padding: 20em 0 0 20em;
+@media (min-width: 992px) {
+ .layout.grid.gap .desktop-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .desktop-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+@media (min-width: 1200px) {
+ .layout.grid.gap .lg-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .lg-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .lg-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .lg-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .lg-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .lg-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .lg-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .lg-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .lg-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .lg-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .lg-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .lg-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .lg-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .lg-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .lg-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .lg-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .lg-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+@media (min-width: 0px) {
+ .layout.grid .phone-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .phone-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .phone-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .phone-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .phone-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .phone-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .phone-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .phone-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .phone-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .phone-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .phone-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .phone-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .phone-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .phone-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .phone-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .phone-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .phone-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .phone-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .phone-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .phone-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .phone-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .phone-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .phone-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .phone-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .phone-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .phone-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .phone-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .phone-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .phone-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .phone-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .phone-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .phone-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .phone-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .phone-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .phone-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .phone-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .phone-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .phone-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .phone-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .phone-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .phone-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .phone-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .phone-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .phone-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .phone-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .phone-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .phone-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 768px) {
+ .layout.grid .tablet-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .tablet-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .tablet-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .tablet-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .tablet-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .tablet-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .tablet-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .tablet-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .tablet-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .tablet-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .tablet-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .tablet-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .tablet-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .tablet-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .tablet-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .tablet-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .tablet-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .tablet-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .tablet-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .tablet-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .tablet-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .tablet-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .tablet-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .tablet-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .tablet-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .tablet-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .tablet-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .tablet-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .tablet-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .tablet-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .tablet-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .tablet-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .tablet-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .tablet-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .tablet-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .tablet-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .tablet-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .tablet-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .tablet-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .tablet-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .tablet-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .tablet-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .tablet-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .tablet-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .tablet-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .tablet-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .tablet-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 992px) {
+ .layout.grid .desktop-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .desktop-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .desktop-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .desktop-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .desktop-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .desktop-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .desktop-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .desktop-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .desktop-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .desktop-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .desktop-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .desktop-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .desktop-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .desktop-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .desktop-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .desktop-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .desktop-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .desktop-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .desktop-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .desktop-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .desktop-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .desktop-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .desktop-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .desktop-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .desktop-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .desktop-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .desktop-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .desktop-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .desktop-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .desktop-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .desktop-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .desktop-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .desktop-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .desktop-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .desktop-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .desktop-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .desktop-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .desktop-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .desktop-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .desktop-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .desktop-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .desktop-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .desktop-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .desktop-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .desktop-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .desktop-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .desktop-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 1200px) {
+ .layout.grid .lg-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .lg-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .lg-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .lg-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .lg-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .lg-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .lg-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .lg-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .lg-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .lg-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .lg-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .lg-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .lg-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .lg-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .lg-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .lg-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .lg-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .lg-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .lg-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .lg-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .lg-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .lg-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .lg-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .lg-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .lg-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .lg-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .lg-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .lg-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .lg-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .lg-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .lg-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .lg-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .lg-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .lg-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .lg-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .lg-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .lg-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .lg-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .lg-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .lg-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .lg-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .lg-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .lg-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .lg-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .lg-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .lg-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .lg-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .lg-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .lg-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .lg-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .lg-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .lg-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .lg-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .lg-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .lg-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .lg-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .lg-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .lg-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .lg-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .lg-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .lg-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .lg-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .lg-col-12-12 {
+ width: 100%;
+ }
}
.jewel.list {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index cc3d635..0eed546 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -28,7 +28,7 @@
<component id="VGroup" class="org.apache.royale.jewel.VGroup"/>
<component id="Container" class="org.apache.royale.jewel.Container"/>
<component id="Grid" class="org.apache.royale.jewel.Grid"/>
- <component id="Cell" class="org.apache.royale.jewel.Cell"/>
+ <component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="Label" class="org.apache.royale.jewel.Label"/>
@@ -60,6 +60,7 @@
<component id="VerticalLayout"
class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
<component id="TileLayout"
class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
<component id="GridLayout"
class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
+ <component id="GridCellLayout"
class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
<component id="HorizontalLayoutSpaceBetween"
class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
index be4b16f..d671eb7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
@@ -46,7 +46,26 @@ package org.apache.royale.jewel
typeNames = "jewel card";
}
- protected var _shadow:Number = 0;
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ //protected var _shadow:Number = 0;
/**
* A boolean flag to activate "shadow-Xdp" effect selector.
* Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to
card
@@ -56,29 +75,29 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get shadow():Number
- {
- return _shadow;
- }
+ // public function get shadow():Number
+ // {
+ // return _shadow;
+ // }
- public function set shadow(value:Number):void
- {
- if (_shadow != value)
- {
- COMPILE::JS
- {
- if (value == 2 || value == 3 || value == 4 || value == 6
|| value == 8 || value == 16)
- {
- var classVal:String = "shadow-" + _shadow + "dp";
- classSelectorList.remove(classVal);
+ // public function set shadow(value:Number):void
+ // {
+ // if (_shadow != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if (value == 2 || value == 3 || value == 4 || value ==
6 || value == 8 || value == 16)
+ // {
+ // var classVal:String = "shadow-" + _shadow + "dp";
+ // classSelectorList.remove(classVal);
- classVal = "shadow-" + value + "dp";
- classSelectorList.add(classVal);
+ // classVal = "shadow-" + value + "dp";
+ // classSelectorList.add(classVal);
- _shadow = value;
- }
- }
- }
- }
+ // _shadow = value;
+ // }
+ // }
+ // }
+ // }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as
deleted file mode 100644
index f7010aa..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as
+++ /dev/null
@@ -1,51 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// Licensed to the Apache Software Foundation (ASF) under one or more
-// contributor license agreements. See the NOTICE file distributed with
-// this work for additional information regarding copyright ownership.
-// The ASF licenses this file to You under the Apache License, Version 2.0
-// (the "License"); you may not use this file except in compliance with
-// the License. You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
-{
- import org.apache.royale.jewel.Group;
- import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.jewel.beads.layouts.GridLayout;
-
- /**
- * The Cell class is the inmediate container in a Grid Layout
- * to host grid cell content.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public class Cell extends Group
- {
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function Cell()
- {
- super();
-
- typeNames = "jewel cell";
- }
- }
-}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
index 308fd4b..bb9199d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
@@ -18,9 +18,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.jewel.Group;
- import org.apache.royale.core.IBeadLayout;
import org.apache.royale.jewel.beads.layouts.GridLayout;
+ import org.apache.royale.utils.StringUtil;
/**
* The Grid class is a container that uses Grid Layout.
@@ -46,7 +45,7 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel";
+ typeNames = "jewel " + GridLayout.LAYOUT_TYPE_NAMES;
layout = new GridLayout();
addBead(layout);
@@ -64,14 +63,42 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get gap():Number
+ public function get gap():Boolean
{
return layout.gap;
}
- public function set gap(value:Number):void
+ public function set gap(value:Boolean):void
{
+ typeNames = StringUtil.removeWord(typeNames, " gap");
+ typeNames += " gap";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
layout.gap = value;
}
+ // public function get gap():Number
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Number):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap-" +
layout.gap + "dp");
+ // if(value != 0)
+ // typeNames += " gap-" + value + "dp";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
new file mode 100644
index 0000000..f0766e5
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
@@ -0,0 +1,268 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.jewel.beads.layouts.GridCellLayout;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The GridCell class is the inmediate container in a Grid Layout
+ * to host grid cell content.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class GridCell extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function GridCell()
+ {
+ super();
+
+ typeNames = "jewel " + GridCellLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new GridCellLayout();
+ addBead(layout);
+ }
+
+ protected var layout:GridCellLayout;
+
+ /**
+ * The X Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop numerator for the X/Y fraction that
indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with
desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get desktopNumerator():Number
+ {
+ return layout.desktopNumerator;
+ }
+
+ public function set desktopNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP,
value, layout.desktopDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.desktopNumerator = value;
+ }
+
+ /**
+ * The Y Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop denominator for the X/Y fraction that
indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get desktopDenominator():Number
+ {
+ return layout.desktopDenominator;
+ }
+
+ public function set desktopDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP,
layout.desktopNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.desktopDenominator = value;
+ }
+
+ /**
+ * The X Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet numerator for the X/Y fraction that
indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with
tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get tabletNumerator():Number
+ {
+ return layout.tabletNumerator;
+ }
+
+ public function set tabletNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.TABLET,
value, layout.tabletDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.tabletNumerator = value;
+ }
+
+ /**
+ * The Y Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet denominator for the X/Y fraction that
indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get tabletDenominator():Number
+ {
+ return layout.tabletDenominator;
+ }
+
+ public function set tabletDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.TABLET,
layout.tabletNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.tabletDenominator = value;
+ }
+
+ /**
+ * The X Number for "phone-col-X-Y" effect selector.
+ * Sets the phone numerator for the X/Y fraction that
indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get phoneNumerator():Number
+ {
+ return layout.phoneNumerator;
+ }
+
+ public function set phoneNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.PHONE,
value, layout.phoneDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.phoneNumerator = value;
+ }
+
+ /**
+ * The Y Number for "phone-col-X-Y" effect selector.
+ * Sets the phone denominator for the X/Y fraction that
indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get phoneDenominator():Number
+ {
+ return layout.phoneDenominator;
+ }
+
+ public function set phoneDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.PHONE,
layout.phoneNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.phoneDenominator = value;
+ }
+
+ COMPILE::JS
+ private function setFractionForScreen(screen:String,
num:Number, den:Number):void
+ {
+ if(num && den)
+ {
+ if (num <= 0 || num >
GridCellLayout.MAX_COLUMNS)
+ throw new Error(screen + " numerator
must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+ if (den <= 0 || den >
GridCellLayout.MAX_COLUMNS)
+ throw new Error(screen + " denominator
must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+
+ typeNames = StringUtil.removeWord(typeNames, "
" + screen + "-col-" + layout.desktopNumerator + "-" +
layout.desktopDenominator);
+ typeNames += " " + screen + "-col-" + num + "-"
+ den;
+ }
+ }
+
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ // public function get gap():Number
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Number):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap-" +
layout.gap + "dp");
+ // if(value != 0)
+ // typeNames += " gap-" + value + "dp";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
index c488cda..f273ada 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
@@ -58,5 +58,29 @@ package org.apache.royale.jewel
{
classSelectorList.addNames(value);
}
+
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
index 557bf80..f14cd2e 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
@@ -18,6 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+ import org.apache.royale.utils.StringUtil;
+
/**
* This Group subclass uses HorizontalLayout as its default layout.
*
@@ -41,6 +44,62 @@ package org.apache.royale.jewel
public function HGroup()
{
super();
+
+ typeNames = "jewel " +
HorizontalLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new HorizontalLayout();
+ addBead(layout);
}
+
+ protected var layout:HorizontalLayout;
+
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return layout.gap;
+ }
+
+ public function set gap(value:Number):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " gap-" +
layout.gap + "x" + HorizontalLayout.GAP_STEP + "px");
+ if(value != 0)
+ typeNames += " gap-" + value + "x" +
HorizontalLayout.GAP_STEP + "px";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.gap = value;
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
index 0a5e119..7ee63b7 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
@@ -18,6 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+ import org.apache.royale.utils.StringUtil;
+
/**
* This Group subclass uses VerticalLayout as its default layout.
*
@@ -41,6 +44,62 @@ package org.apache.royale.jewel
public function VGroup()
{
super();
+
+ typeNames = "jewel " + VerticalLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new VerticalLayout();
+ addBead(layout);
}
+
+ protected var layout:VerticalLayout;
+
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return layout.gap;
+ }
+
+ public function set gap(value:Number):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " gap-" +
layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
+ if(value != 0)
+ typeNames += " gap-" + value + "x" +
VerticalLayout.GAP_STEP + "px";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.gap = value;
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
index b029e65..5971ffb 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
@@ -56,6 +56,17 @@ package org.apache.royale.jewel.beads.layouts
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
absolute";
+
+ COMPILE::JS
+ private var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
* @copy org.apache.royale.core.IBead#strand
*
* @langversion 3.0
@@ -69,8 +80,14 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- var contentView:UIBase = layoutView as UIBase;
- contentView.className = contentView.className ?
contentView.className + " layout absolute" : "layout absolute";
+ hostComponent = host as UIBase;
+ hostClassList =
hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("absolute"))
+ hostClassList.remove("absolute");
+ hostClassList.add("absolute");
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
new file mode 100644
index 0000000..578f329
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
@@ -0,0 +1,426 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The GridCellLayout class is the layout used for childrens in a Grid
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class GridCellLayout extends LayoutBase implements IBeadLayout
+ {
+ public static const MAX_COLUMNS:Number = 12;
+ public static const PHONE:String = "phone";
+ public static const TABLET:String = "tablet";
+ public static const DESKTOP:String = "desktop";
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function GridCellLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "cell";
+
+ COMPILE::JS
+ private var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ hostComponent = host as UIBase;
+ hostClassList =
hostComponent.positioner.classList;
+
+ setFractionForScreen(DESKTOP,
_desktopNumerator, _desktopDenominator);
+ setFractionForScreen(TABLET, _tabletNumerator,
_tabletDenominator);
+ setFractionForScreen(PHONE, _phoneNumerator,
_phoneDenominator);
+ }
+ }
+
+ private var _desktopNumerator:Number;
+ /**
+ * The X Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop numerator for the X/Y fraction that
indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with
desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get desktopNumerator():Number
+ {
+ return _desktopNumerator;
+ }
+
+ public function set desktopNumerator(value:Number):void
+ {
+ if (_desktopNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(DESKTOP,
value, _desktopDenominator);
+ _desktopNumerator = value;
+ }
+ }
+ }
+
+ private var _desktopDenominator:Number;
+ /**
+ * The Y Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop denominator for the X/Y fraction that
indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get desktopDenominator():Number
+ {
+ return _desktopDenominator;
+ }
+
+ public function set desktopDenominator(value:Number):void
+ {
+ if (_desktopDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(DESKTOP,
_desktopNumerator, value);
+ _desktopDenominator = value;
+ }
+ }
+ }
+
+ private var _tabletNumerator:Number;
+ /**
+ * The X Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet numerator for the X/Y fraction that
indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with
tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get tabletNumerator():Number
+ {
+ return _tabletNumerator;
+ }
+
+ public function set tabletNumerator(value:Number):void
+ {
+ if (_tabletNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(TABLET,
value, _tabletDenominator);
+ _tabletNumerator = value;
+ }
+ }
+ }
+
+ private var _tabletDenominator:Number;
+ /**
+ * The Y Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet denominator for the X/Y fraction that
indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get tabletDenominator():Number
+ {
+ return _tabletDenominator;
+ }
+
+ public function set tabletDenominator(value:Number):void
+ {
+ if (_tabletDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(TABLET,
_tabletNumerator, value);
+ _tabletDenominator = value;
+ }
+ }
+ }
+
+ private var _phoneNumerator:Number;
+ /**
+ * The X Number for "phone-col-X-Y" effect selector.
+ * Sets the phone numerator for the X/Y fraction that
indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get phoneNumerator():Number
+ {
+ return _phoneNumerator;
+ }
+
+ public function set phoneNumerator(value:Number):void
+ {
+ if (_phoneNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(PHONE,
value, _phoneDenominator);
+ _phoneNumerator = value;
+ }
+ }
+ }
+
+ private var _phoneDenominator:Number;
+ /**
+ * The Y Number for "phone-col-X-Y" effect selector.
+ * Sets the phone denominator for the X/Y fraction that
indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone
denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get phoneDenominator():Number
+ {
+ return _phoneDenominator;
+ }
+
+ public function set phoneDenominator(value:Number):void
+ {
+ if (_phoneDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(PHONE,
_phoneNumerator, value);
+ _phoneDenominator = value;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setFractionForScreen(screen:String,
num:Number, den:Number):void
+ {
+ if(num && den)
+ {
+ if (num <= 0 || num > MAX_COLUMNS)
+ throw new Error(screen + " numerator
must be between 1 and " + MAX_COLUMNS);
+ if (den <= 0 || den > MAX_COLUMNS)
+ throw new Error(screen + " denominator
must be between 1 and " + MAX_COLUMNS);
+
+ if (hostClassList.contains(screen + "-col-" +
_desktopNumerator + "-" + _desktopDenominator))
+ hostClassList.remove(screen + "-col-" +
_desktopNumerator + "-" + _desktopDenominator);
+ hostClassList.add(screen + "-col-" + num + "-"
+ den);
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var hostWidthSizedToContent:Boolean =
host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean =
host.isHeightSizedToContent();
+
+ var w:Number = hostWidthSizedToContent ? 0 :
contentView.width;
+ var h:Number = hostHeightSizedToContent ? 0 :
contentView.height;
+
+ var n:int = contentView.numElements;
+
+ for (var i:int = 0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible)
continue;
+
+ var positions:Object =
childPositions(child);
+ var margins:Object =
childMargins(child, contentView.width, contentView.height);
+ var ww:Number = w;
+ var hh:Number = h;
+
+ var ilc:ILayoutChild = child as ILayoutChild;
+
+ // set the top edge of the child
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setX(positions.left+margins.left);
+ else
+ child.x = positions.left+margins.left;
+ ww -= positions.left + margins.left;
+ }
+
+ // set the left edge of the child
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setY(positions.top+margins.top);
+ else
+ child.y = positions.top+margins.top;
+ hh -= positions.top + margins.top;
+ }
+
+ // set the right edge of the child
+ if (!isNaN(positions.right))
+ {
+ if (!hostWidthSizedToContent)
+ {
+ if
(!isNaN(positions.left))
+ {
+ if (ilc)
+
ilc.setWidth(ww - positions.right - margins.right, false);
+ else
+
child.width = ww - positions.right - margins.right;
+ }
+ else
+ {
+ if (ilc)
+ {
+
ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+ }
+ else
+ {
+ child.x
= w - positions.right - margins.left - child.width - margins.right;
+ }
+ }
+ }
+ }
+ else if (ilc != null &&
!isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+ {
+ ilc.setWidth((ww -
margins.right - margins.left) * ilc.percentWidth/100, false);
+ }
+
+ // set the bottm edge of the child
+ if (!isNaN(positions.bottom))
+ {
+ if (!hostHeightSizedToContent)
+ {
+ if
(!isNaN(positions.top))
+ {
+ if (ilc)
+
ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+ else
+
child.height = hh - positions.bottom - margins.bottom;
+ }
+ else
+ {
+ if (ilc)
+
ilc.setY( h - positions.bottom - child.height - margins.bottom);
+ else
+ child.y
= h - positions.bottom - child.height - margins.bottom;
+ }
+ }
+ }
+ else if (ilc != null &&
!isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+ {
+ ilc.setHeight((hh - margins.top
- margins.bottom) * ilc.percentHeight/100, false);
+ }
+
+ if (margins.auto)
+ {
+ if (ilc)
+ ilc.setX( (w -
child.width) / 2);
+ else
+ child.x = (w -
child.width) / 2;
+ }
+ }
+
+ return true;
+
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.absolute {
+ * position: relative;
+ * }
+ *
+ * .layout.absolute > * {
+ * position: absolute
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
index 848f15f..6f323f8 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
@@ -20,11 +20,7 @@ package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.ILayoutChild;
- import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.IUIBase;
import org.apache.royale.core.IStrand;
- import org.apache.royale.utils.StringUtil;
import org.apache.royale.core.IParentIUIBase;
COMPILE::JS {
@@ -56,9 +52,17 @@ package org.apache.royale.jewel.beads.layouts
super();
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout grid";
+
COMPILE::JS
private var hostComponent:UIBase;
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
/**
* @copy org.apache.royale.core.IBead#strand
*
@@ -75,14 +79,20 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- hostComponent = layoutView as UIBase;
- hostComponent.className =
hostComponent.className ? hostComponent.className + " layout grid" : "layout
grid";
+ hostComponent = host as UIBase;
+ hostClassList =
hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("grid"))
+ hostClassList.remove("grid");
+ hostClassList.add("grid");
setGap(_gap);
}
}
- protected var _gap:Number = 0;
+ private var _gap:Boolean;
/**
* Assigns variable gap to grid from 1 to 20
* Activate "gap-Xdp" effect selector to set a numeric gap
@@ -93,7 +103,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get gap():Number
+ public function get gap():Boolean
{
return _gap;
}
@@ -101,7 +111,7 @@ package org.apache.royale.jewel.beads.layouts
/**
* @private
*/
- public function set gap(value:Number):void
+ public function set gap(value:Boolean):void
{
if (_gap != value)
{
@@ -116,17 +126,55 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
- private function setGap(value:Number):void
+ private function setGap(value:Boolean):void
{
- if (value >= 0 && value <= 20)
- {
- hostComponent.className =
StringUtil.removeWord(hostComponent.className, " gap-" + _gap + "dp");
- hostComponent.className += " gap-" + value +
"dp";
- //
hostComponent.positioner.classList.remove("gap-" + _gap + "dp");
- //
hostComponent.positioner.classList.add("gap-" + value + "dp");
- } else
- throw new Error("Grid gap needs to be between 0
and 20");
+ hostClassList.toggle("gap", value);
}
+ // protected var _gap:Number = 0;
+ // /**
+ // * Assigns variable gap to grid from 1 to 20
+ // * Activate "gap-Xdp" effect selector to set a numeric gap
+ // * between grid cells
+ // *
+ // * @langversion 3.0
+ // * @playerversion Flash 10.2
+ // * @playerversion AIR 2.6
+ // * @productversion Royale 0.9.3
+ // */
+ // public function get gap():Number
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Number):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Number):void
+ // {
+ // if (value >= 0 && value <= 20)
+ // {
+ // if (hostClassList.contains("gap-" + _gap +
"dp"))
+ // hostClassList.remove("gap-" + _gap +
"dp");
+ // if(value != 0)
+ // hostClassList.add("gap-" + value +
"dp");
+ // } else
+ // throw new Error("Grid gap needs to be between 0
and 20");
+ // }
/**
* @copy org.apache.royale.core.IBeadLayout#layout
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index f6418d2..824b7be 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -28,8 +28,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.core.layout.ILayoutStyleProperties;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
COMPILE::JS {
import org.apache.royale.core.WrappedHTMLElement;
@@ -46,7 +49,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class HorizontalLayout extends LayoutBase implements
IBeadLayout, ILayoutStyleProperties
+ public class HorizontalLayout extends SimpleHorizontalLayout implements
ILayoutStyleProperties
{
/**
* Constructor.
@@ -62,6 +65,32 @@ package org.apache.royale.jewel.beads.layouts
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
horizontal";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -165,34 +194,49 @@ package org.apache.royale.jewel.beads.layouts
_paddingLeft = value;
}
- /**
- * @private
- */
private var gapInitialized:Boolean;
- public static const GAP_STYLE:String = "gap"
- private var _gap:Number = 0;
-
+ // private var _gap:Boolean;
/**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get gap():Number
- {
- return _gap;
- }
-
- /**
- * @private
- */
- public function set gap(value:Number):void
- {
- _gap = value;
- gapInitialized = true;
- }
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
/**
* Get the component layout style and apply to if exists
@@ -202,11 +246,11 @@ package org.apache.royale.jewel.beads.layouts
*
* @see
org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase,
cssProperty:String):void
*
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
public function applyStyleToLayout(component:IUIBase,
cssProperty:String):void
{
var cssValue:* =
ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -214,11 +258,9 @@ package org.apache.royale.jewel.beads.layouts
{
switch(cssProperty)
{
- case GAP_STYLE:
+ case "gap":
if(!gapInitialized)
- {
gap = Number(cssValue);
- }
break;
default:
break;
@@ -226,6 +268,58 @@ package org.apache.royale.jewel.beads.layouts
}
}
+ // number of gap styles available in CSS @see $gaps variable in
_layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step
variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x"
+ GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap +
"x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x"
+ GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and
" + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -312,14 +406,9 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- var c:UIBase = (contentView as UIBase);
- c.element.classList.add("layout");
- c.element.classList.add("horizontal");
-
- applyStyleToLayout(c, "gap");
+ //applyStyleToLayout(c, "gap");
- var children:Array =
contentView.internalChildren();
+ /*var children:Array =
contentView.internalChildren();
var i:int;
var n:int = children.length;
for (i = 0; i < n; i++)
@@ -344,7 +433,7 @@ package org.apache.royale.jewel.beads.layouts
{
child.style.marginLeft = _gap +
'px';
}
- }
+ }*/
return true;
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
index 77fac92..e0130ce 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
@@ -28,7 +28,8 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.IStrand;
- COMPILE::JS {
+ COMPILE::JS
+ {
import org.apache.royale.core.UIBase;
}
@@ -59,12 +60,25 @@ package org.apache.royale.jewel.beads.layouts
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
horizontal";
+
+ COMPILE::JS
+ protected var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
* @copy org.apache.royale.core.IBead#strand
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
*/
override public function set strand(value:IStrand):void
{
@@ -72,8 +86,14 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- var contentView:UIBase = layoutView as UIBase;
- contentView.className = contentView.className ?
contentView.className + " layout horizontal" : "layout horizontal";
+ hostComponent = host as UIBase;
+ hostClassList =
hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("horizontal"))
+ hostClassList.remove("horizontal");
+ hostClassList.add("horizontal");
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
index 171b46d..9786f20 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
@@ -60,12 +60,25 @@ package org.apache.royale.jewel.beads.layouts
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
vertical";
+
+ COMPILE::JS
+ protected var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
* @copy org.apache.royale.core.IBead#strand
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
*/
override public function set strand(value:IStrand):void
{
@@ -73,8 +86,14 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- var contentView:UIBase = layoutView as UIBase;
- contentView.className = contentView.className ?
contentView.className + " layout vertical" : "layout vertical";
+ hostComponent = host as UIBase;
+ hostClassList =
hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("vertical"))
+ hostClassList.remove("vertical");
+ hostClassList.add("vertical");
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index 24d3e82..5d15d74 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -28,8 +28,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.core.layout.ILayoutStyleProperties;
import org.apache.royale.events.Event;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
COMPILE::JS
{
@@ -47,7 +50,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public class VerticalLayout extends LayoutBase implements IBeadLayout,
ILayoutStyleProperties
+ public class VerticalLayout extends SimpleVerticalLayout implements
ILayoutStyleProperties
{
/**
* Constructor.
@@ -63,6 +66,32 @@ package org.apache.royale.jewel.beads.layouts
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout
vertical";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion
org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -166,35 +195,49 @@ package org.apache.royale.jewel.beads.layouts
_paddingLeft = value;
}
- /**
- * @private
- */
private var gapInitialized:Boolean;
- public static const GAP_STYLE:String = "gap"
- private var _gap:Number = 0;
-
- // [Bindable(event="gapChanged")]
+ // private var _gap:Boolean;
/**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function get gap():Number
- {
- return _gap;
- }
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
/**
* @private
*/
- public function set gap(value:Number):void
- {
- _gap = value;
- gapInitialized = true;
- }
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
/**
* Get the component layout style and apply to if exists
@@ -204,11 +247,11 @@ package org.apache.royale.jewel.beads.layouts
*
* @see
org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase,
cssProperty:String):void
*
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
public function applyStyleToLayout(component:IUIBase,
cssProperty:String):void
{
var cssValue:* =
ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -216,11 +259,9 @@ package org.apache.royale.jewel.beads.layouts
{
switch(cssProperty)
{
- case GAP_STYLE:
+ case "gap":
if(!gapInitialized)
- {
gap = Number(cssValue);
- }
break;
default:
break;
@@ -228,6 +269,59 @@ package org.apache.royale.jewel.beads.layouts
}
}
+
+ // number of gap styles available in CSS @see $gaps variable in
_layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step
variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have
available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a
numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x"
+ GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap +
"x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x"
+ GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and
" + GAPS*GAP_STEP);
+ }
+
/**
* Layout children vertically
*
@@ -317,41 +411,41 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
- var c:UIBase = (contentView as UIBase);
- c.element.classList.add("layout");
- c.element.classList.add("vertical");
+ // var contentView:IParentIUIBase = layoutView
as IParentIUIBase;
+ // var c:UIBase = (contentView as UIBase);
+ // c.element.classList.add("layout");
+ // c.element.classList.add("vertical");
- applyStyleToLayout(c, "gap");
+ //applyStyleToLayout(c, "gap");
- var children:Array =
contentView.internalChildren();
- var i:int;
- var n:int = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement =
children[i];
-
- if(i == 0)
- {
- child.style.marginTop =
_paddingTop + 'px';
- }
- else
- {
- child.style.marginTop = _gap +
'px';
- }
- child.style.marginRight = _paddingRight
+ 'px';
- if(i === (n - 1))
- {
- child.style.marginBottom =
_paddingBottom + 'px';
- }
- else
- {
- child.style.marginBottom =
'0px';
- }
- child.style.marginLeft = _paddingLeft +
'px';
+ // var children:Array =
contentView.internalChildren();
+ // var i:int;
+ // var n:int = children.length;
+ // for (i = 0; i < n; i++)
+ // {
+ // var child:WrappedHTMLElement =
children[i];
+
+ // if(i == 0)
+ // {
+ // child.style.marginTop =
_paddingTop + 'px';
+ // }
+ // else
+ // {
+ // child.style.marginTop = _gap +
'px';
+ // }
+ // child.style.marginRight = _paddingRight
+ 'px';
+ // if(i === (n - 1))
+ // {
+ // child.style.marginBottom =
_paddingBottom + 'px';
+ // }
+ // else
+ // {
+ // child.style.marginBottom =
'0px';
+ // }
+ // child.style.marginLeft = _paddingLeft +
'px';
-
child.royale_wrapper.dispatchEvent('sizeChanged');
- }
+ //
child.royale_wrapper.dispatchEvent('sizeChanged');
+ // }
return true;
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass
b/frameworks/projects/Jewel/src/main/sass/_global.sass
index aa1458f..d98214e 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -37,7 +37,7 @@ button, input, textarea
j|View
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
- //IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+ IBeadLayout:
ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
j|Group
IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index beede65..c97870d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -17,44 +17,104 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Layouts
+
+// Layouts variables
+$gaps: 10
+$gap-step: 3
+$gap: 0px
+
/* Absolute */
.layout.absolute
- position: relative
> *
position: absolute
- //width: 100%
.layout
display: flex
+ position: relative
/* Horizontal */
.layout.horizontal
flex-flow: row nowrap
align-items: flex-start
-//.layout.horizontal.gap
-// justify-content: space-between
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: 0px 0px 0px ($gap + $i * $gap-step)
/* Vertical */
.layout.vertical
flex-flow: column nowrap
align-items: flex-start
-//.layout.vertical.gap
-// justify-content: space-between
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: ($gap + $i * $gap-step) 0px 0px
+
+/* Vertical */
+.layout.tile
+ flex-flow: row wrap
+ align-items: flex-start
+
+ // this not compile******
+ // &.gap
+ // > *:first-child
+ // margin: 0px
+ // > *:nth-child(-n+3)
+ // margin: 0px 0px 0px $gap-size
+ // > *:nth-child(3n)
+ // margin: $gap-size 0px 0px
+ // > *
+ // margin: $gap-size 0px 0px $gap-size
.layout.horizontal.space
justify-content: space-between
/* Grid */
-$gut: 0em
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
+$grid-columns: 12 !default
+$gap-size: 10px !default
+
+
+$devices: (phone: $phone, tablet: $tablet) !default
+$computers: (desktop: $desktop, lg: $widescreen) !default
+$sizes: map-merge($devices, $computers)
+$size-names: map-keys($sizes)
+
.layout.grid
- flex-wrap: wrap
+ flex-flow: row wrap
+ align-items: stretch
+ width: 100%
+
> *
- flex: 1
- // max-width: 100%
- @for $i from 1 through 20
- &.gap-#{$i}dp
- margin: $gut - $i 0 $gut + $i $gut - $i
- > *
- padding: $gut + $i 0 0 $gut + $i
+ max-width: 100%
+ width: 100%
+
+ &.gap
+
+ > .cell
+ margin: $gap-size / 2
+
+ @each $size in $size-names
+ @media (min-width: map-get($sizes, $size))
+ @for $i from 1 through $grid-columns
+ @for $j from 1 through $i
+ .#{$size}-col-#{$j}-#{$i}
+ width:
calc(#{percentage($j / $i)} - #{$gap-size})
+
+ @each $size in $size-names
+ @media (min-width: map-get($sizes, $size))
+ @for $i from 1 through $grid-columns
+ @for $j from 1 through $i
+ .#{$size}-col-#{$j}-#{$i}
+ width: percentage($j / $i)
+
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 22f5a20..29bab45 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,8 +20,8 @@ j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
- padding: 10px;
- margin: 10px;
+ padding: 0px;
+ margin: 0px;
}
h1 {
@@ -193,7 +193,7 @@ div {
}
j|Card {
- gap: 10;
+ gap: 3;
}
.jewel.checkbox input + span::before {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index d57d574..02b0eee 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,8 +25,8 @@ j|Application
font:
family: $font-stack
color: $default-font-color
- padding: 10px
- margin: 10px
+ padding: 0px
+ margin: 0px
h1
font-size: 2em
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index 0fe5f97..fd1cd6c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -38,4 +38,4 @@
padding: 20px
j|Card
- gap: 10
+ gap: 3
