BookStack Code Mirror - website/blob - themes/bookstack/sass/_grid.scss

   1 /** Rules for all columns */
   2 div[class^="col-"] img {
   3   max-width: 100%;
   4 }
   5
   6 .container {
   7   max-width: $max-width;
   8   margin-left: auto;
   9   margin-right: auto;
  10   padding-left: $-m;
  11   padding-right: $-m;
  12   &.fluid {
  13     max-width: 100%;
  14   }
  15   &.small {
  16     max-width: 840px;
  17   }
  18 }
  19
  20 .row {
  21   margin-left: -$-m;
  22   margin-right: -$-m;
  23 }
  24
  25 .float {
  26   float: left;
  27   &.right {
  28     float: right;
  29   }
  30 }
  31
  32 @include smaller-than(768px) {
  33   .float.float-none-sm {
  34     float: none;
  35   }
  36 }
  37
  38 .block {
  39   display: block;
  40   position: relative;
  41 }
  42
  43 .inline {
  44   display: inline;
  45 }
  46
  47 .block.inline {
  48   display: inline-block;
  49 }
  50
  51 .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 {
  52   position: relative;
  53   min-height: 1px;
  54   padding-left: $-m;
  55   padding-right: $-m;
  56 }
  57 .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 {
  58   float: left;
  59 }
  60 .col-xs-12 {
  61   width: 100%;
  62 }
  63 .col-xs-11 {
  64   width: 91.66666667%;
  65 }
  66 .col-xs-10 {
  67   width: 83.33333333%;
  68 }
  69 .col-xs-9 {
  70   width: 75%;
  71 }
  72 .col-xs-8 {
  73   width: 66.66666667%;
  74 }
  75 .col-xs-7 {
  76   width: 58.33333333%;
  77 }
  78 .col-xs-6 {
  79   width: 50%;
  80 }
  81 .col-xs-5 {
  82   width: 41.66666667%;
  83 }
  84 .col-xs-4 {
  85   width: 33.33333333%;
  86 }
  87 .col-xs-3 {
  88   width: 25%;
  89 }
  90 .col-xs-2 {
  91   width: 16.66666667%;
  92 }
  93 .col-xs-1 {
  94   width: 8.33333333%;
  95 }
  96 .col-xs-offset-12 {
  97   margin-left: 100%;
  98 }
  99 .col-xs-offset-11 {
 100   margin-left: 91.66666667%;
 101 }
 102 .col-xs-offset-10 {
 103   margin-left: 83.33333333%;
 104 }
 105 .col-xs-offset-9 {
 106   margin-left: 75%;
 107 }
 108 .col-xs-offset-8 {
 109   margin-left: 66.66666667%;
 110 }
 111 .col-xs-offset-7 {
 112   margin-left: 58.33333333%;
 113 }
 114 .col-xs-offset-6 {
 115   margin-left: 50%;
 116 }
 117 .col-xs-offset-5 {
 118   margin-left: 41.66666667%;
 119 }
 120 .col-xs-offset-4 {
 121   margin-left: 33.33333333%;
 122 }
 123 .col-xs-offset-3 {
 124   margin-left: 25%;
 125 }
 126 .col-xs-offset-2 {
 127   margin-left: 16.66666667%;
 128 }
 129 .col-xs-offset-1 {
 130   margin-left: 8.33333333%;
 131 }
 132 .col-xs-offset-0 {
 133   margin-left: 0%;
 134 }
 135 @media (min-width: 768px) {
 136   .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 {
 137     float: left;
 138   }
 139   .col-sm-12 {
 140     width: 100%;
 141   }
 142   .col-sm-11 {
 143     width: 91.66666667%;
 144   }
 145   .col-sm-10 {
 146     width: 83.33333333%;
 147   }
 148   .col-sm-9 {
 149     width: 75%;
 150   }
 151   .col-sm-8 {
 152     width: 66.66666667%;
 153   }
 154   .col-sm-7 {
 155     width: 58.33333333%;
 156   }
 157   .col-sm-6 {
 158     width: 50%;
 159   }
 160   .col-sm-5 {
 161     width: 41.66666667%;
 162   }
 163   .col-sm-4 {
 164     width: 33.33333333%;
 165   }
 166   .col-sm-3 {
 167     width: 25%;
 168   }
 169   .col-sm-2 {
 170     width: 16.66666667%;
 171   }
 172   .col-sm-1 {
 173     width: 8.33333333%;
 174   }
 175   .col-sm-offset-12 {
 176     margin-left: 100%;
 177   }
 178   .col-sm-offset-11 {
 179     margin-left: 91.66666667%;
 180   }
 181   .col-sm-offset-10 {
 182     margin-left: 83.33333333%;
 183   }
 184   .col-sm-offset-9 {
 185     margin-left: 75%;
 186   }
 187   .col-sm-offset-8 {
 188     margin-left: 66.66666667%;
 189   }
 190   .col-sm-offset-7 {
 191     margin-left: 58.33333333%;
 192   }
 193   .col-sm-offset-6 {
 194     margin-left: 50%;
 195   }
 196   .col-sm-offset-5 {
 197     margin-left: 41.66666667%;
 198   }
 199   .col-sm-offset-4 {
 200     margin-left: 33.33333333%;
 201   }
 202   .col-sm-offset-3 {
 203     margin-left: 25%;
 204   }
 205   .col-sm-offset-2 {
 206     margin-left: 16.66666667%;
 207   }
 208   .col-sm-offset-1 {
 209     margin-left: 8.33333333%;
 210   }
 211   .col-sm-offset-0 {
 212     margin-left: 0%;
 213   }
 214 }
 215 @media (min-width: 992px) {
 216   .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 {
 217     float: left;
 218   }
 219   .col-md-12 {
 220     width: 100%;
 221   }
 222   .col-md-11 {
 223     width: 91.66666667%;
 224   }
 225   .col-md-10 {
 226     width: 83.33333333%;
 227   }
 228   .col-md-9 {
 229     width: 75%;
 230   }
 231   .col-md-8 {
 232     width: 66.66666667%;
 233   }
 234   .col-md-7 {
 235     width: 58.33333333%;
 236   }
 237   .col-md-6 {
 238     width: 50%;
 239   }
 240   .col-md-5 {
 241     width: 41.66666667%;
 242   }
 243   .col-md-4 {
 244     width: 33.33333333%;
 245   }
 246   .col-md-3 {
 247     width: 25%;
 248   }
 249   .col-md-2 {
 250     width: 16.66666667%;
 251   }
 252   .col-md-1 {
 253     width: 8.33333333%;
 254   }
 255   .col-md-offset-12 {
 256     margin-left: 100%;
 257   }
 258   .col-md-offset-11 {
 259     margin-left: 91.66666667%;
 260   }
 261   .col-md-offset-10 {
 262     margin-left: 83.33333333%;
 263   }
 264   .col-md-offset-9 {
 265     margin-left: 75%;
 266   }
 267   .col-md-offset-8 {
 268     margin-left: 66.66666667%;
 269   }
 270   .col-md-offset-7 {
 271     margin-left: 58.33333333%;
 272   }
 273   .col-md-offset-6 {
 274     margin-left: 50%;
 275   }
 276   .col-md-offset-5 {
 277     margin-left: 41.66666667%;
 278   }
 279   .col-md-offset-4 {
 280     margin-left: 33.33333333%;
 281   }
 282   .col-md-offset-3 {
 283     margin-left: 25%;
 284   }
 285   .col-md-offset-2 {
 286     margin-left: 16.66666667%;
 287   }
 288   .col-md-offset-1 {
 289     margin-left: 8.33333333%;
 290   }
 291   .col-md-offset-0 {
 292     margin-left: 0%;
 293   }
 294 }
 295 @media (min-width: 1200px) {
 296   .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 {
 297     float: left;
 298   }
 299   .col-lg-12 {
 300     width: 100%;
 301   }
 302   .col-lg-11 {
 303     width: 91.66666667%;
 304   }
 305   .col-lg-10 {
 306     width: 83.33333333%;
 307   }
 308   .col-lg-9 {
 309     width: 75%;
 310   }
 311   .col-lg-8 {
 312     width: 66.66666667%;
 313   }
 314   .col-lg-7 {
 315     width: 58.33333333%;
 316   }
 317   .col-lg-6 {
 318     width: 50%;
 319   }
 320   .col-lg-5 {
 321     width: 41.66666667%;
 322   }
 323   .col-lg-4 {
 324     width: 33.33333333%;
 325   }
 326   .col-lg-3 {
 327     width: 25%;
 328   }
 329   .col-lg-2 {
 330     width: 16.66666667%;
 331   }
 332   .col-lg-1 {
 333     width: 8.33333333%;
 334   }
 335   .col-lg-offset-12 {
 336     margin-left: 100%;
 337   }
 338   .col-lg-offset-11 {
 339     margin-left: 91.66666667%;
 340   }
 341   .col-lg-offset-10 {
 342     margin-left: 83.33333333%;
 343   }
 344   .col-lg-offset-9 {
 345     margin-left: 75%;
 346   }
 347   .col-lg-offset-8 {
 348     margin-left: 66.66666667%;
 349   }
 350   .col-lg-offset-7 {
 351     margin-left: 58.33333333%;
 352   }
 353   .col-lg-offset-6 {
 354     margin-left: 50%;
 355   }
 356   .col-lg-offset-5 {
 357     margin-left: 41.66666667%;
 358   }
 359   .col-lg-offset-4 {
 360     margin-left: 33.33333333%;
 361   }
 362   .col-lg-offset-3 {
 363     margin-left: 25%;
 364   }
 365   .col-lg-offset-2 {
 366     margin-left: 16.66666667%;
 367   }
 368   .col-lg-offset-1 {
 369     margin-left: 8.33333333%;
 370   }
 371   .col-lg-offset-0 {
 372     margin-left: 0%;
 373   }
 374 }
 375 .clearfix:before,
 376 .clearfix:after,
 377 .container-fluid:before,
 378 .container-fluid:after,
 379 .row:before,
 380 .row:after {
 381   content: " ";
 382   display: table;
 383 }
 384 .clearfix:after,
 385 .container-fluid:after,
 386 .row:after {
 387   clear: both;
 388 }
 389 .center-block {
 390   display: block;
 391   margin-left: auto;
 392   margin-right: auto;
 393 }