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