@c8y/style/styles/mixins/element-queries.less

Styles for Cumulocity IoT applications

.make-flex-cols(@n: 12, @i: 1) when (@i =< @n) {
  .col-@{i} {
    min-width: calc((8.333333333% * @i) - (var(--c8y-margin) * 2));
  }
  .make-flex-cols(@n, (@i + 1));
}

.make-flex-cols-container(@n: 150, @i: 20) when (@i =< @n) {
  .content-flex-@{i}{
    --c8y-multiplier: calc((@i * 1rem) - 100%);
  }
  .make-flex-cols-container(@n, (@i + 1));
}

[class*="content-flex-"]{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  --c8y-margin: 1rem;
  margin: 0 calc(var(--c8y-margin) * -1);
  
  > *{
    max-width: 100%;
    flex-basis: calc(var(--c8y-multiplier) * 999);
    margin: 0 var(--c8y-margin);
  }
}

.make-flex-cols-container();

[class*="content-flex-"]{
  .make-flex-cols();
}