source: trip-planner-front/node_modules/bootstrap/less/navs.less@ 6c1585f

Last change on this file since 6c1585f was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

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