route53web 0.1.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.
@@ -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
+ #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
+ // BUTTON STYLES
292
+ // -------------
293
+
294
+
295
+ // Base .btn styles
296
+ .btn {
297
+ // Button Base
298
+ cursor: pointer;
299
+ display: inline-block;
300
+ #gradient > .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
+ .border-radius(4px);
309
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
310
+ .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
+ .gradientBar(@blue, @blueDark)
322
+ }
323
+
324
+ // Transitions
325
+ .transition(.1s linear all);
326
+
327
+ // Active and Disabled states
328
+ &.disabled {
329
+ cursor: default;
330
+ background-image: none;
331
+ .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
+ .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
+ .box-shadow(@shadow);
345
+ }
346
+
347
+ // Button Sizes
348
+ &.large {
349
+ font-size: 16px;
350
+ line-height: normal;
351
+ padding: 9px 14px 9px;
352
+ .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
+ .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
+ .border-radius(4px);
386
+ .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
+ .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
+ .opacity(20);
412
+ &:hover {
413
+ color: @black;
414
+ text-decoration: none;
415
+ .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
+ .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
+ .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
+ .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
+ .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
+ .border-radius(3px);
534
+ .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
+ .border-radius(4px);
575
+ .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
+ .border-radius(6px);
603
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
604
+ .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
+ .border-radius(0 0 6px 6px);
625
+ .box-shadow(inset 0 1px 0 #fff);
626
+ .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
+ #popoverArrow {
640
+ .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
+ .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
+ .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
+ .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
+ .opacity(80);
685
+ &.above .twipsy-arrow { #popoverArrow > .above(); }
686
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
687
+ &.below .twipsy-arrow { #popoverArrow > .below(); }
688
+ &.right .twipsy-arrow { #popoverArrow > .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
+ .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 { #popoverArrow > .above(); }
717
+ &.right .arrow { #popoverArrow > .right(); }
718
+ &.below .arrow { #popoverArrow > .below(); }
719
+ &.left .arrow { #popoverArrow > .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
+ .border-radius(6px);
733
+ .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
+ .border-radius(3px 3px 0 0);
740
+ border-bottom:1px solid #eee;
741
+ }
742
+ .content {
743
+ background-color: @white;
744
+ padding: 14px;
745
+ .border-radius(0 0 3px 3px);
746
+ .background-clip(padding-box);
747
+ p, ul, ol {
748
+ margin-bottom: 0;
749
+ }
750
+ }
751
+ }