From 406630031a5f8c7b44c26f70534ead455fa69f7f Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Tue, 21 Aug 2012 23:40:47 -0400 Subject: update to bootstrap 2.1.0 --- default/variables.less | 131 ++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 102 insertions(+), 29 deletions(-) (limited to 'default/variables.less') diff --git a/default/variables.less b/default/variables.less index b931d3d2..4759e119 100755 --- a/default/variables.less +++ b/default/variables.less @@ -1,10 +1,11 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap -// ----------------------------------------------------- - +// +// Variables +// Swatch: +// Version: 2.1.0 +// -------------------------------------------------- -// GLOBAL VALUES +// Global values // -------------------------------------------------- @@ -47,11 +48,11 @@ // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; +@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; -@baseFontSize: 13px; +@baseFontSize: 14px; @baseFontFamily: @sansFontFamily; -@baseLineHeight: 18px; +@baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @@ -71,10 +72,10 @@ // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #ccc; +@btnBorder: #bbb; @btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); +@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @@ -88,7 +89,7 @@ @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; -@btnInverseBackground: @gray; +@btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker; @@ -104,12 +105,17 @@ // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); -@dropdownLinkColor: @grayDark; -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @linkColor; @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; +@dropdownLinkColor: @grayDark; + +@dropdownLinkColorHover: @white; +@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; + +@dropdownLinkColorActive: @dropdownLinkColor; +@dropdownLinkBackgroundActive: @linkColor; + // COMPONENT VARIABLES @@ -121,7 +127,7 @@ // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTooltip: 1020; +@zindexTooltip: 1030; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; @@ -143,25 +149,55 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: #f5f5f5; + + // Navbar // ------------------------- -@navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; +@navbarCollapseWidth: 979px; -@navbarText: @grayLight; -@navbarLinkColor: @grayLight; -@navbarLinkColorHover: @white; -@navbarLinkColorActive: @navbarLinkColorHover; +@navbarHeight: 40px; +@navbarBackground: darken(@navbarBackgroundHighlight, 5%); +@navbarBackgroundHighlight: #ffffff; +@navbarBorder: darken(@navbarBackground, 12%); + +@navbarText: @gray; +@navbarLinkColor: @gray; +@navbarLinkColorHover: @grayDark; +@navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: @navbarBackground; +@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); -@navbarSearchBackground: lighten(@navbarBackground, 25%); -@navbarSearchBackgroundFocus: @white; -@navbarSearchBorder: darken(@navbarSearchBackground, 30%); -@navbarSearchPlaceholderColor: #ccc; @navbarBrandColor: @navbarLinkColor; +// Inverted navbar +@navbarInverseBackground: #111111; +@navbarInverseBackgroundHighlight: #222222; +@navbarInverseBorder: #252525; + +@navbarInverseText: @grayLight; +@navbarInverseLinkColor: @grayLight; +@navbarInverseLinkColorHover: @white; +@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: #ccc; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: #fff; +@paginationBorder: #ddd; +@paginationActiveBackground: #f5f5f5; + // Hero unit // ------------------------- @@ -189,10 +225,28 @@ @infoBorder: darken(spin(@infoBackground, -10), 7%); +// Tooltips and popovers +// ------------------------- +@tooltipColor: #fff; +@tooltipBackground: #000; +@tooltipArrowWidth: 5px; +@tooltipArrowColor: @tooltipBackground; + +@popoverBackground: #fff; +@popoverArrowWidth: 10px; +@popoverArrowColor: #fff; +@popoverTitleBackground: darken(@popoverBackground, 3%); + +// Special enhancement for popovers +@popoverArrowOuterWidth: @popoverArrowWidth + 1; +@popoverArrowOuterColor: rgba(0,0,0,.25); + + // GRID // -------------------------------------------------- + // Default 940px grid // ------------------------- @gridColumns: 12; @@ -200,7 +254,26 @@ @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// 1200px min +@gridColumnWidth1200: 70px; +@gridGutterWidth1200: 30px; +@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); + +// 768px-979px +@gridColumnWidth768: 42px; +@gridGutterWidth768: 20px; +@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); + + // Fluid grid // ------------------------- -@fluidGridColumnWidth: 6.382978723%; -@fluidGridGutterWidth: 2.127659574%; +@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); +@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); + +// 1200px min +@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); +@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); + +// 768px-979px +@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); +@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -- cgit v1.2.3