1 | // Base class
|
---|
2 | //
|
---|
3 | // Kickstart any navigation component with a set of style resets. Works with
|
---|
4 | // `<nav>`s, `<ul>`s or `<ol>`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 | @include font-size($nav-link-font-size);
|
---|
18 | font-weight: $nav-link-font-weight;
|
---|
19 | color: $nav-link-color;
|
---|
20 | text-decoration: if($link-decoration == none, null, none);
|
---|
21 | @include transition($nav-link-transition);
|
---|
22 |
|
---|
23 | &:hover,
|
---|
24 | &:focus {
|
---|
25 | color: $nav-link-hover-color;
|
---|
26 | text-decoration: if($link-hover-decoration == underline, none, null);
|
---|
27 | }
|
---|
28 |
|
---|
29 | // Disabled state lightens text
|
---|
30 | &.disabled {
|
---|
31 | color: $nav-link-disabled-color;
|
---|
32 | pointer-events: none;
|
---|
33 | cursor: default;
|
---|
34 | }
|
---|
35 | }
|
---|
36 |
|
---|
37 | //
|
---|
38 | // Tabs
|
---|
39 | //
|
---|
40 |
|
---|
41 | .nav-tabs {
|
---|
42 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
---|
43 |
|
---|
44 | .nav-link {
|
---|
45 | margin-bottom: -$nav-tabs-border-width;
|
---|
46 | background: none;
|
---|
47 | border: $nav-tabs-border-width solid transparent;
|
---|
48 | @include border-top-radius($nav-tabs-border-radius);
|
---|
49 |
|
---|
50 | &:hover,
|
---|
51 | &:focus {
|
---|
52 | border-color: $nav-tabs-link-hover-border-color;
|
---|
53 | // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
---|
54 | isolation: isolate;
|
---|
55 | }
|
---|
56 |
|
---|
57 | &.disabled {
|
---|
58 | color: $nav-link-disabled-color;
|
---|
59 | background-color: transparent;
|
---|
60 | border-color: transparent;
|
---|
61 | }
|
---|
62 | }
|
---|
63 |
|
---|
64 | .nav-link.active,
|
---|
65 | .nav-item.show .nav-link {
|
---|
66 | color: $nav-tabs-link-active-color;
|
---|
67 | background-color: $nav-tabs-link-active-bg;
|
---|
68 | border-color: $nav-tabs-link-active-border-color;
|
---|
69 | }
|
---|
70 |
|
---|
71 | .dropdown-menu {
|
---|
72 | // Make dropdown border overlap tab border
|
---|
73 | margin-top: -$nav-tabs-border-width;
|
---|
74 | // Remove the top rounded corners here since there is a hard edge above the menu
|
---|
75 | @include border-top-radius(0);
|
---|
76 | }
|
---|
77 | }
|
---|
78 |
|
---|
79 |
|
---|
80 | //
|
---|
81 | // Pills
|
---|
82 | //
|
---|
83 |
|
---|
84 | .nav-pills {
|
---|
85 | .nav-link {
|
---|
86 | background: none;
|
---|
87 | border: 0;
|
---|
88 | @include border-radius($nav-pills-border-radius);
|
---|
89 | }
|
---|
90 |
|
---|
91 | .nav-link.active,
|
---|
92 | .show > .nav-link {
|
---|
93 | color: $nav-pills-link-active-color;
|
---|
94 | @include gradient-bg($nav-pills-link-active-bg);
|
---|
95 | }
|
---|
96 | }
|
---|
97 |
|
---|
98 |
|
---|
99 | //
|
---|
100 | // Justified variants
|
---|
101 | //
|
---|
102 |
|
---|
103 | .nav-fill {
|
---|
104 | > .nav-link,
|
---|
105 | .nav-item {
|
---|
106 | flex: 1 1 auto;
|
---|
107 | text-align: center;
|
---|
108 | }
|
---|
109 | }
|
---|
110 |
|
---|
111 | .nav-justified {
|
---|
112 | > .nav-link,
|
---|
113 | .nav-item {
|
---|
114 | flex-basis: 0;
|
---|
115 | flex-grow: 1;
|
---|
116 | text-align: center;
|
---|
117 | }
|
---|
118 | }
|
---|
119 |
|
---|
120 | .nav-fill,
|
---|
121 | .nav-justified {
|
---|
122 | .nav-item .nav-link {
|
---|
123 | width: 100%; // Make sure button will grow
|
---|
124 | }
|
---|
125 | }
|
---|
126 |
|
---|
127 |
|
---|
128 | // Tabbable tabs
|
---|
129 | //
|
---|
130 | // Hide tabbable panes to start, show them when `.active`
|
---|
131 |
|
---|
132 | .tab-content {
|
---|
133 | > .tab-pane {
|
---|
134 | display: none;
|
---|
135 | }
|
---|
136 | > .active {
|
---|
137 | display: block;
|
---|
138 | }
|
---|
139 | }
|
---|