@c8y/style/styles/utilities/_container-queries.less

Styles for Cumulocity IoT applications

//********************
// 350px
//********************

.c8y-cq-350 {
  container-type: inline-size;
  container-name: c8y-cq-350;
}

@container c8y-cq-350 (max-width: 350px) {

  .c8y-list--timeline__item .d-flex {
    flex-direction: column !important;
  }

  .c8y-list--timeline__item [class^='col-'],
  .c8y-list--timeline__item [class*=' col-'] {
    float: none;
    width: 100% !important;

    &:before {
      display: block;
      content: attr(data-label) !important;
      font-size: @font-size-xs;
      text-transform: uppercase;
      color: @text-muted;
    }
  }

  .hidden-cq {
    display: none !important;
  }
}

//********************
// 440px
//********************

.c8y-cq-440 {
  container-type: inline-size;
  container-name: c8y-cq-440;
}

@container c8y-cq-440 (max-width: 440px) {

  .c8y-list--timeline__item .d-flex {
    flex-direction: column !important;
  }

  .c8y-list--timeline__item [class^='col-'],
  .c8y-list--timeline__item [class*=' col-'] {
    float: none;
    width: 100% !important;

    &:before {
      display: block;
      content: attr(data-label) !important;
      font-size: @font-size-xs;
      text-transform: uppercase;
      color: @text-muted;
    }
  }

  .hidden-cq {
    display: none !important;
  }
}


//********************
// 500px
//********************

.c8y-cq-500 {
  container-type: inline-size;
  container-name: c8y-cq-500;
}

@container c8y-cq-500 (max-width: 500px) {

  .c8y-list--timeline__item .d-flex {
    flex-direction: column !important;
  }

  .c8y-list--timeline__item [class^='col-'],
  .c8y-list--timeline__item [class*=' col-'] {
    float: none;
    width: 100% !important;

    &:before {
      display: block;
      content: attr(data-label) !important;
      font-size: @font-size-xs;
      text-transform: uppercase;
      color: @text-muted;
    }
  }

  .hidden-cq {
    display: none !important;
  }
}