less-rails-liftkit 0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +7 -0
- data/.travis.yml +5 -0
- data/Gemfile +5 -0
- data/README.md +0 -0
- data/Rakefile +14 -0
- data/less-rails-liftkit.gemspec +19 -0
- data/lib/less/rails/liftkit/engine.rb +13 -0
- data/lib/less/rails/liftkit/version.rb +7 -0
- data/lib/less/rails/liftkit.rb +2 -0
- data/lib/less-rails-liftkit.rb +9 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.blockify.js +86 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.cycle.js +1503 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.dropdown.js +71 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.hashchange.js +390 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.modal.js +133 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.placeholder.js +106 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.stickybox.js +116 -0
- data/vendor/assets/javascripts/lift/liftkit/plugins/jquery.tabs.js +119 -0
- data/vendor/assets/javascripts/lift/liftkit/script.js +59 -0
- data/vendor/assets/javascripts/lift/liftkit/underscore.js +34 -0
- data/vendor/assets/javascripts/lift/liftkit.js +3 -0
- data/vendor/assets/stylesheets/lift/liftkit.css.less +1 -0
- data/vendor/frameworks/lift/liftkit/alerts.less +104 -0
- data/vendor/frameworks/lift/liftkit/buttons.less +160 -0
- data/vendor/frameworks/lift/liftkit/core.less +345 -0
- data/vendor/frameworks/lift/liftkit/fluid.less +93 -0
- data/vendor/frameworks/lift/liftkit/forms.less +401 -0
- data/vendor/frameworks/lift/liftkit/liftkit.less +64 -0
- data/vendor/frameworks/lift/liftkit/modal.less +34 -0
- data/vendor/frameworks/lift/liftkit/navigation.less +159 -0
- data/vendor/frameworks/lift/liftkit/responsive-fixed.less +238 -0
- data/vendor/frameworks/lift/liftkit/responsive-fluid.less +89 -0
- data/vendor/frameworks/lift/liftkit/scaffolding.less +116 -0
- data/vendor/frameworks/lift/liftkit/tables.less +54 -0
- data/vendor/frameworks/lift/liftkit/type.less +272 -0
- data/vendor/frameworks/lift/liftkit.less +1 -0
- metadata +114 -0
@@ -0,0 +1,401 @@
|
|
1
|
+
@extraSpace: (@gridGutterWidth * 2); // For our grid calculations
|
2
|
+
|
3
|
+
/*
|
4
|
+
* 1. Corrects font size not being inherited in all browsers
|
5
|
+
* 2. Addresses margins set differently in IE6/7, FF3/4, S5, Chrome
|
6
|
+
* 3. Improves appearance and consistency in all browsers
|
7
|
+
*/
|
8
|
+
|
9
|
+
button,
|
10
|
+
input,
|
11
|
+
select,
|
12
|
+
textarea {
|
13
|
+
font-size: 100%; /* 1 */
|
14
|
+
margin: 0; /* 2 */
|
15
|
+
vertical-align: baseline; /* 3 */
|
16
|
+
*vertical-align: middle; /* 3 */
|
17
|
+
-webkit-font-smoothing: antialiased;
|
18
|
+
}
|
19
|
+
|
20
|
+
/*
|
21
|
+
* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
|
22
|
+
*/
|
23
|
+
|
24
|
+
button,
|
25
|
+
input {
|
26
|
+
line-height: normal; /* 1 */
|
27
|
+
}
|
28
|
+
|
29
|
+
/*
|
30
|
+
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
31
|
+
* 2. Corrects inability to style clickable 'input' types in iOS
|
32
|
+
* 3. Corrects inner spacing displayed oddly in IE7 without effecting normal text inputs
|
33
|
+
* Known issue: inner spacing remains in IE6
|
34
|
+
*/
|
35
|
+
|
36
|
+
button,
|
37
|
+
input[type="button"],
|
38
|
+
input[type="reset"],
|
39
|
+
input[type="submit"] {
|
40
|
+
cursor: pointer; /* 1 */
|
41
|
+
*overflow: visible; /* 3 */
|
42
|
+
}
|
43
|
+
|
44
|
+
/*
|
45
|
+
* 1. Addresses box sizing set to content-box in IE8/9
|
46
|
+
* 2. Addresses excess padding in IE8/9
|
47
|
+
*/
|
48
|
+
|
49
|
+
input[type="checkbox"],
|
50
|
+
input[type="radio"] {
|
51
|
+
box-sizing: border-box; /* 1 */
|
52
|
+
padding: 0; /* 2 */
|
53
|
+
}
|
54
|
+
|
55
|
+
/*
|
56
|
+
* 1. Addresses appearance set to searchfield in S5, Chrome
|
57
|
+
* 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
58
|
+
*/
|
59
|
+
|
60
|
+
input[type="search"] {
|
61
|
+
-webkit-appearance: textfield; /* 1 */
|
62
|
+
-moz-box-sizing: content-box;
|
63
|
+
-webkit-box-sizing: content-box; /* 2 */
|
64
|
+
box-sizing: content-box;
|
65
|
+
}
|
66
|
+
|
67
|
+
/*
|
68
|
+
* Corrects inner padding displayed oddly in S5, Chrome on OSX
|
69
|
+
*/
|
70
|
+
|
71
|
+
input[type="search"]::-webkit-search-decoration {
|
72
|
+
-webkit-appearance: none;
|
73
|
+
}
|
74
|
+
|
75
|
+
/*
|
76
|
+
* Corrects inner padding and border displayed oddly in FF3/4
|
77
|
+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
78
|
+
*/
|
79
|
+
|
80
|
+
button::-moz-focus-inner,
|
81
|
+
input::-moz-focus-inner {
|
82
|
+
border: 0;
|
83
|
+
padding: 0;
|
84
|
+
}
|
85
|
+
|
86
|
+
|
87
|
+
form {
|
88
|
+
margin: 0 0 @basespace;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Groups of fields with labels on top (legends)
|
92
|
+
fieldset {
|
93
|
+
margin: 0 0 @basespace;
|
94
|
+
padding: @basespace 0 0;
|
95
|
+
border: none;
|
96
|
+
|
97
|
+
legend {
|
98
|
+
border: 0;
|
99
|
+
display: block;
|
100
|
+
font-size: @basesize * 1.5;
|
101
|
+
line-height: 1;
|
102
|
+
color: @typeColor;
|
103
|
+
padding: @basespace 0 0;
|
104
|
+
*margin-left: -10px;
|
105
|
+
*line-height: 1.5; /* IE6-7 */
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
// Parent element that clears floats and wraps labels and fields together
|
110
|
+
form .field {
|
111
|
+
margin-bottom: @basespace;
|
112
|
+
margin-left: -1 * @gridGutterWidth;
|
113
|
+
.clearfix();
|
114
|
+
}
|
115
|
+
|
116
|
+
// Set font for forms
|
117
|
+
label,
|
118
|
+
input,
|
119
|
+
select,
|
120
|
+
textarea {
|
121
|
+
@basesize: 15px;
|
122
|
+
@baseline: 1.3;
|
123
|
+
@basefont: Helvetica, Arial, sans-serif;
|
124
|
+
}
|
125
|
+
|
126
|
+
// Float labels left
|
127
|
+
label {
|
128
|
+
padding-top: 5px;
|
129
|
+
font-size: @basesize;
|
130
|
+
line-height: @baseline;
|
131
|
+
text-align: right;
|
132
|
+
color: @typeColor;
|
133
|
+
.formColumns(3);
|
134
|
+
}
|
135
|
+
|
136
|
+
// Checkboxs and radio buttons
|
137
|
+
input[type=checkbox],
|
138
|
+
input[type=radio] {
|
139
|
+
cursor: pointer;
|
140
|
+
}
|
141
|
+
|
142
|
+
// Inputs, Textareas, Selects
|
143
|
+
input,
|
144
|
+
textarea,
|
145
|
+
select,
|
146
|
+
.uneditable-input {
|
147
|
+
display: inline-block;
|
148
|
+
padding: 7px 7px 6px;
|
149
|
+
font-size: @basesize - 1;
|
150
|
+
line-height: @baseline;
|
151
|
+
color: @typeColor;
|
152
|
+
border: 1px solid @grayLight;
|
153
|
+
.border-radius(3px);
|
154
|
+
.formColumns(5);
|
155
|
+
}
|
156
|
+
|
157
|
+
input[type=search]{
|
158
|
+
padding-right: 0;
|
159
|
+
}
|
160
|
+
|
161
|
+
/* mini reset for non-html5 file types */
|
162
|
+
input[type=checkbox],
|
163
|
+
input[type=radio] {
|
164
|
+
width: auto;
|
165
|
+
height: auto;
|
166
|
+
padding: 0;
|
167
|
+
margin: 2px 5px 0 0;
|
168
|
+
*margin-top: 0; /* IE6-7 */
|
169
|
+
line-height: normal;
|
170
|
+
border: none;
|
171
|
+
}
|
172
|
+
|
173
|
+
input[type=file] {
|
174
|
+
background-color: @white;
|
175
|
+
padding: initial;
|
176
|
+
border: initial;
|
177
|
+
line-height: initial;
|
178
|
+
.box-shadow(none);
|
179
|
+
}
|
180
|
+
|
181
|
+
select,
|
182
|
+
input[type=file] {
|
183
|
+
height: @basespace * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
|
184
|
+
line-height: @baseline * 1.5;
|
185
|
+
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
186
|
+
}
|
187
|
+
|
188
|
+
// Make multiple select elements height not fixed
|
189
|
+
select[multiple] {
|
190
|
+
height: inherit;
|
191
|
+
}
|
192
|
+
|
193
|
+
textarea {
|
194
|
+
overflow: auto;
|
195
|
+
vertical-align: top;
|
196
|
+
height: auto;
|
197
|
+
}
|
198
|
+
|
199
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
200
|
+
:-moz-placeholder {
|
201
|
+
color: @grayLight;
|
202
|
+
}
|
203
|
+
::-webkit-input-placeholder {
|
204
|
+
color: @grayLight;
|
205
|
+
}
|
206
|
+
|
207
|
+
// Focus states
|
208
|
+
input[type=text],
|
209
|
+
textarea {
|
210
|
+
@transition: border linear .2s, box-shadow linear .2s;
|
211
|
+
.transition(@transition);
|
212
|
+
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
213
|
+
}
|
214
|
+
input[type=text]:focus,
|
215
|
+
textarea:focus {
|
216
|
+
outline: 0;
|
217
|
+
border-color: @gray;
|
218
|
+
@shadow: inset 0 1px 3px rgba(0,0,0,.1);
|
219
|
+
.box-shadow(@shadow);
|
220
|
+
}
|
221
|
+
input[type=file]:focus,
|
222
|
+
input[type=checkbox]:focus,
|
223
|
+
select:focus {
|
224
|
+
.box-shadow(none); // override for file inputs
|
225
|
+
outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline
|
226
|
+
}
|
227
|
+
|
228
|
+
// Error styles
|
229
|
+
form .field.error {
|
230
|
+
.border-radius(4px);
|
231
|
+
@error-text: desaturate(@danger, 25%);
|
232
|
+
> label {
|
233
|
+
color: @danger;
|
234
|
+
}
|
235
|
+
span.help-inline {
|
236
|
+
color: @danger;
|
237
|
+
}
|
238
|
+
input,
|
239
|
+
textarea {
|
240
|
+
border-color: @error-text;
|
241
|
+
&:focus {
|
242
|
+
border-color: darken(@error-text, 10%);
|
243
|
+
}
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
// Form element sizes
|
248
|
+
|
249
|
+
// Grid style input sizes
|
250
|
+
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
|
251
|
+
|
252
|
+
.formColumns(@columnSpan: 1) {
|
253
|
+
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
|
254
|
+
display: inline;
|
255
|
+
float: left;
|
256
|
+
margin-left: @gridGutterWidth;
|
257
|
+
.box-sizing();
|
258
|
+
}
|
259
|
+
|
260
|
+
.formOffset(@columnOffset: 1) {
|
261
|
+
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
|
262
|
+
}
|
263
|
+
|
264
|
+
.help-inline,
|
265
|
+
label,
|
266
|
+
input,
|
267
|
+
textarea,
|
268
|
+
select {
|
269
|
+
// Default columns
|
270
|
+
&.s0 { .formColumns(0); }
|
271
|
+
&.s1 { .formColumns(1); }
|
272
|
+
&.s2 { .formColumns(2); }
|
273
|
+
&.s3 { .formColumns(3); }
|
274
|
+
&.s4 { .formColumns(4); }
|
275
|
+
&.s5 { .formColumns(5); }
|
276
|
+
&.s6 { .formColumns(6); }
|
277
|
+
&.s7 { .formColumns(7); }
|
278
|
+
&.s8 { .formColumns(8); }
|
279
|
+
&.s9 { .formColumns(9); }
|
280
|
+
&.s10 { .formColumns(10); }
|
281
|
+
&.s11 { .formColumns(11); }
|
282
|
+
&.s12 { .formColumns(12); }
|
283
|
+
&.s13 { .formColumns(13); }
|
284
|
+
&.s14 { .formColumns(14); }
|
285
|
+
&.s15 { .formColumns(15); }
|
286
|
+
&.s16 { .formColumns(16); }
|
287
|
+
}
|
288
|
+
|
289
|
+
.help-inline,
|
290
|
+
label,
|
291
|
+
input,
|
292
|
+
textarea,
|
293
|
+
select {
|
294
|
+
// Default columns
|
295
|
+
&.o0 { .formOffset(0); }
|
296
|
+
&.o1 { .formOffset(1); }
|
297
|
+
&.o2 { .formOffset(2); }
|
298
|
+
&.o3 { .formOffset(3); }
|
299
|
+
&.o4 { .formOffset(4); }
|
300
|
+
&.o5 { .formOffset(5); }
|
301
|
+
&.o6 { .formOffset(6); }
|
302
|
+
&.o7 { .formOffset(7); }
|
303
|
+
&.o8 { .formOffset(8); }
|
304
|
+
&.o9 { .formOffset(9); }
|
305
|
+
&.o10 { .formOffset(10); }
|
306
|
+
&.o11 { .formOffset(11); }
|
307
|
+
&.o12 { .formOffset(12); }
|
308
|
+
&.o13 { .formOffset(13); }
|
309
|
+
&.o14 { .formOffset(14); }
|
310
|
+
&.o15 { .formOffset(15); }
|
311
|
+
&.o16 { .formOffset(16); }
|
312
|
+
}
|
313
|
+
|
314
|
+
// Disabled and read-only inputs
|
315
|
+
input[disabled],
|
316
|
+
select[disabled],
|
317
|
+
textarea[disabled],
|
318
|
+
input[readonly],
|
319
|
+
select[readonly],
|
320
|
+
textarea[readonly] {
|
321
|
+
background-color: #f9f9f9;
|
322
|
+
border-color: @grayLight;
|
323
|
+
cursor: not-allowed;
|
324
|
+
}
|
325
|
+
|
326
|
+
// Actions (the buttons)
|
327
|
+
.actions {
|
328
|
+
.clearfix();
|
329
|
+
margin: 0 0 @basespace;
|
330
|
+
padding: (@basespace - 1) 0 @basespace;
|
331
|
+
border-top: 1px solid #ddd;
|
332
|
+
input[type="submit"],
|
333
|
+
input[type="button"],
|
334
|
+
button {
|
335
|
+
margin-right: @basespace/2;
|
336
|
+
}
|
337
|
+
.right {
|
338
|
+
float: right;
|
339
|
+
input[type="submit"],
|
340
|
+
input[type="button"],
|
341
|
+
button {
|
342
|
+
margin-right: 0;
|
343
|
+
margin-left: @basespace/2;
|
344
|
+
}
|
345
|
+
}
|
346
|
+
}
|
347
|
+
|
348
|
+
|
349
|
+
// Help Text
|
350
|
+
.help-inline {
|
351
|
+
font-size: @basesize - 1;
|
352
|
+
line-height: @baseline;
|
353
|
+
color: @grayLight;
|
354
|
+
clear: both;
|
355
|
+
display: block;
|
356
|
+
padding-top: 5px;
|
357
|
+
.formOffset(3);
|
358
|
+
*position: relative; /* IE6-7 */
|
359
|
+
*top: -5px; /* IE6-7 */
|
360
|
+
}
|
361
|
+
|
362
|
+
|
363
|
+
form .field.stack {
|
364
|
+
label {
|
365
|
+
padding-bottom: @basespace / 3;
|
366
|
+
display: block;
|
367
|
+
text-align: left;
|
368
|
+
}
|
369
|
+
}
|
370
|
+
|
371
|
+
form.stacked .field {
|
372
|
+
label {
|
373
|
+
padding-bottom: @basespace / 3;
|
374
|
+
display: block;
|
375
|
+
width: 100%;
|
376
|
+
text-align: left;
|
377
|
+
}
|
378
|
+
|
379
|
+
.help-inline {
|
380
|
+
.formOffset(0);
|
381
|
+
}
|
382
|
+
|
383
|
+
}
|
384
|
+
|
385
|
+
.list {
|
386
|
+
.formColumns(5);
|
387
|
+
label {
|
388
|
+
.formColumns(5);
|
389
|
+
.clearfix();
|
390
|
+
text-align: left;
|
391
|
+
font-size: @basesize - 1;
|
392
|
+
margin-left: 0;
|
393
|
+
padding-left: 20px;
|
394
|
+
}
|
395
|
+
input {
|
396
|
+
margin: 2px 5px 0 -18px;
|
397
|
+
}
|
398
|
+
span {
|
399
|
+
display: block;
|
400
|
+
}
|
401
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
/*!
|
2
|
+
* Liftkit
|
3
|
+
* Copyright 2011 Lift Interactive
|
4
|
+
* Licensed under the Apache License v2.0
|
5
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
6
|
+
*/
|
7
|
+
|
8
|
+
@import "liftkit/core.less"; // Must import core.less
|
9
|
+
@import "liftkit/scaffolding.less";
|
10
|
+
@import "liftkit/type.less";
|
11
|
+
@import "liftkit/tables.less";
|
12
|
+
@import "liftkit/forms.less";
|
13
|
+
@import "liftkit/buttons.less";
|
14
|
+
@import "liftkit/alerts.less";
|
15
|
+
@import "liftkit/navigation.less";
|
16
|
+
|
17
|
+
@baseColor: #425eef;
|
18
|
+
@typeColor: @grayDark;
|
19
|
+
@headerColor: @grayDarker;
|
20
|
+
@linkColor: #425eef;
|
21
|
+
@linkColorHover: darken(@linkColor, 15);
|
22
|
+
|
23
|
+
@black: #000;
|
24
|
+
@grayDarker: lighten(@black, 10%);
|
25
|
+
@grayDark: lighten(@black, 25%);
|
26
|
+
@gray: lighten(@black, 50%);
|
27
|
+
@grayLight: lighten(@black, 75%);
|
28
|
+
@grayLighter: lighten(@black, 90%);
|
29
|
+
@white: #fff;
|
30
|
+
|
31
|
+
@primary: #425eef;
|
32
|
+
@secondary: #4297ef;
|
33
|
+
@success: #71b44c;
|
34
|
+
@warning: #f9b53f;
|
35
|
+
@danger: #da5444;
|
36
|
+
|
37
|
+
// Font-Families
|
38
|
+
@serif: Garamond, Georgia, Times, "Times New Roman", sans-serif;
|
39
|
+
@sansserif: Helvetica, Arial, sans-serif;
|
40
|
+
|
41
|
+
// Required for type, tables, forms
|
42
|
+
@basesize: 15px;
|
43
|
+
@baseline: 1.3;
|
44
|
+
@basefont: @sansserif;
|
45
|
+
@baseheaderfont: @sansserif;
|
46
|
+
|
47
|
+
// Required for scaffolding & forms
|
48
|
+
@gridColumns: 16;
|
49
|
+
@gridColumnWidth: 40px;
|
50
|
+
@gridGutterWidth: 20px;
|
51
|
+
@gridMarginWidth: 20px;
|
52
|
+
|
53
|
+
/*!
|
54
|
+
* Put your styles under here.
|
55
|
+
*/
|
56
|
+
|
57
|
+
|
58
|
+
body {
|
59
|
+
background: #ddd;
|
60
|
+
}
|
61
|
+
|
62
|
+
.container {
|
63
|
+
background: #fff;
|
64
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
.modal {
|
2
|
+
display: none;
|
3
|
+
width: 500px;
|
4
|
+
background: #fff;
|
5
|
+
padding: 15px 30px;
|
6
|
+
.border-radius(5px);
|
7
|
+
.box-shadow(0 3px 6px rgba(0,0,0,0.25));
|
8
|
+
|
9
|
+
a.close-modal {
|
10
|
+
position: absolute;
|
11
|
+
top: -14px;
|
12
|
+
right: -14px;
|
13
|
+
display: block;
|
14
|
+
width: 28px;
|
15
|
+
height: 28px;
|
16
|
+
text-indent: -9999px;
|
17
|
+
background: #333;
|
18
|
+
border: 2px solid #fff;
|
19
|
+
.border-radius(20px);
|
20
|
+
.box-shadow(0 1px 3px rgba(0,0,0,0.2));
|
21
|
+
|
22
|
+
&:before {
|
23
|
+
content: "×";
|
24
|
+
font-size: 27px;
|
25
|
+
color: #fff;
|
26
|
+
line-height: 0;
|
27
|
+
text-indent: 0px;
|
28
|
+
font-weight: bold;
|
29
|
+
position: absolute;
|
30
|
+
top: 11px;
|
31
|
+
left: 6px;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
@@ -0,0 +1,159 @@
|
|
1
|
+
//
|
2
|
+
// Navigation
|
3
|
+
|
4
|
+
// using display:inline-block; instead of float:left; in here. if you NEED floats, build a custom menu.
|
5
|
+
|
6
|
+
.nav
|
7
|
+
{
|
8
|
+
margin: 0 0 @basespace;
|
9
|
+
padding: 0;
|
10
|
+
list-style: none;
|
11
|
+
.clearfix();
|
12
|
+
&.center {
|
13
|
+
text-align: center;
|
14
|
+
}
|
15
|
+
> li {
|
16
|
+
margin: 0;
|
17
|
+
display: inline-block;
|
18
|
+
position: relative;
|
19
|
+
> a {
|
20
|
+
display: block;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
a {
|
24
|
+
display: block;
|
25
|
+
color: @linkColor;
|
26
|
+
padding: (@basespace/2) @basespace;
|
27
|
+
line-height: 1;
|
28
|
+
text-decoration: none;
|
29
|
+
.transition(all 0.3s ease-in-out);
|
30
|
+
.border-radius(3px);
|
31
|
+
&:hover {
|
32
|
+
text-decoration: none;
|
33
|
+
background-color: lighten(@black, 90%);
|
34
|
+
}
|
35
|
+
}
|
36
|
+
.active > a {
|
37
|
+
color: @white;
|
38
|
+
background: @linkColor;
|
39
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
40
|
+
}
|
41
|
+
|
42
|
+
// dropdowns
|
43
|
+
li.dropdown {
|
44
|
+
ul {
|
45
|
+
top: @basespace;
|
46
|
+
left: -9999px;
|
47
|
+
height: 0;
|
48
|
+
overflow: hidden;
|
49
|
+
.opacity(0);
|
50
|
+
list-style-type: none;
|
51
|
+
padding: @basespace 0;
|
52
|
+
position: absolute;
|
53
|
+
.transition(opacity 0.3s ease-in-out);
|
54
|
+
a {
|
55
|
+
background: 0;
|
56
|
+
padding: (@basespace/4) @basespace;
|
57
|
+
white-space: nowrap;
|
58
|
+
&:hover {
|
59
|
+
color: @linkColorHover;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
63
|
+
&:hover {
|
64
|
+
ul {
|
65
|
+
left: 0;
|
66
|
+
height: auto;
|
67
|
+
.opacity(100);
|
68
|
+
}
|
69
|
+
> a {
|
70
|
+
// replicate hovered style here so it is retained as pointer goes down into the dropdown list
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
|
76
|
+
// Basic Tabs
|
77
|
+
&.tabs {
|
78
|
+
border-bottom: 1px solid @grayLighter;
|
79
|
+
> li {
|
80
|
+
position: relative; // For the dropdowns mostly
|
81
|
+
top: 1px;
|
82
|
+
> a {
|
83
|
+
padding: (@basespace / 1.5) @basespace;
|
84
|
+
display: inline-block;
|
85
|
+
border: 1px solid transparent;
|
86
|
+
.border-radius(4px 4px 0 0);
|
87
|
+
&:hover {
|
88
|
+
text-decoration: none;
|
89
|
+
background-color: #eee;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
&.active > a {
|
93
|
+
color: @gray;
|
94
|
+
background-color: @white;
|
95
|
+
border: 1px solid #ddd;
|
96
|
+
border-bottom-color: transparent;
|
97
|
+
text-shadow: none;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
// Basic pill nav
|
103
|
+
&.pills {
|
104
|
+
> li{
|
105
|
+
margin: 0;
|
106
|
+
&:first-child {
|
107
|
+
margin-left: -(@basesize/2);
|
108
|
+
}
|
109
|
+
> a {
|
110
|
+
margin: 0;
|
111
|
+
padding: (@basespace/2) @basespace;
|
112
|
+
text-shadow: 0 1px 1px @white;
|
113
|
+
.border-radius(@basespace+5);
|
114
|
+
&:hover {
|
115
|
+
text-decoration: none;
|
116
|
+
background-color: #eee;
|
117
|
+
border-color: #eee #eee #ddd;
|
118
|
+
}
|
119
|
+
}
|
120
|
+
&.active a {
|
121
|
+
background: @linkColor;
|
122
|
+
color: @white;
|
123
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
|
128
|
+
&.vert {
|
129
|
+
a {
|
130
|
+
padding: @basespace/2;
|
131
|
+
.transition(0.25s);
|
132
|
+
|
133
|
+
&:hover {
|
134
|
+
.transition(0s);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
li{
|
139
|
+
display: block;
|
140
|
+
ul {
|
141
|
+
margin: 0 0 0 20px;
|
142
|
+
padding: 0;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
&.focused {
|
146
|
+
> li {
|
147
|
+
ul {
|
148
|
+
display: none;
|
149
|
+
}
|
150
|
+
&.active {
|
151
|
+
ul {
|
152
|
+
display: block;
|
153
|
+
}
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
}
|