Skip to content

Commit 4ea27cb

Browse files
mlsamuelsonmlsamuelson
authored
Merge pull request #143 from ASU/tyk-tabs
Added dark and gray modes for tabs
2 parents 0ef5fa8 + cd8a8be commit 4ea27cb

File tree

3 files changed

+86
-21
lines changed

3 files changed

+86
-21
lines changed

‎packages/bootstrap4-theme/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ yarn gulp # Execute the default Gulp task (validate)
224224

225225
### Publish Package Releases
226226

227-
#### TODO
227+
#### TODO
228228

229229

230230
![divider](./divider.png)

‎packages/bootstrap4-theme/src/scss/extends/_tabs.scss‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,32 @@
88
font-weight: bold;
99
font-size: 24px;
1010
}
11+
.darkmode .nav-tabs .nav-link {
12+
color: #fafafa;
13+
background-color: transparent;
14+
}
15+
.darkmode .nav-tabs .nav-link.active {
16+
color: #ffc627;
17+
background-color: transparent;
18+
}
19+
.smokemode .nav-tabs .nav-link {
20+
background-color: transparent;
21+
}
22+
.smokemode .nav-tabs .nav-link.active {
23+
background-color: transparent;
24+
}
25+
.background-darkmode {
26+
background-color: #191919;
27+
}
28+
.background-smokemode {
29+
background-color: #E8E8E8;
30+
}
1131
.nav-tabs .nav-link.active {
1232
border-bottom: 8px solid $uds-color-base-maroon;
1333
}/* hover - maroon text */
34+
.darkmode .nav-tabs .nav-link.active {
35+
border-bottom: 8px solid #ffc627;
36+
}/* hover - maroon text */
1437
.mobile-tabs {
1538
flex-wrap: inherit;
1639
overflow-x: hidden;
@@ -31,6 +54,10 @@
3154
.mobile-tabs .nav-tabs .nav-link:focus, {
3255
color: $uds-color-base-maroon;
3356
}
57+
.darkmode.mobile-tabs .nav-tabs .nav-link:hover,
58+
.darkmode.mobile-tabs .nav-tabs .nav-link:focus, {
59+
color: #ffc627;
60+
}
3461
.mobile-tabs .nav-tabs::-webkit-scrollbar {
3562
/*display: none;*/
3663
}
@@ -56,13 +83,6 @@
5683
}
5784
*/
5885

59-
/* TODO move this to a separate file */
60-
/* scrolling menu styles */
61-
62-
63-
/* TODO hover style */
64-
65-
6686
.scroll-control-prev {
6787
position: absolute;
6888
height: 100%;
@@ -79,6 +99,7 @@
7999
background: rgba(0,0,0,0);
80100
background: linear-gradient(90deg, rgba(25,25,25,0) 0%, rgba(25,25,25,0.25) 100%);
81101
}
102+
82103
.scroll-control-prev span.carousel-control-prev-icon,
83104
.scroll-control-next span.carousel-control-next-icon {
84105
background-size: 60% 60%;

‎packages/bootstrap4-theme/stories/components/tabs/tabs.stories.js‎

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,30 @@ storiesOf('Components/Tabs', module)
77
happo: false,
88
})
99

10-
.add('Desktop', () => `
11-
<div class="container-fluid">
10+
.add('Regular tabs', () => `
11+
<div class="container">
1212
<div class="row">
1313
14-
<div class="col-12">
14+
<div class="col-12 col-md-8 col-lg-10 col-xl-12">
1515
16-
<nav class="nav-tabs-scrolling">
17-
<div class="nav nav-tabs" id="nav-tab" role="tablist">
18-
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home long tab</a>
19-
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile long tab</a>
20-
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact us is a long tab</a>
21-
</div>
22-
</nav>
16+
<nav class="mobile-tabs">
17+
<div class="nav nav-tabs" id="nav-tab" role="tablist" data-scroll-position="0">
18+
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home long tab</a>
19+
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile long tab</a>
20+
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact us is a long tab</a>
21+
22+
23+
24+
</div>
25+
<a class="scroll-control-prev" href="#carouselExampleControls" role="button" data-scroll="prev">
26+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
27+
<span class="sr-only">Previous</span>
28+
</a>
29+
<a class="scroll-control-next" href="#carouselExampleControls" role="button" data-scroll="next">
30+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
31+
<span class="sr-only">Next</span>
32+
</a>
33+
</nav>
2334
<div class="tab-content" id="nav-tabContent">
2435
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home tab content...</div>
2536
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile tab content...</div>
@@ -30,14 +41,47 @@ storiesOf('Components/Tabs', module)
3041
</div>
3142
</div>
3243
`)
44+
.add('Dark background', () => `
45+
<div class="container background-darkmode">
46+
<div class="row">
3347
34-
.add('Mobile', () => `
35-
<div class="container">
48+
<div class="col-12 col-md-8 col-lg-10 col-xl-12">
49+
50+
<nav class="mobile-tabs darkmode">
51+
<div class="nav nav-tabs" id="nav-tab" role="tablist" data-scroll-position="0">
52+
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home long tab</a>
53+
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile long tab</a>
54+
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact us is a long tab</a>
55+
56+
57+
58+
</div>
59+
<a class="scroll-control-prev" href="#carouselExampleControls" role="button" data-scroll="prev">
60+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
61+
<span class="sr-only">Previous</span>
62+
</a>
63+
<a class="scroll-control-next" href="#carouselExampleControls" role="button" data-scroll="next">
64+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
65+
<span class="sr-only">Next</span>
66+
</a>
67+
</nav>
68+
<div class="tab-content text-light" id="nav-tabContent">
69+
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home tab content...</div>
70+
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile tab content...</div>
71+
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact tab content...</div>
72+
</div>
73+
</div>
74+
75+
</div>
76+
</div>
77+
`)
78+
.add('Gray background', () => `
79+
<div class="container background-smokemode">
3680
<div class="row">
3781
3882
<div class="col-12 col-md-8 col-lg-10 col-xl-12">
3983
40-
<nav class="mobile-tabs">
84+
<nav class="mobile-tabs smokemode">
4185
<div class="nav nav-tabs" id="nav-tab" role="tablist" data-scroll-position="0">
4286
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home long tab</a>
4387
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile long tab</a>

0 commit comments

Comments
 (0)