I had hard time with BasicLayout in View, so I remove the layout default for View in Jewel since it imposes a default that not always is what you want. So if start building from View you can add some element with x,y values and will be positioned regarding those values, and the add the new Grid component or a Group with a GridLayout and this will take all the avialable width that is what you expect. And so on...
It was hard to get to this, with many tries until I reach to it :) For now in Jewel I'm refactoring all layouts to be truly CSS based (SWF will be handled at later time): * BasicLayout, SimpleHorizontalLayout, SimpleVerticalLayout and GridLayout are working this way now. The rest are now in a work in progress to its final shape. 2018-06-10 10:36 GMT+02:00 Harbs <[email protected]>: > Wouldn’t this override a parent absolute positioning? > > > -.layout.absolute { > > - position: relative; > > -} > > Or is `.layout.absolute > *` more specific? > > Harbs > > > On Jun 10, 2018, at 11:04 AM, [email protected] wrote: > > > > 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 3646f90 Jewel Grid Layout > > 3646f90 is described below > > > > commit 3646f904c0f9c853110c896e3126b2ba0eb3290e > > Author: Carlos Rovira <[email protected]> > > AuthorDate: Sun Jun 10 10:04:42 2018 +0200 > > > > Jewel Grid Layout > > --- > > .../projects/Jewel/src/main/resources/defaults.css | 193 > +++++++++++++++++---- > > .../Jewel/src/main/resources/jewel-manifest.xml | 2 + > > .../projects/Jewel/src/main/royale/JewelClasses.as | 1 + > > .../main/royale/org/apache/royale/jewel/Card.as | 2 - > > .../royale/org/apache/royale/jewel/Container.as | 2 +- > > .../org/apache/royale/jewel/{Card.as => Grid.as} | 46 ++--- > > .../royale/jewel/beads/layouts/GridLayout.as | 173 > ++++++++++++++++++ > > .../projects/Jewel/src/main/sass/_global.sass | 59 +------ > > .../Jewel/src/main/sass/components/_layout.sass | 59 +++++++ > > .../projects/Jewel/src/main/sass/defaults.sass | 1 + > > 10 files changed, 430 insertions(+), 108 deletions(-) > > > > diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css > b/frameworks/projects/Jewel/src/main/resources/defaults.css > > index ce2dda8..66dce6b 100644 > > --- a/frameworks/projects/Jewel/src/main/resources/defaults.css > > +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css > > @@ -16,46 +16,16 @@ > > */ > > @namespace j "library://ns.apache.org/royale/jewel"; > > @namespace "http://www.w3.org/1999/xhtml";; > > -j|Application *, .royale *, .royale *:before, .royale *:after { > > +*, :after, :before { > > box-sizing: border-box; > > } > > > > -.layout { > > - display: flex; > > -} > > - > > -.layout.absolute { > > - position: relative; > > -} > > -.layout.absolute > * { > > - position: absolute; > > -} > > - > > -.layout.horizontal { > > - flex-flow: row nowrap; > > - align-items: flex-start; > > -} > > - > > -.layout.vertical { > > - flex-flow: column nowrap; > > - align-items: flex-start; > > -} > > - > > -.layout.tile { > > - flex-flow: row wrap; > > -} > > - > > -.layout.horizontal.space { > > - justify-content: space-between; > > -} > > - > > ::-moz-focus-inner, ::-moz-focus-outer { > > border: 0; > > } > > > > j|View { > > IBeadView: ClassReference("org.apache.royale.core.beads.GroupView"); > > - IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts. > BasicLayout"); > > } > > > > j|Group { > > @@ -75,7 +45,6 @@ j|Container { > > IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts. > BasicLayout"); > > IViewport: ClassReference("org.apache.royale.core.supportClasses. > Viewport"); > > IViewportModel: ClassReference("org.apache.royale.core.beads.models. > ViewportModel"); > > - align-items: flex-start; > > } > > > > @media -royale-swf { > > @@ -182,6 +151,162 @@ j|Label { > > IBeadModel: ClassReference("org.apache.royale.jewel.beads.models. > TextModel"); > > } > > > > +.layout { > > + display: flex; > > +} > > + > > +/* Absolute */ > > +.layout.absolute { > > + position: relative; > > +} > > +.layout.absolute > * { > > + position: absolute; > > +} > > + > > +/* Horizontal */ > > +.layout.horizontal { > > + flex-flow: row nowrap; > > + align-items: flex-start; > > +} > > + > > +/* Vertical */ > > +.layout.vertical { > > + flex-flow: column nowrap; > > + align-items: flex-start; > > +} > > + > > +.layout.horizontal.space { > > + justify-content: space-between; > > +} > > + > > +/* Grid */ > > +.layout.grid { > > + flex-wrap: wrap; > > +} > > +.layout.grid > * { > > + flex: 1; > > +} > > +.layout.grid.gap-1dp { > > + margin: -1em 0 1em -1em; > > +} > > +.layout.grid.gap-1dp > * { > > + padding: 1em 0 0 1em; > > +} > > +.layout.grid.gap-2dp { > > + margin: -2em 0 2em -2em; > > +} > > +.layout.grid.gap-2dp > * { > > + padding: 2em 0 0 2em; > > +} > > +.layout.grid.gap-3dp { > > + margin: -3em 0 3em -3em; > > +} > > +.layout.grid.gap-3dp > * { > > + padding: 3em 0 0 3em; > > +} > > +.layout.grid.gap-4dp { > > + margin: -4em 0 4em -4em; > > +} > > +.layout.grid.gap-4dp > * { > > + padding: 4em 0 0 4em; > > +} > > +.layout.grid.gap-5dp { > > + margin: -5em 0 5em -5em; > > +} > > +.layout.grid.gap-5dp > * { > > + padding: 5em 0 0 5em; > > +} > > +.layout.grid.gap-6dp { > > + margin: -6em 0 6em -6em; > > +} > > +.layout.grid.gap-6dp > * { > > + padding: 6em 0 0 6em; > > +} > > +.layout.grid.gap-7dp { > > + margin: -7em 0 7em -7em; > > +} > > +.layout.grid.gap-7dp > * { > > + padding: 7em 0 0 7em; > > +} > > +.layout.grid.gap-8dp { > > + margin: -8em 0 8em -8em; > > +} > > +.layout.grid.gap-8dp > * { > > + padding: 8em 0 0 8em; > > +} > > +.layout.grid.gap-9dp { > > + margin: -9em 0 9em -9em; > > +} > > +.layout.grid.gap-9dp > * { > > + padding: 9em 0 0 9em; > > +} > > +.layout.grid.gap-10dp { > > + margin: -10em 0 10em -10em; > > +} > > +.layout.grid.gap-10dp > * { > > + padding: 10em 0 0 10em; > > +} > > +.layout.grid.gap-11dp { > > + margin: -11em 0 11em -11em; > > +} > > +.layout.grid.gap-11dp > * { > > + padding: 11em 0 0 11em; > > +} > > +.layout.grid.gap-12dp { > > + margin: -12em 0 12em -12em; > > +} > > +.layout.grid.gap-12dp > * { > > + padding: 12em 0 0 12em; > > +} > > +.layout.grid.gap-13dp { > > + margin: -13em 0 13em -13em; > > +} > > +.layout.grid.gap-13dp > * { > > + padding: 13em 0 0 13em; > > +} > > +.layout.grid.gap-14dp { > > + margin: -14em 0 14em -14em; > > +} > > +.layout.grid.gap-14dp > * { > > + padding: 14em 0 0 14em; > > +} > > +.layout.grid.gap-15dp { > > + margin: -15em 0 15em -15em; > > +} > > +.layout.grid.gap-15dp > * { > > + padding: 15em 0 0 15em; > > +} > > +.layout.grid.gap-16dp { > > + margin: -16em 0 16em -16em; > > +} > > +.layout.grid.gap-16dp > * { > > + padding: 16em 0 0 16em; > > +} > > +.layout.grid.gap-17dp { > > + margin: -17em 0 17em -17em; > > +} > > +.layout.grid.gap-17dp > * { > > + padding: 17em 0 0 17em; > > +} > > +.layout.grid.gap-18dp { > > + margin: -18em 0 18em -18em; > > +} > > +.layout.grid.gap-18dp > * { > > + padding: 18em 0 0 18em; > > +} > > +.layout.grid.gap-19dp { > > + margin: -19em 0 19em -19em; > > +} > > +.layout.grid.gap-19dp > * { > > + padding: 19em 0 0 19em; > > +} > > +.layout.grid.gap-20dp { > > + margin: -20em 0 20em -20em; > > +} > > +.layout.grid.gap-20dp > * { > > + padding: 20em 0 0 20em; > > +} > > + > > .jewel.list { > > align-items: stretch; > > align-content: flex-start; > > @@ -209,6 +334,10 @@ j|List { > > IBeadView: ClassReference("org.apache.royale.jewel.beads.views. > RadioButtonView"); > > } > > } > > +.jewel.slider input::-ms-tooltip { > > + display: none; > > +} > > + > > j|Slider { > > IBeadModel: ClassReference("org.apache.royale.jewel.beads.models. > SliderRangeModel"); > > IBeadView: ClassReference("org.apache.royale.jewel.beads.views. > SliderView"); > > diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml > b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml > > index 67ca10b..ffc7333 100644 > > --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml > > +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml > > @@ -27,6 +27,7 @@ > > <component id="HGroup" class="org.apache.royale.jewel.HGroup"/> > > <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="Button" class="org.apache.royale.jewel.Button"/> > > <component id="Label" class="org.apache.royale.jewel.Label"/> > > @@ -55,6 +56,7 @@ > > <component id="HorizontalLayout" class="org.apache.royale. > jewel.beads.layouts.HorizontalLayout"/> > > <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="HorizontalLayoutSpaceBetween" > class="org.apache.royale.jewel.beads.layouts. > HorizontalLayoutSpaceBetween"/> > > > > diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as > b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as > > index 152d593..9c7ffef 100644 > > --- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as > > +++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as > > @@ -62,6 +62,7 @@ package > > } > > > > import org.apache.royale.jewel.beads.layouts.BasicLayout; > BasicLayout; > > + import org.apache.royale.jewel.beads.layouts.GridLayout; > GridLayout; > > import org.apache.royale.jewel.beads.layouts.TileLayout; > TileLayout; > > import org.apache.royale.jewel.beads.layouts.SimpleHorizontalLayout; > SimpleHorizontalLayout; > > import org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout; > SimpleVerticalLayout; > > 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 9fffdf2..be4b16f 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 > > @@ -19,8 +19,6 @@ > > package org.apache.royale.jewel > > { > > import org.apache.royale.jewel.Group; > > - import org.apache.royale.utils.ClassSelectorList; > > - import org.apache.royale.core.layout.ILayoutStyleProperties; > > import org.apache.royale.core.IBeadLayout; > > > > /** > > diff --git > > a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as > b/frameworks/projects/Jewel/src/main/royale/org/apache/ > royale/jewel/Container.as > > index 3eed971..c2b3831 100644 > > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/ > royale/jewel/Container.as > > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/ > royale/jewel/Container.as > > @@ -81,7 +81,7 @@ package org.apache.royale.jewel > > { > > COMPILE::JS > > { > > - typeNames = 'Container'; > > + typeNames = ''; > > } > > super(); > > } > > 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/Grid.as > > similarity index 62% > > copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/ > jewel/Card.as > > copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/ > jewel/Grid.as > > index 9fffdf2..a43a936 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/Grid.as > > @@ -19,19 +19,20 @@ > > package org.apache.royale.jewel > > { > > import org.apache.royale.jewel.Group; > > - import org.apache.royale.utils.ClassSelectorList; > > - import org.apache.royale.core.layout.ILayoutStyleProperties; > > import org.apache.royale.core.IBeadLayout; > > + import org.apache.royale.jewel.beads.layouts.GridLayout; > > > > /** > > - * The Card class is a container that surronds other components. > > + * The Grid class is a container that uses Grid Layout. > > + * Grid Layout need other inmediate children to work as cells > > + * to host cell content. > > * > > * @langversion 3.0 > > * @playerversion Flash 10.2 > > * @playerversion AIR 2.6 > > * @productversion Royale 0.9.3 > > */ > > - public class Card extends Group > > + public class Grid extends Group > > { > > /** > > * constructor. > > @@ -41,44 +42,45 @@ package org.apache.royale.jewel > > * @playerversion AIR 2.6 > > * @productversion Royale 0.9.3 > > */ > > - public function Card() > > + public function Grid() > > { > > super(); > > > > - typeNames = "jewel card"; > > + typeNames = "jewel"; > > + > > + layout = new GridLayout(); > > + addBead(layout); > > } > > > > - protected var _shadow:Number = 0; > > + protected var layout:GridLayout; > > + > > + protected var _gap: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 > > + * 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 shadow():Number > > + public function get gap():Number > > { > > - return _shadow; > > + return _gap; > > } > > > > - public function set shadow(value:Number):void > > + public function set gap(value:Number):void > > { > > - if (_shadow != value) > > + if (_gap != value) > > { > > COMPILE::JS > > { > > - if (value == 2 || value == 3 || value == 4 || value > == 6 || value == 8 || value == 16) > > + if (value > 0 && value < 20) > > { > > - var classVal:String = "shadow-" + _shadow + > "dp"; > > - classSelectorList.remove(classVal); > > - > > - classVal = "shadow-" + value + "dp"; > > - classSelectorList.add( > classVal); > > - > > - _shadow = value; > > - } > > + layout.gap = value; > > + } else > > + throw new Error("Grid gap > needs to be between 0 and 20"); > > } > > } > > } > > 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 > > new file mode 100644 > > index 0000000..c913d52 > > --- /dev/null > > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/ > royale/jewel/beads/layouts/GridLayout.as > > @@ -0,0 +1,173 @@ > > +/////////////////////////////////////////////////////////// > ///////////////////// > > +// > > +// 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; > > + import org.apache.royale.utils.StringUtil; > > + import org.apache.royale.core.IParentIUIBase; > > + > > + COMPILE::JS { > > + import org.apache.royale.core.WrappedHTMLElement; > > + import org.apache.royale.core.UIBase; > > + } > > + > > + /** > > + * The GridLayout class sets its childrens in a grid with cells > filling all > > + * the available space. The cells can be separated by gap. > > + * > > + * @langversion 3.0 > > + * @playerversion Flash 10.2 > > + * @playerversion AIR 2.6 > > + * @productversion Royale 0.9.3 > > + */ > > + public class GridLayout extends LayoutBase implements IBeadLayout > > + { > > + /** > > + * Constructor. > > + * > > + * @langversion 3.0 > > + * @playerversion Flash 10.2 > > + * @playerversion AIR 2.6 > > + * @productversion Royale 0.9.3 > > + */ > > + public function GridLayout() > > + { > > + super(); > > + } > > + > > + COMPILE::JS > > + private var hostComponent:UIBase; > > + > > + /** > > + * @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 > > + { > > + hostComponent = layoutView as UIBase; > > + hostComponent.className = > hostComponent.className ? hostComponent.className + " layout grid" : > "layout grid"; > > + > > + setGap(_gap); > > + } > > + } > > + > > + 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); > > + else > > + _gap = value; > > + } > > + } > > + } > > + > > + COMPILE::JS > > + public function setGap(value:Number):void > > + {//if(hostComponent.className.indexOf("gap") == -1 && > > + // if(gap) > > + // hostComponent.className += " gap-1dp"; > > + // else > > + // hostComponent.className = > StringUtil.removeWord(hostComponent.className, " gap-1dp"); > > + hostComponent.positioner.classList.remove("gap-" > + _gap + "dp"); > > + hostComponent.positioner.classList.add("gap-" + > value + "dp"); > > + _gap = value; > > + } > > + > > + /** > > + * @copy org.apache.royale.core.IBeadLayout#layout > > + * @royaleignorecoercion org.apache.royale.core.UIBase > > + */ > > + override public function layout():Boolean > > + { > > + COMPILE::SWF > > + { > > + // SWF TODO > > + return true; > > + } > > + > > + COMPILE::JS > > + { > > + /** > > + * This Layout uses the following CSS > rules > > + * no code needed in JS for layout > > + * > > + * .layout { > > + * display: flex; > > + * } > > + * > > + * .layout.grid { > > + * flex-wrap: wrap; > > + * } > > + * > > + * .layout.grid > * { > > + * flex: 1; > > + * } > > + * > > + * .layout.grid.gap-1dp { > > + * margin: -1em 0 1em -1em; > > + * } > > + * > > + * .layout.grid.gap-1dp > * { > > + * padding: 1em 0 0 1em; > > + * } > > + */ > > + > > + return true; > > + } > > + } > > + } > > +} > > diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass > b/frameworks/projects/Jewel/src/main/sass/_global.sass > > index 7267d63..f4792c9 100644 > > --- a/frameworks/projects/Jewel/src/main/sass/_global.sass > > +++ b/frameworks/projects/Jewel/src/main/sass/_global.sass > > @@ -20,57 +20,10 @@ > > @namespace j "library://ns.apache.org/royale/jewel" > > @namespace "http://www.w3.org/1999/xhtml"; > > > > -$global-gap: 10px !default > > -$phone-max-width: 480px !default > > -$tablet-max-width: 840px !default > > -$desktop-columns: 12 !default > > -$tablet-columns: 8 !default > > -$phone-columns: 4 !default > > - > > -@media (max-width: $phone-max-width - 1) > > - > > -@media (max-width: $tablet-max-width - 1) > > - > > -j|Application *, .royale *, .royale *:before, .royale *:after > > +//j|Application *, .royale *, .royale *:before, .royale *:after > > +* , :after, :before > > box-sizing: border-box > > > > -.layout > > - display: flex > > - //overflow-y: auto > > - //overflow-x: hidden > > - //position: relative > > - //-webkit-overflow-scrolling: touch > > - > > -.layout.absolute > > - position: relative > > - //justify-content: flex-start // align main axis (default) > > - > * > > - position: absolute > > - > > -.layout.horizontal > > - flex-flow: row nowrap > > - //justify-content: flex-start // align main axis (default) > > - align-items: flex-start > > - //> * > > - // flex: 1 0 auto > > - > > -.layout.vertical > > - flex-flow: column nowrap > > - //justify-content: flex-start // align main axis (default) > > - align-items: flex-start > > - //> * > > - // flex: 1 0 auto > > - > > -.layout.tile > > - flex-flow: row wrap > > - //justify-content: flex-start // align main axis (default) > > - //align-items: flex-start > > - //> * > > - // flex: 1 0 auto > > - > > -.layout.horizontal.space > > - justify-content: space-between > > - > > // Firefox > > // remove dotted outline > > ::-moz-focus-inner, ::-moz-focus-outer > > @@ -78,7 +31,7 @@ j|Application *, .royale *, .royale *:before, .royale > *:after > > > > 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") > > @@ -94,7 +47,11 @@ j|Container > > IBeadLayout: ClassReference("org.apache. > royale.jewel.beads.layouts.BasicLayout") > > IViewport: ClassReference("org.apache.royale.core.supportClasses. > Viewport") > > IViewportModel: ClassReference("org.apache. > royale.core.beads.models.ViewportModel") > > - align-items: flex-start > > + //align-items: flex-start > > + > > + > > +//j|Grid > > +// IBeadLayout: ClassReference("org.apache. > royale.jewel.beads.layouts.GridLayout") > > > > @media -royale-swf > > j|View > > diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass > b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass > > new file mode 100644 > > index 0000000..d12a5da > > --- /dev/null > > +++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass > > @@ -0,0 +1,59 @@ > > +/////////////////////////////////////////////////////////// > ///////////////////// > > +// > > +// 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. > > +// > > +/////////////////////////////////////////////////////////// > ///////////////////// > > + > > +.layout > > + display: flex > > + > > +/* Absolute */ > > +.layout.absolute > > + position: relative > > + > * > > + position: absolute > > + > > +/* Horizontal */ > > +.layout.horizontal > > + flex-flow: row nowrap > > + align-items: flex-start > > + > > +//.layout.horizontal.gap > > +// justify-content: space-between > > + > > +/* Vertical */ > > +.layout.vertical > > + flex-flow: column nowrap > > + align-items: flex-start > > + > > +//.layout.vertical.gap > > +// justify-content: space-between > > + > > +.layout.horizontal.space > > + justify-content: space-between > > + > > +/* Grid */ > > +$gut: 0em > > +.layout.grid > > + flex-wrap: wrap > > + > * > > + 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 > > diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass > b/frameworks/projects/Jewel/src/main/sass/defaults.sass > > index 1a9e282..ffa6acd 100644 > > --- a/frameworks/projects/Jewel/src/main/sass/defaults.sass > > +++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass > > @@ -29,6 +29,7 @@ > > @import "components/dropdownlist" > > @import "components/itemRenderer" > > @import "components/label" > > +@import "components/layout" > > @import "components/list" > > @import "components/radiobutton" > > @import "components/slider" > > > > -- > > To stop receiving notification emails like this one, please contact > > [email protected]. > > -- Carlos Rovira http://about.me/carlosrovira
