@c8y/style/styles/mixins/size.less

Styles for Cumulocity IoT applications

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

/* build utilities class
  * @prop - property, i.e. margin, padding
  * @prefix - for class name, i.e. m, p
  * @basesize - unit for increasing sizes, defauts to 8
  * @range - amount of classes built
*/

.createSizeClasses(@value; @prop; @prefix; @basesize: 8; ) when (@value >= 0) {
  @val: (@value * @basesize);
  .@{prefix}-t-@{val} {
    @{prop}-top: (@val * 1px)!important;
  }
  .@{prefix}-r-@{val} {
    @{prop}-right: (@val * 1px)!important;
  }
  .@{prefix}-b-@{val} {
    @{prop}-bottom: (@val * 1px)!important;
  }
  .@{prefix}-l-@{val} {
    @{prop}-left: (@val * 1px)!important;
  }
  .@{prefix}-@{val} {
    @{prop}: (@val * 1px)!important;
  }
  
  @media (max-width: @screen-xs-max) {
    .@{prefix}-t-xs-@{val} {
      @{prop}-top: (@val * 1px)!important;
    }
    .@{prefix}-r-xs-@{val} {
      @{prop}-right: (@val * 1px)!important;
    }
    .@{prefix}-b-xs-@{val} {
      @{prop}-bottom: (@val * 1px)!important;
    }
    .@{prefix}-l-xs-@{val} {
      @{prop}-left: (@val * 1px)!important;
    }
    .@{prefix}-xs-@{val} {
      @{prop}: (@val * 1px)!important;
    }
  }
  @media (min-width: @screen-sm-min) {
    .@{prefix}-t-sm-@{val} {
      @{prop}-top: (@val * 1px)!important;
    }
    .@{prefix}-r-sm-@{val} {
      @{prop}-right: (@val * 1px)!important;
    }
    .@{prefix}-b-sm-@{val} {
      @{prop}-bottom: (@val * 1px)!important;
    }
    .@{prefix}-l-sm-@{val} {
      @{prop}-left: (@val * 1px)!important;
    }
    .@{prefix}-sm-@{val} {
      @{prop}: (@val * 1px)!important;
    }
  }
  @media (min-width: @screen-md-min) {
    .@{prefix}-t-md-@{val} {
      @{prop}-top: (@val * 1px)!important;
    }
    .@{prefix}-r-md-@{val} {
      @{prop}-right: (@val * 1px)!important;
    }
    .@{prefix}-b-md-@{val} {
      @{prop}-bottom: (@val * 1px)!important;
    }
    .@{prefix}-l-md-@{val} {
      @{prop}-left: (@val * 1px)!important;
    }
    .@{prefix}-md-@{val} {
      @{prop}: (@val * 1px)!important;
    }
  }
  @media (min-width: @screen-lg-min) {
    .@{prefix}-t-lg-@{val} {
      @{prop}-top: (@val * 1px)!important;
    }
    .@{prefix}-r-lg-@{val} {
      @{prop}-right: (@val * 1px)!important;
    }
    .@{prefix}-b-lg-@{val} {
      @{prop}-bottom: (@val * 1px)!important;
    }
    .@{prefix}-l-lg-@{val} {
      @{prop}-left: (@val * 1px)!important;
    }
    .@{prefix}-lg-@{val} {
      @{prop}: (@val * 1px)!important;
    }
  }
  .createSizeClasses((@value - 1) ; @prop; @prefix; @basesize;);
}