You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/04/21 21:01:35 UTC
[royale-asjs] branch develop updated: jewel-tabbar: improve hover
and selected states with more colors also, fonts letter spacing and weight
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 2715bbd jewel-tabbar: improve hover and selected states with more colors also, fonts letter spacing and weight
2715bbd is described below
commit 2715bbd062b0bdac7784ad7fd0f7755c2e01870b
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Apr 21 23:01:28 2019 +0200
jewel-tabbar: improve hover and selected states with more colors also, fonts letter spacing and weight
---
.../projects/Jewel/src/main/resources/defaults.css | 5 +----
.../itemRenderers/TabBarButtonItemRenderer.as | 2 --
.../Jewel/src/main/sass/components/_tabbar.sass | 10 ++--------
.../JewelTheme/src/main/resources/defaults.css | 13 ++++++++++++-
.../src/main/sass/components-primary/_tabbar.sass | 22 +++++++++++++++-------
5 files changed, 30 insertions(+), 22 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index cd21934..eccb762 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3503,7 +3503,7 @@ j|TabBar {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer");
- IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
@@ -3517,8 +3517,6 @@ j|TabBar {
flex: 1 0 auto;
white-space: nowrap;
justify-content: center;
- text-transform: uppercase;
- text-decoration: none;
z-index: 1;
overflow: initial;
}
@@ -3542,7 +3540,6 @@ j|TabBar {
.jewel.tabbarbutton .indicator > .indicatorContent {
align-self: flex-end;
width: 100%;
- transform-origin: left;
opacity: 0;
}
.jewel.tabbarbutton.selected .indicator > .indicatorContent {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
index d199144..feb4554 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
@@ -52,8 +52,6 @@ package org.apache.royale.jewel.itemRenderers
{
super();
- hoverable = false;
-
typeNames = "jewel tabbarbutton";
addClass("selectable");
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 7cd9c7a..7a0c6bb 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -20,7 +20,6 @@
// Jewel TabBar
// TabBar variables
-$tabbarbutton-margin-height: 48px
.jewel
&.tabbar
@@ -49,7 +48,7 @@ j|TabBar
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer")
- IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
@@ -57,6 +56,7 @@ j|TabBar
// Jewel TabBarButtonItemRenderer
// $tabbarbutton-margin: 0 !default
$tabbarbutton-padding: 0 24px !default
+$tabbarbutton-margin-height: 48px
// TabBarButtonItemRenderer variables
.jewel
@@ -71,10 +71,6 @@ $tabbarbutton-padding: 0 24px !default
flex: 1 0 auto
white-space: nowrap
justify-content: center
-
- text-transform: uppercase
- text-decoration: none
-
z-index: 1
overflow: initial
@@ -99,9 +95,7 @@ $tabbarbutton-padding: 0 24px !default
> .indicatorContent
align-self: flex-end
width: 100%
- transform-origin: left
opacity: 0
- // transition: transform .25s ease //cubic-bezier(.4,0,.2,1)
&.selected
.indicator
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index e613862..1a8d5a4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -848,9 +848,14 @@ j|FormItem {
font-size: 1em;
font-weight: 500;
border: none;
- background: none;
+ background: transparent;
outline: none;
color: rgba(0, 0, 0, 0.6);
+ text-transform: uppercase;
+ text-decoration: none;
+ letter-spacing: 0.1em;
+ font-weight: 600;
+ transition: background-color 0.3s ease-in-out;
}
.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
color: #3CADF1;
@@ -859,6 +864,12 @@ j|FormItem {
height: 2px;
background-color: #3CADF1;
}
+.jewel.tabbarbutton.hovered:hover {
+ background: rgba(60, 173, 241, 0.2);
+}
+.jewel.tabbarbutton.selected, .jewel.tabbarbutton.selectable:active {
+ background: rgba(60, 173, 241, 0.4);
+}
.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
index 73600c4..7224daa 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tabbar.sass
@@ -41,10 +41,16 @@
weight: $font-weight-normal + 100
border: none
- background: none
+ background: transparent
outline: none
color: rgba(black, 0.6)
+ text-transform: uppercase
+ text-decoration: none
+ letter-spacing: .1em
+ font-weight: 600
+
+ transition: background-color .3s ease-in-out
// .content
// padding: 0px $itemrenderer-padding
@@ -55,14 +61,16 @@
> .indicatorContent
height: 2px
background-color: $primary-color
+ // transform-origin: left
// transition: transform .25s ease-in-out //cubic-bezier(.4,0,.2,1)
// animation-duration: .3s
// animation-timing-function: ease-in-out
// animation-fill-mode: both
- // &.hovered:hover
- // color: $font-theme-color
- // background: lighten($primary-color, 10%)
+ &.hovered:hover
+ // color: $font-theme-color
+ background: rgba($primary-color, .2)
+
- // &.selected, &.selectable:active
- // color: $font-theme-color
- // background: lighten($primary-color, 5%)
\ No newline at end of file
+ &.selected, &.selectable:active
+ // color: $font-theme-color
+ background: rgba($primary-color, .4)
\ No newline at end of file