|
0
|
1 // Base class
|
|
|
2 //
|
|
|
3 // Kickstart any navigation component with a set of style resets. Works with
|
|
|
4 // `<nav>`s or `<ul>`s.
|
|
|
5
|
|
|
6 .nav {
|
|
|
7 display: flex;
|
|
|
8 flex-wrap: wrap;
|
|
|
9 padding-left: 0;
|
|
|
10 margin-bottom: 0;
|
|
|
11 list-style: none;
|
|
|
12 }
|
|
|
13
|
|
|
14 .nav-link {
|
|
|
15 display: block;
|
|
|
16 padding: $nav-link-padding-y $nav-link-padding-x;
|
|
|
17
|
|
|
18 @include hover-focus {
|
|
|
19 text-decoration: none;
|
|
|
20 }
|
|
|
21
|
|
|
22 // Disabled state lightens text
|
|
|
23 &.disabled {
|
|
|
24 color: $nav-link-disabled-color;
|
|
|
25 }
|
|
|
26 }
|
|
|
27
|
|
|
28 //
|
|
|
29 // Tabs
|
|
|
30 //
|
|
|
31
|
|
|
32 .nav-tabs {
|
|
|
33 border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
|
|
34
|
|
|
35 .nav-item {
|
|
|
36 margin-bottom: -$nav-tabs-border-width;
|
|
|
37 }
|
|
|
38
|
|
|
39 .nav-link {
|
|
|
40 border: $nav-tabs-border-width solid transparent;
|
|
|
41 @include border-top-radius($nav-tabs-border-radius);
|
|
|
42
|
|
|
43 @include hover-focus {
|
|
|
44 border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
|
|
45 }
|
|
|
46
|
|
|
47 &.disabled {
|
|
|
48 color: $nav-link-disabled-color;
|
|
|
49 background-color: transparent;
|
|
|
50 border-color: transparent;
|
|
|
51 }
|
|
|
52 }
|
|
|
53
|
|
|
54 .nav-link.active,
|
|
|
55 .nav-item.show .nav-link {
|
|
|
56 color: $nav-tabs-link-active-color;
|
|
|
57 background-color: $nav-tabs-link-active-bg;
|
|
|
58 border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
|
|
|
59 }
|
|
|
60
|
|
|
61 .dropdown-menu {
|
|
|
62 // Make dropdown border overlap tab border
|
|
|
63 margin-top: -$nav-tabs-border-width;
|
|
|
64 // Remove the top rounded corners here since there is a hard edge above the menu
|
|
|
65 @include border-top-radius(0);
|
|
|
66 }
|
|
|
67 }
|
|
|
68
|
|
|
69
|
|
|
70 //
|
|
|
71 // Pills
|
|
|
72 //
|
|
|
73
|
|
|
74 .nav-pills {
|
|
|
75 .nav-link {
|
|
|
76 @include border-radius($nav-pills-border-radius);
|
|
|
77
|
|
|
78 &.active,
|
|
|
79 .show > & {
|
|
|
80 color: $nav-pills-link-active-color;
|
|
|
81 background-color: $nav-pills-link-active-bg;
|
|
|
82 }
|
|
|
83 }
|
|
|
84 }
|
|
|
85
|
|
|
86
|
|
|
87 //
|
|
|
88 // Justified variants
|
|
|
89 //
|
|
|
90
|
|
|
91 .nav-fill {
|
|
|
92 .nav-item {
|
|
|
93 flex: 1 1 auto;
|
|
|
94 text-align: center;
|
|
|
95 }
|
|
|
96 }
|
|
|
97
|
|
|
98 .nav-justified {
|
|
|
99 .nav-item {
|
|
|
100 flex-basis: 0;
|
|
|
101 flex-grow: 1;
|
|
|
102 text-align: center;
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106
|
|
|
107 // Tabbable tabs
|
|
|
108 //
|
|
|
109 // Hide tabbable panes to start, show them when `.active`
|
|
|
110
|
|
|
111 .tab-content {
|
|
|
112 > .tab-pane {
|
|
|
113 display: none;
|
|
|
114 }
|
|
|
115 > .active {
|
|
|
116 display: block;
|
|
|
117 }
|
|
|
118 }
|
