Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
variables.less 4.35 KiB
1 
// Variables.less
2 
// Variables to customize the look and feel of Bootstrap
3 
// -----------------------------------------------------
4
5
6
7 
// GLOBAL VALUES
8 
// --------------------------------------------------
9
10 
// Grays
11 
@black:                 #000;
12 
@grayDarker:            #222;
13 
@grayDark:              #333;
14 
@gray:                  #555;
15 
@grayLight:             #999;
16 
@grayLighter:           #eee;
17 
@white:                 #fff;
18
19 
// Accent colors
20 
@blue:                  #049cdb;
21 
@blueDark:              #0064cd;
22 
@green:                 #46a546;
23 
@red:                   #9d261d;
24 
@yellow:                #ffc40d;
25 
@orange:                #f89406;
26 
@pink:                  #c3325f;
27 
@purple:                #7a43b6;
28
29 
// Scaffolding
30 
@bodyBackground:        @white;
31 
@textColor:             @grayDark;
32
33 
// Links
34 
@linkColor:             #08c;
35 
@linkColorHover:        #069;
36
37 
// Typography
38 
@baseFontSize:          13px;
39 
@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
40 
@baseLineHeight:        18px;
41 
@altFontFamily:         Georgia, "Times New Roman", Times, serif;
42
43 
@headingsFontFamily:    ''; // empty to use BS default, @baseFontFamily
44 
@headingsFontWeight:    normal; // instead of browser default, bold
45 
@headingsColor:         ''; // empty to use BS default, @textColor
46
47 
// Buttons
48 
@btnBackground:                     @white;
49 
@btnBackgroundHighlight:            darken(@white, 10%);
50 
@btnBorder:                         #ccc;
51
52 
@btnPrimaryBackground:              @linkColor;
53 
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
54
55 
@btnInfoBackground:                 #5bc0de;
56 
@btnInfoBackgroundHighlight:        #2f96b4;
57
58 
@btnSuccessBackground:              #62c462;
59 
@btnSuccessBackgroundHighlight:     #51a351;
60
61 
@btnWarningBackground:              lighten(@orange, 15%);
62 
@btnWarningBackgroundHighlight:     @orange;
63
64 
@btnDangerBackground:               #ee5f5b;
65 
@btnDangerBackgroundHighlight:      #bd362f;
66
67 
@btnInverseBackground:              @gray;
68 
@btnInverseBackgroundHighlight:     @grayDarker;
69
70 
// Forms
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
@inputBackground: @white; @inputBorder: #ccc; @inputDisabledBackground: @grayLighter; // Dropdowns @dropdownBackground: @white; @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; @dropdownLinkBackgroundHover: @linkColor; // 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 :) @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; // Sprite icons path @iconSpritePath: "../img/glyphicons-halflings.png"; @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; // Input placeholder text color @placeholderText: @grayLight; // Hr border color @hrBorder: @grayLighter; // Navbar @navbarHeight: 40px; @navbarBackground: @grayDarker; @navbarBackgroundHighlight: @grayDark; @navbarLinkBackgroundHover: transparent; @navbarText: @grayLight; @navbarLinkColor: @grayLight; @navbarLinkColorHover: @white; // Hero unit @heroUnitBackground: #312f2e; @heroUnitHeadingColor: @white; @heroUnitLeadColor: @white; // Form states and alerts @warningText: #c09853; @warningBackground: #fcf8e3; @warningBorder: darken(spin(@warningBackground, -10), 3%); @errorText: #b94a48; @errorBackground: #f2dede; @errorBorder: darken(spin(@errorBackground, -10), 3%); @successText: #468847; @successBackground: #dff0d8; @successBorder: darken(spin(@successBackground, -10), 5%); @infoText: #3a87ad; @infoBackground: #d9edf7; @infoBorder: darken(spin(@infoBackground, -10), 7%);
141142143144145146147148149150151152153
// GRID // -------------------------------------------------- // Default 940px grid @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid grid @fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%;