From commits-return-4587-archive-asf-public=cust-asf.ponee.io@royale.apache.org Wed Jun 27 18:04:02 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id D3B56180625 for ; Wed, 27 Jun 2018 18:04:01 +0200 (CEST) Received: (qmail 3803 invoked by uid 500); 27 Jun 2018 16:04:01 -0000 Mailing-List: contact commits-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list commits@royale.apache.org Received: (qmail 3793 invoked by uid 99); 27 Jun 2018 16:04:00 -0000 Received: from ec2-52-202-80-70.compute-1.amazonaws.com (HELO gitbox.apache.org) (52.202.80.70) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 27 Jun 2018 16:04:00 +0000 Received: by gitbox.apache.org (ASF Mail Server at gitbox.apache.org, from userid 33) id 54D08827C6; Wed, 27 Jun 2018 16:04:00 +0000 (UTC) Date: Wed, 27 Jun 2018 16:04:00 +0000 To: "commits@royale.apache.org" Subject: [royale-asjs] branch develop updated: jewel TopAppBar component MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit Message-ID: <153011544027.4626.3127149868295105330@gitbox.apache.org> From: carlosrovira@apache.org X-Git-Host: gitbox.apache.org X-Git-Repo: royale-asjs X-Git-Refname: refs/heads/develop X-Git-Reftype: branch X-Git-Oldrev: bdd5e07aae1e5e9f22cee9f38c19f04a281572f7 X-Git-Newrev: 444c6e45af8b7429f1b00409227771a75b7113f8 X-Git-Rev: 444c6e45af8b7429f1b00409227771a75b7113f8 X-Git-NotificationType: ref_changed_plus_diff X-Git-Multimail-Version: 1.5.dev Auto-Submitted: auto-generated 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 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 @@ + + + + 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"