formir/src/less/setup/core.less

Pure CSS / HTML Framework

// Path and dirs
@font-dir: "../fonts";

//// Icons path
@font-icon-url-eot: url("@{font-dir}/icons.eot");
@font-icon-url-embedded: url("@{font-dir}/icons.eot");
@font-icon-url-woff: url("@{font-dir}/icons.woff");
@font-icon-url-ttf: url("@{font-dir}/icons.ttf");
@font-icon-url-svg: url("@{font-dir}/icons.svg");

// Base Unit
@base-unit: rem;
@base-steps: 16;
@base-geometric-step: 3;
@colors: body, primary, alternative, link, mute, cancel, success, info, warning, danger, color-1, color-2, color-3;

// Sizes
@sizes: xs, s, m, l, xl, xxl; // can be set for ex. xs, s, m, l etc.. change name of variables for buttons input etc.
@size-xs: 0.6;
@size-s: 0.85;
@size-m: 1.15;
@size-l: 1.5;
@size-xl: 1.75;
@size-xxl: 2;
@input-sizes: s, m, l;

// Layout Unit
@layout-unit: px;
@layout-steps: 8;
@layout-factor: 0.3;
@layout-geometric-step: @base-geometric-step;
@layout-width: @content-max-width;
@layout-height: @content-max-height;

// Description list
@dl-steps: @layout-steps;

// Responsive Web Design

// Break points
@desktop-min-width: 1280px;
@tablet-max-width: 1024px;
@tablet-portrait-max-width: 768px;
@mobile-max-width: 568px;
@mobile-portrait-max-width: 320px;

// Break point on mobile menu
@mobile-menu-max-width: @tablet-portrait-max-width;


// Side break points
@device-width-side-collapse: @tablet-portrait-max-width; // in that device width sidebar will be automatic collapsed, set 0 to off
@device-width-side-hide: @mobile-max-width; // in that device width sidebar (side-hide) will automatic hide, set 0 to off
@device-width-side-show-full: @device-width-side-hide;

@table-mobile-max-width: @tablet-portrait-max-width;

// Z-index
  //// Modals
  @modal-zindex: 10000;

  //// Side
  @side-zindex: 10000;
  //// Tooltips
  @tooltip-zindex: 10000;
  @tooltip-arrow-zindex: 1;
  //// Popups
  @popup-zindex: 10000;
  @popup-arrow-zindex: 1;
  //// Select
  @select-zindex: 10000;

  // Header
  @header-zindex: 10000;


// Content
@content-max-width: unit(1128, @layout-unit);
@content-min-margin: unit(20, @layout-unit);
@content-max-height: unit(600, @layout-unit);


// Forms
@form-states: has-success, has-info, has-error, has-warning;
@form-state-invalid: has-error;
@form-state-valid: has-success;

@form-state-change-label: false;
@form-state-change-text-color: true;
@form-state-change-border: true;
@form-state-change-background: true;
@form-state-change-hint: true;
@form-state-change-tooltip: true;
@form-tooltip-position: right;  // left / center / right
@form-tooltip-input-show-on: focus;  // focus / not_focus / hover


// Alert
@alert-states: success, info, error, warning;

// Grid
@grid-steps: 16;
@grid-step-fractions: true;  // set true if you will be using fractions of grid step otherwise false to reduce weight
@grid-gutter: true; // set true if you will be using grid gutter otherwise false to reduce weight
@grid-space: true; // set true if you will be using grid space otherwise false to reduce weight
@grid-offset: true; // set true if you will be using grid offset otherwise false to reduce weight
@grid-gutter-start: 2;
@grid-gutter-steps: @layout-steps/2;
@grid-gutter-unit: @base-unit;
@grid-gutter-step: 0.3;
@grid-space-start: 2;
@grid-space-steps: @layout-steps/2;
@grid-space-unit: @base-unit;
@grid-space-step: 0.3;

// Typography
@typography-unit: @base-unit;
@typography-font-size-1: unit(2.5, @typography-unit);
@typography-line-height-1: unit(1.35, em);

@typography-font-size-2: unit(2, @typography-unit);
@typography-line-height-2: unit(1.35, em);

@typography-font-size-3: unit(1.7, @typography-unit);
@typography-line-height-3: unit(1.35, em);

@typography-font-size-4: unit(1.3, @typography-unit);
@typography-line-height-4: unit(1.35, em);

@typography-font-size-5: unit(1, @typography-unit);
@typography-line-height-5: unit(1.35, em);

@typography-font-size-6: unit(0.8, @typography-unit);
@typography-line-height-6: unit(1.35, em);

// Buttons
@button-set-gradient: true; // 'default' to use gradient button as default, true like option, false not use
@button-set-focus: true; // true if you will be use focus state on any buttons
@button-set-color-focus: false; // true to use focus state on color change
@button-set-inverse: false;  // true to set buttons inverse as default
@button-set-transparent: false; // true to set buttons background transparent as default

// Items
@items-gutter: 15px;

// Tabs
@tabs-pages: 10;

//// Includes - DO NOT CHANGE BELOW ////
@include-core-layout-header: null;
@include-core-layout-side: null;

@include-core-component-modal: null;
@include-core-component-tooltip: null;
@include-core-component-menu: null;
@include-core-component-table: null;