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

Styles for Cumulocity IoT applications

@import "../mixins/_size.less";

/**
 * Margin and Padding Utility Classes
 *
 * Note: This file uses the size.createSizeClasses() mixin to generate utility classes
 * based on the 8px base unit system. The mixin generates classes like .m-t-8, .p-b-16, etc.
 *
 * Intentionally hardcoded values:
 * - Generated by mixin: The mixin generates hardcoded px values (e.g., 8px, 16px, 24px)
 *   following the base unit system but not using @size-* tokens directly
 * - Responsive breakpoints: Use @screen-* tokens for media queries
 * - Auto values: CSS auto keyword, not numeric
 *
 * Note: Consider refactoring the mixin to use @size-* tokens instead of generating
 * hardcoded pixel values for better consistency with the design token system.
 */

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

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

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

/* 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;
  }
}