@c8y/style/variables/_layout-vars.less

Styles for Cumulocity IoT applications

/* GLOBAL MARGINS AND SPACING */

/* SIZE TOKENS */
@size-base: var(--c8y-unit-base); // 8px
@size-4: calc(var(--c8y-unit-base) * 0.5); // 4px
@size-5: calc(var(--c8y-unit-base) * 0.625); // 5px (off-grid for legacy compatibility)
@size-8: @size-base; // 8px
@size-10: calc(var(--c8y-unit-base) * 1.25); // 10px (off-grid for legacy compatibility)
@size-16: calc(var(--c8y-unit-base) * 2); // 16px
@size-20: calc(var(--c8y-unit-base) * 2.5); // 20px (off-grid for legacy compatibility)
@size-24: calc(var(--c8y-unit-base) * 3); // 24px
@size-32: calc(var(--c8y-unit-base) * 4); // 32px
@size-40: calc(var(--c8y-unit-base) * 5); // 40px
@size-48: calc(var(--c8y-unit-base) * 6); // 48px
@size-56: calc(var(--c8y-unit-base) * 7); // 56px
@size-64: calc(var(--c8y-unit-base) * 8); // 64px
@size-72: calc(var(--c8y-unit-base) * 9); // 72px
@size-80: calc(var(--c8y-unit-base) * 10); // 80px

/* DEPRECATED - Backwards compatibility aliases (use @size-* instead) */
@margin-base: @size-base;
@margin-4: @size-4;
@margin-8: @size-8;
@margin-16: @size-16;
@margin-24: @size-24;
@margin-32: @size-32;
@margin-40: @size-40;
@margin-48: @size-48;
@margin-56: @size-56;
@margin-64: @size-64;
@margin-72: @size-72;
@margin-80: @size-80;

/* NAVIGATOR */

@navigatorWidth: 240px;
@navigatorWidth--sm: calc(100% - 35px);
@navigator-title-height: calc(var(--c8y-unit-base) * 6);
@navigator-top-padding: 0;
@navigator-padding-bottom: calc(var(--c8y-unit-base) * 3);

/* TOP MAIN BAR */
@headerHeight: calc(var(--c8y-unit-base) * 8);
@header-bar-height: @headerHeight;

/* MEDIA QUERIES BREAKPOINTS */
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// set maximum width for specific uses
@screen-max-width: 1400px;

//== Grid system
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: @margin-24;

// Navbar collapse
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

//== Container sizes
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: calc(720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: calc(940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: calc(1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;

// Grid float breakpoint
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-lg;