exadel-inc/esl

@import (reference) './variables.less';
 
.flex {
  &-column {
    flex-direction: column !important;
  }
 
  &-grow-1 {
    flex-grow: 1 !important;
  }
 
  @media @sm-xl {
    &-sm-row {
      flex-direction: row !important;
    }
  }
 
  @media @md-xl {
    &-md-row {
      flex-direction: row !important;
    }
  }
}
 
.justify-content {
  &-end {
    justify-content: flex-end !important;
  }
 
  &-between {
    justify-content: space-between !important;
  }
 
  &-around {
    justify-content: space-around !important;
  }
  &-center {
    justify-content: center !important;
  }
}
 
.align-items {
  &-center {
    align-items: center !important;
  }
 
  &-items-stretch {
    align-items: stretch !important;
  }
}
 
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
 
.col,
.col-3,
.col-4,
.col-6,
.col-12,
.col-md-4,
.col-sm-6,
.col-md-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
 
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
 
  &-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
 
  &-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
 
  &-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
 
  @media @sm-xl {
    &-sm-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
 
  @media @md-xl {
    &-md-4 {
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
 
    &-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  @media @lg-xl {
    &-lg-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
}
 
@media @sm-xl {
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
}