Variables

Global values

Grays

Accent colors

Scaffolding

Typography

Tables

Buttons

Forms

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 :)

Sprite icons path

Input placeholder text color

Hr border color

Wells

Inverted navbar

Pagination

Hero unit

Form states and alerts

Tooltips and popovers

Special enhancement for popovers

GRID

Default 940px grid

1200px min

768px-979px

Fluid grid

1200px min

768px-979px

$black:                 #000 !default;
$grayDarker:            #222 !default;
$grayDark:              #333 !default;
$gray:                  #555 !default;
$grayLight:             #999 !default;
$grayLighter:           #eee !default;
$white:                 #fff !default;


$blue:                  #049cdb !default;
$blueDark:              #0064cd !default;
$green:                 #46a546 !default;
$red:                   #9d261d !default;
$yellow:                #ffc40d !default;
$orange:                #f89406 !default;
$pink:                  #c3325f !default;
$purple:                #7a43b6 !default;


$bodyBackground:        $white !default;
$textColor:             $grayDark !default;


$linkColor:             #08c !default;
$linkColorHover:        darken($linkColor, 15%) !default;


$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace !default;

$baseFontSize:          14px !default;
$baseFontFamily:        $sansFontFamily !default;
$baseLineHeight:        20px !default;
$altFontFamily:         $serifFontFamily !default;

$headingsFontFamily:    inherit !default; // empty to use BS default, $baseFontFamily
$headingsFontWeight:    bold !default;    // instead of browser default, bold
$headingsColor:         inherit !default; // empty to use BS default, $textColor


$tableBackground:                   transparent !default; // overall background-color
$tableBackgroundAccent:             #f9f9f9 !default; // for striping
$tableBackgroundHover:              #f5f5f5 !default; // for hover
$tableBorder:                       #ddd !default; // table and cell border


$btnBackground:                     $white !default;
$btnBackgroundHighlight:            darken($white, 10%) !default;
$btnBorder:                         #bbb !default;

$btnPrimaryBackground:              $linkColor !default;
$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 20%) !default;

$btnInfoBackground:                 #5bc0de !default;
$btnInfoBackgroundHighlight:        #2f96b4 !default;

$btnSuccessBackground:              #62c462 !default;
$btnSuccessBackgroundHighlight:     #51a351 !default;

$btnWarningBackground:              lighten($orange, 15%) !default;
$btnWarningBackgroundHighlight:     $orange !default;

$btnDangerBackground:               #ee5f5b !default;
$btnDangerBackgroundHighlight:      #bd362f !default;

$btnInverseBackground:              #444 !default;
$btnInverseBackgroundHighlight:     $grayDarker !default;


$inputBackground:               $white !default;
$inputBorder:                   #ccc !default;
$inputBorderRadius:             3px !default;
$inputDisabledBackground:       $grayLighter !default;
$formActionsBackground:         #f5f5f5 !default;

$dropdownBackground:            $white !default;
$dropdownBorder:                rgba(0,0,0,.2) !default;
$dropdownDividerTop:            #e5e5e5 !default;
$dropdownDividerBottom:         $white !default;

$dropdownLinkColor:             $grayDark !default;

$dropdownLinkColorHover:        $white !default;
$dropdownLinkBackgroundHover:   $linkColor !default;

$dropdownLinkColorActive:       $dropdownLinkColor !default;
$dropdownLinkBackgroundActive:  $linkColor !default;




$zindexDropdown:          1000 !default;
$zindexPopover:           1010 !default;
$zindexTooltip:           1030 !default;
$zindexFixedNavbar:       1030 !default;
$zindexModalBackdrop:     1040 !default;
$zindexModal:             1050 !default;


$iconSpritePath:          "glyphicons-halflings.png" !default;
$iconWhiteSpritePath:     "glyphicons-halflings-white.png" !default;


$placeholderText:         $grayLight !default;


$hrBorder:                $grayLighter !default;


$wellBackground:                  #f5f5f5 !default;


$navbarCollapseWidth:             979px !default;

$navbarHeight:                    40px !default;
$navbarBackgroundHighlight:       #ffffff !default;
$navbarBackground:                darken($navbarBackgroundHighlight, 5%) !default;
$navbarBorder:                    darken($navbarBackground, 12%) !default;

$navbarText:                      $gray !default;
$navbarLinkColor:                 $gray !default;
$navbarLinkColorHover:            $grayDark !default;
$navbarLinkColorActive:           $gray !default;
$navbarLinkBackgroundHover:       transparent !default;
$navbarLinkBackgroundActive:      darken($navbarBackground, 5.25%) !default;

$navbarBrandColor:                $navbarLinkColor !default;

$navbarInverseBackground:                #111111 !default;
$navbarInverseBackgroundHighlight:       #222222 !default;
$navbarInverseBorder:                    #252525 !default;

$navbarInverseText:                      $grayLight !default;
$navbarInverseLinkColor:                 $grayLight !default;
$navbarInverseLinkColorHover:            $white !default;
$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover !default;
$navbarInverseLinkBackgroundHover:       transparent !default;
$navbarInverseLinkBackgroundActive:      $navbarInverseBackground !default;

$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%) !default;
$navbarInverseSearchBackgroundFocus:     $white !default;
$navbarInverseSearchBorder:              $navbarInverseBackground !default;
$navbarInverseSearchPlaceholderColor:    #ccc !default;

$navbarInverseBrandColor:                $navbarInverseLinkColor !default;


$paginationBackground:                #fff !default;
$paginationBorder:                    #ddd !default;
$paginationActiveBackground:          #f5f5f5 !default;


$heroUnitBackground:              $grayLighter !default;
$heroUnitHeadingColor:            inherit !default;
$heroUnitLeadColor:               inherit !default;


$warningText:             #c09853 !default;
$warningBackground:       #fcf8e3 !default;
$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%) !default;

$errorText:               #b94a48 !default;
$errorBackground:         #f2dede !default;
$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%) !default;

$successText:             #468847 !default;
$successBackground:       #dff0d8 !default;
$successBorder:           darken(adjust-hue($successBackground, -10), 5%) !default;

$infoText:                #3a87ad !default;
$infoBackground:          #d9edf7 !default;
$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%) !default;


$tooltipColor:            #fff !default;
$tooltipBackground:       #000 !default;
$tooltipArrowWidth:       5px !default;
$tooltipArrowColor:       $tooltipBackground !default;

$popoverBackground:       #fff !default;
$popoverArrowWidth:       10px !default;
$popoverArrowColor:       #fff !default;
$popoverTitleBackground:  darken($popoverBackground, 3%) !default;

$popoverArrowOuterWidth:  $popoverArrowWidth + 1 !default;
$popoverArrowOuterColor:  rgba(0,0,0,.25) !default;




$gridColumns:             12 !default;
$gridColumnWidth:         60px !default;
$gridGutterWidth:         20px !default;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;

$gridColumnWidth1200:     70px !default;
$gridGutterWidth1200:     30px !default;
$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;

$gridColumnWidth768:      42px !default;
$gridGutterWidth768:      20px !default;
$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;


$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;

$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200) !default;

$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768) !default;
$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768) !default;