vuematerial/vue-material

@import "./variables.scss";
@import "./mixins.scss";


/**
 * Layout Base
 */

.md-layout {
  @include md-layout-base;
  flex-wrap: wrap;

  &.md-centered {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
}


/**
 * Gutter sizes
 */

.md-layout {
  @include md-layout-gutter($md-gutter-xlarge);

  @include md-layout-large {
    @include md-layout-gutter($md-gutter-large);
  }

  @include md-layout-medium {
    @include md-layout-gutter($md-gutter-medium);
  }

  @include md-layout-small {
    @include md-layout-gutter($md-gutter-small);
  }

  @include md-layout-xsmall {
    @include md-layout-gutter($md-gutter-xsmall);
  }
}


/**
 * Alignments
 */

.md-layout {
  @include md-layout-alignment;
}



/**
 * Layout item
 */

.md-layout-item {
  flex: 1 1;

  &.md-layout {
    margin: 0;
  }

  @include md-layout-item;

  @include md-layout-xlarge {
    @include md-layout-item(xlarge);
  }

  @include md-layout-large {
    @include md-layout-item(large);
  }

  @include md-layout-medium {
    @include md-layout-item(medium);
  }

  @include md-layout-small {
    @include md-layout-item(small);
  }

  @include md-layout-xsmall {
    @include md-layout-item(xsmall);
  }
}


/**
 * Hide Element
 */

@include md-hide;

@include md-layout-xlarge {
  @include md-hide(xlarge);
}

@include md-layout-large {
  @include md-hide(large);
}

@include md-layout-medium {
  @include md-hide(medium);
}

@include md-layout-small {
  @include md-hide(small);
}

@include md-layout-xsmall {
  @include md-hide(xsmall);
}