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 | // scss-docs-start nav-css-vars
|
---|
8 | --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
|
---|
9 | --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
---|
10 | @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
---|
11 | --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
---|
12 | --#{$prefix}nav-link-color: #{$nav-link-color};
|
---|
13 | --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
|
---|
14 | --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
|
---|
15 | // scss-docs-end nav-css-vars
|
---|
16 |
|
---|
17 | display: flex;
|
---|
18 | flex-wrap: wrap;
|
---|
19 | padding-left: 0;
|
---|
20 | margin-bottom: 0;
|
---|
21 | list-style: none;
|
---|
22 | }
|
---|
23 |
|
---|
24 | .nav-link {
|
---|
25 | display: block;
|
---|
26 | padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
|
---|
27 | @include font-size(var(--#{$prefix}nav-link-font-size));
|
---|
28 | font-weight: var(--#{$prefix}nav-link-font-weight);
|
---|
29 | color: var(--#{$prefix}nav-link-color);
|
---|
30 | text-decoration: if($link-decoration == none, null, none);
|
---|
31 | background: none;
|
---|
32 | border: 0;
|
---|
33 | @include transition($nav-link-transition);
|
---|
34 |
|
---|
35 | &:hover,
|
---|
36 | &:focus {
|
---|
37 | color: var(--#{$prefix}nav-link-hover-color);
|
---|
38 | text-decoration: if($link-hover-decoration == underline, none, null);
|
---|
39 | }
|
---|
40 |
|
---|
41 | &:focus-visible {
|
---|
42 | outline: 0;
|
---|
43 | box-shadow: $nav-link-focus-box-shadow;
|
---|
44 | }
|
---|
45 |
|
---|
46 | // Disabled state lightens text
|
---|
47 | &.disabled,
|
---|
48 | &:disabled {
|
---|
49 | color: var(--#{$prefix}nav-link-disabled-color);
|
---|
50 | pointer-events: none;
|
---|
51 | cursor: default;
|
---|
52 | }
|
---|
53 | }
|
---|
54 |
|
---|
55 | //
|
---|
56 | // Tabs
|
---|
57 | //
|
---|
58 |
|
---|
59 | .nav-tabs {
|
---|
60 | // scss-docs-start nav-tabs-css-vars
|
---|
61 | --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
|
---|
62 | --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
|
---|
63 | --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
|
---|
64 | --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
|
---|
65 | --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
|
---|
66 | --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
|
---|
67 | --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
|
---|
68 | // scss-docs-end nav-tabs-css-vars
|
---|
69 |
|
---|
70 | border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
|
---|
71 |
|
---|
72 | .nav-link {
|
---|
73 | margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
---|
74 | border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
---|
75 | @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
---|
76 |
|
---|
77 | &:hover,
|
---|
78 | &:focus {
|
---|
79 | // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
---|
80 | isolation: isolate;
|
---|
81 | border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
|
---|
82 | }
|
---|
83 | }
|
---|
84 |
|
---|
85 | .nav-link.active,
|
---|
86 | .nav-item.show .nav-link {
|
---|
87 | color: var(--#{$prefix}nav-tabs-link-active-color);
|
---|
88 | background-color: var(--#{$prefix}nav-tabs-link-active-bg);
|
---|
89 | border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
|
---|
90 | }
|
---|
91 |
|
---|
92 | .dropdown-menu {
|
---|
93 | // Make dropdown border overlap tab border
|
---|
94 | margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
---|
95 | // Remove the top rounded corners here since there is a hard edge above the menu
|
---|
96 | @include border-top-radius(0);
|
---|
97 | }
|
---|
98 | }
|
---|
99 |
|
---|
100 |
|
---|
101 | //
|
---|
102 | // Pills
|
---|
103 | //
|
---|
104 |
|
---|
105 | .nav-pills {
|
---|
106 | // scss-docs-start nav-pills-css-vars
|
---|
107 | --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
|
---|
108 | --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
|
---|
109 | --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
|
---|
110 | // scss-docs-end nav-pills-css-vars
|
---|
111 |
|
---|
112 | .nav-link {
|
---|
113 | @include border-radius(var(--#{$prefix}nav-pills-border-radius));
|
---|
114 | }
|
---|
115 |
|
---|
116 | .nav-link.active,
|
---|
117 | .show > .nav-link {
|
---|
118 | color: var(--#{$prefix}nav-pills-link-active-color);
|
---|
119 | @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
|
---|
120 | }
|
---|
121 | }
|
---|
122 |
|
---|
123 |
|
---|
124 | //
|
---|
125 | // Underline
|
---|
126 | //
|
---|
127 |
|
---|
128 | .nav-underline {
|
---|
129 | // scss-docs-start nav-underline-css-vars
|
---|
130 | --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
|
---|
131 | --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
|
---|
132 | --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
|
---|
133 | // scss-docs-end nav-underline-css-vars
|
---|
134 |
|
---|
135 | gap: var(--#{$prefix}nav-underline-gap);
|
---|
136 |
|
---|
137 | .nav-link {
|
---|
138 | padding-right: 0;
|
---|
139 | padding-left: 0;
|
---|
140 | border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
|
---|
141 |
|
---|
142 | &:hover,
|
---|
143 | &:focus {
|
---|
144 | border-bottom-color: currentcolor;
|
---|
145 | }
|
---|
146 | }
|
---|
147 |
|
---|
148 | .nav-link.active,
|
---|
149 | .show > .nav-link {
|
---|
150 | font-weight: $font-weight-bold;
|
---|
151 | color: var(--#{$prefix}nav-underline-link-active-color);
|
---|
152 | border-bottom-color: currentcolor;
|
---|
153 | }
|
---|
154 | }
|
---|
155 |
|
---|
156 |
|
---|
157 | //
|
---|
158 | // Justified variants
|
---|
159 | //
|
---|
160 |
|
---|
161 | .nav-fill {
|
---|
162 | > .nav-link,
|
---|
163 | .nav-item {
|
---|
164 | flex: 1 1 auto;
|
---|
165 | text-align: center;
|
---|
166 | }
|
---|
167 | }
|
---|
168 |
|
---|
169 | .nav-justified {
|
---|
170 | > .nav-link,
|
---|
171 | .nav-item {
|
---|
172 | flex-basis: 0;
|
---|
173 | flex-grow: 1;
|
---|
174 | text-align: center;
|
---|
175 | }
|
---|
176 | }
|
---|
177 |
|
---|
178 | .nav-fill,
|
---|
179 | .nav-justified {
|
---|
180 | .nav-item .nav-link {
|
---|
181 | width: 100%; // Make sure button will grow
|
---|
182 | }
|
---|
183 | }
|
---|
184 |
|
---|
185 |
|
---|
186 | // Tabbable tabs
|
---|
187 | //
|
---|
188 | // Hide tabbable panes to start, show them when `.active`
|
---|
189 |
|
---|
190 | .tab-content {
|
---|
191 | > .tab-pane {
|
---|
192 | display: none;
|
---|
193 | }
|
---|
194 | > .active {
|
---|
195 | display: block;
|
---|
196 | }
|
---|
197 | }
|
---|