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.
Files changed (41) hide show
  1. data/.gitignore +5 -4
  2. data/Gemfile +3 -0
  3. data/Gemfile.lock +15 -19
  4. data/README.rdoc +9 -7
  5. data/Rakefile +3 -3
  6. data/lib/rack/less/base.rb +1 -1
  7. data/lib/rack/less/config.rb +1 -1
  8. data/lib/rack/less/response.rb +4 -4
  9. data/lib/rack/less/source.rb +6 -1
  10. data/lib/rack/less/version.rb +2 -2
  11. data/rack-less.gemspec +4 -3
  12. data/test/app_helper.rb +3 -3
  13. data/test/bootstrap_test.rb +26 -0
  14. data/test/config_test.rb +112 -150
  15. data/test/fixtures/bootstrap_v1.1.0/bootstrap-1.1.0.css +1894 -0
  16. data/test/fixtures/bootstrap_v1.1.0/bootstrap.less +23 -0
  17. data/test/fixtures/bootstrap_v1.1.0/forms.less +369 -0
  18. data/test/fixtures/bootstrap_v1.1.0/patterns.less +683 -0
  19. data/test/fixtures/bootstrap_v1.1.0/preboot.less +267 -0
  20. data/test/fixtures/bootstrap_v1.1.0/reset.less +21 -0
  21. data/test/fixtures/bootstrap_v1.1.0/scaffolding.less +174 -0
  22. data/test/fixtures/bootstrap_v1.1.0/tables.less +148 -0
  23. data/test/fixtures/bootstrap_v1.1.0/type.less +185 -0
  24. data/test/fixtures/sinatra/app/stylesheets/all_compiled.css +7 -3
  25. data/test/fixtures/sinatra/app/stylesheets/nested/file_compiled.css +6 -2
  26. data/test/fixtures/sinatra/app/stylesheets/nested/nested_import.less +3 -0
  27. data/test/fixtures/sinatra/app/stylesheets/nested/really/really.less +5 -3
  28. data/test/fixtures/sinatra/app/stylesheets/nested/really/really_compiled.css +7 -2
  29. data/test/fixtures/sinatra/app/stylesheets/nested/really/really_nested_import.less +4 -0
  30. data/test/fixtures/sinatra/app/stylesheets/normal.less +1 -1
  31. data/test/fixtures/sinatra/app/stylesheets/normal_compiled.css +6 -2
  32. data/test/helper.rb +35 -38
  33. data/test/irb.rb +9 -0
  34. data/test/options_test.rb +25 -22
  35. data/test/request_test.rb +86 -74
  36. data/test/response_test.rb +6 -4
  37. data/test/sinatra_test.rb +38 -37
  38. data/test/source_test.rb +128 -114
  39. metadata +57 -34
  40. data/.bundle/config +0 -2
  41. 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
+ }