wcfsetup/install/files/style/layout/grid.scss

   1 /*!
   2  * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
   3  * Copyright 2011-2015 Twitter, Inc.
   4  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   5  */
   6
   7 /*
   8  * Heads up! This is a modified version containing only the sizes
   9  * "xs" (mobile) and "md" (desktop). Additionally the "push", "pull",
  10  * "first" and "last" classes have been left out.
  11  */
  12
  13 .row {
  14         display: flex;
  15         margin-right: -10px;
  16         margin-left: -10px;
  17
  18         flex-wrap: wrap;
  19 }
  20
  21 .col-xs-1,
  22 .col-xs-2,
  23 .col-xs-3,
  24 .col-xs-4,
  25 .col-xs-5,
  26 .col-xs-6,
  27 .col-xs-7,
  28 .col-xs-8,
  29 .col-xs-9,
  30 .col-xs-10,
  31 .col-xs-11,
  32 .col-xs-12,
  33 .col-md-1,
  34 .col-md-2,
  35 .col-md-3,
  36 .col-md-4,
  37 .col-md-5,
  38 .col-md-6,
  39 .col-md-7,
  40 .col-md-8,
  41 .col-md-9,
  42 .col-md-10,
  43 .col-md-11,
  44 .col-md-12 {
  45         position: relative;
  46         min-height: 1px;
  47         padding-right: 10px;
  48         padding-left: 10px;
  49 }
  50
  51 .col-xs-1 {
  52         flex: 0 0 8.333333%;
  53         max-width: 8.333333%;
  54 }
  55
  56 .col-xs-2 {
  57         flex: 0 0 16.666667%;
  58         max-width: 16.666667%;
  59 }
  60
  61 .col-xs-3 {
  62         flex: 0 0 25%;
  63         max-width: 25%;
  64 }
  65
  66 .col-xs-4 {
  67         flex: 0 0 33.333333%;
  68         max-width: 33.333333%;
  69 }
  70
  71 .col-xs-5 {
  72         flex: 0 0 41.666667%;
  73         max-width: 41.666667%;
  74 }
  75
  76 .col-xs-6 {
  77         flex: 0 0 50%;
  78         max-width: 50%;
  79 }
  80
  81 .col-xs-7 {
  82         flex: 0 0 58.333333%;
  83         max-width: 58.333333%;
  84 }
  85
  86 .col-xs-8 {
  87         flex: 0 0 66.666667%;
  88         max-width: 66.666667%;
  89 }
  90
  91 .col-xs-9 {
  92         flex: 0 0 75%;
  93         max-width: 75%;
  94 }
  95
  96 .col-xs-10 {
  97         flex: 0 0 83.333333%;
  98         max-width: 83.333333%;
  99 }
 100
 101 .col-xs-11 {
 102         flex: 0 0 91.666667%;
 103         max-width: 91.666667%;
 104 }
 105
 106 .col-xs-12 {
 107         flex: 0 0 100%;
 108 }
 109
 110 .col-xs-offset-0 {
 111         margin-left: 0;
 112 }
 113
 114 .col-xs-offset-1 {
 115         margin-left: 8.333333%;
 116 }
 117
 118 .col-xs-offset-2 {
 119         margin-left: 16.666667%;
 120 }
 121
 122 .col-xs-offset-3 {
 123         margin-left: 25%;
 124 }
 125
 126 .col-xs-offset-4 {
 127         margin-left: 33.333333%;
 128 }
 129
 130 .col-xs-offset-5 {
 131         margin-left: 41.666667%;
 132 }
 133
 134 .col-xs-offset-6 {
 135         margin-left: 50%;
 136 }
 137
 138 .col-xs-offset-7 {
 139         margin-left: 58.333333%;
 140 }
 141
 142 .col-xs-offset-8 {
 143         margin-left: 66.666667%;
 144 }
 145
 146 .col-xs-offset-9 {
 147         margin-left: 75%;
 148 }
 149
 150 .col-xs-offset-10 {
 151         margin-left: 83.333333%;
 152 }
 153
 154 .col-xs-offset-11 {
 155         margin-left: 91.666667%;
 156 }
 157
 158 .col-xs-offset-12 {
 159         margin-left: 100%;
 160 }
 161
 162 @include screen-md-up {
 163         .col-md-1 {
 164                 flex: 0 0 8.333333%;
 165                 max-width: 8.333333%;
 166         }
 167         .col-md-2 {
 168                 flex: 0 0 16.666667%;
 169                 max-width: 16.666667%;
 170         }
 171         .col-md-3 {
 172                 flex: 0 0 25%;
 173                 max-width: 25%;
 174         }
 175         .col-md-4 {
 176                 flex: 0 0 33.333333%;
 177                 max-width: 33.333333%;
 178         }
 179         .col-md-5 {
 180                 flex: 0 0 41.666667%;
 181                 max-width: 41.666667%;
 182         }
 183         .col-md-6 {
 184                 flex: 0 0 50%;
 185                 max-width: 50%;
 186         }
 187         .col-md-7 {
 188                 flex: 0 0 58.333333%;
 189                 max-width: 58.333333%;
 190         }
 191         .col-md-8 {
 192                 flex: 0 0 66.666667%;
 193                 max-width: 66.666667%;
 194         }
 195         .col-md-9 {
 196                 flex: 0 0 75%;
 197                 max-width: 75%;
 198         }
 199         .col-md-10 {
 200                 flex: 0 0 83.333333%;
 201                 max-width: 83.333333%;
 202         }
 203         .col-md-11 {
 204                 flex: 0 0 91.666667%;
 205                 max-width: 91.666667%;
 206         }
 207         .col-md-12 {
 208                 flex: 0 0 100%;
 209                 max-width: none;
 210         }
 211         .col-md-pull-0 {
 212                 right: auto;
 213         }
 214         .col-md-pull-1 {
 215                 right: 8.333333%;
 216         }
 217         .col-md-pull-2 {
 218                 right: 16.666667%;
 219         }
 220         .col-md-pull-3 {
 221                 right: 25%;
 222         }
 223         .col-md-pull-4 {
 224                 right: 33.333333%;
 225         }
 226         .col-md-pull-5 {
 227                 right: 41.666667%;
 228         }
 229         .col-md-pull-6 {
 230                 right: 50%;
 231         }
 232         .col-md-pull-7 {
 233                 right: 58.333333%;
 234         }
 235         .col-md-pull-8 {
 236                 right: 66.666667%;
 237         }
 238         .col-md-pull-9 {
 239                 right: 75%;
 240         }
 241         .col-md-pull-10 {
 242                 right: 83.333333%;
 243         }
 244         .col-md-pull-11 {
 245                 right: 91.666667%;
 246         }
 247         .col-md-pull-12 {
 248                 right: 100%;
 249         }
 250         .col-md-push-0 {
 251                 left: auto;
 252         }
 253         .col-md-push-1 {
 254                 left: 8.333333%;
 255         }
 256         .col-md-push-2 {
 257                 left: 16.666667%;
 258         }
 259         .col-md-push-3 {
 260                 left: 25%;
 261         }
 262         .col-md-push-4 {
 263                 left: 33.333333%;
 264         }
 265         .col-md-push-5 {
 266                 left: 41.666667%;
 267         }
 268         .col-md-push-6 {
 269                 left: 50%;
 270         }
 271         .col-md-push-7 {
 272                 left: 58.333333%;
 273         }
 274         .col-md-push-8 {
 275                 left: 66.666667%;
 276         }
 277         .col-md-push-9 {
 278                 left: 75%;
 279         }
 280         .col-md-push-10 {
 281                 left: 83.333333%;
 282         }
 283         .col-md-push-11 {
 284                 left: 91.666667%;
 285         }
 286         .col-md-push-12 {
 287                 left: 100%;
 288         }
 289         .col-md-offset-0 {
 290                 margin-left: 0;
 291         }
 292         .col-md-offset-1 {
 293                 margin-left: 8.333333%;
 294         }
 295         .col-md-offset-2 {
 296                 margin-left: 16.666667%;
 297         }
 298         .col-md-offset-3 {
 299                 margin-left: 25%;
 300         }
 301         .col-md-offset-4 {
 302                 margin-left: 33.333333%;
 303         }
 304         .col-md-offset-5 {
 305                 margin-left: 41.666667%;
 306         }
 307         .col-md-offset-6 {
 308                 margin-left: 50%;
 309         }
 310         .col-md-offset-7 {
 311                 margin-left: 58.333333%;
 312         }
 313         .col-md-offset-8 {
 314                 margin-left: 66.666667%;
 315         }
 316         .col-md-offset-9 {
 317                 margin-left: 75%;
 318         }
 319         .col-md-offset-10 {
 320                 margin-left: 83.333333%;
 321         }
 322         .col-md-offset-11 {
 323                 margin-left: 91.666667%;
 324         }
 325         .col-md-offset-12 {
 326                 margin-left: 100%;
 327         }
 328 }
 329
 330 .row-xs-top {
 331         -ms-grid-row-align: flex-start;
 332         align-items: flex-start;
 333 }
 334
 335 .row-xs-center {
 336         -ms-grid-row-align: center;
 337         align-items: center;
 338 }
 339
 340 .row-xs-bottom {
 341         -ms-grid-row-align: flex-end;
 342         align-items: flex-end;
 343 }
 344
 345 @include screen-md-up {
 346         .row-md-top {
 347                 -ms-grid-row-align: flex-start;
 348                 align-items: flex-start;
 349         }
 350         .row-md-center {
 351                 -ms-grid-row-align: center;
 352                 align-items: center;
 353         }
 354         .row-md-bottom {
 355                 -ms-grid-row-align: flex-end;
 356                 align-items: flex-end;
 357         }
 358 }
 359
 360 .col-xs-top {
 361         align-self: flex-start;
 362 }
 363
 364 .col-xs-center {
 365         align-self: center;
 366 }
 367
 368 .col-xs-bottom {
 369         align-self: flex-end;
 370 }
 371
 372 @include screen-md-up {
 373         .col-md-top {
 374                 align-self: flex-start;
 375         }
 376         .col-md-center {
 377                 align-self: center;
 378         }
 379         .col-md-bottom {
 380                 align-self: flex-end;
 381         }
 382 }
 383
 384 // WoltLab's custom definitions below
 385
 386 /* vertical gap between wrapped columns */
 387 .rowColGap {
 388         margin-bottom: -20px;
 389
 390         > .col-xs-1,
 391         > .col-xs-2,
 392         > .col-xs-3,
 393         > .col-xs-4,
 394         > .col-xs-5,
 395         > .col-xs-6,
 396         > .col-xs-7,
 397         > .col-xs-8,
 398         > .col-xs-9,
 399         > .col-xs-10,
 400         > .col-xs-11,
 401         > .col-xs-12,
 402         > .col-md-1,
 403         > .col-md-2,
 404         > .col-md-3,
 405         > .col-md-4,
 406         > .col-md-5,
 407         > .col-md-6,
 408         > .col-md-7,
 409         > .col-md-8,
 410         > .col-md-9,
 411         > .col-md-10,
 412         > .col-md-11,
 413         > .col-md-12 {
 414                 margin-bottom: 20px !important;
 415         }
 416
 417         &:not(:first-child) {
 418                 margin-top: 20px;
 419         }
 420 }