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