Mercurial > minori

comparison dep/fmt/doc/bootstrap/navs.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
1 //
2 // Navs
3 // --------------------------------------------------
4
5
6 // Base class
7 // --------------------------------------------------
8
9 .nav {
10 margin-bottom: 0;
11 padding-left: 0; // Override default ul/ol
12 list-style: none;
13 &:extend(.clearfix all);
14
15 > li {
16 position: relative;
17 display: block;
18
19 > a {
20 position: relative;
21 display: block;
22 padding: @nav-link-padding;
23 &:hover,
24 &:focus {
25 text-decoration: none;
26 background-color: @nav-link-hover-bg;
27 }
28 }
29
30 // Disabled state sets text to gray and nukes hover/tab effects
31 &.disabled > a {
32 color: @nav-disabled-link-color;
33
34 &:hover,
35 &:focus {
36 color: @nav-disabled-link-hover-color;
37 text-decoration: none;
38 background-color: transparent;
39 cursor: @cursor-disabled;
40 }
41 }
42 }
43
44 // Open dropdowns
45 .open > a {
46 &,
47 &:hover,
48 &:focus {
49 background-color: @nav-link-hover-bg;
50 border-color: @link-color;
51 }
52 }
53
54 // Nav dividers (deprecated with v3.0.1)
55 //
56 // This should have been removed in v3 with the dropping of `.nav-list`, but
57 // we missed it. We don't currently support this anywhere, but in the interest
58 // of maintaining backward compatibility in case you use it, it's deprecated.
59 .nav-divider {
60 .nav-divider();
61 }
62
63 // Prevent IE8 from misplacing imgs
64 //
65 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
66 > li > a > img {
67 max-width: none;
68 }
69 }
70
71
72 // Tabs
73 // -------------------------
74
75 // Give the tabs something to sit on
76 .nav-tabs {
77 border-bottom: 1px solid @nav-tabs-border-color;
78 > li {
79 float: left;
80 // Make the list-items overlay the bottom border
81 margin-bottom: -1px;
82
83 // Actual tabs (as links)
84 > a {
85 margin-right: 2px;
86 line-height: @line-height-base;
87 border: 1px solid transparent;
88 border-radius: @border-radius-base @border-radius-base 0 0;
89 &:hover {
90 border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
91 }
92 }
93
94 // Active state, and its :hover to override normal :hover
95 &.active > a {
96 &,
97 &:hover,
98 &:focus {
99 color: @nav-tabs-active-link-hover-color;
100 background-color: @nav-tabs-active-link-hover-bg;
101 border: 1px solid @nav-tabs-active-link-hover-border-color;
102 border-bottom-color: transparent;
103 cursor: default;
104 }
105 }
106 }
107 // pulling this in mainly for less shorthand
108 &.nav-justified {
109 .nav-justified();
110 .nav-tabs-justified();
111 }
112 }
113
114
115 // Pills
116 // -------------------------
117 .nav-pills {
118 > li {
119 float: left;
120
121 // Links rendered as pills
122 > a {
123 border-radius: @nav-pills-border-radius;
124 }
125 + li {
126 margin-left: 2px;
127 }
128
129 // Active state
130 &.active > a {
131 &,
132 &:hover,
133 &:focus {
134 color: @nav-pills-active-link-hover-color;
135 background-color: @nav-pills-active-link-hover-bg;
136 }
137 }
138 }
139 }
140
141
142 // Stacked pills
143 .nav-stacked {
144 > li {
145 float: none;
146 + li {
147 margin-top: 2px;
148 margin-left: 0; // no need for this gap between nav items
149 }
150 }
151 }
152
153
154 // Nav variations
155 // --------------------------------------------------
156
157 // Justified nav links
158 // -------------------------
159
160 .nav-justified {
161 width: 100%;
162
163 > li {
164 float: none;
165 > a {
166 text-align: center;
167 margin-bottom: 5px;
168 }
169 }
170
171 > .dropdown .dropdown-menu {
172 top: auto;
173 left: auto;
174 }
175
176 @media (min-width: @screen-sm-min) {
177 > li {
178 display: table-cell;
179 width: 1%;
180 > a {
181 margin-bottom: 0;
182 }
183 }
184 }
185 }
186
187 // Move borders to anchors instead of bottom of list
188 //
189 // Mixin for adding on top the shared `.nav-justified` styles for our tabs
190 .nav-tabs-justified {
191 border-bottom: 0;
192
193 > li > a {
194 // Override margin from .nav-tabs
195 margin-right: 0;
196 border-radius: @border-radius-base;
197 }
198
199 > .active > a,
200 > .active > a:hover,
201 > .active > a:focus {
202 border: 1px solid @nav-tabs-justified-link-border-color;
203 }
204
205 @media (min-width: @screen-sm-min) {
206 > li > a {
207 border-bottom: 1px solid @nav-tabs-justified-link-border-color;
208 border-radius: @border-radius-base @border-radius-base 0 0;
209 }
210 > .active > a,
211 > .active > a:hover,
212 > .active > a:focus {
213 border-bottom-color: @nav-tabs-justified-active-link-border-color;
214 }
215 }
216 }
217
218
219 // Tabbable tabs
220 // -------------------------
221
222 // Hide tabbable panes to start, show them when `.active`
223 .tab-content {
224 > .tab-pane {
225 display: none;
226 }
227 > .active {
228 display: block;
229 }
230 }
231
232
233 // Dropdowns
234 // -------------------------
235
236 // Specific dropdowns
237 .nav-tabs .dropdown-menu {
238 // make dropdown border overlap tab border
239 margin-top: -1px;
240 // Remove the top rounded corners here since there is a hard edge above the menu
241 .border-top-radius(0);
242 }