vuetify/src/stylus/components/_grid.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.container
  flex: 1 1 100%
  margin: auto
  padding: $grid-gutters.lg
  width: 100%

  for size, width in $container-max-widths
    @media only screen and (min-width: width)
      max-width: (width * 0.9375) // Credit to bootstrap

  @media $display-breakpoints.xs-only
    padding: $grid-gutters.xl

  &.fluid
    max-width: 100%
    
  &.fill-height
    align-items: center
    display: flex
    
    .layout
      height: 100%
      flex: 1 1 auto

  &.grid-list
    for $size, $gutter in $grid-gutters
      &-{$size}
        padding: $gutter

        .layout
          .flex
            padding: ($gutter / 2)
            
        .layout:only-child
          margin: -($gutter / 2)

        .layout:not(:only-child)
          margin: auto -($gutter / 2)
        
        *:not(:only-child)
          .layout:first-child
            margin-top: -($gutter / 2)

          .layout:last-child
            margin-bottom: -($gutter / 2)

.layout
  display: flex
  flex: 1 1 auto
  flex-wrap: nowrap

  &.row
    flex-direction: row

    &.reverse
      flex-direction: row-reverse

  &.column
    flex-direction: column

    &.reverse
      flex-direction: column-reverse

  &.wrap
    flex-wrap: wrap

for size, width in $grid-breakpoints
  @media all and (min-width: width)
    for n in (1..$grid-columns)
      .flex.{size}{n}
        flex-basis: (n / $grid-columns * 100)%
        max-width: (n / $grid-columns * 100)%

      .flex.order-{size}{n}
        order: n

    for n in (0..$grid-columns)
      .flex.offset-{size}{n}
        margin-left: (n / $grid-columns * 100)%

.flex,
.child-flex > *
  flex: 1 1 auto

.align
  &-start
    align-items: flex-start

  &-end
    align-items: flex-end

  &-center
    align-items: center

  &-baseline
    align-items: baseline
    
.align-content
  &-start
    align-content: flex-start

  &-end
    align-content: flex-end

  &-center
    align-content: center

  &-space-between
    align-content: space-between

  &-space-around
    align-content: space-around

.justify
  &-start
    justify-content: flex-start

  &-end
    justify-content: flex-end

  &-center
    justify-content: center

  &-space-around
    justify-content: space-around

  &-space-between
    justify-content: space-between

.spacer
  flex-grow: 1 !important

.grow
  flex-shrink: 0 !important

.shrink
  flex-grow: 0 !important

.scroll-y
  overflow-y: auto

.fill-height
  height: 100%

.hide-overflow
  overflow: hidden !important

.show-overflow
  overflow: visible !important

.no-wrap
  white-space: nowrap
  
.ellipsis
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  
// Display helpers
.d-flex
  display: flex !important
    
.d-inline-flex
  display: inline-flex !important
  
.d-flex,
.d-inline-flex
  > *
    flex: 1 1 auto !important
    
.d-block
  display: block !important
  
.d-inline-block
  display: inline-block !important