Project

General

Profile

« Previous | Next » 

Revision 7fe3e55f

Added by Guillaume Denis over 7 years ago

add bootstrap responsive features

View differences:

ckanext/ozwillo_theme/fanstatic/responsive.css
1
/*!
2
 * Bootstrap Responsive v2.3.2
3
 *
4
 * Copyright 2013 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 by @mdo and @fat.
9
 */
10

  
11
.clearfix {
12
  *zoom: 1;
13
}
14

  
15
.clearfix:before,
16
.clearfix:after {
17
  display: table;
18
  line-height: 0;
19
  content: "";
20
}
21

  
22
.clearfix:after {
23
  clear: both;
24
}
25

  
26
.hide-text {
27
  font: 0/0 a;
28
  color: transparent;
29
  text-shadow: none;
30
  background-color: transparent;
31
  border: 0;
32
}
33

  
34
.input-block-level {
35
  display: block;
36
  width: 100%;
37
  min-height: 30px;
38
  -webkit-box-sizing: border-box;
39
     -moz-box-sizing: border-box;
40
          box-sizing: border-box;
41
}
42

  
43
@-ms-viewport {
44
  width: device-width;
45
}
46

  
47
.hidden {
48
  display: none;
49
  visibility: hidden;
50
}
51

  
52
.visible-phone {
53
  display: none !important;
54
}
55

  
56
.visible-tablet {
57
  display: none !important;
58
}
59

  
60
.hidden-desktop {
61
  display: none !important;
62
}
63

  
64
.visible-desktop {
65
  display: inherit !important;
66
}
67

  
68
@media (min-width: 768px) and (max-width: 979px) {
69
  .hidden-desktop {
70
    display: inherit !important;
71
  }
72
  .visible-desktop {
73
    display: none !important ;
74
  }
75
  .visible-tablet {
76
    display: inherit !important;
77
  }
78
  .hidden-tablet {
79
    display: none !important;
80
  }
81
}
82

  
83
@media (max-width: 767px) {
84
  .hidden-desktop {
85
    display: inherit !important;
86
  }
87
  .visible-desktop {
88
    display: none !important;
89
  }
90
  .visible-phone {
91
    display: inherit !important;
92
  }
93
  .hidden-phone {
94
    display: none !important;
95
  }
96
}
97

  
98
.visible-print {
99
  display: none !important;
100
}
101

  
102
@media print {
103
  .visible-print {
104
    display: inherit !important;
105
  }
106
  .hidden-print {
107
    display: none !important;
108
  }
109
}
110

  
111
@media (min-width: 1200px) {
112
  .row {
113
    margin-left: -30px;
114
    *zoom: 1;
115
  }
116
  .row:before,
117
  .row:after {
118
    display: table;
119
    line-height: 0;
120
    content: "";
121
  }
122
  .row:after {
123
    clear: both;
124
  }
125
  [class*="span"] {
126
    float: left;
127
    margin-left: 30px;
128
  }
129
  .container,
130
  .navbar-static-top .container,
131
  .navbar-fixed-top .container,
132
  .navbar-fixed-bottom .container {
133
    width: 1170px;
134
  }
135
  .span12 {
136
    width: 1170px;
137
  }
138
  .span11 {
139
    width: 1070px;
140
  }
141
  .span10 {
142
    width: 970px;
143
  }
144
  .span9 {
145
    width: 870px;
146
  }
147
  .span8 {
148
    width: 770px;
149
  }
150
  .span7 {
151
    width: 670px;
152
  }
153
  .span6 {
154
    width: 570px;
155
  }
156
  .span5 {
157
    width: 470px;
158
  }
159
  .span4 {
160
    width: 370px;
161
  }
162
  .span3 {
163
    width: 270px;
164
  }
165
  .span2 {
166
    width: 170px;
167
  }
168
  .span1 {
169
    width: 70px;
170
  }
171
  .offset12 {
172
    margin-left: 1230px;
173
  }
174
  .offset11 {
175
    margin-left: 1130px;
176
  }
177
  .offset10 {
178
    margin-left: 1030px;
179
  }
180
  .offset9 {
181
    margin-left: 930px;
182
  }
183
  .offset8 {
184
    margin-left: 830px;
185
  }
186
  .offset7 {
187
    margin-left: 730px;
188
  }
189
  .offset6 {
190
    margin-left: 630px;
191
  }
192
  .offset5 {
193
    margin-left: 530px;
194
  }
195
  .offset4 {
196
    margin-left: 430px;
197
  }
198
  .offset3 {
199
    margin-left: 330px;
200
  }
201
  .offset2 {
202
    margin-left: 230px;
203
  }
204
  .offset1 {
205
    margin-left: 130px;
206
  }
207
  input,
208
  textarea,
209
  .uneditable-input {
210
    margin-left: 0;
211
  }
212
  .controls-row [class*="span"] + [class*="span"] {
213
    margin-left: 30px;
214
  }
215
  input.span12,
216
  textarea.span12,
217
  .uneditable-input.span12 {
218
    width: 1156px;
219
  }
220
  input.span11,
221
  textarea.span11,
222
  .uneditable-input.span11 {
223
    width: 1056px;
224
  }
225
  input.span10,
226
  textarea.span10,
227
  .uneditable-input.span10 {
228
    width: 956px;
229
  }
230
  input.span9,
231
  textarea.span9,
232
  .uneditable-input.span9 {
233
    width: 856px;
234
  }
235
  input.span8,
236
  textarea.span8,
237
  .uneditable-input.span8 {
238
    width: 756px;
239
  }
240
  input.span7,
241
  textarea.span7,
242
  .uneditable-input.span7 {
243
    width: 656px;
244
  }
245
  input.span6,
246
  textarea.span6,
247
  .uneditable-input.span6 {
248
    width: 556px;
249
  }
250
  input.span5,
251
  textarea.span5,
252
  .uneditable-input.span5 {
253
    width: 456px;
254
  }
255
  input.span4,
256
  textarea.span4,
257
  .uneditable-input.span4 {
258
    width: 356px;
259
  }
260
  input.span3,
261
  textarea.span3,
262
  .uneditable-input.span3 {
263
    width: 256px;
264
  }
265
  input.span2,
266
  textarea.span2,
267
  .uneditable-input.span2 {
268
    width: 156px;
269
  }
270
  input.span1,
271
  textarea.span1,
272
  .uneditable-input.span1 {
273
    width: 56px;
274
  }
275
  .thumbnails {
276
    margin-left: -30px;
277
  }
278
  .thumbnails > li {
279
    margin-left: 30px;
280
  }
281
}
282

  
283
@media (min-width: 768px) and (max-width: 979px) {
284
  .row {
285
    margin-left: -20px;
286
    *zoom: 1;
287
  }
288
  .row:before,
289
  .row:after {
290
    display: table;
291
    line-height: 0;
292
    content: "";
293
  }
294
  .row:after {
295
    clear: both;
296
  }
297
  [class*="span"] {
298
    float: left;
299
    min-height: 1px;
300
    margin-left: 20px;
301
  }
302
  .container,
303
  .navbar-static-top .container,
304
  .navbar-fixed-top .container,
305
  .navbar-fixed-bottom .container {
306
    width: 724px;
307
  }
308
  .span12 {
309
    width: 724px;
310
  }
311
  .span11 {
312
    width: 662px;
313
  }
314
  .span10 {
315
    width: 600px;
316
  }
317
  .span9 {
318
    width: 538px;
319
  }
320
  .span8 {
321
    width: 476px;
322
  }
323
  .span7 {
324
    width: 414px;
325
  }
326
  .span6 {
327
    width: 352px;
328
  }
329
  .span5 {
330
    width: 290px;
331
  }
332
  .span4 {
333
    width: 228px;
334
  }
335
  .span3 {
336
    width: 166px;
337
  }
338
  .span2 {
339
    width: 104px;
340
  }
341
  .span1 {
342
    width: 42px;
343
  }
344
  .offset12 {
345
    margin-left: 764px;
346
  }
347
  .offset11 {
348
    margin-left: 702px;
349
  }
350
  .offset10 {
351
    margin-left: 640px;
352
  }
353
  .offset9 {
354
    margin-left: 578px;
355
  }
356
  .offset8 {
357
    margin-left: 516px;
358
  }
359
  .offset7 {
360
    margin-left: 454px;
361
  }
362
  .offset6 {
363
    margin-left: 392px;
364
  }
365
  .offset5 {
366
    margin-left: 330px;
367
  }
368
  .offset4 {
369
    margin-left: 268px;
370
  }
371
  .offset3 {
372
    margin-left: 206px;
373
  }
374
  .offset2 {
375
    margin-left: 144px;
376
  }
377
  .offset1 {
378
    margin-left: 82px;
379
  }
380

  
381
  input,
382
  textarea,
383
  .uneditable-input {
384
    margin-left: 0;
385
  }
386
  .controls-row [class*="span"] + [class*="span"] {
387
    margin-left: 20px;
388
  }
389
  input.span12,
390
  textarea.span12,
391
  .uneditable-input.span12 {
392
    width: 710px;
393
  }
394
  input.span11,
395
  textarea.span11,
396
  .uneditable-input.span11 {
397
    width: 648px;
398
  }
399
  input.span10,
400
  textarea.span10,
401
  .uneditable-input.span10 {
402
    width: 586px;
403
  }
404
  input.span9,
405
  textarea.span9,
406
  .uneditable-input.span9 {
407
    width: 524px;
408
  }
409
  input.span8,
410
  textarea.span8,
411
  .uneditable-input.span8 {
412
    width: 462px;
413
  }
414
  input.span7,
415
  textarea.span7,
416
  .uneditable-input.span7 {
417
    width: 400px;
418
  }
419
  input.span6,
420
  textarea.span6,
421
  .uneditable-input.span6 {
422
    width: 338px;
423
  }
424
  input.span5,
425
  textarea.span5,
426
  .uneditable-input.span5 {
427
    width: 276px;
428
  }
429
  input.span4,
430
  textarea.span4,
431
  .uneditable-input.span4 {
432
    width: 214px;
433
  }
434
  input.span3,
435
  textarea.span3,
436
  .uneditable-input.span3 {
437
    width: 152px;
438
  }
439
  input.span2,
440
  textarea.span2,
441
  .uneditable-input.span2 {
442
    width: 90px;
443
  }
444
  input.span1,
445
  textarea.span1,
446
  .uneditable-input.span1 {
447
    width: 28px;
448
  }
449
}
450

  
451
@media (max-width: 767px) {
452
  .navbar-fixed-top,
453
  .navbar-fixed-bottom,
454
  .navbar-static-top {
455
    margin-right: -20px;
456
    margin-left: -20px;
457
  }
458
  .dl-horizontal dt {
459
    float: none;
460
    width: auto;
461
    clear: none;
462
    text-align: left;
463
  }
464
  .dl-horizontal dd {
465
    margin-left: 0;
466
  }
467
  .container {
468
    width: auto;
469
  }
470
  .thumbnails {
471
    margin-left: 0;
472
  }
473
  .row {
474
    margin: 0 20px;
475
  }
476
  .thumbnails > li {
477
    float: none;
478
    margin-left: 0;
479
  }
480
  [class*="span"],
481
  .uneditable-input[class*="span"],
482
  .span12 {
483
    width: 100%;
484
    -webkit-box-sizing: border-box;
485
       -moz-box-sizing: border-box;
486
            box-sizing: border-box;
487
    margin-left: 0;
488
  }
489
  .input-large,
490
  .input-xlarge,
491
  .input-xxlarge,
492
  input[class*="span"],
493
  select[class*="span"],
494
  textarea[class*="span"],
495
  .uneditable-input {
496
    display: block;
497
    width: 100%;
498
    min-height: 30px;
499
    -webkit-box-sizing: border-box;
500
       -moz-box-sizing: border-box;
501
            box-sizing: border-box;
502
  }
503
  .input-prepend input,
504
  .input-append input,
505
  .input-prepend input[class*="span"],
506
  .input-append input[class*="span"] {
507
    display: inline-block;
508
    width: auto;
509
  }
510
  .controls-row [class*="span"] + [class*="span"] {
511
    margin-left: 0;
512
  }
513
  .modal {
514
    position: fixed;
515
    top: 20px;
516
    right: 20px;
517
    left: 20px;
518
    width: auto;
519
    margin: 0;
520
  }
521
  .modal.fade {
522
    top: -100px;
523
  }
524
  .modal.fade.in {
525
    top: 20px;
526
  }
527
}
528

  
529
@media (max-width: 480px) {
530
  .nav-collapse {
531
    -webkit-transform: translate3d(0, 0, 0);
532
  }
533
  .page-header h1 small {
534
    display: block;
535
    line-height: 20px;
536
  }
537
  input[type="checkbox"],
538
  input[type="radio"] {
539
    border: 1px solid #ccc;
540
  }
541
  .form-horizontal .control-label {
542
    float: none;
543
    width: auto;
544
    padding-top: 0;
545
    text-align: left;
546
  }
547
  .form-horizontal .controls {
548
    margin-left: 0;
549
  }
550
  .form-horizontal .control-list {
551
    padding-top: 0;
552
  }
553
  .form-horizontal .form-actions {
554
    padding-right: 10px;
555
    padding-left: 10px;
556
  }
557
  .media .pull-left,
558
  .media .pull-right {
559
    display: block;
560
    float: none;
561
    margin-bottom: 10px;
562
  }
563
  .media-object {
564
    margin-right: 0;
565
    margin-left: 0;
566
  }
567
  .modal {
568
    top: 10px;
569
    right: 10px;
570
    left: 10px;
571
  }
572
  .modal-header .close {
573
    padding: 10px;
574
    margin: -10px;
575
  }
576
  .carousel-caption {
577
    position: static;
578
  }
579
}
580

  
581
@media (max-width: 979px) {
582
  body {
583
    padding-top: 0;
584
  }
585
  .navbar-fixed-top,
586
  .navbar-fixed-bottom {
587
    position: static;
588
  }
589
  .navbar-fixed-top {
590
    margin-bottom: 20px;
591
  }
592
  .navbar-fixed-bottom {
593
    margin-top: 20px;
594
  }
595
  .navbar-fixed-top .navbar-inner,
596
  .navbar-fixed-bottom .navbar-inner {
597
    padding: 5px;
598
  }
599
  .navbar .container {
600
    width: auto;
601
    padding: 0;
602
  }
603
  .navbar .brand {
604
    padding-right: 10px;
605
    padding-left: 10px;
606
    margin: 0 0 0 -5px;
607
  }
608
  .nav-collapse {
609
    clear: both;
610
  }
611
  .nav-collapse .nav {
612
    float: none;
613
    margin: 0 0 10px;
614
  }
615
  .nav-collapse .nav > li {
616
    float: none;
617
  }
618
  .nav-collapse .nav > li > a {
619
    margin-bottom: 2px;
620
  }
621
  .nav-collapse .nav > .divider-vertical {
622
    display: none;
623
  }
624
  .nav-collapse .nav .nav-header {
625
    color: #777777;
626
    text-shadow: none;
627
  }
628
  .nav-collapse .nav > li > a,
629
  .nav-collapse .dropdown-menu a {
630
    padding: 9px 15px;
631
    font-weight: bold;
632
    color: #777777;
633
    -webkit-border-radius: 3px;
634
       -moz-border-radius: 3px;
635
            border-radius: 3px;
636
  }
637
  .nav-collapse .btn {
638
    padding: 4px 10px 4px;
639
    font-weight: normal;
640
    -webkit-border-radius: 4px;
641
       -moz-border-radius: 4px;
642
            border-radius: 4px;
643
  }
644
  .nav-collapse .dropdown-menu li + li a {
645
    margin-bottom: 2px;
646
  }
647
  .nav-collapse .nav > li > a:hover,
648
  .nav-collapse .nav > li > a:focus,
649
  .nav-collapse .dropdown-menu a:hover,
650
  .nav-collapse .dropdown-menu a:focus {
651
    background-color: #f2f2f2;
652
  }
653
  .navbar-inverse .nav-collapse .nav > li > a,
654
  .navbar-inverse .nav-collapse .dropdown-menu a {
655
    color: #999999;
656
  }
657
  .navbar-inverse .nav-collapse .nav > li > a:hover,
658
  .navbar-inverse .nav-collapse .nav > li > a:focus,
659
  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
660
  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
661
    background-color: #111111;
662
  }
663
  .nav-collapse.in .btn-group {
664
    padding: 0;
665
    margin-top: 5px;
666
  }
667
  .nav-collapse .dropdown-menu {
668
    position: static;
669
    top: auto;
670
    left: auto;
671
    display: none;
672
    float: none;
673
    max-width: none;
674
    padding: 0;
675
    margin: 0 15px;
676
    background-color: transparent;
677
    border: none;
678
    -webkit-border-radius: 0;
679
       -moz-border-radius: 0;
680
            border-radius: 0;
681
    -webkit-box-shadow: none;
682
       -moz-box-shadow: none;
683
            box-shadow: none;
684
  }
685
  .nav-collapse .open > .dropdown-menu {
686
    display: block;
687
  }
688
  .nav-collapse .dropdown-menu:before,
689
  .nav-collapse .dropdown-menu:after {
690
    display: none;
691
  }
692
  .nav-collapse .dropdown-menu .divider {
693
    display: none;
694
  }
695
  .nav-collapse .nav > li > .dropdown-menu:before,
696
  .nav-collapse .nav > li > .dropdown-menu:after {
697
    display: none;
698
  }
699
  .nav-collapse .navbar-form,
700
  .nav-collapse .navbar-search {
701
    float: none;
702
    padding: 10px 15px;
703
    margin: 10px 0;
704
    border-top: 1px solid #f2f2f2;
705
    border-bottom: 1px solid #f2f2f2;
706
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
707
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
708
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
709
  }
710
  .navbar-inverse .nav-collapse .navbar-form,
711
  .navbar-inverse .nav-collapse .navbar-search {
712
    border-top-color: #111111;
713
    border-bottom-color: #111111;
714
  }
715
  .navbar .nav-collapse .nav.pull-right {
716
    float: none;
717
    margin-left: 0;
718
  }
719
  .nav-collapse,
720
  .nav-collapse.collapse {
721
    height: 0;
722
    overflow: hidden;
723
  }
724
  .navbar .btn-navbar {
725
    display: block;
726
  }
727
  .navbar-static .navbar-inner {
728
    padding-right: 10px;
729
    padding-left: 10px;
730
  }
731
}
732

  
733
@media (min-width: 980px) {
734
  .nav-collapse.collapse {
735
    height: auto !important;
736
    overflow: visible !important;
737
  }
738
}

Also available in: Unified diff