@c8y/style/styles/mixins/create-grid.less

Styles for Cumulocity IoT applications

/* generate classes for setting two columns on a 12 columns grid */

.createGridCols(@value; ) when (@value >=0) {
  @one: @value;
  @two: 12 - @value;

  .grid__col--@{one}-@{two} {
    grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr));
    &--xs {
      @media (max-width: @screen-xs-max) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr));
      }
    }
    &--sm {
      @media (min-width: @screen-sm-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr));
      }
    }
    &--md {
      @media (min-width: @screen-md-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr));
      }
    }
    &--lg {
      @media (min-width: @screen-lg-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr));
      }
    }
  }

  .createGridCols((@value - 1));
}

.createGridCols3(@value; ) when (@value >=0) {
  @one: @value;
  @two: 12 - (@value * 2);
  @three: @value;

  .grid__col--@{one}-@{two}-@{three} {
    grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr)) minmax(0, (@three * 1fr));
    &--xs {
      @media (max-width: @screen-xs-max) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr)) minmax(0, (@three * 1fr));
      }
    }
    &--sm {
      @media (min-width: @screen-sm-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr)) minmax( 0, (@three * 1fr));
      }
    }
    &--md {
      @media (min-width: @screen-md-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr)) minmax(0, (@three * 1fr));
      }
    }
    &--lg {
      @media (min-width: @screen-lg-min) {
        grid-template-columns: minmax(0, (@one * 1fr)) minmax(0, (@two * 1fr)) minmax( 0, (@three * 1fr));
      }
    }
  }
  .createGridCols3((@value - 1));
}

/* generate classes for setting  two rows on a 12 rows grid
  example: grid__row-4-6
*/
.createGridRows(@value; ) when (@value >=0) {
  @one: @value;
  @two: 12 - @value;

  .grid__row--@{one}-@{two} {
    grid-template-rows: (@one * 1fr) (@two * 1fr);

    &--xs {
      @media (max-width: @screen-xs-max) {
        grid-template-rows: (@one * 1fr) (@two * 1fr);
      }
    }
    &--sm {
      @media (min-width: @screen-sm-min) {
        grid-template-rows: (@one * 1fr) (@two * 1fr);
      }
    }
    &--md {
      @media (min-width: @screen-md-min) {
        grid-template-rows: (@one * 1fr) (@two * 1fr);
      }
    }
    &--lg {
      @media (min-width: @screen-lg-min) {
        grid-template-rows: (@one * 1fr) (@two * 1fr);
      }
    }
  }

  .createGridRows((@value - 1));
}

.createGapClasses(@value; @basesize: 8; ) when (@value >= 0) {
  @val: (@value * @basesize);
  .gap-@{val} {
    gap: (@val * 1px) !important;
  }

  @media (max-width: @screen-xs-max) {
    .gap-xs-@{val} {
      gap: (@val * 1px) !important;
    }
  }
  @media (min-width: @screen-sm-min) {
    .gap-sm-@{val} {
      gap: (@val * 1px) !important;
    }
  }
  @media (min-width: @screen-md-min) {
    .gap-md-@{val} {
      gap: (@val * 1px) !important;
    }
  }
  @media (min-width: @screen-lg-min) {
    .gap-lg-@{val} {
      gap: (@val * 1px) !important;
    }
  }
  .createGapClasses((@value - 1); @basesize );
}