Skip to content
Permalink
Browse files

fix(global-nav-updates): add animation and make ui changes to Global …

…Navigation component
  • Loading branch information...
zahnster committed Jul 21, 2017
1 parent e6d50b2 commit 074771ac8297a45f84b3c37d9b1ae668ccdcc717
@@ -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;
}
}
}
@@ -39,7 +39,7 @@ export let ContextBar = props =>
<div className={classNames('slds-context-bar', props.className)}>

{/* Primary Section */}
<div className="slds-context-bar__primary slds-context-bar__item_divider-right">
<div className="slds-context-bar__primary">

{/* App Switcher */}
<div className="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
@@ -81,8 +81,8 @@ export let ContextBar = props =>
{ !props.children
? _.times(3, i =>
<li className="slds-context-bar__item" key={i}>
<a href="javascript:void(0);" className="slds-context-bar__label-action" title={'Menu Item ' + i}>
<span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item ' + i }</span>
<a href="javascript:void(0);" className="slds-context-bar__label-action" title="Menu Item">
<span className="slds-truncate" title="Menu Item">{ props.stencil ? '🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢🁢' : 'Menu Item'}</span>
</a>
</li>
) : props.children }
@@ -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.

0 comments on commit 074771a

Please sign in to comment.
You can’t perform that action at this time.