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].
