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