BookStack Code Mirror - bookstack/blob - resources/assets/sass/_grid.scss

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