royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: - Removed HorizontalLayoutSpaceBetween obsolete layout - improved Jewel layouts and components with various align horizontal and vertical settings - Improved AlertView with new layouts improvements removing ad hoc code by reusable layout code
Date Tue, 31 Jul 2018 21:40:44 GMT
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 57d4208  - Removed HorizontalLayoutSpaceBetween obsolete layout - improved Jewel
layouts and components with various align horizontal and vertical settings - Improved AlertView
with new layouts improvements removing ad hoc code by reusable layout code
57d4208 is described below

commit 57d4208402363f22ba3d7318d6b05acc4355d983
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Tue Jul 31 23:40:38 2018 +0200

    - Removed HorizontalLayoutSpaceBetween obsolete layout
    - improved Jewel layouts and components with various align horizontal and vertical settings
    - Improved AlertView with new layouts improvements removing ad hoc code by reusable layout
code
---
 .../src/main/royale/ButtonPlayGround.mxml          |   2 +-
 .../src/main/royale/GridPlayGround.mxml            |   8 +-
 .../src/main/royale/TablePlayGround.mxml           |  25 +++-
 .../src/main/royale/TextInputPlayGround.mxml       |   2 +-
 .../projects/Jewel/src/main/resources/defaults.css |  43 ++++--
 .../Jewel/src/main/resources/jewel-manifest.xml    |   2 -
 .../projects/Jewel/src/main/royale/JewelClasses.as |   2 -
 .../main/royale/org/apache/royale/jewel/Grid.as    |  40 +----
 .../royale/org/apache/royale/jewel/GridCell.as     |   9 +-
 .../main/royale/org/apache/royale/jewel/Group.as   |  67 +++++++++
 .../main/royale/org/apache/royale/jewel/HGroup.as  |   9 +-
 .../royale/org/apache/royale/jewel/TableCell.as    |  54 +++++++
 .../main/royale/org/apache/royale/jewel/VGroup.as  |   9 +-
 .../royale/jewel/beads/layouts/GridCellLayout.as   |  13 +-
 .../royale/jewel/beads/layouts/GridLayout.as       |  51 +------
 .../beads/layouts/HorizontalLayoutSpaceBetween.as  | 162 ---------------------
 .../jewel/beads/layouts/SimpleHorizontalLayout.as  |  12 +-
 .../jewel/beads/layouts/SimpleVerticalLayout.as    |  12 +-
 .../royale/jewel/beads/layouts/StyledLayoutBase.as | 162 +++++++++++++++++++++
 .../apache/royale/jewel/beads/views/AlertView.as   |  25 +++-
 .../Jewel/src/main/sass/components/_layout.sass    |  39 +++--
 .../JewelTheme/src/main/resources/defaults.css     |  17 +--
 .../src/main/sass/components-primary/_alert.sass   |  10 +-
 .../src/main/sass/components-primary/_table.sass   |   9 ++
 24 files changed, 438 insertions(+), 346 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index afcb0ca..e99c23e 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
         <js:ContainerDataBinding/>
     </j:beads>
 
-	<j:Grid gap="true" itemsAlign="itemsSameHeight">
+	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="1"
 					phoneNumerator="1" phoneDenominator="1">
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
index b38a8b5..7f51f78 100644
--- a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -528,7 +528,7 @@ limitations under the License.
 	
 	<html:H4 text=" itemsTop"/>
 
-	<j:Grid className="wrapper" gap="true" itemsAlign="itemsTop">
+	<j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsTop">
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="3"
 					phoneNumerator="1" phoneDenominator="3">
@@ -548,7 +548,7 @@ limitations under the License.
 
 	<html:H4 text=" itemsBottom"/>
 
-	<j:Grid className="wrapper" gap="true" itemsAlign="itemsBottom">
+	<j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsBottom">
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="3"
 					phoneNumerator="1" phoneDenominator="3">
@@ -568,7 +568,7 @@ limitations under the License.
 	
 	<html:H4 text=" itemsCentered"/>
 
-	<j:Grid className="wrapper" gap="true" itemsAlign="itemsCentered">
+	<j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsCentered">
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="3"
 					phoneNumerator="1" phoneDenominator="3">
@@ -588,7 +588,7 @@ limitations under the License.
 	
 	<html:H4 text=" itemsSameHeight"/>
 
-	<j:Grid className="wrapper" gap="true" itemsAlign="itemsSameHeight" height="200">
+	<j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
 		<j:GridCell desktopNumerator="1" desktopDenominator="3"
 					tabletNumerator="1" tabletDenominator="3"
 					phoneNumerator="1" phoneDenominator="3">
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index 181d994..fe067fe 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -55,8 +55,8 @@ limitations under the License.
 					<j:TableCell>
 						<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
 					</j:TableCell>
-					<j:TableCell>
-						<j:Label text="Some text" />
+					<j:TableCell expandRows="2">
+						<j:Label text="Some text in two rows" multiline="true"/>
 					</j:TableCell>
 					<j:TableCell>
 						<j:Label text="Some centered text">
@@ -77,9 +77,7 @@ limitations under the License.
 					<j:TableCell>
 						<js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
 					</j:TableCell>
-					<j:TableCell>
-						<j:Label text="More text" />
-					</j:TableCell>
+					
 					<j:TableCell>
 						<j:Label text="More centered text">
 							<j:beads>
@@ -148,6 +146,23 @@ limitations under the License.
 					</j:TableCell>
 				</j:TableRow>
 			</j:TBody>
+			<j:TFoot>
+				<j:TableRow>
+					<j:TableCell expandColumns="4">
+						<j:HGroup gap="3" itemsHorizontalAlign="itemsRight">
+							<j:IconTextInput rightPosition="true">
+								<j:beads>
+									<j:TextPrompt prompt="Search..."/>						
+								</j:beads>
+								<j:icon>
+									<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+								</j:icon>
+							</j:IconTextInput>
+							<j:Button text="SEARCH" emphasis="{Button.PRIMARY}"/>
+						</j:HGroup>
+					</j:TableCell>
+				</j:TableRow>
+			</j:TFoot>
 		</j:SimpleTable>
 	</j:Card>
 </j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 31cbadc..93c4a0d 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.
         <js:ContainerDataBinding/>
     </j:beads>
 
-	<j:Grid gap="true" itemsAlign="itemsSameHeight">
+	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
 		<j:GridCell wideScreenNumerator="1" wideScreenDenominator="2"
 					desktopNumerator="1" desktopDenominator="1"
 					tabletNumerator="1" tabletDenominator="1"
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 64c9fb3..50358c6 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -441,6 +441,33 @@ j|Label {
 .layout {
   display: flex;
 }
+.layout.itemsSameHeight > * > * {
+  min-height: 100%;
+}
+.layout.itemsCentered {
+  align-items: center;
+}
+.layout.itemsTop {
+  align-items: flex-start;
+}
+.layout.itemsBottom {
+  align-items: flex-end;
+}
+.layout.itemsLeft {
+  justify-content: flex-start;
+}
+.layout.itemsCenter {
+  justify-content: center;
+}
+.layout.itemsRight {
+  justify-content: flex-end;
+}
+.layout.itemsSpaceBetween {
+  justify-content: space-between;
+}
+.layout.itemsSpaceAround {
+  justify-content: space-around;
+}
 
 /* Horizontal */
 .layout.horizontal {
@@ -610,10 +637,6 @@ j|Label {
   align-items: flex-start;
 }
 
-.layout.horizontal.space {
-  justify-content: space-between;
-}
-
 /* Grid */
 .layout.grid {
   flex-flow: row wrap;
@@ -2516,18 +2539,6 @@ j|Label {
     width: calc(100% - 10px);
   }
 }
-.layout.grid.itemsSameHeight > * > * {
-  min-height: 100%;
-}
-.layout.grid.itemsCentered {
-  align-items: center;
-}
-.layout.grid.itemsTop {
-  align-items: flex-start;
-}
-.layout.grid.itemsBottom {
-  align-items: flex-end;
-}
 
 @media (max-width: 767px) {
   .visible-phone {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index f72cd5b..194d12d 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -107,8 +107,6 @@
     <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"/>
-    
     <component id="StringItemRenderer" class="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
     <component id="DateItemRenderer" class="org.apache.royale.jewel.itemRenderers.DateItemRenderer"/>
     <component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 5711595..86614b6 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -81,8 +81,6 @@ package
         import org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout; SimpleVerticalLayout;
         import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
         import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
-        import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween; HorizontalLayoutSpaceBetween;
-        
 
         // import org.apache.royale.html.beads.TableCellView; TableCellView;
         // import org.apache.royale.html.beads.layouts.SimpleTableLayout; SimpleTableLayout;
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 dfa50a1..6b3913a 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
@@ -51,7 +51,14 @@ package org.apache.royale.jewel
 			addBead(layout);
 		}
 
-		protected var layout:GridLayout;
+		public function get layout():GridLayout
+        {
+            return _layout as GridLayout;
+        }
+		public function set layout(value:GridLayout):void
+        {
+            _layout = value;
+        }
 
         /**
 		 *  Assigns variable gap to grid from 1 to 20
@@ -82,37 +89,6 @@ package org.apache.royale.jewel
 			layout.gap = value;
         }
 
-		/**
-		 *  Distribute all items horizontaly
-		 *  Possible values are:
-		 *  - itemsSameHeight
-		 *  - itemsCentered
-		 *  - itemsTop
-		 *  - itemsBottom
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-        public function get itemsAlign():String
-        {
-            return layout.itemsAlign;
-        }
-
-        public function set itemsAlign(value:String):void
-        {
-			typeNames = StringUtil.removeWord(typeNames, " " + layout.itemsAlign);
-			layout.itemsAlign = value;
-			typeNames += " " + layout.itemsAlign;
-
-			COMPILE::JS
-            {
-				if (parent)
-                	setClassName(computeFinalClassNames()); 
-			}
-        }
-
         // public function get gap():Number
         // {
         //     return layout.gap;
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
index 1234a11..ede6709 100644
--- 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
@@ -50,7 +50,14 @@ package org.apache.royale.jewel
 			addBead(layout);
 		}
 
-		protected var layout:GridCellLayout;
+		public function get layout():GridCellLayout
+        {
+            return _layout as GridCellLayout;
+        }
+		public function set layout(value:GridCellLayout):void
+        {
+            _layout = value;
+        }
 
 		/**
 		 *  The X Number for "widescreen-col-X-Y" effect selector.
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 278ea2c..4442227 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
@@ -21,6 +21,8 @@ package org.apache.royale.jewel
 	import org.apache.royale.html.Group;
     import org.apache.royale.utils.ClassSelectorList;
     import org.apache.royale.utils.IClassSelectorListSupport;
+    import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
+    import org.apache.royale.utils.StringUtil;
 
     /**
      *  The Group class provides a light-weight container for visual elements. By default
@@ -140,5 +142,70 @@ package org.apache.royale.jewel
             return false;
             }
         }
+
+        protected var _layout:StyledLayoutBase;
+        
+        /**
+		 *  Distribute all items horizontally
+		 *  Possible values are:
+		 *  - itemsLeft
+		 *  - itemsCenter
+		 *  - itemsRight
+		 *  - itemsSpaceBetween
+		 *  - itemsSpaceAround
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get itemsHorizontalAlign():String
+        {
+            return _layout.itemsHorizontalAlign;
+        }
+
+        public function set itemsHorizontalAlign(value:String):void
+        {
+			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsHorizontalAlign);
+			_layout.itemsHorizontalAlign = value;
+			typeNames += " " + _layout.itemsHorizontalAlign;
+
+			COMPILE::JS
+            {
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+        }
+
+		/**
+		 *  Distribute all items vertically
+		 *  Possible values are:
+		 *  - itemsSameHeight
+		 *  - itemsCentered
+		 *  - itemsTop
+		 *  - itemsBottom
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get itemsVerticalAlign():String
+        {
+            return _layout.itemsVerticalAlign;
+        }
+
+        public function set itemsVerticalAlign(value:String):void
+        {
+			typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsVerticalAlign);
+			_layout.itemsVerticalAlign = value;
+			typeNames += " " + _layout.itemsVerticalAlign;
+
+			COMPILE::JS
+            {
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+        }
 	}
 }
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 f14cd2e..9dba0b2 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
@@ -51,7 +51,14 @@ package org.apache.royale.jewel
 			addBead(layout);
 		}
 
-        protected var layout:HorizontalLayout;
+        public function get layout():HorizontalLayout
+        {
+            return _layout as HorizontalLayout;
+        }
+		public function set layout(value:HorizontalLayout):void
+        {
+            _layout = value;
+        }
 
         // public function get gap():Boolean
         // {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
index 8afa62a..7aedd3c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TableCell.as
@@ -50,7 +50,61 @@ package org.apache.royale.jewel
 			
 			typeNames = "jewel tablecell";
 		}
+
+		private var _expandColumns:Number = 1;
+        /**
+         *  The columns this cell will expand to occupy
+		 *  notice that you must not define the ocuppied cells
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get expandColumns():Number
+		{
+            return _expandColumns;
+		}
+		public function set expandColumns(value:Number):void
+		{
+			if(_expandColumns != value)
+			{
+            	_expandColumns = value;
+
+				COMPILE::JS
+				{
+					element.setAttribute('colspan', _expandColumns);
+				}
+			}
+		}
 		
+		private var _expandRows:Number = 1;
+        /**
+         *  The rows this cell will expand to occupy
+		 *  notice that you must not define the ocuppied cells
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get expandRows():Number
+		{
+            return _expandRows;
+		}
+		public function set expandRows(value:Number):void
+		{
+			if(_expandRows != value)
+			{
+            	_expandRows = value;
+
+				COMPILE::JS
+				{
+					element.setAttribute('rowspan', _expandRows);
+				}
+			}
+		}
+
 		/**
 		 * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
 		 */
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 7ee63b7..07b2f94 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
@@ -51,7 +51,14 @@ package org.apache.royale.jewel
 			addBead(layout);
 		}
 
-        protected var layout:VerticalLayout;
+        public function get layout():VerticalLayout
+        {
+            return _layout as VerticalLayout;
+        }
+		public function set layout(value:VerticalLayout):void
+        {
+            _layout = value;
+        }
 
         // public function get gap():Boolean
         // {
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
index 3e9cfe2..755f4c0 100644
--- 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
@@ -18,7 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.beads.layouts
 {
-	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
 	import org.apache.royale.core.IBeadLayout;
 	import org.apache.royale.core.ILayoutChild;
 	import org.apache.royale.core.ILayoutView;
@@ -37,7 +37,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.3
      */
-	public class GridCellLayout extends LayoutBase implements IBeadLayout
+	public class GridCellLayout extends StyledLayoutBase implements IBeadLayout
 	{
 		public static const MAX_COLUMNS:Number = 12;
 		public static const PHONE:String = "phone";
@@ -63,12 +63,6 @@ package org.apache.royale.jewel.beads.layouts
 		 */
 		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
 		 *  
@@ -83,9 +77,6 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				hostComponent = host as UIBase;
-				hostClassList = hostComponent.positioner.classList;
-				
 				setFractionForScreen(DESKTOP, _wideScreenNumerator, _wideScreenDenominator);
 				setFractionForScreen(WIDESCREEN, _desktopNumerator, _desktopDenominator);
 				setFractionForScreen(TABLET, _tabletNumerator, _tabletDenominator);
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 64580e5..07708ab 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
@@ -18,7 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.beads.layouts
 {
-	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
 	import org.apache.royale.core.IBeadLayout;
 	import org.apache.royale.core.IStrand;
 	import org.apache.royale.core.IParentIUIBase;
@@ -37,7 +37,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.3
      */
-	public class GridLayout extends LayoutBase implements IBeadLayout
+	public class GridLayout extends StyledLayoutBase implements IBeadLayout
 	{
         /**
          *  Constructor.
@@ -57,12 +57,6 @@ package org.apache.royale.jewel.beads.layouts
 		 */
 		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
 		 *  
@@ -79,8 +73,6 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				hostComponent = host as UIBase;
-				hostClassList = hostComponent.positioner.classList;
 				if (hostClassList.contains("layout"))
 					hostClassList.remove("layout");
 				hostClassList.add("layout");
@@ -131,45 +123,6 @@ package org.apache.royale.jewel.beads.layouts
 			hostClassList.toggle("gap", value);
 		}
 
-		private var _itemsAlign:String;
-		/**
-		 *  Distribute all items horizontaly
-		 *  Possible values are:
-		 *  - itemsSameHeight
-		 *  - itemsCentered
-		 *  - itemsTop
-		 *  - itemsBottom
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-        public function get itemsAlign():String
-        {
-            return _itemsAlign;
-        }
-
-        public function set itemsAlign(value:String):void
-        {
-			if (_itemsAlign != value)
-            {
-                COMPILE::JS
-                {
-					if(hostComponent)
-					{
-						if (hostClassList.contains(_itemsAlign))
-							hostClassList.remove(_itemsAlign);
-				}
-						_itemsAlign = value;
-				COMPILE::JS
-                {
-						hostClassList.add(_itemsAlign);
-					}
-				}
-			}
-        }
-
 		// protected var _gap:Number = 0;
 		// /**
 		//  *  Assigns variable gap to grid from 1 to 20
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
deleted file mode 100644
index cc8525e..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
+++ /dev/null
@@ -1,162 +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.beads.layouts
-{
-	import org.apache.royale.core.IBeadLayout;
-    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
-	import org.apache.royale.core.ILayoutChild;
-	import org.apache.royale.core.ILayoutView;
-	import org.apache.royale.core.IParentIUIBase;
-	import org.apache.royale.core.IUIBase;
-    import org.apache.royale.core.layout.EdgeData;
-	import org.apache.royale.core.ValuesManager;
-	import org.apache.royale.core.LayoutBase;
-
-	COMPILE::JS {
-		import org.apache.royale.core.UIBase;
-	}
-
-    /**
-     *  The HorizontalLayout class is a simple layout
-     *  bead.  It takes the set of children and lays them out
-     *  horizontally in one row, separating them according to
-     *  CSS layout rules for margin and vertical-align styles.
-     *
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion Royale 0.9.3
-     */
-	public class HorizontalLayoutSpaceBetween extends LayoutBase implements IBeadLayout
-	{
-        /**
-         *  Constructor.
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.3
-         */
-		public function HorizontalLayoutSpaceBetween()
-		{
-			super();
-		}
-
-        /**
-         * @copy org.apache.royale.core.IBeadLayout#layout
-         * @royaleignorecoercion org.apache.royale.core.ILayoutHost
-         */
-		override public function layout():Boolean
-		{
-            COMPILE::SWF
-            {
-				var contentView:ILayoutView = layoutView;
-
-				var n:Number = contentView.numElements;
-				if (n == 0) return false;
-
-				var maxWidth:Number = 0;
-				var maxHeight:Number = 0;
-				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
-				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
-				var hostWidth:Number = host.width;
-				var hostHeight:Number = host.height;
-
-				var ilc:ILayoutChild;
-				var data:Object;
-				var canAdjust:Boolean = false;
-
-				var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
-				var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
-				
-				// adjust the host's usable size by the metrics. If hostSizedToContent, then the
-				// resulting adjusted value may be less than zero.
-				hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
-				hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
-
-				var xpos:Number = borderMetrics.left + paddingMetrics.left;
-				var ypos:Number = borderMetrics.top + paddingMetrics.top;
-
-				// First pass determines the data about the child.
-				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, hostWidth, hostHeight);
-
-					ilc = child as ILayoutChild;
-
-					xpos += margins.left;
-
-					var childYpos:Number = ypos + margins.top; // default y position
-
-					var childHeight:Number = child.height;
-					if (ilc != null && !isNaN(ilc.percentHeight)) {
-						childHeight = hostHeight * ilc.percentHeight/100.0;
-						ilc.setHeight(childHeight);
-					}
-					var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align");
-					if (valign == "middle")
-					{
-						childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
-					}
-	
-					if (ilc) {
-						ilc.setX(xpos);
-						ilc.setY(childYpos);
-
-						if (!isNaN(ilc.percentWidth)) {
-							var newWidth:Number = hostWidth * ilc.percentWidth / 100;
-							ilc.setWidth(newWidth);
-						}
-
-					} else {
-						child.x = xpos;
-						child.y = childYpos;
-					}
-
-					xpos += child.width + margins.right;
-				}
-
-				return true;
-
-            }
-            COMPILE::JS
-            {
-				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
-				var c:UIBase = (contentView as UIBase);
-				c.element.classList.add("layout");
-				c.element.classList.add("horizontal");
-				c.element.classList.add("space");
-
-				/** 
-				 *  This Layout uses the following CSS rules
-				 * 
-				 *  .layout.horizontal.space {
-				 *		display: flex;
-				 * 		justify-content: space-between;
-				 *	}
-				 */
-
-                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 e0130ce..58a06e4 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
@@ -18,7 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.beads.layouts
 {
-	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
 	import org.apache.royale.core.IBeadLayout;
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
 	import org.apache.royale.core.ILayoutChild;
@@ -44,7 +44,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.3
      */
-	public class SimpleHorizontalLayout extends LayoutBase implements IBeadLayout
+	public class SimpleHorizontalLayout extends StyledLayoutBase implements IBeadLayout
 	{
         /**
          *  Constructor.
@@ -64,12 +64,6 @@ package org.apache.royale.jewel.beads.layouts
 		 */
 		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
 		 *  
@@ -86,8 +80,6 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				hostComponent = host as UIBase;
-				hostClassList = hostComponent.positioner.classList;
 				if (hostClassList.contains("layout"))
 					hostClassList.remove("layout");
 				hostClassList.add("layout");
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 9786f20..ea3eba7 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
@@ -18,7 +18,7 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel.beads.layouts
 {
-	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
 	import org.apache.royale.core.IBeadLayout;
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
 	import org.apache.royale.core.ILayoutChild;
@@ -44,7 +44,7 @@ package org.apache.royale.jewel.beads.layouts
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class SimpleVerticalLayout extends LayoutBase implements IBeadLayout
+	public class SimpleVerticalLayout extends StyledLayoutBase implements IBeadLayout
 	{
 		/**
 		 *  Constructor.
@@ -64,12 +64,6 @@ package org.apache.royale.jewel.beads.layouts
 		 */
 		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
 		 *  
@@ -86,8 +80,6 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				hostComponent = host as UIBase;
-				hostClassList = hostComponent.positioner.classList;
 				if (hostClassList.contains("layout"))
 					hostClassList.remove("layout");
 				hostClassList.add("layout");
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
new file mode 100644
index 0000000..fa07672
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -0,0 +1,162 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.IStrand;
+	import org.apache.royale.core.UIBase;
+
+
+    /**
+     *  The StyledLayoutBase class is an extension of LayoutBase
+	 *  to define various common layout features for the rest of
+	 *  child classes
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	public class StyledLayoutBase extends LayoutBase implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function StyledLayoutBase()
+		{
+			super();
+		}
+
+		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+
+		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
+		{
+			super.strand = value;
+
+			COMPILE::JS
+			{
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+			}
+		}
+
+		private var _itemsHorizontalAlign:String;
+		/**
+		 *  Distribute all items horizontally
+		 *  Possible values are:
+		 *  - itemsLeft
+		 *  - itemsCenter
+		 *  - itemsRight
+		 *  - itemsSpaceBetween
+		 *  - itemsSpaceAround
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get itemsHorizontalAlign():String
+        {
+            return _itemsHorizontalAlign;
+        }
+
+        public function set itemsHorizontalAlign(value:String):void
+        {
+			if (_itemsHorizontalAlign != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+					{
+						if (hostClassList.contains(_itemsHorizontalAlign))
+							hostClassList.remove(_itemsHorizontalAlign);
+				}
+						_itemsHorizontalAlign = value;
+				COMPILE::JS
+                {
+						hostClassList.add(_itemsHorizontalAlign);
+					}
+				}
+			}
+        }
+
+        private var _itemsVerticalAlign:String;
+		/**
+		 *  Distribute all items vertically
+		 *  Possible values are:
+		 *  - itemsSameHeight
+		 *  - itemsCentered
+		 *  - itemsTop
+		 *  - itemsBottom
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get itemsVerticalAlign():String
+        {
+            return _itemsVerticalAlign;
+        }
+
+        public function set itemsVerticalAlign(value:String):void
+        {
+			if (_itemsVerticalAlign != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+					{
+						if (hostClassList.contains(_itemsVerticalAlign))
+							hostClassList.remove(_itemsVerticalAlign);
+				}
+						_itemsVerticalAlign = value;
+				COMPILE::JS
+                {
+						hostClassList.add(_itemsVerticalAlign);
+					}
+				}
+			}
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index 6030560..d7af729 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -24,6 +24,7 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
     import org.apache.royale.core.IParent;
     import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IBeadLayout;
     import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.UIBase;
     import org.apache.royale.core.layout.EdgeData;
@@ -38,9 +39,8 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.jewel.TitleBar;
     import org.apache.royale.jewel.ControlBar;
 	import org.apache.royale.jewel.beads.views.AlertTitleBarView;
-	
-	import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween;
-	
+	import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+
     COMPILE::SWF
 	{
         import org.apache.royale.html.beads.IBackgroundBead;
@@ -127,10 +127,13 @@ package org.apache.royale.jewel.beads.views
 
 			// TitleBar
 			titleBar = new TitleBar();
-			titleBar.addBead(new HorizontalLayoutSpaceBetween());
 			titleBar.addBead(new AlertTitleBarView());
 			titleBar.title = alertModel.title;
 			IParent(_strand).addElement(titleBar);
+
+			// var layout:HorizontalLayout = titleBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+			// layout.itemsHorizontalAlign = "itemsSpaceBetween";
+			// layout.gap = 2;
             
 			// Text
 			content = new Group();
@@ -144,6 +147,10 @@ package org.apache.royale.jewel.beads.views
 			createButtons();
 			IParent(_strand).addElement(controlBar);
 
+			var layout:HorizontalLayout = controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+			layout.itemsHorizontalAlign = "itemsRight";
+			layout.gap = 2;
+
 			COMPILE::SWF
             {
                 refreshSize();
@@ -160,7 +167,11 @@ package org.apache.royale.jewel.beads.views
 			COMPILE::JS
 			{
 				controlBar = new ControlBar();
-				controlBar.addBead(new HorizontalLayoutSpaceBetween());
+				
+				// var controlBarLayout:HorizontalLayout = new HorizontalLayout();
+				// controlBar.addBead(controlBarLayout);
+				// trace(controlBarLayout.hostComponent);
+				// controlBarLayout.itemsHorizontalAlign = "itemsSpaceBetween";
 			}
 
             var flags:uint = alertModel.flags;
@@ -168,6 +179,7 @@ package org.apache.royale.jewel.beads.views
             if( flags & Alert.OK )
             {
                 okButton = new Button();
+				okButton.width = 100;
 				okButton.emphasis = "primary";
                 okButton.text = alertModel.okLabel;
                 okButton.addEventListener("click", handleOK);
@@ -178,6 +190,7 @@ package org.apache.royale.jewel.beads.views
 			if( flags & Alert.CANCEL )
             {
                 cancelButton = new Button();
+				cancelButton.width = 100;
                 cancelButton.text = alertModel.cancelLabel;
                 cancelButton.addEventListener("click", handleCancel);
 
@@ -187,6 +200,7 @@ package org.apache.royale.jewel.beads.views
             if( flags & Alert.YES )
             {
                 yesButton = new Button();
+				yesButton.width = 100;
 				yesButton.emphasis = "primary";
                 yesButton.text = alertModel.yesLabel;
                 yesButton.addEventListener("click", handleYes);
@@ -197,6 +211,7 @@ package org.apache.royale.jewel.beads.views
 			if( flags & Alert.NO )
             {
                 noButton = new Button();
+				noButton.width = 100;
                 noButton.text = alertModel.noLabel;
                 noButton.addEventListener("click", handleNo);
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 1a61df0..1adc22f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -34,6 +34,30 @@ $gap: 0px
 	display: flex
 	//position: relative
 
+	// Vertical Items Align
+	&.itemsSameHeight
+		//align-items: stretch  --> this doen't seems to work as expected
+		> *
+			> *
+				min-height: 100%
+	&.itemsCentered
+		align-items: center
+	&.itemsTop
+		align-items: flex-start
+	&.itemsBottom
+		align-items: flex-end
+
+	// Horizontal Items Align
+	&.itemsLeft
+		justify-content: flex-start
+	&.itemsCenter
+		justify-content: center
+	&.itemsRight
+		justify-content: flex-end
+	&.itemsSpaceBetween
+		justify-content: space-between
+	&.itemsSpaceAround
+		justify-content: space-around
 
 /* Horizontal */
 .layout
@@ -106,9 +130,6 @@ $gap: 0px
 	// 	> *
 	// 		margin: $gap-size 0px 0px $gap-size
 
-.layout.horizontal.space
-	justify-content: space-between
-
 /* Grid */
 $grid-columns: 12 !default
 $gap-size: 10px !default
@@ -140,18 +161,8 @@ $gap-size: 10px !default
 						.#{$size}-col-#{$j}-#{$i}
 							width: calc(#{percentage($j / $i)} - #{$gap-size})
 
-	&.itemsSameHeight
-		//align-items: stretch  --> this doen't seems to work as expected
 
-		> *
-			> *
-				min-height: 100%
-	&.itemsCentered
-		align-items: center
-	&.itemsTop
-		align-items: flex-start
-	&.itemsBottom
-		align-items: flex-end
+	
 
 @each $size in $size-names			
 	@if index($size-names, $size) == 1
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ee0ad3c..cd6166f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -94,7 +94,7 @@ div {
 .jewel.alert .content {
   padding: 20px;
   top: 50px;
-  bottom: 80px;
+  bottom: 84px;
 }
 .jewel.alert .content .jewel.label {
   white-space: normal;
@@ -111,15 +111,7 @@ div {
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 80px;
-  justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
-  margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
-  flex: 0 0 100px;
-  margin-left: 6px;
+  height: 84px;
 }
 .jewel.alert + .backdrop {
   background-color: rgba(0, 0, 0, 0.5);
@@ -552,6 +544,11 @@ j|Card {
   border-top: 1px solid #d9d9d9;
   border-left: 1px solid #d9d9d9;
 }
+.jewel.table tfoot td {
+  border-left: 0px;
+  background: linear-gradient(white, white);
+  box-shadow: inset 0 1px 0 white;
+}
 
 .jewel.textinput {
   font-weight: 400;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
index bf59b0a..ef9e4e1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
@@ -24,7 +24,7 @@ $alert-padding: 20px
 $alert-min-width: 420px
 $alert-min-height: 240px
 $alert-header-height: 50px
-$alert-footer-height: 80px
+$alert-footer-height: 84px
 $alert-border-radius: 3px
 
 $alert-title-font-size: 1.9em
@@ -101,13 +101,5 @@ $alert-modal-opacity: .5
         width: 100%
         height: $alert-footer-height
         
-        justify-content: flex-end
-        
-        > *:first-child
-            margin-left: 0px
-        > *
-            flex: 0 0 100px
-            margin-left: 6px
-        
     + .backdrop
         background-color: rgba(0, 0, 0, $alert-modal-opacity)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
index 06834a6..4c98a08 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -52,6 +52,15 @@ $table-border-radius: $border-radius
     td
         border-top: 1px solid $default-color
         border-left: 1px solid $default-color
+
+    tfoot
+        td
+            border-left: 0px
+            @if $flat
+                background: lighten($default-color, 10%)
+            @else
+                background: linear-gradient(lighten($default-color, 15%), lighten($default-color,
20%))
+                box-shadow: inset 0 1px 0 lighten($default-color, 30%)
         
         // border-bottom: 1px solid darken($light-color, 20%)
 


Mime
View raw message