scratch – Blame information for rev 58
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
58 | office | 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 | } |