quasar/src/css/core/flex.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

str-fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))

str-fe(selector, name, noProc, i = '')
  if noProc
    return str-fr(selector, name, i)
  return unquote(join(',', str-fr(selector, '', i) str-fr(selector, name, i)))

fg($name, $size)
  $noProcNotZero = ($size > 0)

  @media (min-width $size)
    {str-fe('.col<name>', $name, $noProcNotZero)}
      &, &-auto, &-grow, &-shrink
        .row > &, .flex > &
          width: auto
          min-width: 0
          max-width: 100%
        .column > &, .flex > &
          height: auto
          min-height: 0
          max-height: 100%
      &
        flex: 10000 1 0%
      &-auto
        flex: 0 0 auto
      &-grow
        flex: 1 0 auto
      &-shrink
        flex: 0 1 auto

    for $i in (0..$flex-cols)
      $ic = s('%s', $i)
      {str-fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
        @extends .col{$name}-auto
      .row
        {str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height: auto
          width: (round($i / $flex-cols * 100, 4))%
        if $i != 0 || $name != ''
          {str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
            margin-left: (round($i / $flex-cols * 100, 4))%
      .column
        {str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height: (round($i / $flex-cols * 100, 4))%
          width: auto
      if $size == 0
        if $i == $flex-cols
          .row > .col-all
            height: auto
            flex: 0 0 100%

.row, .column, .flex
  display: flex
  flex-wrap: wrap
  &.inline
    display: inline-flex

.row.reverse
  flex-direction: row-reverse

.column
  flex-direction: column
  &.reverse
    flex-direction: column-reverse

.wrap
  flex-wrap: wrap
.no-wrap
  flex-wrap: nowrap
.reverse-wrap
  flex-wrap: wrap-reverse

.order-
  &first
    order: -10000
  &last
    order: 10000
  &none
    order: 0

.justify-
  &start
    justify-content: flex-start
  &end
    justify-content: flex-end
  &center
    justify-content: center
  &between
    justify-content: space-between
  &around
    justify-content: space-around
  &evenly
    justify-content: space-evenly

.items-
  &start
    align-items: flex-start
  &end
    align-items: flex-end
  &center
    align-items: center
  &baseline
    align-items: baseline
  &stretch
    align-items: stretch

.content-
  &start
    align-content: flex-start
  &end
    align-content: flex-end
  &center
    align-content: center
  &stretch
    align-content: stretch
  &between
    align-content: space-between
  &around
    align-content: space-around

.self-
  &start
    align-self: flex-start
  &end
    align-self: flex-end
  &center
    align-self: center
  &baseline
    align-self: baseline
  &stretch
    align-self: stretch

.flex-center
  @extends .items-center
  @extends .justify-center

for $name, $size in $flex-gutter
  .q-gutter
    &-x-{$name}
      margin-left: (- $size)
      > *
        margin-left: $size
    &-y-{$name}
      margin-top: (- $size)
      > *
        margin-top: $size
    &-{$name}
      @extends .q-gutter-x-{$name}, .q-gutter-y-{$name}
  .q-col-gutter
    &-x-{$name}
      margin-left: (- $size)
      > *
        padding-left: ($size)
    &-y-{$name}
      margin-top: (- $size)
      > *
        padding-top: $size
    &-{$name}
      @extends .q-col-gutter-x-{$name}, .q-col-gutter-y-{$name}

for $name, $size in $sizes
  fg(s('-%s', unquote($name)), $size)