@c8y/style/styles/layout/_grid.less

Styles for Cumulocity IoT applications

@import "../mixins/_grid.less";
@import "../mixins/_grid-framework.less";

/**
 * Grid System - Bootstrap-based responsive grid
 *
 * Note: Uses design tokens for responsive breakpoints (@screen-*), container widths
 * (@container-*), and spacing (@size-4).
 *
 * Intentionally hardcoded values:
 * - 0 padding: Gutter removal utilities, not spacing
 */

// Container widths
// Set the container width, and override it for fixed navbars in media queries.
.container {
  .container-fixed();
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

// Fluid container
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
  .container-fixed();
}

// Row
// Rows contain and clear the floats of your columns.
.row {
  .make-row();
}

// Columns
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(xs);
// Small grid

.no-gutter {
  padding-right: 0;
  padding-left: 0;
}
.no-gutter-r {
  padding-right: 0;
}
.no-gutter-l {
  padding-left: 0;
}

// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
  .no-gutter-sm {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-sm-r, .no-gutter-sm-l
}

// Medium grid
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
  .make-grid(md);
  .no-gutter-md {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-md-r, .no-gutter-md-l
}

// Large grid
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
  .no-gutter-lg {
    padding-right: 0;
    padding-left: 0;
  }
  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-lg-r, .no-gutter-lg-l
}

// max-with for full width layouts which are not listings
.col-lg-max {
  max-width: @screen-max-width;
}

.tight-grid {
  margin-right: calc(@size-4 * -1) !important;
  margin-left: calc(@size-4 * -1) !important;

  .make-row();
  [class*='col-xs-'],
  [class*='col-sm-'],
  [class*='col-md-'],
  [class*='col-lg-'] {
    padding-right: @size-4 !important;
    padding-left: @size-4 !important;
  }
}