twitter-bootstrap-rails 0.0.3 → 0.0.4

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.

Potentially problematic release.


This version of twitter-bootstrap-rails might be problematic. Click here for more details.

@@ -1,639 +0,0 @@
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
- div.topbar {
11
- #gradient > .vertical(#333, #222);
12
- height: 40px;
13
- position: fixed;
14
- top: 0;
15
- left: 0;
16
- right: 0;
17
- z-index: 10000;
18
- overflow: visible;
19
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
20
- .box-shadow(@shadow);
21
-
22
- // Links get text shadow
23
- a {
24
- color: @grayLight;
25
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
26
- }
27
-
28
- // Hover and active states for links
29
- ul li a:hover,
30
- ul li.active a,
31
- a.logo:hover {
32
- background-color: #333;
33
- background-color: rgba(255,255,255,.15);
34
- color: @white;
35
- text-decoration: none;
36
- }
37
-
38
- // Logo
39
- a.logo {
40
- float: left;
41
- display: block;
42
- padding: 8px 20px 12px;
43
- margin-left: -20px;
44
- color: @white;
45
- font-size: 20px;
46
- font-weight: 200;
47
- line-height: 1;
48
- img {
49
- float: left;
50
- margin-right: 6px;
51
- }
52
- }
53
-
54
- // Search Form
55
- form {
56
- float: left;
57
- margin: 5px 0 0 0;
58
- position: relative;
59
- .opacity(100);
60
- input {
61
- background-color: @grayLight;
62
- background-color: rgba(255,255,255,.3);
63
- #font > .sans-serif(13px, normal, 1);
64
- width: 220px;
65
- padding: 4px 9px;
66
- color: #fff;
67
- color: rgba(255,255,255,.75);
68
- border: 1px solid #111;
69
- .border-radius(4px);
70
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
71
- .box-shadow(@shadow);
72
- .transition(none);
73
-
74
- // Placeholder text gets special styles; can't be bundled together though for some reason
75
- &:-moz-placeholder {
76
- color: @grayLighter;
77
- }
78
- &::-webkit-input-placeholder {
79
- color: @grayLighter;
80
- }
81
- &:hover {
82
- background-color: #444;
83
- background-color: rgba(255,255,255,.5);
84
- color: #fff;
85
- }
86
- &:focus,
87
- &.focused {
88
- outline: none;
89
- background-color: #fff;
90
- color: @grayDark;
91
- text-shadow: 0 1px 0 #fff;
92
- border: 0;
93
- padding: 5px 10px;
94
- .box-shadow(0 0 3px rgba(0,0,0,.15));
95
- }
96
- }
97
- }
98
-
99
- // Navigation
100
- ul {
101
- display: block;
102
- float: left;
103
- margin: 0 10px 0 0;
104
- position: relative;
105
- &.secondary-nav {
106
- float: right;
107
- margin-left: 10px;
108
- margin-right: 0;
109
- }
110
- li {
111
- display: block;
112
- float: left;
113
- font-size: 13px;
114
- a {
115
- display: block;
116
- float: none;
117
- padding: 10px 10px 11px;
118
- line-height: 19px;
119
- text-decoration: none;
120
- &:hover {
121
- color: #fff;
122
- text-decoration: none;
123
- }
124
- }
125
- &.active a {
126
- background-color: #222;
127
- background-color: rgba(0,0,0,.5);
128
- }
129
- }
130
-
131
- // Dropdowns
132
- &.primary-nav li ul {
133
- left: 0;
134
- }
135
- &.secondary-nav li ul {
136
- right: 0;
137
- }
138
- li.menu {
139
- position: relative;
140
- a.menu {
141
- &:after {
142
- width: 0px;
143
- height: 0px;
144
- display: inline-block;
145
- content: "↓";
146
- text-indent: -99999px;
147
- vertical-align: top;
148
- margin-top: 8px;
149
- margin-left: 4px;
150
- border-left: 4px solid transparent;
151
- border-right: 4px solid transparent;
152
- border-top: 4px solid #fff;
153
- .opacity(50);
154
- }
155
- }
156
- &.open {
157
- a.menu,
158
- a:hover {
159
- background-color: lighten(#00a0d1,5);
160
- background-color: rgba(255,255,255,.1);
161
- color: #fff;
162
- }
163
- ul {
164
- display: block;
165
- li {
166
- a {
167
- background-color: transparent;
168
- font-weight: normal;
169
- &:hover {
170
- background-color: rgba(255,255,255,.1);
171
- color: #fff;
172
- }
173
- }
174
- &.active a {
175
- background-color: rgba(255,255,255,.1);
176
- font-weight: bold;
177
- }
178
- }
179
- }
180
- }
181
- }
182
- li ul {
183
- background-color: #333;
184
- float: left;
185
- display: none;
186
- position: absolute;
187
- top: 40px;
188
- min-width: 160px;
189
- max-width: 220px;
190
- _width: 160px;
191
- margin-left: 0;
192
- margin-right: 0;
193
- padding: 0;
194
- text-align: left;
195
- border: 0;
196
- zoom: 1;
197
- .border-radius(0 0 5px 5px);
198
- .box-shadow(0 1px 2px rgba(0,0,0,0.6));
199
- li {
200
- float: none;
201
- clear: both;
202
- display: block;
203
- background: none;
204
- font-size: 12px;
205
- a {
206
- display: block;
207
- padding: 6px 15px;
208
- clear: both;
209
- font-weight: normal;
210
- line-height: 19px;
211
- color: #bbb;
212
- &:hover {
213
- background-color: #333;
214
- background-color: rgba(255,255,255,.25);
215
- color: #fff;
216
- }
217
- }
218
-
219
- // Dividers (basically an hr)
220
- &.divider {
221
- height: 1px;
222
- overflow: hidden;
223
- background: rgba(0,0,0,.2);
224
- border-bottom: 1px solid rgba(255,255,255,.1);
225
- margin: 5px 0;
226
- }
227
-
228
- // Section separaters
229
- span {
230
- clear: both;
231
- display: block;
232
- background: rgba(0,0,0,.2);
233
- padding: 6px 15px;
234
- cursor: default;
235
- color: @gray;
236
- border-top: 1px solid rgba(0,0,0,.2);
237
- }
238
- }
239
- }
240
- }
241
- }
242
-
243
-
244
- // PAGE HEADERS
245
- // ------------
246
-
247
- div.page-header {
248
- margin-bottom: @baseline - 1;
249
- border-bottom: 1px solid #ddd;
250
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
251
- h1 {
252
- margin-bottom: (@baseline / 2) - 1px;
253
- }
254
- }
255
-
256
-
257
- // ERROR STYLES
258
- // ------------
259
-
260
- // One-liner alert bars
261
- div.alert-message {
262
- #gradient > .vertical(transparent, rgba(0,0,0,0.15));
263
- background-color: @grayLighter;
264
- margin-bottom: @baseline;
265
- padding: 8px 15px;
266
- color: #fff;
267
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
268
- border-bottom: 1px solid rgba(0,0,0,.25);
269
- .border-radius(4px);
270
- p {
271
- color: #fff;
272
- margin-bottom: 0;
273
- + p {
274
- margin-top: 5px;
275
- }
276
- }
277
- &.error {
278
- background-color: lighten(@red, 25%);
279
- }
280
- &.warning {
281
- background-color: lighten(@yellow, 15%);
282
- }
283
- &.success {
284
- background-color: lighten(@green, 15%);
285
- }
286
- &.info {
287
- background-color: lighten(@blue, 15%);
288
- }
289
- a.close {
290
- float: right;
291
- margin-top: -2px;
292
- color: #fff;
293
- font-size: 20px;
294
- font-weight: bold;
295
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
296
- .opacity(50);
297
- .border-radius(3px);
298
- &:hover {
299
- text-decoration: none;
300
- .opacity(50);
301
- }
302
- }
303
- }
304
-
305
- // Block-level Alerts
306
- div.block-message {
307
- margin-bottom: @baseline;
308
- padding: 14px;
309
- color: @grayDark;
310
- color: rgba(0,0,0,.8);
311
- text-shadow: 0 1px 0 rgba(255,255,255,.25);
312
- .border-radius(6px);
313
- p {
314
- color: @grayDark;
315
- color: rgba(0,0,0,.8);
316
- margin-right: 30px;
317
- margin-bottom: 0;
318
- }
319
- ul {
320
- margin-bottom: 0;
321
- }
322
- strong {
323
- display: block;
324
- }
325
- a.close {
326
- display: block;
327
- color: @grayDark;
328
- color: rgba(0,0,0,.5);
329
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
330
- }
331
- &.error {
332
- background: lighten(@red, 55%);
333
- border: 1px solid lighten(@red, 50%);
334
- }
335
- &.warning {
336
- background: lighten(@yellow, 35%);
337
- border: 1px solid lighten(@yellow, 25%)
338
- }
339
- &.success {
340
- background: lighten(@green, 45%);
341
- border: 1px solid lighten(@green, 35%)
342
- }
343
- &.info {
344
- background: lighten(@blue, 45%);
345
- border: 1px solid lighten(@blue, 40%);
346
- }
347
- }
348
-
349
-
350
- // NAVIGATION
351
- // ----------
352
-
353
- // Common tab and pill styles
354
- ul.tabs,
355
- ul.pills {
356
- margin: 0 0 20px;
357
- padding: 0;
358
- .clearfix();
359
- li {
360
- display: inline;
361
- a {
362
- float: left;
363
- width: auto;
364
- }
365
- }
366
- }
367
-
368
- // Basic Tabs
369
- ul.tabs {
370
- width: 100%;
371
- border-bottom: 1px solid @grayLight;
372
- li {
373
- a {
374
- margin-bottom: -1px;
375
- margin-right: 2px;
376
- padding: 0 15px;
377
- line-height: (@baseline * 2) - 1;
378
- .border-radius(3px 3px 0 0);
379
- &:hover {
380
- background-color: @grayLighter;
381
- border-bottom: 1px solid @grayLight;
382
- }
383
- }
384
- &.active a {
385
- background-color: #fff;
386
- padding: 0 14px;
387
- border: 1px solid #ccc;
388
- border-bottom: 0;
389
- color: @gray;
390
- }
391
- }
392
- }
393
-
394
- // Basic pill nav
395
- ul.pills {
396
- li {
397
- a {
398
- margin: 5px 3px 5px 0;
399
- padding: 0 15px;
400
- text-shadow: 0 1px 1px #fff;
401
- line-height: 30px;
402
- .border-radius(15px);
403
- &:hover {
404
- background: @linkColorHover;
405
- color: #fff;
406
- text-decoration: none;
407
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
408
- }
409
- }
410
- &.active a {
411
- background: @linkColor;
412
- color: #fff;
413
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
414
- }
415
- }
416
- }
417
-
418
-
419
- // PAGINATION
420
- // ----------
421
-
422
- div.pagination {
423
- height: @baseline * 2;
424
- margin: @baseline 0;
425
- ul {
426
- float: left;
427
- margin: 0;
428
- border: 1px solid rgba(0,0,0,.15);
429
- .border-radius(3px);
430
- .box-shadow(0 1px 2px rgba(0,0,0,.075));
431
- li {
432
- display: inline;
433
- a {
434
- float: left;
435
- padding: 0 14px;
436
- line-height: (@baseline * 2) - 2;
437
- border-right: 1px solid rgba(0,0,0,.15);
438
- text-decoration: none;
439
- }
440
- a:hover,
441
- &.active a {
442
- background-color: lighten(@blue, 45%);
443
- }
444
- &.disabled a,
445
- &.disabled a:hover {
446
- background-color: none;
447
- color: @grayLight;
448
- }
449
- &.next a,
450
- &:last-child a {
451
- border: 0;
452
- }
453
- }
454
- }
455
- }
456
-
457
-
458
- // WELLS
459
- // -----
460
-
461
- div.well {
462
- background: #f5f5f5;
463
- margin-bottom: 20px;
464
- padding: 19px;
465
- min-height: 20px;
466
- border: 1px solid #ddd;
467
- .border-radius(4px);
468
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
469
- }
470
-
471
-
472
- // MODALS
473
- // ------
474
-
475
- div.modal-backdrop {
476
- background-color: rgba(0,0,0,.5);
477
- position: fixed;
478
- top: 0;
479
- left: 0;
480
- right: 0;
481
- bottom: 0;
482
- z-index: 1000;
483
- }
484
- div.modal {
485
- position: fixed;
486
- top: 50%;
487
- left: 50%;
488
- z-index: 2000;
489
- width: 560px;
490
- margin: -280px 0 0 -250px;
491
- background-color: @white;
492
- border: 1px solid rgba(0,0,0,.3);
493
- .border-radius(6px);
494
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
495
- .background-clip(padding);
496
- .modal-header {
497
- border-bottom: 1px solid #eee;
498
- padding: 5px 20px;
499
- a.close {
500
- position: absolute;
501
- right: 10px;
502
- top: 10px;
503
- color: #999;
504
- line-height:10px;
505
- font-size: 18px;
506
- }
507
- }
508
- .modal-body {
509
- padding: 20px;
510
- }
511
- .modal-footer {
512
- background-color: #f5f5f5;
513
- padding: 14px 20px 15px;
514
- border-top: 1px solid #ddd;
515
- .border-radius(0 0 6px 6px);
516
- .box-shadow(inset 0 1px 0 #fff);
517
- .clearfix();
518
- .btn {
519
- float: right;
520
- margin-left: 10px;
521
- }
522
- }
523
- }
524
-
525
-
526
- // POPOVER ARROWS
527
- // --------------
528
-
529
- #popoverArrow {
530
- .above(@arrowWidth: 5px) {
531
- bottom: 0;
532
- left: 50%;
533
- margin-left: -@arrowWidth;
534
- border-left: @arrowWidth solid transparent;
535
- border-right: @arrowWidth solid transparent;
536
- border-top: @arrowWidth solid #000;
537
- }
538
- .left(@arrowWidth: 5px) {
539
- top: 50%;
540
- right: 0;
541
- margin-top: -@arrowWidth;
542
- border-top: @arrowWidth solid transparent;
543
- border-bottom: @arrowWidth solid transparent;
544
- border-left: @arrowWidth solid #000;
545
- }
546
- .below(@arrowWidth: 5px) {
547
- top: 0;
548
- left: 50%;
549
- margin-left: -@arrowWidth;
550
- border-left: @arrowWidth solid transparent;
551
- border-right: @arrowWidth solid transparent;
552
- border-bottom: @arrowWidth solid #000;
553
- }
554
- .right(@arrowWidth: 5px) {
555
- top: 50%;
556
- left: 0;
557
- margin-top: -@arrowWidth;
558
- border-top: @arrowWidth solid transparent;
559
- border-bottom: @arrowWidth solid transparent;
560
- border-right: @arrowWidth solid #000;
561
- }
562
- }
563
-
564
- // TWIPSY
565
- // ------
566
-
567
- div.twipsy {
568
- display: block;
569
- position: absolute;
570
- visibility: visible;
571
- padding: 5px;
572
- font-size: 11px;
573
- z-index: 1000;
574
- .opacity(80);
575
- &.above .twipsy-arrow { #popoverArrow > .above(); }
576
- &.left .twipsy-arrow { #popoverArrow > .left(); }
577
- &.below .twipsy-arrow { #popoverArrow > .below(); }
578
- &.right .twipsy-arrow { #popoverArrow > .right(); }
579
- .twipsy-inner {
580
- padding: 3px 8px;
581
- background-color: #000;
582
- color: white;
583
- text-align: center;
584
- max-width: 200px;
585
- text-decoration: none;
586
- .border-radius(4px);
587
- }
588
- .twipsy-arrow {
589
- position: absolute;
590
- width: 0;
591
- height: 0;
592
- }
593
- }
594
-
595
-
596
- // POPOVERS
597
- // --------
598
-
599
- .popover {
600
- position: absolute;
601
- top: 0;
602
- left: 0;
603
- z-index: 1000;
604
- padding: 5px;
605
- display: none;
606
- &.above .arrow { #popoverArrow > .above(); }
607
- &.right .arrow { #popoverArrow > .right(); }
608
- &.below .arrow { #popoverArrow > .below(); }
609
- &.left .arrow { #popoverArrow > .left(); }
610
- .arrow {
611
- position: absolute;
612
- width: 0;
613
- height: 0;
614
- }
615
- .inner {
616
- background: rgba(0,0,0,.8);
617
- padding: 3px;
618
- overflow: hidden;
619
- width: 280px;
620
- .border-radius(6px);
621
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
622
- }
623
- .title {
624
- background: #f5f5f5;
625
- padding: 9px 15px;
626
- line-height: 1;
627
- .border-radius(3px 3px 0 0);
628
- border-bottom:1px solid #eee;
629
- }
630
- .content {
631
- background-color: @white;
632
- padding: 14px;
633
- .border-radius(0 0 3px 3px);
634
- .background-clip(padding);
635
- p, ul, ol {
636
- margin-bottom: 0;
637
- }
638
- }
639
- }