rack-less 2.0.2 → 3.0.0
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 +5 -4
- data/Gemfile +3 -0
- data/Gemfile.lock +15 -19
- data/README.rdoc +9 -7
- data/Rakefile +3 -3
- data/lib/rack/less/base.rb +1 -1
- data/lib/rack/less/config.rb +1 -1
- data/lib/rack/less/response.rb +4 -4
- data/lib/rack/less/source.rb +6 -1
- data/lib/rack/less/version.rb +2 -2
- data/rack-less.gemspec +4 -3
- data/test/app_helper.rb +3 -3
- data/test/bootstrap_test.rb +26 -0
- data/test/config_test.rb +112 -150
- data/test/fixtures/bootstrap_v1.1.0/bootstrap-1.1.0.css +1894 -0
- data/test/fixtures/bootstrap_v1.1.0/bootstrap.less +23 -0
- data/test/fixtures/bootstrap_v1.1.0/forms.less +369 -0
- data/test/fixtures/bootstrap_v1.1.0/patterns.less +683 -0
- data/test/fixtures/bootstrap_v1.1.0/preboot.less +267 -0
- data/test/fixtures/bootstrap_v1.1.0/reset.less +21 -0
- data/test/fixtures/bootstrap_v1.1.0/scaffolding.less +174 -0
- data/test/fixtures/bootstrap_v1.1.0/tables.less +148 -0
- data/test/fixtures/bootstrap_v1.1.0/type.less +185 -0
- data/test/fixtures/sinatra/app/stylesheets/all_compiled.css +7 -3
- data/test/fixtures/sinatra/app/stylesheets/nested/file_compiled.css +6 -2
- data/test/fixtures/sinatra/app/stylesheets/nested/nested_import.less +3 -0
- data/test/fixtures/sinatra/app/stylesheets/nested/really/really.less +5 -3
- data/test/fixtures/sinatra/app/stylesheets/nested/really/really_compiled.css +7 -2
- data/test/fixtures/sinatra/app/stylesheets/nested/really/really_nested_import.less +4 -0
- data/test/fixtures/sinatra/app/stylesheets/normal.less +1 -1
- data/test/fixtures/sinatra/app/stylesheets/normal_compiled.css +6 -2
- data/test/helper.rb +35 -38
- data/test/irb.rb +9 -0
- data/test/options_test.rb +25 -22
- data/test/request_test.rb +86 -74
- data/test/response_test.rb +6 -4
- data/test/sinatra_test.rb +38 -37
- data/test/source_test.rb +128 -114
- metadata +57 -34
- data/.bundle/config +0 -2
- data/test/env.rb +0 -9
@@ -0,0 +1,23 @@
|
|
1
|
+
/*!
|
2
|
+
* Bootstrap v1.1.0
|
3
|
+
*
|
4
|
+
* Copyright 2011 Twitter, Inc
|
5
|
+
* Licensed under the Apache License v2.0
|
6
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
7
|
+
*
|
8
|
+
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
9
|
+
* Date: Mon Aug 22 23:50:35 PDT 2011
|
10
|
+
*/
|
11
|
+
|
12
|
+
// CSS Reset
|
13
|
+
@import "reset.less";
|
14
|
+
|
15
|
+
// Core
|
16
|
+
@import "preboot.less";
|
17
|
+
@import "scaffolding.less";
|
18
|
+
|
19
|
+
// Styled patterns and elements
|
20
|
+
@import "type.less";
|
21
|
+
@import "forms.less";
|
22
|
+
@import "tables.less";
|
23
|
+
@import "patterns.less";
|
@@ -0,0 +1,369 @@
|
|
1
|
+
/* Forms.less
|
2
|
+
* Base styles for various input types, form layouts, and states
|
3
|
+
* ------------------------------------------------------------- */
|
4
|
+
|
5
|
+
|
6
|
+
// FORM STYLES
|
7
|
+
// -----------
|
8
|
+
|
9
|
+
form {
|
10
|
+
margin-bottom: @baseline;
|
11
|
+
|
12
|
+
// Groups of fields with labels on top (legends)
|
13
|
+
fieldset {
|
14
|
+
margin-bottom: @baseline;
|
15
|
+
padding-top: @baseline;
|
16
|
+
legend {
|
17
|
+
display: block;
|
18
|
+
margin-left: 150px;
|
19
|
+
font-size: 20px;
|
20
|
+
line-height: 1;
|
21
|
+
*margin: 0 0 5px 145px; /* IE6-7 */
|
22
|
+
*line-height: 1.5; /* IE6-7 */
|
23
|
+
color: @grayDark;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
// Parent element that clears floats and wraps labels and fields together
|
28
|
+
.clearfix {
|
29
|
+
margin-bottom: @baseline;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Set font for forms
|
33
|
+
label, input, select, textarea {
|
34
|
+
#font > .sans-serif(normal,13px,normal);
|
35
|
+
}
|
36
|
+
|
37
|
+
// Float labels left
|
38
|
+
label {
|
39
|
+
padding-top: 6px;
|
40
|
+
font-size: 13px;
|
41
|
+
line-height: 18px;
|
42
|
+
float: left;
|
43
|
+
width: 130px;
|
44
|
+
text-align: right;
|
45
|
+
color: @grayDark;
|
46
|
+
}
|
47
|
+
|
48
|
+
// Shift over the inside div to align all label's relevant content
|
49
|
+
div.input {
|
50
|
+
margin-left: 150px;
|
51
|
+
}
|
52
|
+
|
53
|
+
// Checkboxs and radio buttons
|
54
|
+
input[type=checkbox],
|
55
|
+
input[type=radio] {
|
56
|
+
cursor: pointer;
|
57
|
+
}
|
58
|
+
|
59
|
+
// Inputs, Textareas, Selects
|
60
|
+
input[type=text],
|
61
|
+
input[type=password],
|
62
|
+
textarea,
|
63
|
+
select,
|
64
|
+
.uneditable-input {
|
65
|
+
display: inline-block;
|
66
|
+
width: 210px;
|
67
|
+
margin: 0;
|
68
|
+
padding: 4px;
|
69
|
+
font-size: 13px;
|
70
|
+
line-height: @baseline;
|
71
|
+
height: @baseline;
|
72
|
+
color: @gray;
|
73
|
+
border: 1px solid #ccc;
|
74
|
+
.border-radius(3px);
|
75
|
+
}
|
76
|
+
select,
|
77
|
+
input[type=file] {
|
78
|
+
height: @baseline * 1.5;
|
79
|
+
line-height: @baseline * 1.5;
|
80
|
+
}
|
81
|
+
textarea {
|
82
|
+
height: auto;
|
83
|
+
}
|
84
|
+
.uneditable-input {
|
85
|
+
background-color: #eee;
|
86
|
+
display: block;
|
87
|
+
border-color: #ccc;
|
88
|
+
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
|
89
|
+
}
|
90
|
+
|
91
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
92
|
+
:-moz-placeholder {
|
93
|
+
color: @grayLight;
|
94
|
+
}
|
95
|
+
::-webkit-input-placeholder {
|
96
|
+
color: @grayLight;
|
97
|
+
}
|
98
|
+
|
99
|
+
// Focus states
|
100
|
+
input[type=text],
|
101
|
+
input[type=password],
|
102
|
+
select, textarea {
|
103
|
+
@transition: border linear .2s, box-shadow linear .2s;
|
104
|
+
.transition(@transition);
|
105
|
+
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
|
106
|
+
}
|
107
|
+
input[type=text]:focus,
|
108
|
+
input[type=password]:focus,
|
109
|
+
textarea:focus {
|
110
|
+
outline: none;
|
111
|
+
border-color: rgba(82,168,236,.8);
|
112
|
+
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
|
113
|
+
.box-shadow(@shadow);
|
114
|
+
}
|
115
|
+
|
116
|
+
// Error styles
|
117
|
+
div.error {
|
118
|
+
background: lighten(@red, 57%);
|
119
|
+
padding: 10px 0;
|
120
|
+
margin: -10px 0 10px;
|
121
|
+
.border-radius(4px);
|
122
|
+
@error-text: desaturate(lighten(@red, 25%), 25%);
|
123
|
+
> label,
|
124
|
+
span.help-inline,
|
125
|
+
span.help-block {
|
126
|
+
color: @red;
|
127
|
+
}
|
128
|
+
input[type=text],
|
129
|
+
input[type=password],
|
130
|
+
textarea {
|
131
|
+
border-color: @error-text;
|
132
|
+
.box-shadow(0 0 3px rgba(171,41,32,.25));
|
133
|
+
&:focus {
|
134
|
+
border-color: darken(@error-text, 10%);
|
135
|
+
.box-shadow(0 0 6px rgba(171,41,32,.5));
|
136
|
+
}
|
137
|
+
}
|
138
|
+
.input-prepend,
|
139
|
+
.input-append {
|
140
|
+
span.add-on {
|
141
|
+
background: lighten(@red, 50%);
|
142
|
+
border-color: @error-text;
|
143
|
+
color: darken(@error-text, 10%);
|
144
|
+
}
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
// Form element sizes
|
149
|
+
.input-mini, input.mini, textarea.mini, select.mini {
|
150
|
+
width: 60px;
|
151
|
+
}
|
152
|
+
.input-small, input.small, textarea.small, select.small {
|
153
|
+
width: 90px;
|
154
|
+
}
|
155
|
+
.input-medium, input.medium, textarea.medium, select.medium {
|
156
|
+
width: 150px;
|
157
|
+
}
|
158
|
+
.input-large, input.large, textarea.large, select.large {
|
159
|
+
width: 210px;
|
160
|
+
}
|
161
|
+
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
|
162
|
+
width: 270px;
|
163
|
+
}
|
164
|
+
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
|
165
|
+
width: 530px;
|
166
|
+
}
|
167
|
+
textarea.xxlarge {
|
168
|
+
overflow-y: scroll;
|
169
|
+
}
|
170
|
+
|
171
|
+
// Turn off focus for disabled (read-only) form elements
|
172
|
+
input[readonly]:focus,
|
173
|
+
textarea[readonly]:focus,
|
174
|
+
input.disabled {
|
175
|
+
background: #f5f5f5;
|
176
|
+
border-color: #ddd;
|
177
|
+
.box-shadow(none);
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
// Actions (the buttons)
|
182
|
+
.actions {
|
183
|
+
background: #f5f5f5;
|
184
|
+
margin-top: @baseline;
|
185
|
+
margin-bottom: @baseline;
|
186
|
+
padding: (@baseline - 1) 20px @baseline 150px;
|
187
|
+
border-top: 1px solid #ddd;
|
188
|
+
.border-radius(0 0 3px 3px);
|
189
|
+
.secondary-action {
|
190
|
+
float: right;
|
191
|
+
a {
|
192
|
+
line-height: 30px;
|
193
|
+
&:hover {
|
194
|
+
text-decoration: underline;
|
195
|
+
}
|
196
|
+
}
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
// Help Text
|
201
|
+
.help-inline,
|
202
|
+
.help-block {
|
203
|
+
font-size: 12px;
|
204
|
+
line-height: @baseline;
|
205
|
+
color: @grayLight;
|
206
|
+
}
|
207
|
+
.help-inline {
|
208
|
+
padding-left: 5px;
|
209
|
+
*position: relative; /* IE6-7 */
|
210
|
+
*top: -5px; /* IE6-7 */
|
211
|
+
}
|
212
|
+
|
213
|
+
// Big blocks of help text
|
214
|
+
.help-block {
|
215
|
+
display: block;
|
216
|
+
max-width: 600px;
|
217
|
+
}
|
218
|
+
|
219
|
+
// Inline Fields (input fields that appear as inline objects
|
220
|
+
.inline-inputs {
|
221
|
+
color: @gray;
|
222
|
+
span, input[type=text] {
|
223
|
+
display: inline-block;
|
224
|
+
}
|
225
|
+
input.mini {
|
226
|
+
width: 60px;
|
227
|
+
}
|
228
|
+
input.small {
|
229
|
+
width: 90px;
|
230
|
+
}
|
231
|
+
span {
|
232
|
+
padding: 0 2px 0 1px;
|
233
|
+
}
|
234
|
+
}
|
235
|
+
|
236
|
+
// Allow us to put symbols and text within the input field for a cleaner look
|
237
|
+
.input-prepend,
|
238
|
+
.input-append {
|
239
|
+
input[type=text],
|
240
|
+
input[type=password] {
|
241
|
+
.border-radius(0 3px 3px 0);
|
242
|
+
}
|
243
|
+
.add-on {
|
244
|
+
background: #f5f5f5;
|
245
|
+
float: left;
|
246
|
+
display: block;
|
247
|
+
width: auto;
|
248
|
+
min-width: 16px;
|
249
|
+
padding: 4px 4px 4px 5px;
|
250
|
+
color: @grayLight;
|
251
|
+
font-weight: normal;
|
252
|
+
line-height: 18px;
|
253
|
+
height: 18px;
|
254
|
+
text-align: center;
|
255
|
+
text-shadow: 0 1px 0 #fff;
|
256
|
+
border: 1px solid #ccc;
|
257
|
+
border-right-width: 0;
|
258
|
+
.border-radius(3px 0 0 3px);
|
259
|
+
}
|
260
|
+
.active {
|
261
|
+
background: lighten(@green, 30);
|
262
|
+
border-color: @green;
|
263
|
+
}
|
264
|
+
}
|
265
|
+
|
266
|
+
.input-prepend {
|
267
|
+
.add-on {
|
268
|
+
*margin-top: 1px; /* IE6-7 */
|
269
|
+
}
|
270
|
+
}
|
271
|
+
|
272
|
+
.input-append {
|
273
|
+
input[type=text],
|
274
|
+
input[type=password] {
|
275
|
+
float: left;
|
276
|
+
.border-radius(3px 0 0 3px);
|
277
|
+
}
|
278
|
+
.add-on {
|
279
|
+
.border-radius(0 3px 3px 0);
|
280
|
+
border-right-width: 1px;
|
281
|
+
border-left-width: 0;
|
282
|
+
}
|
283
|
+
}
|
284
|
+
|
285
|
+
// Stacked options for forms (radio buttons or checkboxes)
|
286
|
+
.inputs-list {
|
287
|
+
margin: 0 0 5px;
|
288
|
+
width: 100%;
|
289
|
+
li {
|
290
|
+
display: block;
|
291
|
+
padding: 0;
|
292
|
+
width: 100%;
|
293
|
+
label {
|
294
|
+
display: block;
|
295
|
+
float: none;
|
296
|
+
width: auto;
|
297
|
+
padding: 0;
|
298
|
+
line-height: @baseline;
|
299
|
+
text-align: left;
|
300
|
+
white-space: normal;
|
301
|
+
strong {
|
302
|
+
color: @gray;
|
303
|
+
}
|
304
|
+
small {
|
305
|
+
font-size: 12px;
|
306
|
+
font-weight: normal;
|
307
|
+
}
|
308
|
+
}
|
309
|
+
ul.inputs-list {
|
310
|
+
margin-left: 25px;
|
311
|
+
margin-bottom: 10px;
|
312
|
+
padding-top: 0;
|
313
|
+
}
|
314
|
+
&:first-child {
|
315
|
+
padding-top: 5px;
|
316
|
+
}
|
317
|
+
}
|
318
|
+
input[type=radio],
|
319
|
+
input[type=checkbox] {
|
320
|
+
margin-bottom: 0;
|
321
|
+
}
|
322
|
+
}
|
323
|
+
|
324
|
+
// Stacked forms
|
325
|
+
form.form-stacked {
|
326
|
+
padding-left: 20px;
|
327
|
+
fieldset {
|
328
|
+
padding-top: @baseline / 2;
|
329
|
+
}
|
330
|
+
legend {
|
331
|
+
margin-left: 0;
|
332
|
+
}
|
333
|
+
label {
|
334
|
+
display: block;
|
335
|
+
float: none;
|
336
|
+
width: auto;
|
337
|
+
font-weight: bold;
|
338
|
+
text-align: left;
|
339
|
+
line-height: 20px;
|
340
|
+
padding-top: 0;
|
341
|
+
}
|
342
|
+
.clearfix {
|
343
|
+
margin-bottom: @baseline / 2;
|
344
|
+
div.input {
|
345
|
+
margin-left: 0;
|
346
|
+
}
|
347
|
+
}
|
348
|
+
.inputs-list {
|
349
|
+
margin-bottom: 0;
|
350
|
+
li {
|
351
|
+
padding-top: 0;
|
352
|
+
label {
|
353
|
+
font-weight: normal;
|
354
|
+
padding-top: 0;
|
355
|
+
}
|
356
|
+
}
|
357
|
+
}
|
358
|
+
div.error {
|
359
|
+
padding-top: 10px;
|
360
|
+
padding-bottom: 10px;
|
361
|
+
padding-left: 10px;
|
362
|
+
margin-top: 0;
|
363
|
+
margin-left: -10px;
|
364
|
+
}
|
365
|
+
.actions {
|
366
|
+
margin-left: -20px;
|
367
|
+
padding-left: 20px;
|
368
|
+
}
|
369
|
+
}
|
@@ -0,0 +1,683 @@
|
|
1
|
+
/* Patterns.less
|
2
|
+
* Repeatable UI elements outside the base styles provided from the scaffolding
|
3
|
+
* ---------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
|
6
|
+
// TOPBAR
|
7
|
+
// ------
|
8
|
+
|
9
|
+
// Topbar for Branding and Nav
|
10
|
+
.topbar {
|
11
|
+
height: 40px;
|
12
|
+
position: fixed;
|
13
|
+
top: 0;
|
14
|
+
left: 0;
|
15
|
+
right: 0;
|
16
|
+
z-index: 10000;
|
17
|
+
overflow: visible;
|
18
|
+
|
19
|
+
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
20
|
+
.fill {
|
21
|
+
background:#222;
|
22
|
+
#gradient > .vertical(#333, #222);
|
23
|
+
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
24
|
+
.box-shadow(@shadow);
|
25
|
+
}
|
26
|
+
|
27
|
+
// Links get text shadow
|
28
|
+
a {
|
29
|
+
color: @grayLight;
|
30
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
31
|
+
}
|
32
|
+
|
33
|
+
// Hover and active states
|
34
|
+
a:hover,
|
35
|
+
ul li.active a {
|
36
|
+
background-color: #333;
|
37
|
+
background-color: rgba(255,255,255,.05);
|
38
|
+
color: @white;
|
39
|
+
text-decoration: none;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Website name
|
43
|
+
h3 {
|
44
|
+
position:relative;
|
45
|
+
a {
|
46
|
+
float: left;
|
47
|
+
display: block;
|
48
|
+
padding: 8px 20px 12px;
|
49
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
50
|
+
color: @white;
|
51
|
+
font-size: 20px;
|
52
|
+
font-weight: 200;
|
53
|
+
line-height: 1;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
// Search Form
|
58
|
+
form {
|
59
|
+
float: left;
|
60
|
+
margin: 5px 0 0 0;
|
61
|
+
position: relative;
|
62
|
+
.opacity(100);
|
63
|
+
input {
|
64
|
+
background-color: #444;
|
65
|
+
background-color: rgba(255,255,255,.3);
|
66
|
+
#font > .sans-serif(13px, normal, 1);
|
67
|
+
width: 220px;
|
68
|
+
padding: 4px 9px;
|
69
|
+
color: #fff;
|
70
|
+
color: rgba(255,255,255,.75);
|
71
|
+
border: 1px solid #111;
|
72
|
+
.border-radius(4px);
|
73
|
+
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
74
|
+
.box-shadow(@shadow);
|
75
|
+
.transition(none);
|
76
|
+
|
77
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
78
|
+
&:-moz-placeholder {
|
79
|
+
color: @grayLighter;
|
80
|
+
}
|
81
|
+
&::-webkit-input-placeholder {
|
82
|
+
color: @grayLighter;
|
83
|
+
}
|
84
|
+
// Hover states
|
85
|
+
&:hover {
|
86
|
+
background-color: @grayLight;
|
87
|
+
background-color: rgba(255,255,255,.5);
|
88
|
+
color: #fff;
|
89
|
+
}
|
90
|
+
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
91
|
+
&:focus,
|
92
|
+
&.focused {
|
93
|
+
outline: none;
|
94
|
+
background-color: #fff;
|
95
|
+
color: @grayDark;
|
96
|
+
text-shadow: 0 1px 0 #fff;
|
97
|
+
border: 0;
|
98
|
+
padding: 5px 10px;
|
99
|
+
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
// Navigation
|
105
|
+
ul {
|
106
|
+
display: block;
|
107
|
+
float: left;
|
108
|
+
margin: 0 10px 0 0;
|
109
|
+
position: relative;
|
110
|
+
&.secondary-nav {
|
111
|
+
float: right;
|
112
|
+
margin-left: 10px;
|
113
|
+
margin-right: 0;
|
114
|
+
}
|
115
|
+
li {
|
116
|
+
display: block;
|
117
|
+
float: left;
|
118
|
+
font-size: 13px;
|
119
|
+
a {
|
120
|
+
display: block;
|
121
|
+
float: none;
|
122
|
+
padding: 10px 10px 11px;
|
123
|
+
line-height: 19px;
|
124
|
+
text-decoration: none;
|
125
|
+
&:hover {
|
126
|
+
color: #fff;
|
127
|
+
text-decoration: none;
|
128
|
+
}
|
129
|
+
}
|
130
|
+
&.active a {
|
131
|
+
background-color: #222;
|
132
|
+
background-color: rgba(0,0,0,.5);
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
// Dropdowns
|
137
|
+
&.primary-nav li ul {
|
138
|
+
left: 0;
|
139
|
+
}
|
140
|
+
&.secondary-nav li ul {
|
141
|
+
right: 0;
|
142
|
+
}
|
143
|
+
li.menu {
|
144
|
+
position: relative;
|
145
|
+
a.menu {
|
146
|
+
&:after {
|
147
|
+
width: 0px;
|
148
|
+
height: 0px;
|
149
|
+
display: inline-block;
|
150
|
+
content: "↓";
|
151
|
+
text-indent: -99999px;
|
152
|
+
vertical-align: top;
|
153
|
+
margin-top: 8px;
|
154
|
+
margin-left: 4px;
|
155
|
+
border-left: 4px solid transparent;
|
156
|
+
border-right: 4px solid transparent;
|
157
|
+
border-top: 4px solid #fff;
|
158
|
+
.opacity(50);
|
159
|
+
}
|
160
|
+
}
|
161
|
+
&.open {
|
162
|
+
a.menu,
|
163
|
+
a:hover {
|
164
|
+
background-color: #444;
|
165
|
+
background-color: rgba(255,255,255,.1);
|
166
|
+
*background-color: #444; /* IE6-7 */
|
167
|
+
color: #fff;
|
168
|
+
}
|
169
|
+
ul {
|
170
|
+
display: block;
|
171
|
+
li {
|
172
|
+
a {
|
173
|
+
background-color: transparent;
|
174
|
+
font-weight: normal;
|
175
|
+
&:hover {
|
176
|
+
background-color: rgba(255,255,255,.1);
|
177
|
+
*background-color: #444; /* IE6-7 */
|
178
|
+
color: #fff;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
&.active a {
|
182
|
+
background-color: rgba(255,255,255,.1);
|
183
|
+
font-weight: bold;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
}
|
187
|
+
}
|
188
|
+
}
|
189
|
+
li ul {
|
190
|
+
background-color: #333;
|
191
|
+
float: left;
|
192
|
+
display: none;
|
193
|
+
position: absolute;
|
194
|
+
top: 40px;
|
195
|
+
min-width: 160px;
|
196
|
+
max-width: 220px;
|
197
|
+
_width: 160px;
|
198
|
+
margin-left: 0;
|
199
|
+
margin-right: 0;
|
200
|
+
padding: 0;
|
201
|
+
text-align: left;
|
202
|
+
border: 0;
|
203
|
+
zoom: 1;
|
204
|
+
.border-radius(0 0 5px 5px);
|
205
|
+
.box-shadow(0 1px 2px rgba(0,0,0,0.6));
|
206
|
+
li {
|
207
|
+
float: none;
|
208
|
+
clear: both;
|
209
|
+
display: block;
|
210
|
+
background: none;
|
211
|
+
font-size: 12px;
|
212
|
+
a {
|
213
|
+
display: block;
|
214
|
+
padding: 6px 15px;
|
215
|
+
clear: both;
|
216
|
+
font-weight: normal;
|
217
|
+
line-height: 19px;
|
218
|
+
color: #bbb;
|
219
|
+
&:hover {
|
220
|
+
background-color: #333;
|
221
|
+
background-color: rgba(255,255,255,.25);
|
222
|
+
color: #fff;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
// Dividers (basically an hr)
|
227
|
+
&.divider {
|
228
|
+
height: 1px;
|
229
|
+
overflow: hidden;
|
230
|
+
background: #222;
|
231
|
+
background: rgba(0,0,0,.2);
|
232
|
+
border-bottom: 1px solid rgba(255,255,255,.1);
|
233
|
+
margin: 5px 0;
|
234
|
+
}
|
235
|
+
|
236
|
+
// Section separaters
|
237
|
+
span {
|
238
|
+
clear: both;
|
239
|
+
display: block;
|
240
|
+
background: rgba(0,0,0,.2);
|
241
|
+
padding: 6px 15px;
|
242
|
+
cursor: default;
|
243
|
+
color: @gray;
|
244
|
+
border-top: 1px solid rgba(0,0,0,.2);
|
245
|
+
}
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
}
|
250
|
+
|
251
|
+
|
252
|
+
// PAGE HEADERS
|
253
|
+
// ------------
|
254
|
+
|
255
|
+
.hero-unit {
|
256
|
+
background-color: #f5f5f5;
|
257
|
+
margin-top: 60px;
|
258
|
+
margin-bottom: 30px;
|
259
|
+
padding: 60px;
|
260
|
+
.border-radius(6px);
|
261
|
+
h1 {
|
262
|
+
margin-bottom: 0;
|
263
|
+
font-size: 60px;
|
264
|
+
line-height: 1;
|
265
|
+
letter-spacing: -1px;
|
266
|
+
}
|
267
|
+
p {
|
268
|
+
font-size: 18px;
|
269
|
+
font-weight: 200;
|
270
|
+
line-height: @baseline * 1.5;
|
271
|
+
}
|
272
|
+
}
|
273
|
+
footer {
|
274
|
+
margin-top: @baseline - 1;
|
275
|
+
padding-top: @baseline - 1;
|
276
|
+
border-top: 1px solid #eee;
|
277
|
+
}
|
278
|
+
|
279
|
+
// PAGE HEADERS
|
280
|
+
// ------------
|
281
|
+
|
282
|
+
.page-header {
|
283
|
+
margin-bottom: @baseline - 1;
|
284
|
+
border-bottom: 1px solid #ddd;
|
285
|
+
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
286
|
+
h1 {
|
287
|
+
margin-bottom: (@baseline / 2) - 1px;
|
288
|
+
}
|
289
|
+
}
|
290
|
+
|
291
|
+
|
292
|
+
// ERROR STYLES
|
293
|
+
// ------------
|
294
|
+
|
295
|
+
// One-liner alert bars
|
296
|
+
.alert-message {
|
297
|
+
// TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
|
298
|
+
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
|
299
|
+
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
|
300
|
+
background-color: @grayLighter;
|
301
|
+
margin-bottom: @baseline;
|
302
|
+
padding: 8px 15px;
|
303
|
+
color: #fff;
|
304
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
305
|
+
border-bottom: 1px solid rgba(0,0,0,.3);
|
306
|
+
.border-radius(4px);
|
307
|
+
p {
|
308
|
+
color: #fff;
|
309
|
+
margin-bottom: 0;
|
310
|
+
+ p {
|
311
|
+
margin-top: 5px;
|
312
|
+
}
|
313
|
+
}
|
314
|
+
&.error {
|
315
|
+
#gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
|
316
|
+
border-bottom-color: lighten(@red, 5%);
|
317
|
+
}
|
318
|
+
&.warning {
|
319
|
+
#gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
|
320
|
+
border-bottom-color: @yellow;
|
321
|
+
}
|
322
|
+
&.success {
|
323
|
+
#gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
|
324
|
+
border-bottom-color: @green;
|
325
|
+
}
|
326
|
+
&.info {
|
327
|
+
#gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
|
328
|
+
border-bottom-color: @blue;
|
329
|
+
}
|
330
|
+
.close {
|
331
|
+
float: right;
|
332
|
+
margin-top: -2px;
|
333
|
+
color: #000;
|
334
|
+
font-size: 20px;
|
335
|
+
font-weight: bold;
|
336
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
337
|
+
.opacity(20);
|
338
|
+
&:hover {
|
339
|
+
text-decoration: none;
|
340
|
+
.opacity(40);
|
341
|
+
}
|
342
|
+
}
|
343
|
+
}
|
344
|
+
|
345
|
+
// Block-level Alerts
|
346
|
+
.block-message {
|
347
|
+
margin-bottom: @baseline;
|
348
|
+
padding: 14px;
|
349
|
+
color: @grayDark;
|
350
|
+
color: rgba(0,0,0,.8);
|
351
|
+
*color: @grayDark; /* IE 6-7 */
|
352
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.25);
|
353
|
+
.border-radius(6px);
|
354
|
+
p {
|
355
|
+
color: @grayDark;
|
356
|
+
color: rgba(0,0,0,.8);
|
357
|
+
*color: @grayDark; /* IE 6-7 */
|
358
|
+
margin-right: 30px;
|
359
|
+
margin-bottom: 0;
|
360
|
+
}
|
361
|
+
ul {
|
362
|
+
margin-bottom: 0;
|
363
|
+
}
|
364
|
+
strong {
|
365
|
+
display: block;
|
366
|
+
}
|
367
|
+
&.error {
|
368
|
+
background: lighten(@red, 55%);
|
369
|
+
border: 1px solid lighten(@red, 50%);
|
370
|
+
}
|
371
|
+
&.warning {
|
372
|
+
background: lighten(@yellow, 35%);
|
373
|
+
border: 1px solid lighten(@yellow, 25%)
|
374
|
+
}
|
375
|
+
&.success {
|
376
|
+
background: lighten(@green, 45%);
|
377
|
+
border: 1px solid lighten(@green, 35%)
|
378
|
+
}
|
379
|
+
&.info {
|
380
|
+
background: lighten(@blue, 45%);
|
381
|
+
border: 1px solid lighten(@blue, 40%);
|
382
|
+
}
|
383
|
+
}
|
384
|
+
|
385
|
+
|
386
|
+
// NAVIGATION
|
387
|
+
// ----------
|
388
|
+
|
389
|
+
// Common tab and pill styles
|
390
|
+
.tabs,
|
391
|
+
.pills {
|
392
|
+
margin: 0 0 20px;
|
393
|
+
padding: 0;
|
394
|
+
.clearfix();
|
395
|
+
li {
|
396
|
+
display: inline;
|
397
|
+
a {
|
398
|
+
float: left;
|
399
|
+
width: auto;
|
400
|
+
}
|
401
|
+
}
|
402
|
+
}
|
403
|
+
|
404
|
+
// Basic Tabs
|
405
|
+
.tabs {
|
406
|
+
width: 100%;
|
407
|
+
border-bottom: 1px solid @grayLight;
|
408
|
+
li {
|
409
|
+
a {
|
410
|
+
margin-bottom: -1px;
|
411
|
+
margin-right: 2px;
|
412
|
+
padding: 0 15px;
|
413
|
+
line-height: (@baseline * 2) - 1;
|
414
|
+
.border-radius(3px 3px 0 0);
|
415
|
+
&:hover {
|
416
|
+
background-color: @grayLighter;
|
417
|
+
border-bottom: 1px solid @grayLight;
|
418
|
+
}
|
419
|
+
}
|
420
|
+
&.active a {
|
421
|
+
background-color: #fff;
|
422
|
+
padding: 0 14px;
|
423
|
+
border: 1px solid #ccc;
|
424
|
+
border-bottom: 0;
|
425
|
+
color: @gray;
|
426
|
+
}
|
427
|
+
}
|
428
|
+
}
|
429
|
+
|
430
|
+
// Basic pill nav
|
431
|
+
.pills {
|
432
|
+
li {
|
433
|
+
a {
|
434
|
+
margin: 5px 3px 5px 0;
|
435
|
+
padding: 0 15px;
|
436
|
+
text-shadow: 0 1px 1px #fff;
|
437
|
+
line-height: 30px;
|
438
|
+
.border-radius(15px);
|
439
|
+
&:hover {
|
440
|
+
background: @linkColorHover;
|
441
|
+
color: #fff;
|
442
|
+
text-decoration: none;
|
443
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
444
|
+
}
|
445
|
+
}
|
446
|
+
&.active a {
|
447
|
+
background: @linkColor;
|
448
|
+
color: #fff;
|
449
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
450
|
+
}
|
451
|
+
}
|
452
|
+
}
|
453
|
+
|
454
|
+
|
455
|
+
// PAGINATION
|
456
|
+
// ----------
|
457
|
+
|
458
|
+
.pagination {
|
459
|
+
height: @baseline * 2;
|
460
|
+
margin: @baseline 0;
|
461
|
+
ul {
|
462
|
+
float: left;
|
463
|
+
margin: 0;
|
464
|
+
border: 1px solid #ddd;
|
465
|
+
border: 1px solid rgba(0,0,0,.15);
|
466
|
+
.border-radius(3px);
|
467
|
+
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
468
|
+
li {
|
469
|
+
display: inline;
|
470
|
+
a {
|
471
|
+
float: left;
|
472
|
+
padding: 0 14px;
|
473
|
+
line-height: (@baseline * 2) - 2;
|
474
|
+
border-right: 1px solid;
|
475
|
+
border-right-color: #ddd;
|
476
|
+
border-right-color: rgba(0,0,0,.15);
|
477
|
+
*border-right-color: #ddd; /* IE6-7 */
|
478
|
+
text-decoration: none;
|
479
|
+
}
|
480
|
+
a:hover,
|
481
|
+
&.active a {
|
482
|
+
background-color: lighten(@blue, 45%);
|
483
|
+
}
|
484
|
+
&.disabled a,
|
485
|
+
&.disabled a:hover {
|
486
|
+
background-color: none;
|
487
|
+
color: @grayLight;
|
488
|
+
}
|
489
|
+
&.next a {
|
490
|
+
border: 0;
|
491
|
+
}
|
492
|
+
}
|
493
|
+
}
|
494
|
+
}
|
495
|
+
|
496
|
+
|
497
|
+
// WELLS
|
498
|
+
// -----
|
499
|
+
|
500
|
+
.well {
|
501
|
+
background-color: #f5f5f5;
|
502
|
+
margin-bottom: 20px;
|
503
|
+
padding: 19px;
|
504
|
+
min-height: 20px;
|
505
|
+
border: 1px solid #eee;
|
506
|
+
border: 1px solid rgba(0,0,0,.05);
|
507
|
+
.border-radius(4px);
|
508
|
+
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
509
|
+
}
|
510
|
+
|
511
|
+
|
512
|
+
// MODALS
|
513
|
+
// ------
|
514
|
+
|
515
|
+
.modal-backdrop {
|
516
|
+
background-color: rgba(0,0,0,.5);
|
517
|
+
position: fixed;
|
518
|
+
top: 0;
|
519
|
+
left: 0;
|
520
|
+
right: 0;
|
521
|
+
bottom: 0;
|
522
|
+
z-index: 1000;
|
523
|
+
}
|
524
|
+
.modal {
|
525
|
+
position: fixed;
|
526
|
+
top: 50%;
|
527
|
+
left: 50%;
|
528
|
+
z-index: 2000;
|
529
|
+
width: 560px;
|
530
|
+
margin: -280px 0 0 -250px;
|
531
|
+
background-color: @white;
|
532
|
+
border: 1px solid #999;
|
533
|
+
border: 1px solid rgba(0,0,0,.3);
|
534
|
+
*border: 1px solid #999; /* IE6-7 */
|
535
|
+
.border-radius(6px);
|
536
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
537
|
+
.background-clip(padding-box);
|
538
|
+
.modal-header {
|
539
|
+
border-bottom: 1px solid #eee;
|
540
|
+
padding: 5px 20px;
|
541
|
+
.close {
|
542
|
+
position: absolute;
|
543
|
+
right: 10px;
|
544
|
+
top: 10px;
|
545
|
+
color: #999;
|
546
|
+
line-height:10px;
|
547
|
+
font-size: 18px;
|
548
|
+
}
|
549
|
+
}
|
550
|
+
.modal-body {
|
551
|
+
padding: 20px;
|
552
|
+
}
|
553
|
+
.modal-footer {
|
554
|
+
background-color: #f5f5f5;
|
555
|
+
padding: 14px 20px 15px;
|
556
|
+
border-top: 1px solid #ddd;
|
557
|
+
.border-radius(0 0 6px 6px);
|
558
|
+
.box-shadow(inset 0 1px 0 #fff);
|
559
|
+
.clearfix();
|
560
|
+
.btn {
|
561
|
+
float: right;
|
562
|
+
margin-left: 10px;
|
563
|
+
}
|
564
|
+
}
|
565
|
+
}
|
566
|
+
|
567
|
+
|
568
|
+
// POPOVER ARROWS
|
569
|
+
// --------------
|
570
|
+
|
571
|
+
#popoverArrow {
|
572
|
+
.above(@arrowWidth: 5px) {
|
573
|
+
bottom: 0;
|
574
|
+
left: 50%;
|
575
|
+
margin-left: -@arrowWidth;
|
576
|
+
border-left: @arrowWidth solid transparent;
|
577
|
+
border-right: @arrowWidth solid transparent;
|
578
|
+
border-top: @arrowWidth solid #000;
|
579
|
+
}
|
580
|
+
.left(@arrowWidth: 5px) {
|
581
|
+
top: 50%;
|
582
|
+
right: 0;
|
583
|
+
margin-top: -@arrowWidth;
|
584
|
+
border-top: @arrowWidth solid transparent;
|
585
|
+
border-bottom: @arrowWidth solid transparent;
|
586
|
+
border-left: @arrowWidth solid #000;
|
587
|
+
}
|
588
|
+
.below(@arrowWidth: 5px) {
|
589
|
+
top: 0;
|
590
|
+
left: 50%;
|
591
|
+
margin-left: -@arrowWidth;
|
592
|
+
border-left: @arrowWidth solid transparent;
|
593
|
+
border-right: @arrowWidth solid transparent;
|
594
|
+
border-bottom: @arrowWidth solid #000;
|
595
|
+
}
|
596
|
+
.right(@arrowWidth: 5px) {
|
597
|
+
top: 50%;
|
598
|
+
left: 0;
|
599
|
+
margin-top: -@arrowWidth;
|
600
|
+
border-top: @arrowWidth solid transparent;
|
601
|
+
border-bottom: @arrowWidth solid transparent;
|
602
|
+
border-right: @arrowWidth solid #000;
|
603
|
+
}
|
604
|
+
}
|
605
|
+
|
606
|
+
// TWIPSY
|
607
|
+
// ------
|
608
|
+
|
609
|
+
.twipsy {
|
610
|
+
display: block;
|
611
|
+
position: absolute;
|
612
|
+
visibility: visible;
|
613
|
+
padding: 5px;
|
614
|
+
font-size: 11px;
|
615
|
+
z-index: 1000;
|
616
|
+
.opacity(80);
|
617
|
+
&.above .twipsy-arrow { #popoverArrow > .above(); }
|
618
|
+
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
619
|
+
&.below .twipsy-arrow { #popoverArrow > .below(); }
|
620
|
+
&.right .twipsy-arrow { #popoverArrow > .right(); }
|
621
|
+
.twipsy-inner {
|
622
|
+
padding: 3px 8px;
|
623
|
+
background-color: #000;
|
624
|
+
color: white;
|
625
|
+
text-align: center;
|
626
|
+
max-width: 200px;
|
627
|
+
text-decoration: none;
|
628
|
+
.border-radius(4px);
|
629
|
+
}
|
630
|
+
.twipsy-arrow {
|
631
|
+
position: absolute;
|
632
|
+
width: 0;
|
633
|
+
height: 0;
|
634
|
+
}
|
635
|
+
}
|
636
|
+
|
637
|
+
|
638
|
+
// POPOVERS
|
639
|
+
// --------
|
640
|
+
|
641
|
+
.popover {
|
642
|
+
position: absolute;
|
643
|
+
top: 0;
|
644
|
+
left: 0;
|
645
|
+
z-index: 1000;
|
646
|
+
padding: 5px;
|
647
|
+
display: none;
|
648
|
+
&.above .arrow { #popoverArrow > .above(); }
|
649
|
+
&.right .arrow { #popoverArrow > .right(); }
|
650
|
+
&.below .arrow { #popoverArrow > .below(); }
|
651
|
+
&.left .arrow { #popoverArrow > .left(); }
|
652
|
+
.arrow {
|
653
|
+
position: absolute;
|
654
|
+
width: 0;
|
655
|
+
height: 0;
|
656
|
+
}
|
657
|
+
.inner {
|
658
|
+
background-color: #333;
|
659
|
+
background-color: rgba(0,0,0,.8);
|
660
|
+
*background-color: #333; /* IE 6-7 */
|
661
|
+
padding: 3px;
|
662
|
+
overflow: hidden;
|
663
|
+
width: 280px;
|
664
|
+
.border-radius(6px);
|
665
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
666
|
+
}
|
667
|
+
.title {
|
668
|
+
background-color: #f5f5f5;
|
669
|
+
padding: 9px 15px;
|
670
|
+
line-height: 1;
|
671
|
+
.border-radius(3px 3px 0 0);
|
672
|
+
border-bottom:1px solid #eee;
|
673
|
+
}
|
674
|
+
.content {
|
675
|
+
background-color: @white;
|
676
|
+
padding: 14px;
|
677
|
+
.border-radius(0 0 3px 3px);
|
678
|
+
.background-clip(padding-box);
|
679
|
+
p, ul, ol {
|
680
|
+
margin-bottom: 0;
|
681
|
+
}
|
682
|
+
}
|
683
|
+
}
|