quasar-framework/src/themes/core/flex.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.flex
  display flex
  &.inline
    display inline-flex

.row
  display flex
  flex-direction row
  &.inline
    display inline-flex
.reverse-row
  display flex
  flex-direction row-reverse
  &.inline
    display inline-flex

.column
  display flex
  flex-direction column
  &.inline
    display inline-flex
.reverse-column
  display flex
  flex-direction column-reverse
  &.inline
    display inline-flex

.flex, .row, .column
  &.small-gutter
    margin (- $layout-small-gutter) 0 $layout-small-gutter (- $layout-small-gutter)
    > div
      padding $layout-small-gutter 0 0 $layout-small-gutter

  &.medium-gutter, &.gutter
    margin (- $layout-medium-gutter) 0 $layout-medium-gutter (- $layout-medium-gutter)
    > div
      padding $layout-medium-gutter 0 0 $layout-medium-gutter

  &.big-gutter
    margin (- $layout-big-gutter) 0 $layout-big-gutter (- $layout-big-gutter)
    > div
      padding $layout-big-gutter 0 0 $layout-big-gutter

  &.large-gutter
    margin (- $layout-large-gutter) 0 $layout-large-gutter (- $layout-large-gutter)
    > div
      padding $layout-large-gutter 0 0 $layout-large-gutter


.order-first
  order -1000
.order-last
  order 1000
for i in 0..10
  .order-{i}
    order i
  .grow-{i}
    flex-grow i
  .shrink-{i}
    flex-shrink i

.auto
  flex 1 1 auto

for $cols in (1..5)
  for $parts in (1..$cols)
    &.width-{$parts}of{$cols}
      flex 0 1 ($parts / $cols * 100)%
    &.offset-{$parts}of{$cols}
      margin-left ($parts / $cols * 100)%


.sm, .gt-sm, .md, .lt-md, .gt-md, .bg, .lt-bg, .gt-bg, .lg, .lt-lg
  display none

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

+prefix-classes('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

+prefix-classes('items-')
  &.start
    align-items flex-start
  &.end
    align-items flex-end
  &.center
    align-items center
  &.baseline
    align-items baseline
  &.stretch
    align-items stretch

+prefix-classes('content-')
  &.start
    align-content flex-start
  &.end
    align-content flex-end
  &.center
    align-content center
  &.between
    align-content space-between
  &.around
    align-content space-around

+prefix-classes('self-')
  &.start
    align-self flex-start
  &.end
    align-self flex-end
  &.center
    align-self center
  &.baseline
    align-self baseline
  &.stretch
    align-self stretch


flex-media-query($type)
  .{$type}
    display block
    &.inline
      display inline-block
    &.flex
      display flex
      &.inline
        display inline-flex

  .{$type}-hide
    display none

  .{$type}-auto
    flex 1 1 auto

  for $cols in (1..5)
    for $parts in (1..$cols)
      .{$type}-width-{$parts}of{$cols}
        flex 0 1 ($parts / $cols * 100)%
      .{$type}-offset-{$parts}of{$cols}
        margin-left ($parts / $cols * 100)%

  .{$type}-order-first
    order -1000
  .{$type}-order-last
    order 1000

  for i in 1..10
    .{$type}-order-{i}
      order i
    .{$type}-grow-{i}
      flex-grow i
    .{$type}-shrink-{i}
      flex-shrink i

  .{$type}-row
    display flex
    flex-direction row
    &.inline
      display inline-flex
  .{$type}-reverse-row
    display flex
    flex-direction row-reverse
    &.inline
      display inline-flex
  .{$type}-column
    display flex
    flex-direction column
    &.inline
      display inline-flex
  .{$type}-reverse-column
    display flex
    flex-direction column-reverse
    &.inline
      display inline-flex

  .flex, .row, .column
    &.{$type}-small-gutter
      margin (- $layout-small-gutter) 0 $layout-small-gutter (- $layout-small-gutter)
      > div
        padding $layout-small-gutter 0 0 $layout-small-gutter
    &.{$type}-medium-gutter, &.{$type}-gutter
      margin (- $layout-medium-gutter) 0 $layout-medium-gutter (- $layout-medium-gutter)
      > div
        padding $layout-medium-gutter 0 0 $layout-medium-gutter
    &.{$type}-big-gutter
      margin (- $layout-big-gutter) 0 $layout-big-gutter (- $layout-big-gutter)
      > div
        padding $layout-big-gutter 0 0 $layout-big-gutter
    &.{$type}-large-gutter
      margin (- $layout-large-gutter) 0 $layout-large-gutter (- $layout-large-gutter)
      > div
        padding $layout-large-gutter 0 0 $layout-large-gutter

@media only screen and (max-width $layout-small-max)
  flex-media-query('sm')
@media only screen and (min-width $layout-medium-min)
  flex-media-query('gt-sm')

@media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
  flex-media-query('md')
@media only screen and (min-width $layout-big-min)
  flex-media-query('gt-md')
@media only screen and (max-width $layout-small-max)
  flex-media-query('lt-md')

@media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
  flex-media-query('bg')
@media only screen and (min-width $layout-large-min)
  flex-media-query('gt-bg')
@media only screen and (max-width $layout-medium-max)
  flex-media-query('lt-bg')

@media only screen and (min-width $layout-large-min)
  flex-media-query('lg')
@media only screen and (max-width $layout-big-max)
  flex-media-query('lt-lg')