variables.less

/**
 *  Agile Toolkit CSS Framework (c) 2013-2014 v0.912
 *  http://www4.agiletoolkit.org/css
 *  Theme: Default
 */


// ==========================================================
// Typography
// ==========================================================

@bodyFamily:           "Helvetica Neue", "Helvetica", sans-serif;
@bodyColor:            #4c5359;
@bodySize:             0.875rem; // 14px
@bodyBaseline:         1.618; // Golden Section

@headingCase:          none; // Options: none, capitalize, uppercase, lowercase
@headingColor:         #3d4c59;
@headingFamily:        "Helvetica Neue", "Helvetica", sans-serif;
@headingWeight:		   400;
@headingBaseline:	   1.2; // Minor Third

@fontScatter:          0.5; // Multiplier that affects difference between heading sizes


// ==========================================================
// Styles & Colors
// ==========================================================

@bodyBackground:       #fff;

@cornerRadius:         5px;

@textSelect:           #1c2933; // Text selection's color
@textDimmed:           lighten(@bodyColor, 40%);

@blur:                 5px; // Effect .atk-blur can be applied on any element.

@borderDisabled:       lighten(@borderStatic, 10%);
@borderStatic:         #dcdee0;
@borderClickable:      darken(@borderStatic, 10%);
@borderOverlay:        darken(@borderStatic, 25%);

// @atk-swatch-white:	   #ffffff;		.createSwatch(atk-swatch-white);
// @atk-swatch-black:     #000000;		.createSwatch(atk-swatch-black);
// @atk-swatch-gray:	   #f5f6f7;		.createSwatch(atk-swatch-gray);
// @atk-swatch-ink:       #1c2933;		.createSwatch(atk-swatch-ink);
// @atk-swatch-yellow:	   #ffcc00;		.createSwatch(atk-swatch-yellow);
// @atk-swatch-red:	   #f9451f;		.createSwatch(atk-swatch-red);
// @atk-swatch-green:     #00cc66;		.createSwatch(atk-swatch-green);
// @atk-swatch-blue:      #0095ff;		.createSwatch(atk-swatch-blue);

@swatchText:           50%; // Text color sensitivity based on swatch

@effectSuccess:        #25c425;
@effectWarning:        #f7a600;
@effectDanger:         #ff2d1a;
@effectInfo:           #2bacd7;


// ==========================================================
// Components & Widgets
// ==========================================================

@linkColor:            darken(#0095ff,10%);
@linkColorHover:       darken(@linkColor,10%);

@dialogOverlay:        fade(#000, 25%); // Color of modal dialog's overlay

@tooltipColor:         fade(#1c2933, 90%);

@menuActive:           #0095ff;

@buttonDefault:        #fff;
@buttonHover:          #f5f5f5;
@buttonActive:         #eee;

@boxColor:             #fff;

@formMandatory:        #ff0000;

@hoverIntensity:       3%;

@textDimmed:           lighten(@bodyColor, 20%);

@inputFocus:           #0095ff;
@inputFocusGlow:       3px;
@inputPlaceholder:     lighten(@bodyColor, 40%);

@popoverArrow:        12px;