|
1 | 1 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
|
2 | 2 | // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
|
3 | 3 |
|
| 4 | +$color-background-context-bar-brand-light: rgba(desaturate($color-background-context-bar-brand-accent, 30%), 0.05); |
| 5 | + |
4 | 6 | /**
|
5 | 7 | * @summary Navigation bar wrapper
|
6 | 8 | *
|
|
13 | 15 | display: flex;
|
14 | 16 | height: $height-context-bar;
|
15 | 17 | background-color: $color-background-context-bar;
|
16 |
| - border-top: $border-width-thin solid $color-border; |
17 | 18 | border-bottom: 3px solid $color-background-context-bar-brand-accent;
|
18 | 19 | color: $color-text-default;
|
19 | 20 | position: relative;
|
|
87 | 88 | &.slds-is-active {
|
88 | 89 | outline: 0;
|
89 | 90 | border-radius: 0;
|
90 |
| - background-color: $color-background-context-bar-item-hover; |
91 |
| - border-bottom: 3px solid $color-background-context-bar-brand-accent; |
92 |
| - margin-bottom: (3px * -1); |
| 91 | + background-color: $color-background-context-bar-brand-light; |
93 | 92 | text-decoration: none;
|
94 | 93 | cursor: pointer;
|
95 | 94 | }
|
|
112 | 111 | }
|
113 | 112 |
|
114 | 113 | &.slds-is-active {
|
115 |
| - border-left: $border-width-thin solid $color-border; |
116 |
| - border-right: $border-width-thin solid $color-border; |
117 |
| - border-bottom-color: $color-background-context-bar-item-hover; |
| 114 | + animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both; |
| 115 | + |
| 116 | + @keyframes bkAnim { |
| 117 | + 50% { |
| 118 | + background-color: #edf1f4; |
| 119 | + } |
| 120 | + |
| 121 | + 100% { |
| 122 | + background-color: #F7F9FB; |
| 123 | + } |
| 124 | + } |
118 | 125 |
|
119 | 126 | &:before,
|
120 | 127 | &:after {
|
|
126 | 133 | top: 0;
|
127 | 134 | left: -1px;
|
128 | 135 | right: -1px;
|
| 136 | + animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both; |
| 137 | + } |
| 138 | + |
| 139 | + @keyframes navBounceIn { |
| 140 | + 0% { |
| 141 | + transform: translate3d(0, 20px, 0); |
| 142 | + opacity: 0; |
| 143 | + } |
| 144 | + |
| 145 | + 20% { |
| 146 | + opacity: 0; |
| 147 | + } |
| 148 | + |
| 149 | + 90% { |
| 150 | + transform: translate3d(0, 1px, 0); |
| 151 | + } |
| 152 | + |
| 153 | + 100% { |
| 154 | + transform: translate3d(0, 0, 0); |
| 155 | + } |
129 | 156 | }
|
130 | 157 |
|
131 | 158 | &:after {
|
|
138 | 165 | }
|
139 | 166 |
|
140 | 167 | &:hover {
|
141 |
| - border-bottom-color: $color-background-context-bar-item-hover; |
| 168 | + border-bottom-color: $color-background-context-bar-brand-light; |
142 | 169 | }
|
143 | 170 | }
|
144 | 171 |
|
145 |
| - // Remove border on active due to primary section always having a right border |
146 |
| - &:first-child.slds-is-active { |
147 |
| - border-left: 0; |
148 |
| - } |
149 |
| - |
150 | 172 | /**
|
151 | 173 | * Toggled focused class applied via JavaScript
|
152 | 174 | *
|
|
168 | 190 | *
|
169 | 191 | * @selector .slds-context-bar__item_divider-left
|
170 | 192 | * @restrict .slds-context-bar div, .slds-context-bar li
|
171 |
| - * @modifier |
172 | 193 | */
|
173 | 194 | &_divider-left,
|
174 | 195 | &--divider-left {
|
|
180 | 201 | *
|
181 | 202 | * @selector .slds-context-bar__item_divider-right
|
182 | 203 | * @restrict .slds-context-bar div, .slds-context-bar li
|
183 |
| - * @modifier |
184 | 204 | */
|
185 | 205 | &_divider-right,
|
186 | 206 | &--divider-right {
|
|
289 | 309 | margin-left: auto;
|
290 | 310 | }
|
291 | 311 |
|
| 312 | + |
| 313 | + /** |
| 314 | + * @summary Tab modifier when using a tabset |
| 315 | + * |
| 316 | + * @name navigation-tab-bar |
| 317 | + * @selector .slds-context-bar_tabs |
| 318 | + * @restrict .slds-context-bar |
| 319 | + * @variant |
| 320 | + */ |
| 321 | + &_tabs { |
| 322 | + border-top: $border-width-thin solid $color-border; |
| 323 | + } |
| 324 | + |
292 | 325 | /**
|
293 | 326 | *
|
294 | 327 | * #### Accessibility
|
|
298 | 331 | * set the value of `aria-controls` on the Split View Toggle button, to the `ID` of the
|
299 | 332 | * wrapper element that contains the Split View List.
|
300 | 333 | *
|
301 |
| - * @summary Tab modifier when using a tabset |
302 |
| - * |
303 |
| - * @name navigation-tab-bar |
304 | 334 | * @selector .slds-context-bar__item_tab
|
305 | 335 | * @restrict .slds-context-bar__item
|
306 | 336 | * @notes Only use on tabset version
|
307 | 337 | * @required
|
308 |
| - * @variant |
309 | 338 | *
|
310 | 339 | */
|
311 | 340 | &__item_tab,
|
|
320 | 349 | // Handle active states
|
321 | 350 | &.slds-is-active,
|
322 | 351 | &:nth-child(n).slds-is-active {
|
323 |
| - border-left: 0; |
324 |
| - border-bottom-color: $color-background-context-tab-bar-item; |
325 | 352 | background-color: $color-background-context-tab-bar-item;
|
326 | 353 |
|
327 | 354 | &:hover {
|
328 | 355 | background-color: $color-background-context-tab-bar-item;
|
329 |
| - border-bottom-color: transparent; |
330 | 356 | }
|
331 | 357 | }
|
332 | 358 |
|
|
438 | 464 | border-right: $border-width-thin solid $color-border;
|
439 | 465 | }
|
440 | 466 |
|
441 |
| - |
442 | 467 | // Themes - Pre-defined themes
|
443 | 468 | // Using mixin to determine text color and interactive states
|
444 | 469 | //
|
|
456 | 481 | &:before {
|
457 | 482 | background: #f59331;
|
458 | 483 | }
|
459 |
| - |
460 |
| - &:hover { |
461 |
| - border-bottom-color: $color-background-context-bar-item-hover; |
462 |
| - } |
463 | 484 | }
|
464 | 485 | }
|
0 commit comments