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