File tree Expand file tree Collapse file tree 7 files changed +30
-30
lines changed Expand file tree Collapse file tree 7 files changed +30
-30
lines changed Load Diff Large diffs are not rendered by default.
Original file line number Diff line number Diff line change @@ -22,13 +22,14 @@ const { matchesMarkupAndStyle } = createHelpers(__dirname);
22
22
it ( 'renders a global-navigation with sub-tabs' , ( ) =>
23
23
matchesMarkupAndStyle (
24
24
< div className = "demo-only" style = { { height : '8rem' } } >
25
- < ContextTabBar className = "slds-has-sub-tabs" >
25
+ < ContextTabBar >
26
26
< ContextTab
27
27
title = "Home"
28
28
symbol = "home"
29
29
tabPanelId = "context-tab-panel-1"
30
30
id = "context-tab-id-1"
31
31
itemActive
32
+ hasSubtabs
32
33
/>
33
34
< ContextTab
34
35
title = "Tab Item 1"
Original file line number Diff line number Diff line change @@ -400,6 +400,29 @@ $color-background-context-bar-brand-light: rgba($color-background-context-bar-br
400
400
}
401
401
}
402
402
403
+ /* *
404
+ * @summary Modifier that notifies a parent component that it has sub tabs inside of it
405
+ * @selector .slds-has-sub-tabs
406
+ * @restrict .slds-context-bar__item_tab
407
+ */
408
+ .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active ,
409
+ .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active :hover {
410
+ animation : none ;
411
+ background-color : transparent ;
412
+
413
+ & :after {
414
+ content : ' ' ;
415
+ display : block ;
416
+ position : absolute ;
417
+ bottom : -3px ;
418
+ height : 3px ;
419
+ width : 100% ;
420
+ background-color : $color-background-context-bar ;
421
+ border : 0 ;
422
+ mix-blend-mode : unset ;
423
+ }
424
+ }
425
+
403
426
/* *
404
427
* Unsaved indicator - This can probably be used in other locations as well
405
428
*
Original file line number Diff line number Diff line change @@ -64,7 +64,8 @@ export let ContextTab = props => (
64
64
'slds-is-active' : props . itemActive ,
65
65
'slds-is-unsaved' : props . itemUnsaved ,
66
66
'slds-is-pinned' : props . pinned ,
67
- 'slds-has-notification' : props . itemUnread
67
+ 'slds-has-notification' : props . itemUnread ,
68
+ 'slds-has-sub-tabs' : props . hasSubtabs
68
69
}
69
70
) }
70
71
role = "presentation"
@@ -1187,13 +1188,14 @@ export let states = [
1187
1188
label : 'Sub Tabs - Open' ,
1188
1189
element : (
1189
1190
< div className = "demo-only" style = { { height : '8rem' } } >
1190
- < ContextTabBar className = "slds-has-sub-tabs" >
1191
+ < ContextTabBar >
1191
1192
< ContextTab
1192
1193
title = "Home"
1193
1194
symbol = "home"
1194
1195
tabPanelId = { tabPanelId01 }
1195
1196
id = { tabId01 }
1196
1197
itemActive
1198
+ hasSubtabs
1197
1199
/>
1198
1200
< ContextTab
1199
1201
title = "Tab Item 1"
Original file line number Diff line number Diff line change 58
58
text-decoration : underline ;
59
59
}
60
60
}
61
-
62
- /* *
63
- * @summary Modifier that notifies a parent component that it has sub tabs inside of it
64
- * @selector .slds-has-sub-tabs
65
- * @restrict .slds-context-bar
66
- */
67
- .slds-has-sub-tabs {
68
-
69
- .slds-context-bar__item_tab.slds-is-active ,
70
- .slds-context-bar__item_tab.slds-is-active :hover {
71
- animation : none ;
72
- background-color : transparent ;
73
-
74
- & :after {
75
- content : ' ' ;
76
- display : block ;
77
- position : absolute ;
78
- bottom : -3px ;
79
- height : 3px ;
80
- width : 100% ;
81
- background-color : $color-background-context-bar ;
82
- border : 0 ;
83
- mix-blend-mode : unset ;
84
- }
85
- }
86
- }
You can’t perform that action at this time.
0 commit comments