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: jewel TopAppBar component
Date Wed, 27 Jun 2018 16:04:00 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 444c6e4  jewel TopAppBar component
444c6e4 is described below

commit 444c6e45af8b7429f1b00409227771a75b7113f8
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Wed Jun 27 18:03:55 2018 +0200

    jewel TopAppBar component
---
 .../projects/Jewel/src/main/resources/defaults.css |  73 +++++++++++++++
 .../Jewel/src/main/resources/jewel-manifest.xml    |   4 +
 .../royale/org/apache/royale/jewel/TopAppBar.as    |  88 ++++++++++++++++++
 .../royale/org/apache/royale/jewel/TopAppBarRow.as |  53 +++++++++++
 .../org/apache/royale/jewel/TopAppBarSection.as    |  87 ++++++++++++++++++
 .../org/apache/royale/jewel/TopAppBarTitle.as      |  93 +++++++++++++++++++
 .../projects/Jewel/src/main/sass/_variables.sass   |  24 +++++
 .../Jewel/src/main/sass/components/_layout.sass    |   5 +-
 .../Jewel/src/main/sass/components/_topappbar.sass | 101 +++++++++++++++++++++
 .../projects/Jewel/src/main/sass/defaults.sass     |   2 +
 .../JewelTheme/src/main/resources/defaults.css     |  39 ++++++++
 .../main/sass/components-primary/_topappbar.sass   |  87 ++++++++++++++++++
 .../themes/JewelTheme/src/main/sass/defaults.sass  |   1 +
 13 files changed, 653 insertions(+), 4 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index c8027ab..43ae433 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -241,6 +241,9 @@ j|Label {
 }
 
 /* Absolute */
+.layout.absolute {
+  position: absolute;
+}
 .layout.absolute > * {
   position: absolute;
 }
@@ -2550,4 +2553,74 @@ j|TitleBar {
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView");
 }
 
+.jewel.topappbar {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  z-index: 4;
+}
+
+.jewel.topappbarrow {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 64px;
+}
+
+.jewel.topappbarsection {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+  z-index: 1;
+  justify-content: flex-start;
+  order: -1;
+}
+.jewel.topappbarsection.alignRight {
+  justify-content: flex-end;
+  order: 1;
+}
+.jewel.topappbarsection button {
+  will-change: transform, opacity;
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection
button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus
{
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+.jewel.topappbarsection button[disabled] {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+.jewel.topappbarsection button .icon {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.jewel.topappbartitle {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  white-space: nowrap;
+  overflow: hidden;
+  z-index: 1;
+  line-height: 2rem;
+  letter-spacing: 0.0125em;
+  text-decoration: inherit;
+  text-transform: inherit;
+  text-overflow: ellipsis;
+}
+
 /*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 0eed546..ad8aff7 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -43,6 +43,10 @@
     <component id="List" class="org.apache.royale.jewel.List"/>
     <component id="DropDownList" class="org.apache.royale.jewel.DropDownList"/>
     
+    <component id="TopAppBar" class="org.apache.royale.jewel.TopAppBar"/>
+    <component id="TopAppBarRow" class="org.apache.royale.jewel.TopAppBarRow"/>
+    <component id="TopAppBarSection" class="org.apache.royale.jewel.TopAppBarSection"/>
+    <component id="TopAppBarTitle" class="org.apache.royale.jewel.TopAppBarTitle"/>
     <component id="Card" class="org.apache.royale.jewel.Card"/>
     
     <component id="DropDownListList" class="org.apache.royale.jewel.supportClasses.DropDownListList"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
new file mode 100644
index 0000000..1733315
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The TopAppBar class is a container component for different items like
+	 *  application title, navigation icon, and/or icon buttons.
+	 *  Normaly is located at the top of an application and use to fill all 
+	 *  horizontal availale space. It's responsive as screen size changes
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class TopAppBar extends Group
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function TopAppBar()
+		{
+			super();
+
+            typeNames = "jewel topappbar"
+		}
+
+		protected var _fixed:Boolean;
+        /**
+		 *  A boolean flag to activate "fixed" effect selector.
+		 *  Optional. Makes the header always visible.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get fixed():Boolean
+        {
+            return _fixed;
+        }
+        public function set fixed(value:Boolean):void
+        {
+            if (_fixed != value)
+            {
+                _fixed = value;
+
+                toggleClass("fixed", _fixed);
+            }
+        }
+
+		/**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this, 'header');
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
new file mode 100644
index 0000000..f91dd57
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
@@ -0,0 +1,53 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The TopAppBarRow class is a container component used with TopAppBar
+	 *  It represent a row. TopAppBar supports more than one row
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class TopAppBarRow extends Group
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function TopAppBarRow()
+		{
+			super();
+
+            typeNames = "jewel topappbarrow"
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
new file mode 100644
index 0000000..d895ace
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The TopAppBarSection class is a container component for items in
+	 *  an TopAppBar row.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class TopAppBarSection extends Group
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function TopAppBarSection()
+		{
+			super();
+
+            typeNames = "jewel topappbarsection"
+		}
+
+		protected var _alignRight:Boolean;
+        /**
+		 *  A boolean flag to activate "alignRight" effect selector.
+		 *  It aligns all items inside the section to the right.
+		 *  Optional.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get alignRight():Boolean
+        {
+            return _alignRight;
+        }
+        public function set alignRight(value:Boolean):void
+        {
+            if (_alignRight != value)
+            {
+                _alignRight = value;
+
+                toggleClass("alignRight", _alignRight);
+            }
+        }
+
+		/**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this, 'section');
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
new file mode 100644
index 0000000..48adf5f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
@@ -0,0 +1,93 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The TopAppBarTitle class is the application title
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class TopAppBarTitle extends Group
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function TopAppBarTitle()
+		{
+			super();
+
+            typeNames = "jewel topappbartitle"
+		}
+
+		COMPILE::JS
+        protected var textNode:Text;
+
+		private var _text:String = "";
+        /**
+         *  The text of the element
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function get text():String
+		{
+            return _text;
+		}
+		public function set text(value:String):void
+		{
+            _text = value;
+
+			COMPILE::JS
+			{
+                if(textNode == null)
+                {
+                    textNode = document.createTextNode('') as Text;
+                    element.appendChild(textNode);
+                }
+                
+                textNode.nodeValue = value;	
+			}
+		}
+
+		/**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this, 'span');
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_variables.sass b/frameworks/projects/Jewel/src/main/sass/_variables.sass
new file mode 100644
index 0000000..a1e88af
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/_variables.sass
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// DEVICE DIMENSIONS
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 22a0f37..f9094a0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -26,6 +26,7 @@ $gap: 0px
 
 /* Absolute */
 .layout.absolute
+	position: absolute
 	> *
 		position: absolute
 
@@ -83,10 +84,6 @@ $gap: 0px
 	justify-content: space-between
 
 /* Grid */
-$phone: 0px
-$tablet: 768px
-$desktop: 992px
-$widescreen: 1200px
 $grid-columns: 12 !default
 $gap-size: 10px !default
 
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
new file mode 100644
index 0000000..ab64894
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel TopAppBar
+
+// TopAppBar variables
+$top-app-bar-row-height: 64px
+$top-app-bar-button-size: 48px
+
+.jewel.topappbar
+    display: flex
+    position: relative
+    flex-direction: column
+    justify-content: space-between
+    width: 100%
+    z-index: 4
+
+    &.fixed
+
+.jewel.topappbarrow 
+    display: flex
+    position: relative
+    width: 100%
+    height: $top-app-bar-row-height
+
+.jewel.topappbarsection 
+    display: inline-flex
+    flex: 1 1 auto
+    align-items: center
+    min-width: 0
+    z-index: 1
+    justify-content: flex-start
+    order: -1
+
+    &.alignRight
+        justify-content: flex-end
+        order: 1
+    
+    button
+        will-change: transform, opacity
+        display: flex
+        position: relative
+        flex-shrink: 0
+        align-items: center
+        justify-content: center
+        width: $top-app-bar-button-size
+        height: $top-app-bar-button-size
+        outline: none
+        text-decoration: none
+        cursor: pointer
+
+        &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+            background: transparent
+            box-shadow: none
+            border: none
+
+        &[disabled]
+            background: transparent
+            box-shadow: none
+            border: none
+
+        .icon
+            margin-left: 0px
+            margin-right: 0px
+
+.jewel.topappbartitle
+    -moz-osx-font-smoothing: grayscale
+    -webkit-font-smoothing: antialiased
+    white-space: nowrap
+    overflow: hidden
+    z-index: 1
+    line-height: 2rem
+    letter-spacing: .0125em
+    text:
+        decoration: inherit
+        transform: inherit
+        overflow: ellipsis
+    
+j|ToolBar
+
+j|ToolBarRow
+
+j|ToolBarSection
+
+j|ToolBarTitle
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index d83dc6e..8e13d04 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -16,6 +16,7 @@
  */
 
 // Variables
+@import "variables"
 @import "mixins"
 
 // Global
@@ -36,4 +37,5 @@
 @import "components/slider"
 @import "components/textinput"
 @import "components/titlebar"
+@import "components/topappbar"
 
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29bab45..4bd3b7f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -470,6 +470,45 @@ j|Card {
   color: silver;
 }
 
+.jewel.topappbar {
+  background: linear-gradient(#54b7f3, #24a3ef);
+  border-top: 1px solid #83cbf6;
+  border-bottom: 1px solid #0d79ba;
+  box-shadow: 0px 0px 4px 1px rgba(1, 1, 1, 0.7);
+  color: #FFFFFF;
+  text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+
+.jewel.topappbarsection {
+  padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  padding: 12px;
+  fill: #FFFFFF;
+  color: inherit;
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection
button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus
{
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+.jewel.topappbarsection button[disabled] {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+
+.jewel.topappbartitle {
+  font-family: "Lato", sans-serif;
+  font-size: 1.2em;
+  font-weight: 500;
+  padding-left: 20px;
+  padding-right: 0;
+}
+
 .jewel.button.secondary {
   background: linear-gradient(#f16c42, #ed4812);
   border: 1px solid #be390e;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
new file mode 100644
index 0000000..daea507
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel TopAppBar
+
+// TopAppBar variables
+$top-app-bar-row-height: 64px
+$top-app-bar-section-vertical-padding: 8px
+$top-app-bar-section-horizontal-padding: 12px
+$top-app-bar-button-padding: 12px
+
+.jewel.topappbar
+    
+    @if $flat
+        background: $primary-color
+        border: 0px solid
+    @else
+        background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+        border-top: 1px solid lighten($primary-color, 15%)
+        border-bottom: 1px solid darken($primary-color, 20%)
+        box-shadow: 0px 0px 4px 1px rgba(.7, .7, .7, .7)
+    
+    color: $font-theme-color
+
+    @if not $flat //and $text-color == $font-theme-color
+        text:
+            shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+
+    &.fixed
+        // transition: box-shadow 200ms linear
+
+.jewel.topappbarrow 
+    
+.jewel.topappbarsection 
+    padding: $top-app-bar-section-vertical-padding $top-app-bar-section-horizontal-padding
+    
+    &.alignRight
+    
+    button
+        background: transparent
+        box-shadow: none
+        border: none
+        padding: $top-app-bar-button-padding
+        fill: $font-theme-color
+        color: inherit
+        
+        &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+            background: transparent
+            box-shadow: none
+            border: none
+
+        &[disabled]
+            background: transparent
+            box-shadow: none
+            border: none
+
+.jewel.topappbartitle
+    font:
+        family: $font-stack
+        size: $font-size-large
+        weight: $font-weight-normal + 100
+    padding-left: 20px
+    padding-right: 0
+    
+j|ToolBar
+
+j|ToolBarRow
+
+j|ToolBarSection
+
+j|ToolBarTitle
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 9e34a61..e64786e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -39,6 +39,7 @@
 @import "components-primary/slider"
 @import "components-primary/textinput"
 @import "components-primary/titlebar"
+@import "components-primary/topappbar"
 
 @import "components-secondary/alert"    
 @import "components-secondary/button"


Mime
View raw message