less-rails-bootstrap 1.4.3 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. data/CHANGELOG.md +5 -0
  2. data/lib/less/rails/bootstrap/version.rb +1 -1
  3. data/test/cases/usage_css_spec.rb +2 -9
  4. data/test/cases/usage_js_spec.rb +5 -7
  5. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -8
  6. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +91 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap/button.js +98 -0
  8. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +154 -0
  9. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +136 -0
  10. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +58 -21
  11. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +63 -114
  12. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +39 -30
  13. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +130 -0
  15. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +270 -0
  16. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +51 -0
  17. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +271 -0
  18. data/vendor/frameworks/twitter/bootstrap/accordion.less +28 -0
  19. data/vendor/frameworks/twitter/bootstrap/alerts.less +70 -0
  20. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +41 -5
  21. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +22 -0
  22. data/vendor/frameworks/twitter/bootstrap/button-groups.less +147 -0
  23. data/vendor/frameworks/twitter/bootstrap/buttons.less +165 -0
  24. data/vendor/frameworks/twitter/bootstrap/carousel.less +121 -0
  25. data/vendor/frameworks/twitter/bootstrap/close.less +18 -0
  26. data/vendor/frameworks/twitter/bootstrap/code.less +44 -0
  27. data/vendor/frameworks/twitter/bootstrap/component-animations.less +18 -0
  28. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +131 -0
  29. data/vendor/frameworks/twitter/bootstrap/forms.less +336 -300
  30. data/vendor/frameworks/twitter/bootstrap/grid.less +8 -0
  31. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +20 -0
  32. data/vendor/frameworks/twitter/bootstrap/labels.less +16 -0
  33. data/vendor/frameworks/twitter/bootstrap/layouts.less +17 -0
  34. data/vendor/frameworks/twitter/bootstrap/mixins.less +391 -76
  35. data/vendor/frameworks/twitter/bootstrap/modals.less +72 -0
  36. data/vendor/frameworks/twitter/bootstrap/navbar.less +292 -0
  37. data/vendor/frameworks/twitter/bootstrap/navs.less +343 -0
  38. data/vendor/frameworks/twitter/bootstrap/pager.less +30 -0
  39. data/vendor/frameworks/twitter/bootstrap/pagination.less +55 -0
  40. data/vendor/frameworks/twitter/bootstrap/patterns.less +5 -1052
  41. data/vendor/frameworks/twitter/bootstrap/popovers.less +49 -0
  42. data/vendor/frameworks/twitter/bootstrap/print.less +18 -0
  43. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +95 -0
  44. data/vendor/frameworks/twitter/bootstrap/reset.less +37 -52
  45. data/vendor/frameworks/twitter/bootstrap/responsive.less +323 -0
  46. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +13 -121
  47. data/vendor/frameworks/twitter/bootstrap/sprites.less +156 -0
  48. data/vendor/frameworks/twitter/bootstrap/tables.less +75 -160
  49. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +35 -0
  50. data/vendor/frameworks/twitter/bootstrap/tooltip.less +35 -0
  51. data/vendor/frameworks/twitter/bootstrap/type.less +100 -70
  52. data/vendor/frameworks/twitter/bootstrap/utilities.less +23 -0
  53. data/vendor/frameworks/twitter/bootstrap/variables.less +94 -55
  54. data/vendor/frameworks/twitter/bootstrap/wells.less +17 -0
  55. metadata +44 -11
  56. data/vendor/assets/javascripts/twitter/bootstrap/alerts.js +0 -113
  57. data/vendor/assets/javascripts/twitter/bootstrap/buttons.js +0 -62
  58. data/vendor/assets/javascripts/twitter/bootstrap/tabs.js +0 -80
  59. data/vendor/assets/javascripts/twitter/bootstrap/twipsy.js +0 -310
@@ -0,0 +1,30 @@
1
+ // PAGER
2
+ // -----
3
+
4
+ .pager {
5
+ margin-left: 0;
6
+ margin-bottom: @baseLineHeight;
7
+ list-style: none;
8
+ text-align: center;
9
+ .clearfix();
10
+ }
11
+ .pager li {
12
+ display: inline;
13
+ }
14
+ .pager a {
15
+ display: inline-block;
16
+ padding: 5px 14px;
17
+ background-color: #fff;
18
+ border: 1px solid #ddd;
19
+ .border-radius(15px);
20
+ }
21
+ .pager a:hover {
22
+ text-decoration: none;
23
+ background-color: #f5f5f5;
24
+ }
25
+ .pager .next a {
26
+ float: right;
27
+ }
28
+ .pager .previous a {
29
+ float: left;
30
+ }
@@ -0,0 +1,55 @@
1
+ // PAGINATION
2
+ // ----------
3
+
4
+ .pagination {
5
+ height: @baseLineHeight * 2;
6
+ margin: @baseLineHeight 0;
7
+ }
8
+ .pagination ul {
9
+ display: inline-block;
10
+ .ie7-inline-block();
11
+ margin-left: 0;
12
+ margin-bottom: 0;
13
+ .border-radius(3px);
14
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
15
+ }
16
+ .pagination li {
17
+ display: inline;
18
+ }
19
+ .pagination a {
20
+ float: left;
21
+ padding: 0 14px;
22
+ line-height: (@baseLineHeight * 2) - 2;
23
+ text-decoration: none;
24
+ border: 1px solid #ddd;
25
+ border-left-width: 0;
26
+ }
27
+ .pagination a:hover,
28
+ .pagination .active a {
29
+ background-color: #f5f5f5;
30
+ }
31
+ .pagination .active a {
32
+ color: @grayLight;
33
+ cursor: default;
34
+ }
35
+ .pagination .disabled a,
36
+ .pagination .disabled a:hover {
37
+ color: @grayLight;
38
+ background-color: transparent;
39
+ cursor: default;
40
+ }
41
+ .pagination li:first-child a {
42
+ border-left-width: 1px;
43
+ .border-radius(3px 0 0 3px);
44
+ }
45
+ .pagination li:last-child a {
46
+ .border-radius(0 3px 3px 0);
47
+ }
48
+
49
+ // Centered
50
+ .pagination-centered {
51
+ text-align: center;
52
+ }
53
+ .pagination-right {
54
+ text-align: right;
55
+ }
@@ -1,1060 +1,13 @@
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
- // Links get text shadow
20
- a {
21
- color: @grayLight;
22
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
- }
24
-
25
- // Hover and active states
26
- // h3 for backwards compatibility
27
- h3 a:hover,
28
- .brand:hover,
29
- ul .active > a {
30
- background-color: #333;
31
- background-color: rgba(255,255,255,.05);
32
- color: @white;
33
- text-decoration: none;
34
- }
35
-
36
- // Website name
37
- // h3 left for backwards compatibility
38
- h3 {
39
- position: relative;
40
- }
41
- h3 a,
42
- .brand {
43
- float: left;
44
- display: block;
45
- padding: 8px 20px 12px;
46
- margin-left: -20px; // negative indent to left-align the text down the page
47
- color: @white;
48
- font-size: 20px;
49
- font-weight: 200;
50
- line-height: 1;
51
- }
52
-
53
- // Plain text in topbar
54
- p {
55
- margin: 0;
56
- line-height: 40px;
57
- a:hover {
58
- background-color: transparent;
59
- color: @white;
60
- }
61
- }
62
-
63
- // Search Form
64
- form {
65
- float: left;
66
- margin: 5px 0 0 0;
67
- position: relative;
68
- .opacity(100);
69
- }
70
- // Todo: remove from v2.0 when ready, added for legacy
71
- form.pull-right {
72
- float: right;
73
- }
74
- input {
75
- background-color: #444;
76
- background-color: rgba(255,255,255,.3);
77
- #font > .sans-serif(13px, normal, 1);
78
- padding: 4px 9px;
79
- color: @white;
80
- color: rgba(255,255,255,.75);
81
- border: 1px solid #111;
82
- .border-radius(4px);
83
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- .box-shadow(@shadow);
85
- .transition(none);
86
-
87
- // Placeholder text gets special styles; can't be bundled together though for some reason
88
- &:-moz-placeholder {
89
- color: @grayLighter;
90
- }
91
- &::-webkit-input-placeholder {
92
- color: @grayLighter;
93
- }
94
- // Hover states
95
- &:hover {
96
- background-color: @grayLight;
97
- background-color: rgba(255,255,255,.5);
98
- color: @white;
99
- }
100
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
- &:focus,
102
- &.focused {
103
- outline: 0;
104
- background-color: @white;
105
- color: @grayDark;
106
- text-shadow: 0 1px 0 @white;
107
- border: 0;
108
- padding: 5px 10px;
109
- .box-shadow(0 0 3px rgba(0,0,0,.15));
110
- }
111
- }
112
- }
113
-
114
- // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
- // For backwards compatibility, include .topbar .fill
116
- .topbar-inner,
117
- .topbar .fill {
118
- background-color: #222;
119
- #gradient > .vertical(#333, #222);
120
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- .box-shadow(@shadow);
122
- }
123
-
124
-
125
- // NAVIGATION
126
- // ----------
127
-
128
- // Topbar Nav
129
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
- // For backwards compatibility, leave in .topbar div > ul
131
- .topbar div > ul,
132
- .nav {
133
- display: block;
134
- float: left;
135
- margin: 0 10px 0 0;
136
- position: relative;
137
- left: 0;
138
- > li {
139
- display: block;
140
- float: left;
141
- }
142
- a {
143
- display: block;
144
- float: none;
145
- padding: 10px 10px 11px;
146
- line-height: 19px;
147
- text-decoration: none;
148
- &:hover {
149
- color: @white;
150
- text-decoration: none;
151
- }
152
- }
153
- .active > a {
154
- background-color: #222;
155
- background-color: rgba(0,0,0,.5);
156
- }
157
-
158
- // Secondary (floated right) nav in topbar
159
- &.secondary-nav {
160
- float: right;
161
- margin-left: 10px;
162
- margin-right: 0;
163
- // backwards compatibility
164
- .menu-dropdown,
165
- .dropdown-menu {
166
- right: 0;
167
- border: 0;
168
- }
169
- }
170
- // Dropdowns within the .nav
171
- // a.menu:hover and li.open .menu for backwards compatibility
172
- a.menu:hover,
173
- li.open .menu,
174
- .dropdown-toggle:hover,
175
- .dropdown.open .dropdown-toggle {
176
- background: #444;
177
- background: rgba(255,255,255,.05);
178
- }
179
- // .menu-dropdown for backwards compatibility
180
- .menu-dropdown,
181
- .dropdown-menu {
182
- background-color: #333;
183
- // a.menu for backwards compatibility
184
- a.menu,
185
- .dropdown-toggle {
186
- color: @white;
187
- &.open {
188
- background: #444;
189
- background: rgba(255,255,255,.05);
190
- }
191
- }
192
- li a {
193
- color: #999;
194
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
- &:hover {
196
- #gradient > .vertical(#292929,#191919);
197
- color: @white;
198
- }
199
- }
200
- .active a {
201
- color: @white;
202
- }
203
- .divider {
204
- background-color: #222;
205
- border-color: #444;
206
- }
207
- }
208
- }
209
-
210
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
- .topbar ul .menu-dropdown li a,
212
- .topbar ul .dropdown-menu li a {
213
- padding: 4px 15px;
214
- }
215
-
216
- // Dropdown Menus
217
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
- // li.menu for backwards compatibility
219
- li.menu,
220
- .dropdown {
221
- position: relative;
222
- }
223
- // The link that is clicked to toggle the dropdown
224
- // a.menu for backwards compatibility
225
- a.menu:after,
226
- .dropdown-toggle:after {
227
- width: 0;
228
- height: 0;
229
- display: inline-block;
230
- content: "&darr;";
231
- text-indent: -99999px;
232
- vertical-align: top;
233
- margin-top: 8px;
234
- margin-left: 4px;
235
- border-left: 4px solid transparent;
236
- border-right: 4px solid transparent;
237
- border-top: 4px solid @white;
238
- .opacity(50);
239
- }
240
- // The dropdown menu (ul)
241
- // .menu-dropdown for backwards compatibility
242
- .menu-dropdown,
243
- .dropdown-menu {
244
- background-color: @white;
245
- float: left;
246
- display: none; // None by default, but block on "open" of the menu
247
- position: absolute;
248
- top: 40px;
249
- z-index: 900;
250
- min-width: 160px;
251
- max-width: 220px;
252
- _width: 160px;
253
- margin-left: 0; // override default ul styles
254
- margin-right: 0;
255
- padding: 6px 0;
256
- zoom: 1; // do we need this?
257
- border-color: #999;
258
- border-color: rgba(0,0,0,.2);
259
- border-style: solid;
260
- border-width: 0 1px 1px;
261
- .border-radius(0 0 6px 6px);
262
- .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- .background-clip(padding-box);
264
-
265
- // Unfloat any li's to make them stack
266
- li {
267
- float: none;
268
- display: block;
269
- background-color: none;
270
- }
271
- // Dividers (basically an hr) within the dropdown
272
- .divider {
273
- height: 1px;
274
- margin: 5px 0;
275
- overflow: hidden;
276
- background-color: #eee;
277
- border-bottom: 1px solid @white;
278
- }
279
- }
280
-
281
- .topbar .dropdown-menu,
282
- .dropdown-menu {
283
- // Links within the dropdown menu
284
- a {
285
- display: block;
286
- padding: 4px 15px;
287
- clear: both;
288
- font-weight: normal;
289
- line-height: 18px;
290
- color: @gray;
291
- text-shadow: 0 1px 0 @white;
292
- // Hover state
293
- &:hover,
294
- &.hover {
295
- #gradient > .vertical(#eeeeee, #dddddd);
296
- color: @grayDark;
297
- text-decoration: none;
298
- @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299
- .box-shadow(@shadow);
300
- }
301
- }
302
- }
303
-
304
- // Open state for the dropdown
305
- // .open for backwards compatibility
306
- .open,
307
- .dropdown.open {
308
- // .menu for backwards compatibility
309
- .menu,
310
- .dropdown-toggle {
311
- color: @white;
312
- background: #ccc;
313
- background: rgba(0,0,0,.3);
314
- }
315
- // .menu-dropdown for backwards compatibility
316
- .menu-dropdown,
317
- .dropdown-menu {
318
- display: block;
319
- }
320
- }
321
-
322
-
323
- // TABS AND PILLS
324
- // --------------
325
-
326
- // Common styles
327
- .tabs,
328
- .pills {
329
- margin: 0 0 @baseline;
330
- padding: 0;
331
- list-style: none;
332
- .clearfix();
333
- > li {
334
- float: left;
335
- > a {
336
- display: block;
337
- }
338
- }
339
- }
340
-
341
- // Tabs
342
- .tabs {
343
- border-color: #ddd;
344
- border-style: solid;
345
- border-width: 0 0 1px;
346
- > li {
347
- position: relative; // For the dropdowns mostly
348
- margin-bottom: -1px;
349
- > a {
350
- padding: 0 15px;
351
- margin-right: 2px;
352
- line-height: (@baseline * 2) - 2;
353
- border: 1px solid transparent;
354
- .border-radius(4px 4px 0 0);
355
- &:hover {
356
- text-decoration: none;
357
- background-color: #eee;
358
- border-color: #eee #eee #ddd;
359
- }
360
- }
361
- }
362
- // Active state, and it's :hover to override normal :hover
363
- .active > a,
364
- .active > a:hover {
365
- color: @gray;
366
- background-color: @white;
367
- border: 1px solid #ddd;
368
- border-bottom-color: transparent;
369
- cursor: default;
370
- }
371
- }
372
-
373
- // Dropdowns in tabs
374
- .tabs {
375
- // first one for backwards compatibility
376
- .menu-dropdown,
377
- .dropdown-menu {
378
- top: 35px;
379
- border-width: 1px;
380
- .border-radius(0 6px 6px 6px);
381
- }
382
- // first one for backwards compatibility
383
- a.menu:after,
384
- .dropdown-toggle:after {
385
- border-top-color: #999;
386
- margin-top: 15px;
387
- margin-left: 5px;
388
- }
389
- // first one for backwards compatibility
390
- li.open.menu .menu,
391
- .open.dropdown .dropdown-toggle {
392
- border-color: #999;
393
- }
394
- // first one for backwards compatibility
395
- li.open a.menu:after,
396
- .dropdown.open .dropdown-toggle:after {
397
- border-top-color: #555;
398
- }
399
- }
400
-
401
- // Pills
402
- .pills {
403
- a {
404
- margin: 5px 3px 5px 0;
405
- padding: 0 15px;
406
- line-height: 30px;
407
- text-shadow: 0 1px 1px @white;
408
- .border-radius(15px);
409
- &:hover {
410
- color: @white;
411
- text-decoration: none;
412
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
- background-color: @linkColorHover;
414
- }
415
- }
416
- .active a {
417
- color: @white;
418
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
- background-color: @linkColor;
420
- }
421
- }
422
-
423
- // Stacked pills
424
- .pills-vertical > li {
425
- float: none;
426
- }
427
-
428
- // Tabbable areas
429
- .tab-content,
430
- .pill-content {
431
- }
432
- .tab-content > .tab-pane,
433
- .pill-content > .pill-pane,
434
- .tab-content > div,
435
- .pill-content > div {
436
- display: none;
437
- }
438
- .tab-content > .active,
439
- .pill-content > .active {
440
- display: block;
441
- }
442
-
443
-
444
- // BREADCRUMBS
445
- // -----------
446
-
447
- .breadcrumb {
448
- padding: 7px 14px;
449
- margin: 0 0 @baseline;
450
- #gradient > .vertical(#ffffff, #f5f5f5);
451
- border: 1px solid #ddd;
452
- .border-radius(3px);
453
- .box-shadow(inset 0 1px 0 @white);
454
- li {
455
- display: inline;
456
- text-shadow: 0 1px 0 @white;
457
- }
458
- .divider {
459
- padding: 0 5px;
460
- color: @grayLight;
461
- }
462
- .active a {
463
- color: @grayDark;
464
- }
465
- }
1
+ // Patterns.less
2
+ // Repeatable UI elements outside the base styles provided from the scaffolding
3
+ // ----------------------------------------------------------------------------
466
4
 
467
5
 
468
6
  // PAGE HEADERS
469
7
  // ------------
470
8
 
471
- .hero-unit {
472
- background-color: #f5f5f5;
473
- margin-bottom: 30px;
474
- padding: 60px;
475
- .border-radius(6px);
476
- h1 {
477
- margin-bottom: 0;
478
- font-size: 60px;
479
- line-height: 1;
480
- letter-spacing: -1px;
481
- }
482
- p {
483
- font-size: 18px;
484
- font-weight: 200;
485
- line-height: @baseline * 1.5;
486
- }
487
- }
488
9
  footer {
489
- margin-top: @baseline - 1;
490
- padding-top: @baseline - 1;
10
+ padding-top: @baseLineHeight - 1;
11
+ margin-top: @baseLineHeight - 1;
491
12
  border-top: 1px solid #eee;
492
13
  }
493
-
494
-
495
- // PAGE HEADERS
496
- // ------------
497
-
498
- .page-header {
499
- margin-bottom: @baseline - 1;
500
- border-bottom: 1px solid #ddd;
501
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
502
- h1 {
503
- margin-bottom: (@baseline / 2) - 1px;
504
- }
505
- }
506
-
507
-
508
- // BUTTON STYLES
509
- // -------------
510
-
511
- // Shared colors for buttons and alerts
512
- .btn,
513
- .alert-message {
514
- // Set text color
515
- &.danger,
516
- &.danger:hover,
517
- &.error,
518
- &.error:hover,
519
- &.success,
520
- &.success:hover,
521
- &.info,
522
- &.info:hover {
523
- color: @white
524
- }
525
- // Sets the close button to the middle of message
526
- .close{
527
- font-family: Arial, sans-serif;
528
- line-height: 18px;
529
- }
530
- // Danger and error appear as red
531
- &.danger,
532
- &.error {
533
- .gradientBar(#ee5f5b, #c43c35);
534
- }
535
- // Success appears as green
536
- &.success {
537
- .gradientBar(#62c462, #57a957);
538
- }
539
- // Info appears as a neutral blue
540
- &.info {
541
- .gradientBar(#5bc0de, #339bb9);
542
- }
543
- }
544
-
545
- // Base .btn styles
546
- .btn {
547
- // Button Base
548
- cursor: pointer;
549
- display: inline-block;
550
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
551
- padding: 5px 14px 6px;
552
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
553
- color: #333;
554
- font-size: @basefont;
555
- line-height: normal;
556
- border: 1px solid #ccc;
557
- border-bottom-color: #bbb;
558
- .border-radius(4px);
559
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
560
- .box-shadow(@shadow);
561
-
562
- &:hover {
563
- background-position: 0 -15px;
564
- color: #333;
565
- text-decoration: none;
566
- }
567
-
568
- // Focus state for keyboard and accessibility
569
- &:focus {
570
- outline: 1px dotted #666;
571
- }
572
-
573
- // Primary Button Type
574
- &.primary {
575
- color: @white;
576
- .gradientBar(@blue, @blueDark)
577
- }
578
-
579
- // Transitions
580
- .transition(.1s linear all);
581
-
582
- // Active and Disabled states
583
- &.active,
584
- :active {
585
- @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
586
- .box-shadow(@shadow);
587
- }
588
- &.disabled {
589
- cursor: default;
590
- background-image: none;
591
- .reset-filter();
592
- .opacity(65);
593
- .box-shadow(none);
594
- }
595
- &[disabled] {
596
- // disabled pseudo can't be included with .disabled
597
- // def because IE8 and below will drop it ;_;
598
- cursor: default;
599
- background-image: none;
600
- .reset-filter();
601
- .opacity(65);
602
- .box-shadow(none);
603
- }
604
-
605
- // Button Sizes
606
- &.large {
607
- font-size: @basefont + 2px;
608
- line-height: normal;
609
- padding: 9px 14px 9px;
610
- .border-radius(6px);
611
- }
612
- &.small {
613
- padding: 7px 9px 7px;
614
- font-size: @basefont - 2px;
615
- }
616
- }
617
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
618
- :root .alert-message,
619
- :root .btn {
620
- border-radius: 0 \0;
621
- }
622
-
623
- // Help Firefox not be a jerk about adding extra padding to buttons
624
- button.btn,
625
- input[type=submit].btn {
626
- &::-moz-focus-inner {
627
- padding: 0;
628
- border: 0;
629
- }
630
- }
631
-
632
-
633
- // CLOSE ICONS
634
- // -----------
635
- .close {
636
- float: right;
637
- color: @black;
638
- font-size: 20px;
639
- font-weight: bold;
640
- line-height: @baseline * .75;
641
- text-shadow: 0 1px 0 rgba(255,255,255,1);
642
- .opacity(25);
643
- &:hover {
644
- color: @black;
645
- text-decoration: none;
646
- .opacity(40);
647
- }
648
- }
649
-
650
-
651
- // ERROR STYLES
652
- // ------------
653
-
654
- // Base alert styles
655
- .alert-message {
656
- position: relative;
657
- padding: 7px 15px;
658
- margin-bottom: @baseline;
659
- color: @grayDark;
660
- .gradientBar(#fceec1, #eedc94); // warning by default
661
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
662
- border-width: 1px;
663
- border-style: solid;
664
- .border-radius(4px);
665
- .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
666
-
667
- // Adjust close icon
668
- .close {
669
- margin-top: 1px;
670
- *margin-top: 0; // For IE7
671
- }
672
-
673
- // Make links same color as text and stand out more
674
- a {
675
- font-weight: bold;
676
- color: @grayDark;
677
- }
678
- &.danger p a,
679
- &.error p a,
680
- &.success p a,
681
- &.info p a {
682
- color: @white;
683
- }
684
-
685
- // Remove extra margin from content
686
- h5 {
687
- line-height: @baseline;
688
- }
689
- p {
690
- margin-bottom: 0;
691
- }
692
- div {
693
- margin-top: 5px;
694
- margin-bottom: 2px;
695
- line-height: 28px;
696
- }
697
- .btn {
698
- // Provide actions with buttons
699
- .box-shadow(0 1px 0 rgba(255,255,255,.25));
700
- }
701
-
702
- &.block-message {
703
- background-image: none;
704
- background-color: lighten(#fceec1, 5%);
705
- .reset-filter();
706
- padding: 14px;
707
- border-color: #fceec1;
708
- .box-shadow(none);
709
- ul, p {
710
- margin-right: 30px;
711
- }
712
- ul {
713
- margin-bottom: 0;
714
- }
715
- li {
716
- color: @grayDark;
717
- }
718
- .alert-actions {
719
- margin-top: 5px;
720
- }
721
- &.error,
722
- &.success,
723
- &.info {
724
- color: @grayDark;
725
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
726
- }
727
- &.error {
728
- background-color: lighten(#f56a66, 25%);
729
- border-color: lighten(#f56a66, 20%);
730
- }
731
- &.success {
732
- background-color: lighten(#62c462, 30%);
733
- border-color: lighten(#62c462, 25%);
734
- }
735
- &.info {
736
- background-color: lighten(#6bd0ee, 25%);
737
- border-color: lighten(#6bd0ee, 20%);
738
- }
739
- // Change link color back
740
- &.danger p a,
741
- &.error p a,
742
- &.success p a,
743
- &.info p a {
744
- color: @grayDark;
745
- }
746
-
747
- }
748
- }
749
-
750
-
751
- // PAGINATION
752
- // ----------
753
-
754
- .pagination {
755
- height: @baseline * 2;
756
- margin: @baseline 0;
757
- ul {
758
- float: left;
759
- margin: 0;
760
- border: 1px solid #ddd;
761
- border: 1px solid rgba(0,0,0,.15);
762
- .border-radius(3px);
763
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
764
- }
765
- li {
766
- display: inline;
767
- }
768
- a {
769
- float: left;
770
- padding: 0 14px;
771
- line-height: (@baseline * 2) - 2;
772
- border-right: 1px solid;
773
- border-right-color: #ddd;
774
- border-right-color: rgba(0,0,0,.15);
775
- *border-right-color: #ddd; /* IE6-7 */
776
- text-decoration: none;
777
- }
778
- a:hover,
779
- .active a {
780
- background-color: lighten(@blue, 45%);
781
- }
782
- .disabled a,
783
- .disabled a:hover {
784
- background-color: transparent;
785
- color: @grayLight;
786
- }
787
- .next a {
788
- border: 0;
789
- }
790
- }
791
-
792
-
793
- // WELLS
794
- // -----
795
-
796
- .well {
797
- background-color: #f5f5f5;
798
- margin-bottom: 20px;
799
- padding: 19px;
800
- min-height: 20px;
801
- border: 1px solid #eee;
802
- border: 1px solid rgba(0,0,0,.05);
803
- .border-radius(4px);
804
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
805
- blockquote {
806
- border-color: #ddd;
807
- border-color: rgba(0,0,0,.15);
808
- }
809
- }
810
-
811
-
812
- // MODALS
813
- // ------
814
-
815
- .modal-backdrop {
816
- background-color: @black;
817
- position: fixed;
818
- top: 0;
819
- left: 0;
820
- right: 0;
821
- bottom: 0;
822
- z-index: 10000;
823
- // Fade for backdrop
824
- &.fade { opacity: 0; }
825
- }
826
-
827
- .modal-backdrop,
828
- .modal-backdrop.fade.in {
829
- .opacity(80);
830
- }
831
-
832
- .modal {
833
- position: fixed;
834
- top: 50%;
835
- left: 50%;
836
- z-index: 11000;
837
- width: 560px;
838
- margin: -250px 0 0 -280px;
839
- background-color: @white;
840
- border: 1px solid #999;
841
- border: 1px solid rgba(0,0,0,.3);
842
- *border: 1px solid #999; /* IE6-7 */
843
- .border-radius(6px);
844
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
845
- .background-clip(padding-box);
846
- .close { margin-top: 7px; }
847
- &.fade {
848
- .transition(e('opacity .3s linear, top .3s ease-out'));
849
- top: -25%;
850
- }
851
- &.fade.in { top: 50%; }
852
- }
853
- .modal-header {
854
- border-bottom: 1px solid #eee;
855
- padding: 5px 15px;
856
- }
857
- .modal-body {
858
- padding: 15px;
859
- }
860
- .modal-body form {
861
- margin-bottom: 0;
862
- }
863
- .modal-footer {
864
- background-color: #f5f5f5;
865
- padding: 14px 15px 15px;
866
- border-top: 1px solid #ddd;
867
- .border-radius(0 0 6px 6px);
868
- .box-shadow(inset 0 1px 0 @white);
869
- .clearfix();
870
- margin-bottom: 0;
871
- .btn {
872
- float: right;
873
- margin-left: 5px;
874
- }
875
- }
876
-
877
- // Fix the stacking of these components when in modals
878
- .modal .popover,
879
- .modal .twipsy {
880
- z-index: 12000;
881
- }
882
-
883
-
884
- // POPOVER ARROWS
885
- // --------------
886
-
887
- #popoverArrow {
888
- .above(@arrowWidth: 5px) {
889
- bottom: 0;
890
- left: 50%;
891
- margin-left: -@arrowWidth;
892
- border-left: @arrowWidth solid transparent;
893
- border-right: @arrowWidth solid transparent;
894
- border-top: @arrowWidth solid @black;
895
- }
896
- .left(@arrowWidth: 5px) {
897
- top: 50%;
898
- right: 0;
899
- margin-top: -@arrowWidth;
900
- border-top: @arrowWidth solid transparent;
901
- border-bottom: @arrowWidth solid transparent;
902
- border-left: @arrowWidth solid @black;
903
- }
904
- .below(@arrowWidth: 5px) {
905
- top: 0;
906
- left: 50%;
907
- margin-left: -@arrowWidth;
908
- border-left: @arrowWidth solid transparent;
909
- border-right: @arrowWidth solid transparent;
910
- border-bottom: @arrowWidth solid @black;
911
- }
912
- .right(@arrowWidth: 5px) {
913
- top: 50%;
914
- left: 0;
915
- margin-top: -@arrowWidth;
916
- border-top: @arrowWidth solid transparent;
917
- border-bottom: @arrowWidth solid transparent;
918
- border-right: @arrowWidth solid @black;
919
- }
920
- }
921
-
922
- // TWIPSY
923
- // ------
924
-
925
- .twipsy {
926
- display: block;
927
- position: absolute;
928
- visibility: visible;
929
- padding: 5px;
930
- font-size: 11px;
931
- z-index: 1000;
932
- .opacity(80);
933
- &.fade.in {
934
- .opacity(80);
935
- }
936
- &.above .twipsy-arrow { #popoverArrow > .above(); }
937
- &.left .twipsy-arrow { #popoverArrow > .left(); }
938
- &.below .twipsy-arrow { #popoverArrow > .below(); }
939
- &.right .twipsy-arrow { #popoverArrow > .right(); }
940
- }
941
- .twipsy-inner {
942
- padding: 3px 8px;
943
- background-color: @black;
944
- color: white;
945
- text-align: center;
946
- max-width: 200px;
947
- text-decoration: none;
948
- .border-radius(4px);
949
- }
950
- .twipsy-arrow {
951
- position: absolute;
952
- width: 0;
953
- height: 0;
954
- }
955
-
956
-
957
- // POPOVERS
958
- // --------
959
-
960
- .popover {
961
- position: absolute;
962
- top: 0;
963
- left: 0;
964
- z-index: 1000;
965
- padding: 5px;
966
- display: none;
967
- &.above .arrow { #popoverArrow > .above(); }
968
- &.right .arrow { #popoverArrow > .right(); }
969
- &.below .arrow { #popoverArrow > .below(); }
970
- &.left .arrow { #popoverArrow > .left(); }
971
- .arrow {
972
- position: absolute;
973
- width: 0;
974
- height: 0;
975
- }
976
- .inner {
977
- background: @black;
978
- background: rgba(0,0,0,.8);
979
- padding: 3px;
980
- overflow: hidden;
981
- width: 280px;
982
- .border-radius(6px);
983
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
984
- }
985
- .title {
986
- background-color: #f5f5f5;
987
- padding: 9px 15px;
988
- line-height: 1;
989
- .border-radius(3px 3px 0 0);
990
- border-bottom:1px solid #eee;
991
- }
992
- .content {
993
- background-color: @white;
994
- padding: 14px;
995
- .border-radius(0 0 3px 3px);
996
- .background-clip(padding-box);
997
- p, ul, ol {
998
- margin-bottom: 0;
999
- }
1000
- }
1001
- }
1002
-
1003
-
1004
- // PATTERN ANIMATIONS
1005
- // ------------------
1006
-
1007
- .fade {
1008
- .transition(opacity .15s linear);
1009
- opacity: 0;
1010
- &.in {
1011
- opacity: 1;
1012
- }
1013
- }
1014
-
1015
-
1016
- // LABELS
1017
- // ------
1018
-
1019
- .label {
1020
- padding: 1px 3px 2px;
1021
- font-size: @basefont * .75;
1022
- font-weight: bold;
1023
- color: @white;
1024
- text-transform: uppercase;
1025
- white-space: nowrap;
1026
- background-color: @grayLight;
1027
- .border-radius(3px);
1028
- &.important { background-color: #c43c35; }
1029
- &.warning { background-color: @orange; }
1030
- &.success { background-color: @green; }
1031
- &.notice { background-color: lighten(@blue, 25%); }
1032
- }
1033
-
1034
-
1035
- // MEDIA GRIDS
1036
- // -----------
1037
-
1038
- .media-grid {
1039
- margin-left: -@gridGutterWidth;
1040
- margin-bottom: 0;
1041
- .clearfix();
1042
- li {
1043
- display: inline;
1044
- }
1045
- a {
1046
- float: left;
1047
- padding: 4px;
1048
- margin: 0 0 @baseline @gridGutterWidth;
1049
- border: 1px solid #ddd;
1050
- .border-radius(4px);
1051
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
1052
- img {
1053
- display: block;
1054
- }
1055
- &:hover {
1056
- border-color: @linkColor;
1057
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
1058
- }
1059
- }
1060
- }