node_modules/bulma/sass/grid/columns.sass

   1 $column-gap: 0.75rem !default
   2
   3 .column
   4   display: block
   5   flex-basis: 0
   6   flex-grow: 1
   7   flex-shrink: 1
   8   padding: $column-gap
   9   .columns.is-mobile > &.is-narrow
  10     flex: none
  11   .columns.is-mobile > &.is-full
  12     flex: none
  13     width: 100%
  14   .columns.is-mobile > &.is-three-quarters
  15     flex: none
  16     width: 75%
  17   .columns.is-mobile > &.is-two-thirds
  18     flex: none
  19     width: 66.6666%
  20   .columns.is-mobile > &.is-half
  21     flex: none
  22     width: 50%
  23   .columns.is-mobile > &.is-one-third
  24     flex: none
  25     width: 33.3333%
  26   .columns.is-mobile > &.is-one-quarter
  27     flex: none
  28     width: 25%
  29   .columns.is-mobile > &.is-one-fifth
  30     flex: none
  31     width: 20%
  32   .columns.is-mobile > &.is-two-fifths
  33     flex: none
  34     width: 40%
  35   .columns.is-mobile > &.is-three-fifths
  36     flex: none
  37     width: 60%
  38   .columns.is-mobile > &.is-four-fifths
  39     flex: none
  40     width: 80%
  41   .columns.is-mobile > &.is-offset-three-quarters
  42     margin-left: 75%
  43   .columns.is-mobile > &.is-offset-two-thirds
  44     margin-left: 66.6666%
  45   .columns.is-mobile > &.is-offset-half
  46     margin-left: 50%
  47   .columns.is-mobile > &.is-offset-one-third
  48     margin-left: 33.3333%
  49   .columns.is-mobile > &.is-offset-one-quarter
  50     margin-left: 25%
  51   .columns.is-mobile > &.is-offset-one-fifth
  52     margin-left: 20%
  53   .columns.is-mobile > &.is-offset-two-fifths
  54     margin-left: 40%
  55   .columns.is-mobile > &.is-offset-three-fifths
  56     margin-left: 60%
  57   .columns.is-mobile > &.is-offset-four-fifths
  58     margin-left: 80%
  59   @for $i from 0 through 12
  60     .columns.is-mobile > &.is-#{$i}
  61       flex: none
  62       width: percentage($i / 12)
  63     .columns.is-mobile > &.is-offset-#{$i}
  64       margin-left: percentage($i / 12)
  65   +mobile
  66     &.is-narrow-mobile
  67       flex: none
  68     &.is-full-mobile
  69       flex: none
  70       width: 100%
  71     &.is-three-quarters-mobile
  72       flex: none
  73       width: 75%
  74     &.is-two-thirds-mobile
  75       flex: none
  76       width: 66.6666%
  77     &.is-half-mobile
  78       flex: none
  79       width: 50%
  80     &.is-one-third-mobile
  81       flex: none
  82       width: 33.3333%
  83     &.is-one-quarter-mobile
  84       flex: none
  85       width: 25%
  86     &.is-one-fifth-mobile
  87       flex: none
  88       width: 20%
  89     &.is-two-fifths-mobile
  90       flex: none
  91       width: 40%
  92     &.is-three-fifths-mobile
  93       flex: none
  94       width: 60%
  95     &.is-four-fifths-mobile
  96       flex: none
  97       width: 80%
  98     &.is-offset-three-quarters-mobile
  99       margin-left: 75%
 100     &.is-offset-two-thirds-mobile
 101       margin-left: 66.6666%
 102     &.is-offset-half-mobile
 103       margin-left: 50%
 104     &.is-offset-one-third-mobile
 105       margin-left: 33.3333%
 106     &.is-offset-one-quarter-mobile
 107       margin-left: 25%
 108     &.is-offset-one-fifth-mobile
 109       margin-left: 20%
 110     &.is-offset-two-fifths-mobile
 111       margin-left: 40%
 112     &.is-offset-three-fifths-mobile
 113       margin-left: 60%
 114     &.is-offset-four-fifths-mobile
 115       margin-left: 80%
 116     @for $i from 0 through 12
 117       &.is-#{$i}-mobile
 118         flex: none
 119         width: percentage($i / 12)
 120       &.is-offset-#{$i}-mobile
 121         margin-left: percentage($i / 12)
 122   +tablet
 123     &.is-narrow,
 124     &.is-narrow-tablet
 125       flex: none
 126     &.is-full,
 127     &.is-full-tablet
 128       flex: none
 129       width: 100%
 130     &.is-three-quarters,
 131     &.is-three-quarters-tablet
 132       flex: none
 133       width: 75%
 134     &.is-two-thirds,
 135     &.is-two-thirds-tablet
 136       flex: none
 137       width: 66.6666%
 138     &.is-half,
 139     &.is-half-tablet
 140       flex: none
 141       width: 50%
 142     &.is-one-third,
 143     &.is-one-third-tablet
 144       flex: none
 145       width: 33.3333%
 146     &.is-one-quarter,
 147     &.is-one-quarter-tablet
 148       flex: none
 149       width: 25%
 150     &.is-one-fifth,
 151     &.is-one-fifth-tablet
 152       flex: none
 153       width: 20%
 154     &.is-two-fifths,
 155     &.is-two-fifths-tablet
 156       flex: none
 157       width: 40%
 158     &.is-three-fifths,
 159     &.is-three-fifths-tablet
 160       flex: none
 161       width: 60%
 162     &.is-four-fifths,
 163     &.is-four-fifths-tablet
 164       flex: none
 165       width: 80%
 166     &.is-offset-three-quarters,
 167     &.is-offset-three-quarters-tablet
 168       margin-left: 75%
 169     &.is-offset-two-thirds,
 170     &.is-offset-two-thirds-tablet
 171       margin-left: 66.6666%
 172     &.is-offset-half,
 173     &.is-offset-half-tablet
 174       margin-left: 50%
 175     &.is-offset-one-third,
 176     &.is-offset-one-third-tablet
 177       margin-left: 33.3333%
 178     &.is-offset-one-quarter,
 179     &.is-offset-one-quarter-tablet
 180       margin-left: 25%
 181     &.is-offset-one-fifth,
 182     &.is-offset-one-fifth-tablet
 183       margin-left: 20%
 184     &.is-offset-two-fifths,
 185     &.is-offset-two-fifths-tablet
 186       margin-left: 40%
 187     &.is-offset-three-fifths,
 188     &.is-offset-three-fifths-tablet
 189       margin-left: 60%
 190     &.is-offset-four-fifths,
 191     &.is-offset-four-fifths-tablet
 192       margin-left: 80%
 193     @for $i from 0 through 12
 194       &.is-#{$i},
 195       &.is-#{$i}-tablet
 196         flex: none
 197         width: percentage($i / 12)
 198       &.is-offset-#{$i},
 199       &.is-offset-#{$i}-tablet
 200         margin-left: percentage($i / 12)
 201   +touch
 202     &.is-narrow-touch
 203       flex: none
 204     &.is-full-touch
 205       flex: none
 206       width: 100%
 207     &.is-three-quarters-touch
 208       flex: none
 209       width: 75%
 210     &.is-two-thirds-touch
 211       flex: none
 212       width: 66.6666%
 213     &.is-half-touch
 214       flex: none
 215       width: 50%
 216     &.is-one-third-touch
 217       flex: none
 218       width: 33.3333%
 219     &.is-one-quarter-touch
 220       flex: none
 221       width: 25%
 222     &.is-one-fifth-touch
 223       flex: none
 224       width: 20%
 225     &.is-two-fifths-touch
 226       flex: none
 227       width: 40%
 228     &.is-three-fifths-touch
 229       flex: none
 230       width: 60%
 231     &.is-four-fifths-touch
 232       flex: none
 233       width: 80%
 234     &.is-offset-three-quarters-touch
 235       margin-left: 75%
 236     &.is-offset-two-thirds-touch
 237       margin-left: 66.6666%
 238     &.is-offset-half-touch
 239       margin-left: 50%
 240     &.is-offset-one-third-touch
 241       margin-left: 33.3333%
 242     &.is-offset-one-quarter-touch
 243       margin-left: 25%
 244     &.is-offset-one-fifth-touch
 245       margin-left: 20%
 246     &.is-offset-two-fifths-touch
 247       margin-left: 40%
 248     &.is-offset-three-fifths-touch
 249       margin-left: 60%
 250     &.is-offset-four-fifths-touch
 251       margin-left: 80%
 252     @for $i from 0 through 12
 253       &.is-#{$i}-touch
 254         flex: none
 255         width: percentage($i / 12)
 256       &.is-offset-#{$i}-touch
 257         margin-left: percentage($i / 12)
 258   +desktop
 259     &.is-narrow-desktop
 260       flex: none
 261     &.is-full-desktop
 262       flex: none
 263       width: 100%
 264     &.is-three-quarters-desktop
 265       flex: none
 266       width: 75%
 267     &.is-two-thirds-desktop
 268       flex: none
 269       width: 66.6666%
 270     &.is-half-desktop
 271       flex: none
 272       width: 50%
 273     &.is-one-third-desktop
 274       flex: none
 275       width: 33.3333%
 276     &.is-one-quarter-desktop
 277       flex: none
 278       width: 25%
 279     &.is-one-fifth-desktop
 280       flex: none
 281       width: 20%
 282     &.is-two-fifths-desktop
 283       flex: none
 284       width: 40%
 285     &.is-three-fifths-desktop
 286       flex: none
 287       width: 60%
 288     &.is-four-fifths-desktop
 289       flex: none
 290       width: 80%
 291     &.is-offset-three-quarters-desktop
 292       margin-left: 75%
 293     &.is-offset-two-thirds-desktop
 294       margin-left: 66.6666%
 295     &.is-offset-half-desktop
 296       margin-left: 50%
 297     &.is-offset-one-third-desktop
 298       margin-left: 33.3333%
 299     &.is-offset-one-quarter-desktop
 300       margin-left: 25%
 301     &.is-offset-one-fifth-desktop
 302       margin-left: 20%
 303     &.is-offset-two-fifths-desktop
 304       margin-left: 40%
 305     &.is-offset-three-fifths-desktop
 306       margin-left: 60%
 307     &.is-offset-four-fifths-desktop
 308       margin-left: 80%
 309     @for $i from 0 through 12
 310       &.is-#{$i}-desktop
 311         flex: none
 312         width: percentage($i / 12)
 313       &.is-offset-#{$i}-desktop
 314         margin-left: percentage($i / 12)
 315   +widescreen
 316     &.is-narrow-widescreen
 317       flex: none
 318     &.is-full-widescreen
 319       flex: none
 320       width: 100%
 321     &.is-three-quarters-widescreen
 322       flex: none
 323       width: 75%
 324     &.is-two-thirds-widescreen
 325       flex: none
 326       width: 66.6666%
 327     &.is-half-widescreen
 328       flex: none
 329       width: 50%
 330     &.is-one-third-widescreen
 331       flex: none
 332       width: 33.3333%
 333     &.is-one-quarter-widescreen
 334       flex: none
 335       width: 25%
 336     &.is-one-fifth-widescreen
 337       flex: none
 338       width: 20%
 339     &.is-two-fifths-widescreen
 340       flex: none
 341       width: 40%
 342     &.is-three-fifths-widescreen
 343       flex: none
 344       width: 60%
 345     &.is-four-fifths-widescreen
 346       flex: none
 347       width: 80%
 348     &.is-offset-three-quarters-widescreen
 349       margin-left: 75%
 350     &.is-offset-two-thirds-widescreen
 351       margin-left: 66.6666%
 352     &.is-offset-half-widescreen
 353       margin-left: 50%
 354     &.is-offset-one-third-widescreen
 355       margin-left: 33.3333%
 356     &.is-offset-one-quarter-widescreen
 357       margin-left: 25%
 358     &.is-offset-one-fifth-widescreen
 359       margin-left: 20%
 360     &.is-offset-two-fifths-widescreen
 361       margin-left: 40%
 362     &.is-offset-three-fifths-widescreen
 363       margin-left: 60%
 364     &.is-offset-four-fifths-widescreen
 365       margin-left: 80%
 366     @for $i from 0 through 12
 367       &.is-#{$i}-widescreen
 368         flex: none
 369         width: percentage($i / 12)
 370       &.is-offset-#{$i}-widescreen
 371         margin-left: percentage($i / 12)
 372   +fullhd
 373     &.is-narrow-fullhd
 374       flex: none
 375     &.is-full-fullhd
 376       flex: none
 377       width: 100%
 378     &.is-three-quarters-fullhd
 379       flex: none
 380       width: 75%
 381     &.is-two-thirds-fullhd
 382       flex: none
 383       width: 66.6666%
 384     &.is-half-fullhd
 385       flex: none
 386       width: 50%
 387     &.is-one-third-fullhd
 388       flex: none
 389       width: 33.3333%
 390     &.is-one-quarter-fullhd
 391       flex: none
 392       width: 25%
 393     &.is-one-fifth-fullhd
 394       flex: none
 395       width: 20%
 396     &.is-two-fifths-fullhd
 397       flex: none
 398       width: 40%
 399     &.is-three-fifths-fullhd
 400       flex: none
 401       width: 60%
 402     &.is-four-fifths-fullhd
 403       flex: none
 404       width: 80%
 405     &.is-offset-three-quarters-fullhd
 406       margin-left: 75%
 407     &.is-offset-two-thirds-fullhd
 408       margin-left: 66.6666%
 409     &.is-offset-half-fullhd
 410       margin-left: 50%
 411     &.is-offset-one-third-fullhd
 412       margin-left: 33.3333%
 413     &.is-offset-one-quarter-fullhd
 414       margin-left: 25%
 415     &.is-offset-one-fifth-fullhd
 416       margin-left: 20%
 417     &.is-offset-two-fifths-fullhd
 418       margin-left: 40%
 419     &.is-offset-three-fifths-fullhd
 420       margin-left: 60%
 421     &.is-offset-four-fifths-fullhd
 422       margin-left: 80%
 423     @for $i from 0 through 12
 424       &.is-#{$i}-fullhd
 425         flex: none
 426         width: percentage($i / 12)
 427       &.is-offset-#{$i}-fullhd
 428         margin-left: percentage($i / 12)
 429
 430 .columns
 431   margin-left: (-$column-gap)
 432   margin-right: (-$column-gap)
 433   margin-top: (-$column-gap)
 434   &:last-child
 435     margin-bottom: (-$column-gap)
 436   &:not(:last-child)
 437     margin-bottom: calc(1.5rem - #{$column-gap})
 438   // Modifiers
 439   &.is-centered
 440     justify-content: center
 441   &.is-gapless
 442     margin-left: 0
 443     margin-right: 0
 444     margin-top: 0
 445     & > .column
 446       margin: 0
 447       padding: 0 !important
 448     &:not(:last-child)
 449       margin-bottom: 1.5rem
 450     &:last-child
 451       margin-bottom: 0
 452   &.is-mobile
 453     display: flex
 454   &.is-multiline
 455     flex-wrap: wrap
 456   &.is-vcentered
 457     align-items: center
 458   // Responsiveness
 459   +tablet
 460     &:not(.is-desktop)
 461       display: flex
 462   +desktop
 463     // Modifiers
 464     &.is-desktop
 465       display: flex
 466
 467 @if $variable-columns
 468   .columns.is-variable
 469     --columnGap: 0.75rem
 470     margin-left: calc(-1 * var(--columnGap))
 471     margin-right: calc(-1 * var(--columnGap))
 472     .column
 473       padding-left: var(--columnGap)
 474       padding-right: var(--columnGap)
 475     @for $i from 0 through 8
 476       &.is-#{$i}
 477         --columnGap: #{$i * 0.25rem}
 478       +mobile
 479         &.is-#{$i}-mobile
 480           --columnGap: #{$i * 0.25rem}
 481       +tablet
 482         &.is-#{$i}-tablet
 483           --columnGap: #{$i * 0.25rem}
 484       +tablet-only
 485         &.is-#{$i}-tablet-only
 486           --columnGap: #{$i * 0.25rem}
 487       +touch
 488         &.is-#{$i}-touch
 489           --columnGap: #{$i * 0.25rem}
 490       +desktop
 491         &.is-#{$i}-desktop
 492           --columnGap: #{$i * 0.25rem}
 493       +desktop-only
 494         &.is-#{$i}-desktop-only
 495           --columnGap: #{$i * 0.25rem}
 496       +widescreen
 497         &.is-#{$i}-widescreen
 498           --columnGap: #{$i * 0.25rem}
 499       +widescreen-only
 500         &.is-#{$i}-widescreen-only
 501           --columnGap: #{$i * 0.25rem}
 502       +fullhd
 503         &.is-#{$i}-fullhd
 504           --columnGap: #{$i * 0.25rem}