@progress/kendo-ui/css/web/Default/_variables.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

// Options
@enable-rounded: true;
@enable-shadows: true;
@enable-gradients: true;
@enable-transitions: true;
@enable-flex-classes: true;
@enable-grid-classes: true;

@use-calc-badge-size: true;
@use-input-button-width: false;
@use-input-spinner-width: false;
@use-picker-select-width: false;

// Spacing
@spacer: 1em;
@spacer-x: @spacer;
@spacer-y: @spacer;

@spacing: {
    0: 0;
    1: 4px;
    2: 8px;
    3: 12px;
    4: 16px;
    5: 20px;
    6: 24px;
    7: 28px;
    8: 32px;
    9: 36px;
    10: 40px;
    11: 44px;
    12: 48px;
    13: 52px;
    14: 56px;
    15: 60px;
    16: 64px;
    17: 68px;
    18: 72px;
    19: 76px;
    20: 80px;
    21: 84px;
    22: 88px;
    23: 92px;
    24: 96px;
    xs: 4px;
    sm: 8px;
    md: 12px;
    lg: 16px;
    xl: 24px;
    thin: 2px;
    hair: 1px;
}

@default-scrollbar-width: 17px;


// Icons
@icon-size: 16px;
@icon-size-lg: 32px;
@icon-spacing: @spacing[1];

// Color constants
@white: white;
@black: black;

@rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line

@gradient-transparent-to-black: rgba( black, 0), black; // stylelint-disable-line
@gradient-transparent-to-white: rgba( white, 0), white; // stylelint-disable-line
@gradient-black-to-transparent: black, rgba( black, 0); // stylelint-disable-line
@gradient-white-to-transparent: white, rgba( white, 0); // stylelint-disable-line

@gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line


// Fonts

/// Base font size across all components.
@font-size: 14px;

/// Font family across all components.
@font-family: inherit;

/// Font family for monospaced text. Used for styling the code.
@font-family-monospace: Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace;

@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-lg: 19px;

/// Line height used along with @font-size.
@line-height: (20 / 14);
@line-height-sm: 1.2;
@line-height-lg: 1.5;
@line-height-em: (@line-height * 1em);


// Metrics
@padding-x: 8px;
@padding-y: 4px;
@padding-x-sm: (@padding-x / 2);
@padding-y-sm: (@padding-y / 2);
@padding-x-lg: (@padding-x * 1.5);
@padding-y-lg: (@padding-y * 1.5);

/// Border radius for all components.
@border-radius: 2px;
@border-radius-sm: 1px;
@border-radius-lg: 4px;

@form-line-height: @line-height;
@form-line-height-em: @form-line-height * 1em;

@button-border-width: 1px;
@button-padding-x: @padding-x;
@button-padding-y: @padding-y;
@button-padding-x-sm: (@button-padding-x / 2);
@button-padding-y-sm: (@button-padding-y / 2);
@button-calc-size: ~"calc( @{form-line-height-em} + (@{button-padding-y} * 2) + 2px )";
@button-inner-calc-size: ~"calc( @{form-line-height-em} + (@{button-padding-y} * 2) )";

@input-border-width: 1px;
@input-padding-x: 5px;
@input-padding-y: 4px;
@input-padding-x-sm: (@input-padding-x / 2);
@input-padding-y-sm: (@input-padding-y / 2);
@input-calc-size: ~"calc( @{form-line-height-em} + (@{input-padding-y} * 2) + 2px )";
@input-inner-calc-size: ~"calc( @{form-line-height-em} + (@{input-padding-y} * 2) )";

// Toolbar
@toolbar-padding-x: 4px;
@toolbar-padding-y: 4px;
@toolbar-calc-size: ~"calc( @{button-calc-size} + (@{toolbar-padding-y} * 2) + 2px )";
@toolbar-inner-calc-size: ~"calc( @{button-calc-size} + (@{toolbar-padding-y} * 2) )";


// Treeview
@kendo-treeview-font-size: 14px;