From 074771ac8297a45f84b3c37d9b1ae668ccdcc717 Mon Sep 17 00:00:00 2001 From: Jade Pennig Date: Fri, 21 Jul 2017 09:59:53 -0500 Subject: [PATCH] fix(global-nav-updates): add animation and make ui changes to Global Navigation component --- .../navigation-bar/_index.scss | 75 ++++++++++++------- .../navigation-bar/example.jsx | 6 +- .../tokens/background-color.yml | 6 -- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/ui/components/global-navigation/navigation-bar/_index.scss b/ui/components/global-navigation/navigation-bar/_index.scss index 16529dde08..a1d5f1785f 100644 --- a/ui/components/global-navigation/navigation-bar/_index.scss +++ b/ui/components/global-navigation/navigation-bar/_index.scss @@ -1,6 +1,8 @@ // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license +$color-background-context-bar-brand-light: rgba(desaturate($color-background-context-bar-brand-accent, 30%), 0.05); + /** * @summary Navigation bar wrapper * @@ -13,7 +15,6 @@ display: flex; height: $height-context-bar; background-color: $color-background-context-bar; - border-top: $border-width-thin solid $color-border; border-bottom: 3px solid $color-background-context-bar-brand-accent; color: $color-text-default; position: relative; @@ -87,9 +88,7 @@ &.slds-is-active { outline: 0; border-radius: 0; - background-color: $color-background-context-bar-item-hover; - border-bottom: 3px solid $color-background-context-bar-brand-accent; - margin-bottom: (3px * -1); + background-color: $color-background-context-bar-brand-light; text-decoration: none; cursor: pointer; } @@ -112,9 +111,17 @@ } &.slds-is-active { - border-left: $border-width-thin solid $color-border; - border-right: $border-width-thin solid $color-border; - border-bottom-color: $color-background-context-bar-item-hover; + animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both; + + @keyframes bkAnim { + 50% { + background-color: #edf1f4; + } + + 100% { + background-color: #F7F9FB; + } + } &:before, &:after { @@ -126,6 +133,26 @@ top: 0; left: -1px; right: -1px; + animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both; + } + + @keyframes navBounceIn { + 0% { + transform: translate3d(0, 20px, 0); + opacity: 0; + } + + 20% { + opacity: 0; + } + + 90% { + transform: translate3d(0, 1px, 0); + } + + 100% { + transform: translate3d(0, 0, 0); + } } &:after { @@ -138,15 +165,10 @@ } &:hover { - border-bottom-color: $color-background-context-bar-item-hover; + border-bottom-color: $color-background-context-bar-brand-light; } } - // Remove border on active due to primary section always having a right border - &:first-child.slds-is-active { - border-left: 0; - } - /** * Toggled focused class applied via JavaScript * @@ -168,7 +190,6 @@ * * @selector .slds-context-bar__item_divider-left * @restrict .slds-context-bar div, .slds-context-bar li - * @modifier */ &_divider-left, &--divider-left { @@ -180,7 +201,6 @@ * * @selector .slds-context-bar__item_divider-right * @restrict .slds-context-bar div, .slds-context-bar li - * @modifier */ &_divider-right, &--divider-right { @@ -289,6 +309,19 @@ margin-left: auto; } + + /** + * @summary Tab modifier when using a tabset + * + * @name navigation-tab-bar + * @selector .slds-context-bar_tabs + * @restrict .slds-context-bar + * @variant + */ + &_tabs { + border-top: $border-width-thin solid $color-border; + } + /** * * #### Accessibility @@ -298,14 +331,10 @@ * set the value of `aria-controls` on the Split View Toggle button, to the `ID` of the * wrapper element that contains the Split View List. * - * @summary Tab modifier when using a tabset - * - * @name navigation-tab-bar * @selector .slds-context-bar__item_tab * @restrict .slds-context-bar__item * @notes Only use on tabset version * @required - * @variant * */ &__item_tab, @@ -320,13 +349,10 @@ // Handle active states &.slds-is-active, &:nth-child(n).slds-is-active { - border-left: 0; - border-bottom-color: $color-background-context-tab-bar-item; background-color: $color-background-context-tab-bar-item; &:hover { background-color: $color-background-context-tab-bar-item; - border-bottom-color: transparent; } } @@ -438,7 +464,6 @@ border-right: $border-width-thin solid $color-border; } - // Themes - Pre-defined themes // Using mixin to determine text color and interactive states // @@ -456,9 +481,5 @@ &:before { background: #f59331; } - - &:hover { - border-bottom-color: $color-background-context-bar-item-hover; - } } } diff --git a/ui/components/global-navigation/navigation-bar/example.jsx b/ui/components/global-navigation/navigation-bar/example.jsx index 87e6509507..48deb68925 100644 --- a/ui/components/global-navigation/navigation-bar/example.jsx +++ b/ui/components/global-navigation/navigation-bar/example.jsx @@ -39,7 +39,7 @@ export let ContextBar = props =>
{/* Primary Section */} -
+
{/* App Switcher */}
@@ -81,8 +81,8 @@ export let ContextBar = props => { !props.children ? _.times(3, i =>
  • - - { props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item ' + i } + + { props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item'}
    • ) : props.children } diff --git a/ui/components/global-navigation/tokens/background-color.yml b/ui/components/global-navigation/tokens/background-color.yml index 6dc86d1d53..ed684ce88e 100644 --- a/ui/components/global-navigation/tokens/background-color.yml +++ b/ui/components/global-navigation/tokens/background-color.yml @@ -15,12 +15,6 @@ props: COLOR_BACKGROUND_CONTEXT_BAR_BRAND_ACCENT: value: '{!CERULEAN}' comment: Brand color in context bar for default theme - COLOR_BACKGROUND_CONTEXT_BAR_ITEM_HOVER: - value: '{!PALETTE_GRAY_2}' - comment: Hovered context bar item background color. - COLOR_BACKGROUND_CONTEXT_BAR_ITEM_ACTIVE: - value: '{!PALETTE_GRAY_2}' - comment: Active context bar item background color. COLOR_BACKGROUND_CONTEXT_TAB_BAR_ITEM: value: '{!WHITE}' comment: Context TAB bar item background color.