1// 2// Variables 3// -------------------------------------------------- 4 5 6// Global values 7// -------------------------------------------------- 8 9 10// Grays 11// ------------------------- 12@black: #000; 13@grayDarker: #222; 14@grayDark: #333; 15@gray: #555; 16@grayLight: #999; 17@grayLighter: #eee; 18@white: #fff; 19 20 21// Accent colors 22// ------------------------- 23@blue: #049cdb; 24@blueDark: #0064cd; 25@green: #46a546; 26@red: #9d261d; 27@yellow: #ffc40d; 28@orange: #f89406; 29@pink: #c3325f; 30@purple: #7a43b6; 31 32 33// Scaffolding 34// ------------------------- 35@bodyBackground: @white; 36@textColor: @grayDark; 37 38 39// Links 40// ------------------------- 41@linkColor: #08c; 42@linkColorHover: darken(@linkColor, 15%); 43 44 45// Typography 46// ------------------------- 47@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; 48@serifFontFamily: Georgia, "Times New Roman", Times, serif; 49@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; 50 51@baseFontSize: 14px; 52@baseFontFamily: @sansFontFamily; 53@baseLineHeight: 20px; 54@altFontFamily: @serifFontFamily; 55 56@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily 57@headingsFontWeight: bold; // instead of browser default, bold 58@headingsColor: inherit; // empty to use BS default, @textColor 59 60 61// Component sizing 62// ------------------------- 63// Based on 14px font-size and 20px line-height 64 65@fontSizeLarge: @baseFontSize * 1.25; // ~18px 66@fontSizeSmall: @baseFontSize * 0.85; // ~12px 67@fontSizeMini: @baseFontSize * 0.75; // ~11px 68 69@paddingLarge: 11px 19px; // 44px 70@paddingSmall: 2px 10px; // 26px 71@paddingMini: 0 6px; // 22px 72 73@baseBorderRadius: 4px; 74@borderRadiusLarge: 6px; 75@borderRadiusSmall: 3px; 76 77 78// Tables 79// ------------------------- 80@tableBackground: transparent; // overall background-color 81@tableBackgroundAccent: #f9f9f9; // for striping 82@tableBackgroundHover: #f5f5f5; // for hover 83@tableBorder: #ddd; // table and cell border 84 85// Buttons 86// ------------------------- 87@btnBackground: @white; 88@btnBackgroundHighlight: darken(@white, 10%); 89@btnBorder: #ccc; 90 91@btnPrimaryBackground: @linkColor; 92@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); 93 94@btnInfoBackground: #5bc0de; 95@btnInfoBackgroundHighlight: #2f96b4; 96 97@btnSuccessBackground: #62c462; 98@btnSuccessBackgroundHighlight: #51a351; 99 100@btnWarningBackground: lighten(@orange, 15%); 101@btnWarningBackgroundHighlight: @orange; 102 103@btnDangerBackground: #ee5f5b; 104@btnDangerBackgroundHighlight: #bd362f; 105 106@btnInverseBackground: #444; 107@btnInverseBackgroundHighlight: @grayDarker; 108 109 110// Forms 111// ------------------------- 112@inputBackground: @white; 113@inputBorder: #ccc; 114@inputBorderRadius: @baseBorderRadius; 115@inputDisabledBackground: @grayLighter; 116@formActionsBackground: #f5f5f5; 117@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border 118 119 120// Dropdowns 121// ------------------------- 122@dropdownBackground: @white; 123@dropdownBorder: rgba(0,0,0,.2); 124@dropdownDividerTop: #e5e5e5; 125@dropdownDividerBottom: @white; 126 127@dropdownLinkColor: @grayDark; 128@dropdownLinkColorHover: @white; 129@dropdownLinkColorActive: @white; 130 131@dropdownLinkBackgroundActive: @linkColor; 132@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; 133 134 135 136// COMPONENT VARIABLES 137// -------------------------------------------------- 138 139 140// Z-index master list 141// ------------------------- 142// Used for a bird's eye view of components dependent on the z-axis 143// Try to avoid customizing these :) 144@zindexDropdown: 1000; 145@zindexPopover: 1010; 146@zindexTooltip: 1030; 147@zindexFixedNavbar: 1030; 148@zindexModalBackdrop: 1040; 149@zindexModal: 1050; 150 151 152// Sprite icons path 153// ------------------------- 154@iconSpritePath: "../img/glyphicons-halflings.png"; 155@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; 156 157 158// Input placeholder text color 159// ------------------------- 160@placeholderText: @grayLight; 161 162 163// Hr border color 164// ------------------------- 165@hrBorder: @grayLighter; 166 167 168// Horizontal forms & lists 169// ------------------------- 170@horizontalComponentOffset: 180px; 171 172 173// Wells 174// ------------------------- 175@wellBackground: #f5f5f5; 176 177 178// Navbar 179// ------------------------- 180@navbarCollapseWidth: 979px; 181@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; 182 183@navbarHeight: 40px; 184@navbarBackgroundHighlight: #ffffff; 185@navbarBackground: darken(@navbarBackgroundHighlight, 5%); 186@navbarBorder: darken(@navbarBackground, 12%); 187 188@navbarText: #777; 189@navbarLinkColor: #777; 190@navbarLinkColorHover: @grayDark; 191@navbarLinkColorActive: @gray; 192@navbarLinkBackgroundHover: transparent; 193@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); 194 195@navbarBrandColor: @navbarLinkColor; 196 197// Inverted navbar 198@navbarInverseBackground: #111111; 199@navbarInverseBackgroundHighlight: #222222; 200@navbarInverseBorder: #252525; 201 202@navbarInverseText: @grayLight; 203@navbarInverseLinkColor: @grayLight; 204@navbarInverseLinkColorHover: @white; 205@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; 206@navbarInverseLinkBackgroundHover: transparent; 207@navbarInverseLinkBackgroundActive: @navbarInverseBackground; 208 209@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); 210@navbarInverseSearchBackgroundFocus: @white; 211@navbarInverseSearchBorder: @navbarInverseBackground; 212@navbarInverseSearchPlaceholderColor: #ccc; 213 214@navbarInverseBrandColor: @navbarInverseLinkColor; 215 216 217// Pagination 218// ------------------------- 219@paginationBackground: #fff; 220@paginationBorder: #ddd; 221@paginationActiveBackground: #f5f5f5; 222 223 224// Hero unit 225// ------------------------- 226@heroUnitBackground: @grayLighter; 227@heroUnitHeadingColor: inherit; 228@heroUnitLeadColor: inherit; 229 230 231// Form states and alerts 232// ------------------------- 233@warningText: #c09853; 234@warningBackground: #fcf8e3; 235@warningBorder: darken(spin(@warningBackground, -10), 3%); 236 237@errorText: #b94a48; 238@errorBackground: #f2dede; 239@errorBorder: darken(spin(@errorBackground, -10), 3%); 240 241@successText: #468847; 242@successBackground: #dff0d8; 243@successBorder: darken(spin(@successBackground, -10), 5%); 244 245@infoText: #3a87ad; 246@infoBackground: #d9edf7; 247@infoBorder: darken(spin(@infoBackground, -10), 7%); 248 249 250// Tooltips and popovers 251// ------------------------- 252@tooltipColor: #fff; 253@tooltipBackground: #000; 254@tooltipArrowWidth: 5px; 255@tooltipArrowColor: @tooltipBackground; 256 257@popoverBackground: #fff; 258@popoverArrowWidth: 10px; 259@popoverArrowColor: #fff; 260@popoverTitleBackground: darken(@popoverBackground, 3%); 261 262// Special enhancement for popovers 263@popoverArrowOuterWidth: @popoverArrowWidth + 1; 264@popoverArrowOuterColor: rgba(0,0,0,.25); 265 266 267 268// GRID 269// -------------------------------------------------- 270 271 272// Default 940px grid 273// ------------------------- 274@gridColumns: 12; 275@gridColumnWidth: 60px; 276@gridGutterWidth: 20px; 277@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 278 279// 1200px min 280@gridColumnWidth1200: 70px; 281@gridGutterWidth1200: 30px; 282@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); 283 284// 768px-979px 285@gridColumnWidth768: 42px; 286@gridGutterWidth768: 20px; 287@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); 288 289 290// Fluid grid 291// ------------------------- 292@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); 293@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); 294 295// 1200px min 296@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); 297@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); 298 299// 768px-979px 300@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); 301@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); 302