]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_grid.scss
settings.php: add missing french translation
[bookstack] / resources / assets / sass / _grid.scss
1
2 /** Flexbox styling rules **/
3 body.flexbox {
4   display: flex;
5   flex-direction: column;
6   align-items: stretch;
7   height: 100%;
8   min-height: 100%;
9   max-height: 100%;
10   overflow: hidden;
11   #content {
12     flex: 1;
13     display: flex;
14     min-height: 0;
15   }
16 }
17
18 .flex-fill {
19   display: flex;
20   align-items: stretch;
21   min-height: 0;
22   position: relative;
23   .flex, &.flex {
24     min-height: 0;
25     flex: 1;
26   }
27 }
28
29 .flex-child > div {
30   flex: 1;
31 }
32
33 //body.ie .flex-child > div {
34 //  flex: 1 0 0px;
35 //}
36
37 /** Rules for all columns */
38 div[class^="col-"] img {
39   max-width: 100%;
40 }
41
42 .container {
43   max-width: $max-width;
44   margin-left: auto;
45   margin-right: auto;
46   padding-left: $-m;
47   padding-right: $-m;
48   &.fluid {
49     max-width: 100%;
50   }
51   &.medium {
52     max-width: 992px;
53   }
54   &.small {
55     max-width: 840px;
56   }
57 }
58
59 .row {
60   margin-left: -$-m;
61   margin-right: -$-m;
62 }
63
64 .float {
65   float: left;
66   &.right {
67     float: right;
68   }
69 }
70
71 .block {
72   display: block;
73   position: relative;
74 }
75
76 .inline {
77   display: inline;
78 }
79
80 .block.inline {
81   display: inline-block;
82 }
83
84 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
85   position: relative;
86   min-height: 1px;
87   padding-left: $-m;
88   padding-right: $-m;
89 }
90 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
91   float: left;
92 }
93 .col-xs-12 {
94   width: 100%;
95 }
96 .col-xs-11 {
97   width: 91.66666667%;
98 }
99 .col-xs-10 {
100   width: 83.33333333%;
101 }
102 .col-xs-9 {
103   width: 75%;
104 }
105 .col-xs-8 {
106   width: 66.66666667%;
107 }
108 .col-xs-7 {
109   width: 58.33333333%;
110 }
111 .col-xs-6 {
112   width: 50%;
113 }
114 .col-xs-5 {
115   width: 41.66666667%;
116 }
117 .col-xs-4 {
118   width: 33.33333333%;
119 }
120 .col-xs-3 {
121   width: 25%;
122 }
123 .col-xs-2 {
124   width: 16.66666667%;
125 }
126 .col-xs-1 {
127   width: 8.33333333%;
128 }
129 .col-xs-pull-12 {
130   right: 100%;
131 }
132 .col-xs-pull-11 {
133   right: 91.66666667%;
134 }
135 .col-xs-pull-10 {
136   right: 83.33333333%;
137 }
138 .col-xs-pull-9 {
139   right: 75%;
140 }
141 .col-xs-pull-8 {
142   right: 66.66666667%;
143 }
144 .col-xs-pull-7 {
145   right: 58.33333333%;
146 }
147 .col-xs-pull-6 {
148   right: 50%;
149 }
150 .col-xs-pull-5 {
151   right: 41.66666667%;
152 }
153 .col-xs-pull-4 {
154   right: 33.33333333%;
155 }
156 .col-xs-pull-3 {
157   right: 25%;
158 }
159 .col-xs-pull-2 {
160   right: 16.66666667%;
161 }
162 .col-xs-pull-1 {
163   right: 8.33333333%;
164 }
165 .col-xs-pull-0 {
166   right: auto;
167 }
168 .col-xs-push-12 {
169   left: 100%;
170 }
171 .col-xs-push-11 {
172   left: 91.66666667%;
173 }
174 .col-xs-push-10 {
175   left: 83.33333333%;
176 }
177 .col-xs-push-9 {
178   left: 75%;
179 }
180 .col-xs-push-8 {
181   left: 66.66666667%;
182 }
183 .col-xs-push-7 {
184   left: 58.33333333%;
185 }
186 .col-xs-push-6 {
187   left: 50%;
188 }
189 .col-xs-push-5 {
190   left: 41.66666667%;
191 }
192 .col-xs-push-4 {
193   left: 33.33333333%;
194 }
195 .col-xs-push-3 {
196   left: 25%;
197 }
198 .col-xs-push-2 {
199   left: 16.66666667%;
200 }
201 .col-xs-push-1 {
202   left: 8.33333333%;
203 }
204 .col-xs-push-0 {
205   left: auto;
206 }
207 .col-xs-offset-12 {
208   margin-left: 100%;
209 }
210 .col-xs-offset-11 {
211   margin-left: 91.66666667%;
212 }
213 .col-xs-offset-10 {
214   margin-left: 83.33333333%;
215 }
216 .col-xs-offset-9 {
217   margin-left: 75%;
218 }
219 .col-xs-offset-8 {
220   margin-left: 66.66666667%;
221 }
222 .col-xs-offset-7 {
223   margin-left: 58.33333333%;
224 }
225 .col-xs-offset-6 {
226   margin-left: 50%;
227 }
228 .col-xs-offset-5 {
229   margin-left: 41.66666667%;
230 }
231 .col-xs-offset-4 {
232   margin-left: 33.33333333%;
233 }
234 .col-xs-offset-3 {
235   margin-left: 25%;
236 }
237 .col-xs-offset-2 {
238   margin-left: 16.66666667%;
239 }
240 .col-xs-offset-1 {
241   margin-left: 8.33333333%;
242 }
243 .col-xs-offset-0 {
244   margin-left: 0%;
245 }
246 @media (min-width: $screen-sm) {
247   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
248     float: left;
249   }
250   .col-sm-12 {
251     width: 100%;
252   }
253   .col-sm-11 {
254     width: 91.66666667%;
255   }
256   .col-sm-10 {
257     width: 83.33333333%;
258   }
259   .col-sm-9 {
260     width: 75%;
261   }
262   .col-sm-8 {
263     width: 66.66666667%;
264   }
265   .col-sm-7 {
266     width: 58.33333333%;
267   }
268   .col-sm-6 {
269     width: 50%;
270   }
271   .col-sm-5 {
272     width: 41.66666667%;
273   }
274   .col-sm-4 {
275     width: 33.33333333%;
276   }
277   .col-sm-3 {
278     width: 25%;
279   }
280   .col-sm-2 {
281     width: 16.66666667%;
282   }
283   .col-sm-1 {
284     width: 8.33333333%;
285   }
286   .col-sm-pull-12 {
287     right: 100%;
288   }
289   .col-sm-pull-11 {
290     right: 91.66666667%;
291   }
292   .col-sm-pull-10 {
293     right: 83.33333333%;
294   }
295   .col-sm-pull-9 {
296     right: 75%;
297   }
298   .col-sm-pull-8 {
299     right: 66.66666667%;
300   }
301   .col-sm-pull-7 {
302     right: 58.33333333%;
303   }
304   .col-sm-pull-6 {
305     right: 50%;
306   }
307   .col-sm-pull-5 {
308     right: 41.66666667%;
309   }
310   .col-sm-pull-4 {
311     right: 33.33333333%;
312   }
313   .col-sm-pull-3 {
314     right: 25%;
315   }
316   .col-sm-pull-2 {
317     right: 16.66666667%;
318   }
319   .col-sm-pull-1 {
320     right: 8.33333333%;
321   }
322   .col-sm-pull-0 {
323     right: auto;
324   }
325   .col-sm-push-12 {
326     left: 100%;
327   }
328   .col-sm-push-11 {
329     left: 91.66666667%;
330   }
331   .col-sm-push-10 {
332     left: 83.33333333%;
333   }
334   .col-sm-push-9 {
335     left: 75%;
336   }
337   .col-sm-push-8 {
338     left: 66.66666667%;
339   }
340   .col-sm-push-7 {
341     left: 58.33333333%;
342   }
343   .col-sm-push-6 {
344     left: 50%;
345   }
346   .col-sm-push-5 {
347     left: 41.66666667%;
348   }
349   .col-sm-push-4 {
350     left: 33.33333333%;
351   }
352   .col-sm-push-3 {
353     left: 25%;
354   }
355   .col-sm-push-2 {
356     left: 16.66666667%;
357   }
358   .col-sm-push-1 {
359     left: 8.33333333%;
360   }
361   .col-sm-push-0 {
362     left: auto;
363   }
364   .col-sm-offset-12 {
365     margin-left: 100%;
366   }
367   .col-sm-offset-11 {
368     margin-left: 91.66666667%;
369   }
370   .col-sm-offset-10 {
371     margin-left: 83.33333333%;
372   }
373   .col-sm-offset-9 {
374     margin-left: 75%;
375   }
376   .col-sm-offset-8 {
377     margin-left: 66.66666667%;
378   }
379   .col-sm-offset-7 {
380     margin-left: 58.33333333%;
381   }
382   .col-sm-offset-6 {
383     margin-left: 50%;
384   }
385   .col-sm-offset-5 {
386     margin-left: 41.66666667%;
387   }
388   .col-sm-offset-4 {
389     margin-left: 33.33333333%;
390   }
391   .col-sm-offset-3 {
392     margin-left: 25%;
393   }
394   .col-sm-offset-2 {
395     margin-left: 16.66666667%;
396   }
397   .col-sm-offset-1 {
398     margin-left: 8.33333333%;
399   }
400   .col-sm-offset-0 {
401     margin-left: 0%;
402   }
403 }
404 @media (min-width: $screen-md) {
405   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
406     float: left;
407   }
408   .col-md-12 {
409     width: 100%;
410   }
411   .col-md-11 {
412     width: 91.66666667%;
413   }
414   .col-md-10 {
415     width: 83.33333333%;
416   }
417   .col-md-9 {
418     width: 75%;
419   }
420   .col-md-8 {
421     width: 66.66666667%;
422   }
423   .col-md-7 {
424     width: 58.33333333%;
425   }
426   .col-md-6 {
427     width: 50%;
428   }
429   .col-md-5 {
430     width: 41.66666667%;
431   }
432   .col-md-4 {
433     width: 33.33333333%;
434   }
435   .col-md-3 {
436     width: 25%;
437   }
438   .col-md-2 {
439     width: 16.66666667%;
440   }
441   .col-md-1 {
442     width: 8.33333333%;
443   }
444   .col-md-pull-12 {
445     right: 100%;
446   }
447   .col-md-pull-11 {
448     right: 91.66666667%;
449   }
450   .col-md-pull-10 {
451     right: 83.33333333%;
452   }
453   .col-md-pull-9 {
454     right: 75%;
455   }
456   .col-md-pull-8 {
457     right: 66.66666667%;
458   }
459   .col-md-pull-7 {
460     right: 58.33333333%;
461   }
462   .col-md-pull-6 {
463     right: 50%;
464   }
465   .col-md-pull-5 {
466     right: 41.66666667%;
467   }
468   .col-md-pull-4 {
469     right: 33.33333333%;
470   }
471   .col-md-pull-3 {
472     right: 25%;
473   }
474   .col-md-pull-2 {
475     right: 16.66666667%;
476   }
477   .col-md-pull-1 {
478     right: 8.33333333%;
479   }
480   .col-md-pull-0 {
481     right: auto;
482   }
483   .col-md-push-12 {
484     left: 100%;
485   }
486   .col-md-push-11 {
487     left: 91.66666667%;
488   }
489   .col-md-push-10 {
490     left: 83.33333333%;
491   }
492   .col-md-push-9 {
493     left: 75%;
494   }
495   .col-md-push-8 {
496     left: 66.66666667%;
497   }
498   .col-md-push-7 {
499     left: 58.33333333%;
500   }
501   .col-md-push-6 {
502     left: 50%;
503   }
504   .col-md-push-5 {
505     left: 41.66666667%;
506   }
507   .col-md-push-4 {
508     left: 33.33333333%;
509   }
510   .col-md-push-3 {
511     left: 25%;
512   }
513   .col-md-push-2 {
514     left: 16.66666667%;
515   }
516   .col-md-push-1 {
517     left: 8.33333333%;
518   }
519   .col-md-push-0 {
520     left: auto;
521   }
522   .col-md-offset-12 {
523     margin-left: 100%;
524   }
525   .col-md-offset-11 {
526     margin-left: 91.66666667%;
527   }
528   .col-md-offset-10 {
529     margin-left: 83.33333333%;
530   }
531   .col-md-offset-9 {
532     margin-left: 75%;
533   }
534   .col-md-offset-8 {
535     margin-left: 66.66666667%;
536   }
537   .col-md-offset-7 {
538     margin-left: 58.33333333%;
539   }
540   .col-md-offset-6 {
541     margin-left: 50%;
542   }
543   .col-md-offset-5 {
544     margin-left: 41.66666667%;
545   }
546   .col-md-offset-4 {
547     margin-left: 33.33333333%;
548   }
549   .col-md-offset-3 {
550     margin-left: 25%;
551   }
552   .col-md-offset-2 {
553     margin-left: 16.66666667%;
554   }
555   .col-md-offset-1 {
556     margin-left: 8.33333333%;
557   }
558   .col-md-offset-0 {
559     margin-left: 0%;
560   }
561 }
562 @media (min-width: $screen-lg) {
563   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
564     float: left;
565   }
566   .col-lg-12 {
567     width: 100%;
568   }
569   .col-lg-11 {
570     width: 91.66666667%;
571   }
572   .col-lg-10 {
573     width: 83.33333333%;
574   }
575   .col-lg-9 {
576     width: 75%;
577   }
578   .col-lg-8 {
579     width: 66.66666667%;
580   }
581   .col-lg-7 {
582     width: 58.33333333%;
583   }
584   .col-lg-6 {
585     width: 50%;
586   }
587   .col-lg-5 {
588     width: 41.66666667%;
589   }
590   .col-lg-4 {
591     width: 33.33333333%;
592   }
593   .col-lg-3 {
594     width: 25%;
595   }
596   .col-lg-2 {
597     width: 16.66666667%;
598   }
599   .col-lg-1 {
600     width: 8.33333333%;
601   }
602   .col-lg-pull-12 {
603     right: 100%;
604   }
605   .col-lg-pull-11 {
606     right: 91.66666667%;
607   }
608   .col-lg-pull-10 {
609     right: 83.33333333%;
610   }
611   .col-lg-pull-9 {
612     right: 75%;
613   }
614   .col-lg-pull-8 {
615     right: 66.66666667%;
616   }
617   .col-lg-pull-7 {
618     right: 58.33333333%;
619   }
620   .col-lg-pull-6 {
621     right: 50%;
622   }
623   .col-lg-pull-5 {
624     right: 41.66666667%;
625   }
626   .col-lg-pull-4 {
627     right: 33.33333333%;
628   }
629   .col-lg-pull-3 {
630     right: 25%;
631   }
632   .col-lg-pull-2 {
633     right: 16.66666667%;
634   }
635   .col-lg-pull-1 {
636     right: 8.33333333%;
637   }
638   .col-lg-pull-0 {
639     right: auto;
640   }
641   .col-lg-push-12 {
642     left: 100%;
643   }
644   .col-lg-push-11 {
645     left: 91.66666667%;
646   }
647   .col-lg-push-10 {
648     left: 83.33333333%;
649   }
650   .col-lg-push-9 {
651     left: 75%;
652   }
653   .col-lg-push-8 {
654     left: 66.66666667%;
655   }
656   .col-lg-push-7 {
657     left: 58.33333333%;
658   }
659   .col-lg-push-6 {
660     left: 50%;
661   }
662   .col-lg-push-5 {
663     left: 41.66666667%;
664   }
665   .col-lg-push-4 {
666     left: 33.33333333%;
667   }
668   .col-lg-push-3 {
669     left: 25%;
670   }
671   .col-lg-push-2 {
672     left: 16.66666667%;
673   }
674   .col-lg-push-1 {
675     left: 8.33333333%;
676   }
677   .col-lg-push-0 {
678     left: auto;
679   }
680   .col-lg-offset-12 {
681     margin-left: 100%;
682   }
683   .col-lg-offset-11 {
684     margin-left: 91.66666667%;
685   }
686   .col-lg-offset-10 {
687     margin-left: 83.33333333%;
688   }
689   .col-lg-offset-9 {
690     margin-left: 75%;
691   }
692   .col-lg-offset-8 {
693     margin-left: 66.66666667%;
694   }
695   .col-lg-offset-7 {
696     margin-left: 58.33333333%;
697   }
698   .col-lg-offset-6 {
699     margin-left: 50%;
700   }
701   .col-lg-offset-5 {
702     margin-left: 41.66666667%;
703   }
704   .col-lg-offset-4 {
705     margin-left: 33.33333333%;
706   }
707   .col-lg-offset-3 {
708     margin-left: 25%;
709   }
710   .col-lg-offset-2 {
711     margin-left: 16.66666667%;
712   }
713   .col-lg-offset-1 {
714     margin-left: 8.33333333%;
715   }
716   .col-lg-offset-0 {
717     margin-left: 0%;
718   }
719 }
720 .clearfix:before,
721 .clearfix:after,
722 .container:before,
723 .container:after,
724 .container-fluid:before,
725 .container-fluid:after,
726 .row:before,
727 .row:after {
728   content: " ";
729   display: table;
730 }
731 .clearfix:after,
732 .container:after,
733 .container-fluid:after,
734 .row:after {
735   clear: both;
736 }
737 .center-block {
738   display: block;
739   margin-left: auto;
740   margin-right: auto;
741 }