@c8y/style/styles/utilities/_margins-paddings.less

Styles for Cumulocity IoT applications

// Margin utility classes
.createSizeClasses(1, margin, m, 4) !important;
.createSizeClasses(15, margin, m, 8) !important;

/* example result:
 .m-t-8{
   margin-top: 8px
 }
*/

// Padding utility classes
.createSizeClasses(1, padding, p, 4) !important;
.createSizeClasses(15, padding, p, 8) !important;

/* example result:
 .p-t-8{
   padding-top: 8px
 }
*/

// Auto margins
.m-auto {
  margin: auto !important;
}

.m-t-auto {
  margin-top: auto !important;
}

.m-r-auto {
  margin-right: auto !important;
}

.m-b-auto {
  margin-bottom: auto !important;
}

.m-l-auto {
  margin-left: auto !important;
}

// Auto width and height
.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto !important;
}

//Media queries
@media (max-width: @screen-xs-max) {
  .m-auto-xs {
    margin: auto !important;
  }

  .m-t-auto-xs {
    margin-top: auto !important;
  }

  .m-r-auto-xs {
    margin-right: auto !important;
  }

  .m-b-auto-xs {
    margin-bottom: auto !important;
  }

  .m-l-auto-xs {
    margin-left: auto !important;
  }

  .w-auto-xs {
    width: auto !important;
  }

  .h-auto-xs {
    height: auto !important;
  }
}

@media (min-width: @screen-sm-min) {
  .m-auto-sm {
    margin: auto !important;
  }

  .m-t-auto-sm {
    margin-top: auto !important;
  }

  .m-r-auto-sm {
    margin-right: auto !important;
  }

  .m-b-auto-sm {
    margin-bottom: auto !important;
  }

  .m-l-auto-sm {
    margin-left: auto !important;
  }

  .w-auto-sm {
    width: auto !important;
  }

  .h-auto-sm {
    height: auto !important;
  }
}

@media (min-width: @screen-md-min) {
  .m-auto-md {
    margin: auto !important;
  }

  .m-t-auto-md {
    margin-top: auto !important;
  }

  .m-r-auto-md {
    margin-right: auto !important;
  }

  .m-b-auto-md {
    margin-bottom: auto !important;
  }

  .m-l-auto-md {
    margin-left: auto !important;
  }

  .w-auto-md {
    width: auto !important;
  }

  .h-auto-md {
    height: auto !important;
  }
}

@media (min-width: @screen-lg-min) {
  .m-auto-lg {
    margin: auto !important;
  }

  .m-t-auto-lg {
    margin-top: auto !important;
  }

  .m-r-auto-lg {
    margin-right: auto !important;
  }

  .m-b-auto-lg {
    margin-bottom: auto !important;
  }

  .m-l-auto-lg {
    margin-left: auto !important;
  }

  .w-auto-lg {
    width: auto !important;
  }

  .h-auto-lg {
    height: auto !important;
  }
}