compass_twitter_bootstrap 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,751 @@
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
+ @include vertical(#333, #222);
23
+ $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
24
+ @include 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
+ @include opacity(100);
63
+ input {
64
+ background-color: #444;
65
+ background-color: rgba(255,255,255,.3);
66
+ @include 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
+ @include border-radius(4px);
73
+ $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
74
+ @include box-shadow($shadow);
75
+ @include 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
+ @include 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
+ @include 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
+ @include border-radius(0 0 5px 5px);
205
+ @include 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
+ @include 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
+ @include box-shadow(0 1px 0 rgba(255,255,255,.5));
286
+ h1 {
287
+ margin-bottom: ($baseline / 2) - 1px;
288
+ }
289
+ }
290
+
291
+ // BUTTON STYLES
292
+ // -------------
293
+
294
+
295
+ // Base .btn styles
296
+ .btn {
297
+ // Button Base
298
+ cursor: pointer;
299
+ display: inline-block;
300
+ @include vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
301
+ padding: 5px 14px 6px;
302
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
303
+ color: #333;
304
+ font-size: 13px;
305
+ line-height: normal;
306
+ border: 1px solid #ccc;
307
+ border-bottom-color: #bbb;
308
+ @include border-radius(4px);
309
+ $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
310
+ @include box-shadow($shadow);
311
+
312
+ &:hover {
313
+ background-position: 0 -15px;
314
+ color: #333;
315
+ text-decoration: none;
316
+ }
317
+
318
+ // Primary Button Type
319
+ &.primary {
320
+ color:#fff;
321
+ @include gradientBar($blue, $blueDark)
322
+ }
323
+
324
+ // Transitions
325
+ @include transition(.1s linear all);
326
+
327
+ // Active and Disabled states
328
+ &.disabled {
329
+ cursor: default;
330
+ background-image: none;
331
+ @include opacity(65);
332
+ }
333
+
334
+ &:disabled {
335
+ // disabled pseudo can't be included with .disabled
336
+ // def because IE8 and below will drop it ;_;
337
+ cursor: default;
338
+ background-image: none;
339
+ @include opacity(65);
340
+ }
341
+
342
+ &:active {
343
+ $shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
344
+ @include box-shadow($shadow);
345
+ }
346
+
347
+ // Button Sizes
348
+ &.large {
349
+ font-size: 16px;
350
+ line-height: normal;
351
+ padding: 9px 14px 9px;
352
+ @include border-radius(6px);
353
+ }
354
+
355
+ &.small {
356
+ padding: 7px 9px 7px;
357
+ font-size: 11px;
358
+ }
359
+
360
+ }
361
+
362
+ // Help Firefox not be a jerk about adding extra padding to buttons
363
+ button.btn,
364
+ input[type=submit].btn {
365
+ &::-moz-focus-inner {
366
+ padding: 0;
367
+ border: 0;
368
+ }
369
+ }
370
+
371
+
372
+
373
+ // ERROR STYLES
374
+ // ------------
375
+
376
+ // Base alert styles
377
+ .alert-message {
378
+ @include gradientBar(#fceec1, #eedc94); // warning by default
379
+ margin-bottom: $baseline;
380
+ padding: 7px 14px;
381
+ color: $grayDark;
382
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
383
+ border-width: 1px;
384
+ border-style: solid;
385
+ @include border-radius(4px);
386
+ @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
387
+
388
+ // Remove extra margin from content
389
+ h5 {
390
+ line-height: $baseline;
391
+ }
392
+ p {
393
+ margin-bottom: 0;
394
+ }
395
+ div {
396
+ margin-top: 5px;
397
+ margin-bottom: 2px;
398
+ line-height: 28px;
399
+ }
400
+ .btn {
401
+ // Provide actions with buttons
402
+ @include box-shadow(0 1px 0 rgba(255,255,255,.25));
403
+ }
404
+ .close {
405
+ float: right;
406
+ margin-top: -2px;
407
+ color: $black;
408
+ font-size: 20px;
409
+ font-weight: bold;
410
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
411
+ @include opacity(20);
412
+ &:hover {
413
+ color: $black;
414
+ text-decoration: none;
415
+ @include opacity(40);
416
+ }
417
+ }
418
+
419
+ &.block-message {
420
+ background-image: none;
421
+ background-color: lighten(#fceec1, 5%);
422
+ padding: 14px;
423
+ border-color: #fceec1;
424
+ @include box-shadow(none);
425
+
426
+ p {
427
+ margin-right: 30px;
428
+ }
429
+ .alert-actions {
430
+ margin-top: 5px;
431
+ }
432
+ &.error,
433
+ &.success,
434
+ &.info {
435
+ color: $grayDark;
436
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
437
+ }
438
+ &.error {
439
+ background-color: lighten(#f56a66, 25%);
440
+ border-color: lighten(#f56a66, 20%);
441
+ }
442
+ &.success {
443
+ background-color: lighten(#62c462, 30%);
444
+ border-color: lighten(#62c462, 25%);
445
+ }
446
+ &.info {
447
+ background-color: lighten(#6bd0ee, 25%);
448
+ border-color: lighten(#6bd0ee, 20%);
449
+ }
450
+ }
451
+ }
452
+
453
+ // NAVIGATION
454
+ // ----------
455
+
456
+ // Common tab and pill styles
457
+ .tabs,
458
+ .pills {
459
+ margin: 0 0 20px;
460
+ padding: 0;
461
+ @include clearfix();
462
+ li {
463
+ display: inline;
464
+ a {
465
+ float: left;
466
+ width: auto;
467
+ }
468
+ }
469
+ }
470
+
471
+ // Basic Tabs
472
+ .tabs {
473
+ width: 100%;
474
+ border-bottom: 1px solid $grayLight;
475
+ li {
476
+ a {
477
+ margin-bottom: -1px;
478
+ margin-right: 2px;
479
+ padding: 0 15px;
480
+ line-height: ($baseline * 2) - 1;
481
+ @include border-radius(3px 3px 0 0);
482
+ &:hover {
483
+ background-color: $grayLighter;
484
+ border-bottom: 1px solid $grayLight;
485
+ }
486
+ }
487
+ &.active a {
488
+ background-color: #fff;
489
+ padding: 0 14px;
490
+ border: 1px solid #ccc;
491
+ border-bottom: 0;
492
+ color: $gray;
493
+ }
494
+ }
495
+ }
496
+
497
+ // Basic pill nav
498
+ .pills {
499
+ li {
500
+ a {
501
+ margin: 5px 3px 5px 0;
502
+ padding: 0 15px;
503
+ text-shadow: 0 1px 1px #fff;
504
+ line-height: 30px;
505
+ @include border-radius(15px);
506
+ &:hover {
507
+ background: $linkColorHover;
508
+ color: #fff;
509
+ text-decoration: none;
510
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
511
+ }
512
+ }
513
+ &.active a {
514
+ background: $linkColor;
515
+ color: #fff;
516
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
517
+ }
518
+ }
519
+ }
520
+
521
+
522
+ // PAGINATION
523
+ // ----------
524
+
525
+ .pagination {
526
+ height: $baseline * 2;
527
+ margin: $baseline 0;
528
+ ul {
529
+ float: left;
530
+ margin: 0;
531
+ border: 1px solid #ddd;
532
+ border: 1px solid rgba(0,0,0,.15);
533
+ @include border-radius(3px);
534
+ @include box-shadow(0 1px 2px rgba(0,0,0,.05));
535
+ li {
536
+ display: inline;
537
+ a {
538
+ float: left;
539
+ padding: 0 14px;
540
+ line-height: ($baseline * 2) - 2;
541
+ border-right: 1px solid;
542
+ border-right-color: #ddd;
543
+ border-right-color: rgba(0,0,0,.15);
544
+ *border-right-color: #ddd; /* IE6-7 */
545
+ text-decoration: none;
546
+ }
547
+ a:hover,
548
+ &.active a {
549
+ background-color: lighten($blue, 45%);
550
+ }
551
+ &.disabled a,
552
+ &.disabled a:hover {
553
+ background-color: transparent;
554
+ color: $grayLight;
555
+ }
556
+ &.next a {
557
+ border: 0;
558
+ }
559
+ }
560
+ }
561
+ }
562
+
563
+
564
+ // WELLS
565
+ // -----
566
+
567
+ .well {
568
+ background-color: #f5f5f5;
569
+ margin-bottom: 20px;
570
+ padding: 19px;
571
+ min-height: 20px;
572
+ border: 1px solid #eee;
573
+ border: 1px solid rgba(0,0,0,.05);
574
+ @include border-radius(4px);
575
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
576
+ }
577
+
578
+
579
+ // MODALS
580
+ // ------
581
+
582
+ .modal-backdrop {
583
+ background-color: rgba(0,0,0,.5);
584
+ position: fixed;
585
+ top: 0;
586
+ left: 0;
587
+ right: 0;
588
+ bottom: 0;
589
+ z-index: 1000;
590
+ }
591
+ .modal {
592
+ position: fixed;
593
+ top: 50%;
594
+ left: 50%;
595
+ z-index: 2000;
596
+ width: 560px;
597
+ margin: -280px 0 0 -250px;
598
+ background-color: $white;
599
+ border: 1px solid #999;
600
+ border: 1px solid rgba(0,0,0,.3);
601
+ *border: 1px solid #999; /* IE6-7 */
602
+ @include border-radius(6px);
603
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
604
+ @include background-clip(padding-box);
605
+ .modal-header {
606
+ border-bottom: 1px solid #eee;
607
+ padding: 5px 20px;
608
+ .close {
609
+ position: absolute;
610
+ right: 10px;
611
+ top: 10px;
612
+ color: #999;
613
+ line-height:10px;
614
+ font-size: 18px;
615
+ }
616
+ }
617
+ .modal-body {
618
+ padding: 20px;
619
+ }
620
+ .modal-footer {
621
+ background-color: #f5f5f5;
622
+ padding: 14px 20px 15px;
623
+ border-top: 1px solid #ddd;
624
+ @include border-radius(0 0 6px 6px);
625
+ @include box-shadow(inset 0 1px 0 #fff);
626
+ @include clearfix();
627
+ margin-bottom: 0;
628
+ .btn {
629
+ float: right;
630
+ margin-left: 10px;
631
+ }
632
+ }
633
+ }
634
+
635
+
636
+ // POPOVER ARROWS
637
+ // --------------
638
+
639
+
640
+ @mixin popover-arrow-above($arrowWidth: 5px) {
641
+ bottom: 0;
642
+ left: 50%;
643
+ margin-left: -$arrowWidth;
644
+ border-left: $arrowWidth solid transparent;
645
+ border-right: $arrowWidth solid transparent;
646
+ border-top: $arrowWidth solid #000;
647
+ }
648
+ @mixin popover-arrow-left($arrowWidth: 5px) {
649
+ top: 50%;
650
+ right: 0;
651
+ margin-top: -$arrowWidth;
652
+ border-top: $arrowWidth solid transparent;
653
+ border-bottom: $arrowWidth solid transparent;
654
+ border-left: $arrowWidth solid #000;
655
+ }
656
+ @mixin popover-arrow-below($arrowWidth: 5px) {
657
+ top: 0;
658
+ left: 50%;
659
+ margin-left: -$arrowWidth;
660
+ border-left: $arrowWidth solid transparent;
661
+ border-right: $arrowWidth solid transparent;
662
+ border-bottom: $arrowWidth solid #000;
663
+ }
664
+ @mixin popover-arrow-right($arrowWidth: 5px) {
665
+ top: 50%;
666
+ left: 0;
667
+ margin-top: -$arrowWidth;
668
+ border-top: $arrowWidth solid transparent;
669
+ border-bottom: $arrowWidth solid transparent;
670
+ border-right: $arrowWidth solid #000;
671
+ }
672
+
673
+
674
+ // TWIPSY
675
+ // ------
676
+
677
+ .twipsy {
678
+ display: block;
679
+ position: absolute;
680
+ visibility: visible;
681
+ padding: 5px;
682
+ font-size: 11px;
683
+ z-index: 1000;
684
+ @include opacity(80);
685
+ &.above .twipsy-arrow { @include popover-arrow-above(); }
686
+ &.left .twipsy-arrow { @include popover-arrow-left(); }
687
+ &.below .twipsy-arrow { @include popover-arrow-below(); }
688
+ &.right .twipsy-arrow { @include popover-arrow-right(); }
689
+ .twipsy-inner {
690
+ padding: 3px 8px;
691
+ background-color: #000;
692
+ color: white;
693
+ text-align: center;
694
+ max-width: 200px;
695
+ text-decoration: none;
696
+ @include border-radius(4px);
697
+ }
698
+ .twipsy-arrow {
699
+ position: absolute;
700
+ width: 0;
701
+ height: 0;
702
+ }
703
+ }
704
+
705
+
706
+ // POPOVERS
707
+ // --------
708
+
709
+ .popover {
710
+ position: absolute;
711
+ top: 0;
712
+ left: 0;
713
+ z-index: 1000;
714
+ padding: 5px;
715
+ display: none;
716
+ &.above .arrow { @include popover-arrow-above(); }
717
+ &.right .arrow { @include popover-arrow-right(); }
718
+ &.below .arrow { @include popover-arrow-below(); }
719
+ &.left .arrow { @include popover-arrow-left(); }
720
+ .arrow {
721
+ position: absolute;
722
+ width: 0;
723
+ height: 0;
724
+ }
725
+ .inner {
726
+ background-color: #333;
727
+ background-color: rgba(0,0,0,.8);
728
+ *background-color: #333; /* IE 6-7 */
729
+ padding: 3px;
730
+ overflow: hidden;
731
+ width: 280px;
732
+ @include border-radius(6px);
733
+ @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
734
+ }
735
+ .title {
736
+ background-color: #f5f5f5;
737
+ padding: 9px 15px;
738
+ line-height: 1;
739
+ @include border-radius(3px 3px 0 0);
740
+ border-bottom:1px solid #eee;
741
+ }
742
+ .content {
743
+ background-color: $white;
744
+ padding: 14px;
745
+ @include border-radius(0 0 3px 3px);
746
+ @include background-clip(padding-box);
747
+ p, ul, ol {
748
+ margin-bottom: 0;
749
+ }
750
+ }
751
+ }