themes/default/less/variables.less

   1 // Variables.less
   2 // Variables to customize the look and feel of Bootstrap
   3 // -----------------------------------------------------
   4
   5 // GLOBAL VALUES
   6 // --------------------------------------------------
   7
   8
   9 // Grays
  10 // -------------------------
  11 @black:                 #000;
  12 @grayDarker:            darken(@grayDark, 1%);
  13 @grayDark:              #343433;
  14 @gray:                  #58595B;
  15 @grayLight:             #CDCCCB;
  16 @grayLighter:           #f5f5f5;
  17 @white:                 #fff;
  18 @transparent:           rgba(0,0,0,0);
  19
  20
  21 // Accent colors
  22 // -------------------------
  23 @blueLight:             lighten(@blue, 20%);
  24 @blue:                  #177EE5;
  25 @blueDark:              darken(@blue, 5%);
  26 @green:                 #3FB300;
  27 @red:                   #E61718;
  28 @yellow:                #EAE82F;
  29 @orange:                #E57417;
  30 @pink:                  #CC147C;
  31 @purple:                #7D12B2;
  32
  33
  34 // Scaffolding
  35 // -------------------------
  36 @bodyBackground:        @white;
  37 @textColor:             @gray;
  38
  39
  40 // Links
  41 // -------------------------
  42 @linkColor:             @blueDark;
  43 @linkColorHover:        darken(@linkColor, 10%);
  44
  45
  46 // Typography
  47 // -------------------------
  48 @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
  49 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
  50 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
  51
  52 @baseFontSize:          12px;
  53 @baseFontFamily:        @sansFontFamily;
  54 @baseLineHeight:        18px;
  55 @altFontFamily:         @serifFontFamily;
  56
  57 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
  58 @headingsFontWeight:    bold;    // instead of browser default, bold
  59 @headingsColor:         inherit; // empty to use BS default, @textColor
  60
  61
  62 // Tables
  63 // -------------------------
  64 @tableBackground:                   transparent; // overall background-color
  65 @tableBackgroundAccent:             lighten(@grayLighter, 1%); // for striping
  66 @tableBackgroundHover:              lighten(@warningBackground, 4%); // for hover
  67 @tableBorder:                       darken(@grayLighter, 5%); // table and cell border
  68 @tableHeader:                       @gray; // table headers
  69
  70
  71 // Buttons
  72 // -------------------------
  73 @btnBackground:                     @white;
  74 @btnBackgroundHighlight:            darken(@white, 10%);
  75 @btnBorder:                         @grayLight;
  76
  77 @btnPrimaryBackground:              @blue;
  78 @btnPrimaryBackgroundHighlight:     darken(@blue, 10%);
  79
  80 @btnInfoBackground:                 @blueLight;
  81 @btnInfoBackgroundHighlight:        darken(@blueLight, 10%);
  82
  83 @btnSuccessBackground:              @green;
  84 @btnSuccessBackgroundHighlight:     darken(@green, 10%);
  85
  86 @btnWarningBackground:              @orange;
  87 @btnWarningBackgroundHighlight:     darken(@orange, 10%);
  88
  89 @btnDangerBackground:               @red;
  90 @btnDangerBackgroundHighlight:      darken(@red, 10%);
  91
  92 @btnInverseBackground:              @grayDarker;
  93 @btnInverseBackgroundHighlight:     darken(@black, 5%);
  94
  95
  96 // Forms
  97 // -------------------------
  98 @inputBackground:               @white;
  99 @inputBorder:                   #ccc;
 100 @inputBorderRadius:             3px;
 101 @inputDisabledBackground:       @grayLighter;
 102 @formActionsBackground:         #f5f5f5;
 103
 104 // Dropdowns
 105 // -------------------------
 106 @dropdownBackground:            @white;
 107 @dropdownBorder:                rgba(0,0,0,.2);
 108 @dropdownLinkColor:             @grayDark;
 109 @dropdownLinkColorHover:        @white;
 110 @dropdownLinkBackgroundHover:   @linkColor;
 111
 112 // COMPONENT VARIABLES
 113 // --------------------------------------------------
 114
 115 // Z-index master list
 116 // -------------------------
 117 // Used for a bird's eye view of components dependent on the z-axis
 118 // Try to avoid customizing these :)
 119 @zindexDropdown:          1000;
 120 @zindexPopover:           1010;
 121 @zindexTooltip:           1020;
 122 @zindexFixedNavbar:       1030;
 123 @zindexModalBackdrop:     1040;
 124 @zindexModal:             1050;
 125
 126
 127 // Sprite icons path
 128 // -------------------------
 129 @iconSpritePath:          "../img/glyphicons-halflings.png";
 130 @iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";
 131
 132 // textures
 133 // -------------------------
 134 @texturePrimary:          "../img/triangles.png";
 135 @textureSecondary:     "../img/light_toast.png";
 136
 137 // Input placeholder text color
 138 // -------------------------
 139 @placeholderText:         @grayLight;
 140
 141
 142 // Hr border color
 143 // -------------------------
 144 @hrBorder:                @grayLighter;
 145
 146
 147 // Navbar
 148 // -------------------------
 149 @navbarHeight:                    44px;
 150 @navbarBackground:                lighten(@black, 10%);
 151 @navbarBackgroundHighlight:       lighten(@black, 25%);
 152
 153 @navbarText:                      @grayLight;
 154 @navbarLinkColor:                 @grayLight;
 155 @navbarLinkColorHover:            @white;
 156 @navbarLinkColorActive:           @navbarLinkColorHover;
 157 @navbarLinkBackgroundHover:       transparent;
 158 @navbarLinkBackgroundActive:      @navbarBackground;
 159
 160 @navbarSearchBackground:          lighten(@navbarBackground, 25%);
 161 @navbarSearchBackgroundFocus:     @gray;
 162 @navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
 163 @navbarSearchPlaceholderColor:    @gray;
 164 @navbarBrandColor:                @navbarLinkColor;
 165
 166
 167 // Hero unit
 168 // -------------------------
 169 @heroUnitBackground:              @grayLighter;
 170 @heroUnitHeadingColor:            inherit;
 171 @heroUnitLeadColor:               inherit;
 172
 173
 174 // Form states and alerts
 175 // -------------------------
 176 @warningText:             darken(@warningBackground, 70%);
 177 @warningBackground:       #fcf8e3;
 178 @warningBorder:           darken(spin(@warningBackground, -5), 30%);
 179
 180 @errorText:               darken(@errorBackground, 60%);
 181 @errorBackground:         #ffe9e9;
 182 @errorBorder:             @errorText;
 183
 184 @successText:             darken(@successBackground, 70%);
 185 @successBackground:       #dff0d8;
 186 @successBorder:           darken(spin(@successBackground, -5), 30%);
 187
 188 @infoText:                darken(@infoBackground, 70%);
 189 @infoBackground:          #d9edf7;
 190 @infoBorder:              darken(spin(@infoBackground, -5), 30%);
 191
 192
 193 // GRID
 194 // --------------------------------------------------
 195
 196 // Default 940px grid
 197 // -------------------------
 198 @gridColumns:             12;
 199 @gridColumnWidth:         60px;
 200 @gridGutterWidth:         20px;
 201 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 202
 203 // Fluid grid
 204 // -------------------------
 205 @fluidGridColumnWidth:    6.382978723%;
 206 @fluidGridGutterWidth:    2.127659574%;
 207