react-fuelux-wizard/css/variables.less

A react version of Fuel UX Wizard component.

//
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------

@true-black:        #000;
@true-white:        #FFF;

// Grays
// -------------------------
@gray07:            lighten(@true-black, 7%);      // #111
@gray13:            lighten(@true-black, 13.5%);   // #222
@gray15:            lighten(@true-black, 15%);     // #252525
@gray20:            lighten(@true-black, 20%);     // #333
@gray27:            lighten(@true-black, 27%);     // #444
@gray33:            lighten(@true-black, 33.5%);   // #555
@gray40:            lighten(@true-black, 40%);     // #666
@gray46:            lighten(@true-black, 46%);     // #757575
//@gray47:            lighten(@true-black, 46.7%); // #777
@gray53:            lighten(@true-black, 53%);   // #888
@gray60:            lighten(@true-black, 60%);     // #999
@gray67:            lighten(@true-black, 66.5%);   // #AAA
@gray74:            lighten(@true-black, 73.5%); // #BBB
//@gray75:            lighten(@true-black, 75%);   // #4b4b4b
@gray80:            lighten(@true-black, 80%);     // #CCC
@gray87:            lighten(@true-black, 86.5%);   // #DDD
@gray90:            lighten(@true-black, 90%);     // #E5E5E5
@gray93:            lighten(@true-black, 93.5%);   // #EEE
@gray96:            lighten(@true-black, 96%);     // #F5F5F5
@gray98:            lighten(@true-black, 98%);     // #f9f9f9
@gray99:            lighten(@true-black, 99%);     // #FCFCFC

@black:                 @true-black;
@gray-darker:            @gray13;
@gray-dark:              @gray20;
@gray:                  @gray33;
@gray-light:             @gray60;
@gray-lighter:           @gray93;
@white:                 @true-white;


// Accent colors
// -------------------------
@blue:                  #049cdb;
@blue-dark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

// Text Colors
// -------------------------
@text-primary:         #428bca;
@text-success:         #3c763d;
@text-info:            #31708f;
@text-warning:         #8a6d3b;
@text-danger:          #a94442;
@text-dimmed:          @gray40;
@text-muted:           @gray60;

// Scaffolding
// -------------------------
@body-background:        @white;
@text-color:             @gray-dark;
@focus-color:            #5B9DD9;

// Links
// -------------------------
@link-color:             #0088cc;
@link-color-hover:        darken(@link-color, 15%);


// Typography
// -------------------------
@sans-font-family:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serif-font-family:       Georgia, "Times New Roman", Times, serif;
@mono-font-family:        Monaco, Menlo, Consolas, "Courier New", monospace;

@base-font-size:          14px;
@base-font-family:        @sans-font-family;
@base-line-height:        20px;
@alt-font-family:         @serif-font-family;

@headings-font-family:    inherit; // empty to use BS default, @base-font-family
@headings-font-weight:    bold;    // instead of browser default, bold
@headings-color:         inherit; // empty to use BS default, @text-color


// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@font-size-large:         @base-font-size * 1.25; // ~18px
@font-size-small:         @base-font-size * 0.85; // ~12px
@font-size-mini:          @base-font-size * 0.75; // ~11px

@font-size-h1:            floor((@base-font-size * 2.6)); // ~36px
@font-size-h2:            floor((@base-font-size * 2.15)); // ~30px
@font-size-h3:            ceil((@base-font-size * 1.7)); // ~24px
@font-size-h4:            ceil((@base-font-size * 1.25)); // ~18px
@font-size-h5:            @base-font-size;
@font-size-h6:            ceil((@base-font-size * 0.85)); // ~12pxgr

@padding-large:          11px 19px; // 44px
@padding-small:          2px 10px;  // 26px
@padding-mini:           0 6px;   // 22px

@base-border-radius:      4px;
@border-radius-large:     6px;
@border-radius-small:     3px;


// Tables
// -------------------------
@table-background:                   transparent; // overall background-color
@table-background-accent:             @gray98; // for striping
@table-background-hover:              @gray96; // for hover
@table-border:                       @gray87; // table and cell border

// Buttons
// -------------------------
@btn-background:                     @white;
@btn-background-highlight:            darken(@white, 10%);
@btn-border:                         @gray80;

@btn-primary-background:              @link-color;
@btn-primary-background-highlight:     spin(@btn-primary-background, 20%);

@btn-info-background:                 #5bc0de;
@btn-info-background-highlight:        #2f96b4;

@btn-success-background:              #62c462;
@btn-success-background-highlight:     #51a351;

@btn-warning-background:              lighten(@orange, 15%);
@btn-warning-background-highlight:     @orange;

@btn-danger-background:               #ee5f5b;
@btn-danger-background-highlight:      #bd362f;

@btn-inverse-background:              @gray27;
@btn-inverse-background-highlight:     @gray-darker;

@btn-padding-vertical:                6px;
@btn-padding-horizontal:              12px;


// Forms
// -------------------------
@input-background:               @white;
@input-border:                   @gray80;
@input-border-radius:             @base-border-radius;
@input-disabled-background:       @gray93;
@form-actions-background:         @gray96;
@input-height:                   @base-line-height + 10px; // base line-height + 8px vertical padding + 2px top/bottom border


// Dropdowns
// -------------------------
@dropdown-background:            @white;
@dropdown-border:                rgba(0,0,0,.2);
@dropdown-divider-top:            @gray90;
@dropdown-divider-bottom:         @white;

@dropdown-link-color:             @gray-dark;
@dropdown-link-color-hover:        @white;
@dropdown-link-color-active:       @white;

@dropdown-link-background-active:  @link-color;
@dropdown-link-background-hover:   @dropdown-link-background-active;



// COMPONENT VARIABLES
// --------------------------------------------------


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-fixed-navbar:       1030;
@zindex-modal-backdrop:     1040;
@zindex-modal:             1050;

//Selectable Hover, Selected, Selected Hover
// -------------------------
@selectable-hover: @gray96;
@selected: @gray93;
@selected-hover: @gray87;



// Sprite icons path
// -------------------------
@icon-sprite-path:          "../img/glyphicons-halflings.png";
@icon-white-sprite-path:     "../img/glyphicons-halflings-white.png";


// Input placeholder text color
// -------------------------
@placeholder-text:         @gray60;


// Hr border color
// -------------------------
@hr-border:                @gray93;


// Horizontal forms & lists
// -------------------------
@horizontal-component-offset:       180px;


// Wells
// -------------------------
@well-background:                  @gray96;


// Navbar
// -------------------------
@navbar-collapse-width:             979px;
@navbar-collapse-desktop-width:      @navbar-collapse-width + 1;

@navbar-height:                    40px;
@navbar-background-highlight:       @true-white;
@navbar-background:                darken(@navbar-background-highlight, 5%);
@navbar-border:                    darken(@navbar-background, 12%);

@navbar-text:                      @gray40;;
@navbar-link-color:                 @gray40;;
@navbar-link-color-hover:            @gray-dark;
@navbar-link-color-active:           @gray;
@navbar-link-background-hover:       transparent;
@navbar-link-background-active:      darken(@navbar-background, 5%);

@navbar-brand-color:                @navbar-link-color;

// Inverted navbar
@navbar-inverse-background:                @gray07;
@navbar-inverse-background-highlight:       @gray13;
@navbar-inverse-border:                    @gray15;

@navbar-inverse-text:                      @gray60;
@navbar-inverse-link-color:                 @gray60;
@navbar-inverse-link-color-hover:            @white;
@navbar-inverse-link-color-active:           @navbar-inverse-link-color-hover;
@navbar-inverse-link-background-hover:       transparent;
@navbar-inverse-link-background-active:      @navbar-inverse-background;

@navbar-inverse-search-background:          lighten(@navbar-inverse-background, 25%);
@navbar-inverse-search-background-focus:     @white;
@navbar-inverse-search-border:              @navbar-inverse-background;
@navbar-inverse-search-placeholder-color:    @gray80;

@navbar-inverse-brand-color:                @navbar-inverse-link-color;


// Pagination
// -------------------------
@pagination-background:                @true-white;
@pagination-border:                    @gray87;
@pagination-active-background:          @gray96;


// Hero unit
// -------------------------
@hero-unit-background:              @gray93;
@hero-unit-heading-color:            inherit;
@hero-unit-lead-color:               inherit;


// Form states and alerts
// -------------------------
@warning-text:             #c09853;
@warning-background:       #fcf8e3;
@warning-border:           darken(spin(@warning-background, -10), 3%);

@error-text:               #b94a48;
@error-background:         #f2dede;
@error-border:             darken(spin(@error-background, -10), 3%);

@success-text:             #468847;
@success-background:       #dff0d8;
@success-border:           darken(spin(@success-background, -10), 5%);

@info-text:                #3a87ad;
@info-background:          #d9edf7;
@info-border:              darken(spin(@info-background, -10), 7%);


// Tooltips and popovers
// -------------------------
@tooltip-color:            @true-white;
@tooltip-background:       @true-black;
@tooltip-arrow-width:       5px;
@tooltip-arrow-color:       @tooltip-background;

@popover-background:       @true-white;
@popover-arrow-width:       10px;
@popover-arrow-color:       @true-white;
@popover-title-background:  darken(@popover-background, 3%);

// Special enhancement for popovers
@popover-arrow-outer-width:  @popover-arrow-width + 1;
@popover-arrow-outer-color:  rgba(0,0,0,.25);



// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
@grid-columns:             12;
@grid-column-width:         60px;
@grid-gutter-width:         20px;
@grid-row-width:            (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));

// 1200px min
@grid-column-width1200:     70px;
@grid-gutter-width1200:     30px;
@grid-row-width1200:        (@grid-columns * @grid-column-width1200) + (@grid-gutter-width1200 * (@grid-columns - 1));

// 768px-979px
@grid-column-width768:      42px;
@grid-gutter-width768:      20px;
@grid-row-width768:         (@grid-columns * @grid-column-width768) + (@grid-gutter-width768 * (@grid-columns - 1));


// Fluid grid
// -------------------------
@fluid-grid-column-width:    (percentage(@grid-column-width/@grid-row-width));
@fluid-grid-gutter-width:    (percentage(@grid-gutter-width/@grid-row-width));

// 1200px min
@fluid-grid-column-width1200:     (percentage(@grid-column-width1200/@grid-row-width1200));
@fluid-grid-gutter-width1200:     (percentage(@grid-gutter-width1200/@grid-row-width1200));

// 768px-979px
@fluid-grid-column-width768:      (percentage(@grid-column-width768/@grid-row-width768));
@fluid-grid-gutter-width768:      (percentage(@grid-gutter-width768/@grid-row-width768));


// Controls
// --------------------------------------------------

// Checkbox
// -------------------------
@checkbox-primary-color:                 #39b3d7;

// Datepicker
// -------------------------
@datepicker-hover:      #0f5f9f;
@datepicker-hover-alt:   #1b75bb;

// Tree
// -------------------------
@tree-hover-text: @gray60;
@tree-select-background: @selected;


// Icons
// -------------------------
@fuelux-font-path: "../fonts/";



// --------------------------------------------------
// Padding / Margin
// --------------------------------------------------
@padding-xs: 5px;
@padding-sm: 10px;
@padding-md: 15px;
@padding-lg: 20px;

@margin-xs: 5px;
@margin-sm: 10px;
@margin-md: 15px;
@margin-lg: 20px;