/* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- variables/variables-layout.less -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Layout -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Screen Sizes ----------------------------------------------------------------------------- */ // Mini Screen (Phone) @screen-mini-enabled: true; @screen-mini: 480px; @screen-mini-max: (@screen-small - 1); // Small Screen (Tablet) @screen-small-enabled: true; @screen-small: 768px; @screen-small-max: (@screen-medium - 1); // Medium Screen (Laptop) @screen-medium-enabled: true; @screen-medium: 992px; @screen-medium-max: (@screen-large - 1); // Large Screen (Desktop) @screen-large-enabled: true; @screen-large: 1400px; /* ----------------------------------------------------------------------------- Screen Resolutions ----------------------------------------------------------------------------- */ @screen-resolution-2x-enabled: true; @screen-resolution-3x-enabled: true; /* ----------------------------------------------------------------------------- Grid ----------------------------------------------------------------------------- */ @grid-columns-count: 12; @grid-gutter-width: 24px; // Mini Screen (Phone) @grid-gutter-width-screen-mini: 5%; @grid-column-width-screen-mini: (@grid-container-width-screen-mini - ((@grid-columns-count - 1) * @grid-gutter-width-screen-mini)) / @grid-columns-count; @grid-container-width-screen-mini: 100%; // Small Screen (Tablet) @grid-gutter-width-screen-small: 32px; @grid-column-width-screen-small: (@grid-container-width-screen-small - ((@grid-columns-count - 1) * @grid-gutter-width-screen-small)) / @grid-columns-count; @grid-container-width-screen-small: 730px; // Medium Screen (Laptop) @grid-gutter-width-screen-medium: 48px; @grid-column-width-screen-medium: (@grid-container-width-screen-medium - ((@grid-columns-count - 1) * @grid-gutter-width-screen-medium)) / @grid-columns-count; @grid-container-width-screen-medium: 920px; // Large Screen (Desktop) @grid-gutter-width-screen-large: 64px; @grid-column-width-screen-large: (@grid-container-width-screen-large - ((@grid-columns-count - 1) * @grid-gutter-width-screen-large)) / @grid-columns-count; @grid-container-width-screen-large: 1100px; /* ----------------------------------------------------------------------------- Fluid Container ----------------------------------------------------------------------------- */ @grid-container-fluid-gutter-width: @grid-gutter-width * 1.0; @grid-container-fluid-gutter-width-screen-mini: @grid-gutter-width * 1.0; @grid-container-fluid-gutter-width-screen-small: @grid-gutter-width-screen-small * 1.0; @grid-container-fluid-gutter-width-screen-medium: @grid-gutter-width-screen-medium * 1.0; @grid-container-fluid-gutter-width-screen-large: @grid-gutter-width-screen-large * 1.0; // Narrow Fluid Container @grid-container-fluid-narrow-gutter-width: @grid-container-fluid-gutter-width * 0.5; @grid-container-fluid-narrow-gutter-width-screen-mini: @grid-container-fluid-gutter-width-screen-mini * 0.5; @grid-container-fluid-narrow-gutter-width-screen-small: @grid-container-fluid-gutter-width-screen-small * 0.5; @grid-container-fluid-narrow-gutter-width-screen-medium: @grid-container-fluid-gutter-width-screen-medium * 0.5; @grid-container-fluid-narrow-gutter-width-screen-large: @grid-container-fluid-gutter-width-screen-large * 0.5; // Wide Fluid Container @grid-container-fluid-wide-gutter-width: @grid-container-fluid-gutter-width * 2.0; @grid-container-fluid-wide-gutter-width-screen-mini: @grid-container-fluid-gutter-width-screen-mini * 2.0; @grid-container-fluid-wide-gutter-width-screen-small: @grid-container-fluid-gutter-width-screen-small * 2.0; @grid-container-fluid-wide-gutter-width-screen-medium: @grid-container-fluid-gutter-width-screen-medium * 2.0; @grid-container-fluid-wide-gutter-width-screen-large: @grid-container-fluid-gutter-width-screen-large * 2.0; /* ----------------------------------------------------------------------------- Spacing Unit ----------------------------------------------------------------------------- */ @base-spacing-unit: @grid-gutter-width * 1.0; @base-spacing-unit-screen-mini: @grid-gutter-width * 1.0; @base-spacing-unit-screen-small: @grid-gutter-width-screen-small * 1.0; @base-spacing-unit-screen-medium: @grid-gutter-width-screen-medium * 1.0; @base-spacing-unit-screen-large: @grid-gutter-width-screen-large * 1.0; /* ----------------------------------------------------------------------------- Z-Index Depths ----------------------------------------------------------------------------- */ @z-index-page: 1000; @z-index-header: 2000; @z-index-dropdown-menu: 3000; @z-index-tooltip: 4000; @z-index-modal: 5000; /* ----------------------------------------------------------------------------- -------------------------------------------------------------------------------- Foundation -------------------------------------------------------------------------------- ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- Body ----------------------------------------------------------------------------- */ @body-background-color: @white; /* ----------------------------------------------------------------------------- Canvas ----------------------------------------------------------------------------- */ @canvas-background-color: @white; /* ----------------------------------------------------------------------------- Canvas Pod ----------------------------------------------------------------------------- */ @canvas-pod-light-background-color: color-lighten(@neutral, 95); @canvas-pod-dark-background-color: color-lighten(@neutral, -30); /* ----------------------------------------------------------------------------- Container Pod ----------------------------------------------------------------------------- */ @container-pod-padding-vertical: @base-spacing-unit * 1.0; @container-pod-padding-vertical-screen-mini: @base-spacing-unit-screen-mini * 1.0; @container-pod-padding-vertical-screen-small: @base-spacing-unit-screen-small * 1.0; @container-pod-padding-vertical-screen-medium: @base-spacing-unit-screen-medium * 1.0; @container-pod-padding-vertical-screen-large: @base-spacing-unit-screen-large * 1.0; // Short Container Pod @container-pod-short-padding-vertical: @base-spacing-unit * 0.5; @container-pod-short-padding-vertical-screen-mini: @base-spacing-unit-screen-mini * 0.5; @container-pod-short-padding-vertical-screen-small: @base-spacing-unit-screen-small * 0.5; @container-pod-short-padding-vertical-screen-medium: @base-spacing-unit-screen-medium * 0.5; @container-pod-short-padding-vertical-screen-large: @base-spacing-unit-screen-large * 0.5; // Tall Container Pod @container-pod-tall-padding-vertical: @base-spacing-unit * 1.5; @container-pod-tall-padding-vertical-screen-mini: @base-spacing-unit-screen-mini * 1.5; @container-pod-tall-padding-vertical-screen-small: @base-spacing-unit-screen-small * 1.5; @container-pod-tall-padding-vertical-screen-medium: @base-spacing-unit-screen-medium * 1.5; @container-pod-tall-padding-vertical-screen-large: @base-spacing-unit-screen-large * 1.5; /* ----------------------------------------------------------------------------- Borders ----------------------------------------------------------------------------- */ @border-color: color-lighten(@neutral, 90); @border-color-inverse: color-lighten(@neutral, 20);