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