@c8y/style/styles/utilities/_flex-items.less

Styles for Cumulocity IoT applications

/* SIZING */
.flex-auto {
  flex: 1 1 1% !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
.flex-no-shrink {
  flex-shrink: 0 !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
.flex-no-grow {
  flex-grow: 0 !important;
}

// RESPONSIVE
@media (max-width: @screen-xs-max) {
  .flex-auto-xs {
    flex: 1 1 1% !important;
  }
  .flex-shrink-xs {
    flex-shrink: 1 !important;
  }
  .flex-grow-xs {
    flex-grow: 1 !important;
  }
}

@media (min-width: @screen-sm-min) {
  .flex-auto-sm {
    flex: 1 1 1% !important;
  }
  .flex-shrink-sm {
    flex-shrink: 1 !important;
  }
  .flex-grow-sm {
    flex-grow: 1 !important;
  }
}

@media (min-width: @screen-md-min) {
  .flex-auto-md {
    flex: 1 1 1% !important;
  }
  .flex-shrink-md {
    flex-shrink: 1 !important;
  }
  .flex-grow-md {
    flex-grow: 1 !important;
  }
}

@media (min-width: @screen-lg-min) {
  .flex-auto-lg {
    flex: 1 1 1% !important;
  }
  .flex-shrink-lg {
    flex-shrink: 1 !important;
  }
  .flex-grow-lg {
    flex-grow: 1 !important;
  }
}

/* ALIGNMENT */
// cross axis (align-self)
.a-s-start {
  align-self: flex-start !important;
}
.a-s-center {
  align-self: center !important;
}
.a-s-end {
  align-self: flex-end !important;
}
.a-s-stretch {
  align-self: stretch !important;
}

@media (max-width: @screen-xs-max) {
  .a-s-start-xs {
    align-self: flex-start !important;
  }
  .a-s-center-xs {
    align-self: center !important;
  }
  .a-s-end-xs {
    align-self: flex-end !important;
  }
  .a-s-stretch-xs {
    align-self: stretch !important;
  }
}

@media (min-width: @screen-sm-min) {
  .a-s-start-sm {
    align-self: flex-start !important;
  }
  .a-s-center-sm {
    align-self: center !important;
  }
  .a-s-end-sm {
    align-self: flex-end !important;
  }
  .a-s-stretch-sm {
    align-self: stretch !important;
  }
}

@media (min-width: @screen-md-min) {
  .a-s-start-md {
    align-self: flex-start !important;
  }
  .a-s-center-md {
    align-self: center !important;
  }
  .a-s-end-md {
    align-self: flex-end !important;
  }
  .a-s-stretch-md {
    align-self: stretch !important;
  }
}

@media (min-width: @screen-lg-min) {
  .a-s-start-lg {
    align-self: flex-start !important;
  }
  .a-s-center-lg {
    align-self: center !important;
  }
  .a-s-end-lg {
    align-self: flex-end !important;
  }
  .a-s-stretch-lg {
    align-self: stretch !important;
  }
}