diff options
Diffstat (limited to 'spruce/variables.less')
| -rwxr-xr-x | spruce/variables.less | 139 |
1 files changed, 106 insertions, 33 deletions
diff --git a/spruce/variables.less b/spruce/variables.less index 51af66d5..c8fad35a 100755 --- a/spruce/variables.less +++ b/spruce/variables.less @@ -1,10 +1,11 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap +// +// Variables // Swatch: Spruce -// Version: 2.0.4 -// ----------------------------------------------------- +// Version: 2.1.0 +// -------------------------------------------------- + -// GLOBAL VALUES +// Global values // -------------------------------------------------- @@ -26,20 +27,20 @@ @green: #015B4E; @red: #D14432; @yellow: #EBD90B; -@orange: #FCB46B; +@orange: #EE7026; @pink: #A15B66; @purple: #7073CF; // Scaffolding // ------------------------- -@bodyBackground: #AEAD8E; +@bodyBackground: #90A38F; @textColor: @blueDark; // Links // ------------------------- -@linkColor: #F5F3DC; +@linkColor: @yellow; @linkColorHover: @yellow; @@ -56,7 +57,7 @@ @headingsFontFamily: 'Josefin Slab', serif; // empty to use BS default, @baseFontFamily @headingsFontWeight: 700; // instead of browser default, bold -@headingsColor: inherit; // empty to use BS default, @textColor +@headingsColor: #F5F3DC; // empty to use BS default, @textColor // Tables @@ -64,7 +65,7 @@ @tableBackground: #C3C7AE; // overall background-color @tableBackgroundAccent: darken(#C3C7AE, 5%); // for striping @tableBackgroundHover: darken(#C3C7AE, 10%); // for hover -@tableBorder: @linkColor; // table and cell border +@tableBorder: @headingsColor; // table and cell border // Buttons @@ -104,12 +105,17 @@ // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); -@dropdownLinkColor: @grayDark; -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @linkColor; @dropdownDividerTop: transparent; @dropdownDividerBottom: @bodyBackground; +@dropdownLinkColor: @grayDark; + +@dropdownLinkColorHover: @white; +@dropdownLinkBackgroundHover: rgba(0, 0, 0, 0.1); + +@dropdownLinkColorActive: @dropdownLinkColorHover; +@dropdownLinkBackgroundActive: @dropdownLinkBackgroundHover; + // 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; @@ -135,7 +141,7 @@ // Input placeholder text color // ------------------------- -@placeholderText: @grayLight; +@placeholderText: #ccc; // Hr border color @@ -143,56 +149,104 @@ @hrBorder: @linkColor; +// Wells +// ------------------------- +@wellBackground: darken(#90A38F, 10%); + + // Navbar // ------------------------- -@navbarHeight: 40px; +@navbarCollapseWidth: 979px; + +@navbarHeight: 50px; @navbarBackground: @blueDark; @navbarBackgroundHighlight: @navbarBackground; +@navbarBorder: darken(@navbarBackground, 5%); @navbarText: @grayLight; -@navbarLinkColor: @linkColor; +@navbarLinkColor: @headingsColor; @navbarLinkColorHover: @yellow; @navbarLinkColorActive: @navbarLinkColorHover; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; -@navbarSearchBackground: lighten(@navbarBackground, 25%); -@navbarSearchBackgroundFocus: @white; -@navbarSearchBorder: darken(@navbarSearchBackground, 30%); -@navbarSearchPlaceholderColor: #ccc; -@navbarBrandColor: @linkColor; +@navbarBrandColor: @headingsColor; + +// Inverted navbar +@navbarInverseBackground: @wellBackground; +@navbarInverseBackgroundHighlight: lighten(@wellBackground, 5%); +@navbarInverseBorder: darken(@navbarInverseBackground, 5%); + +@navbarInverseText: @grayLight; +@navbarInverseLinkColor: @headingsColor; +@navbarInverseLinkColorHover: @yellow; +@navbarInverseLinkColorActive: @yellow; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: @white; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: darken(#90A38F, 10%); +@paginationBorder: transparent; +@paginationActiveBackground: #A2CDB5; // Hero unit // ------------------------- @heroUnitBackground: darken(#90A38F, 10%); -@heroUnitHeadingColor: inherit; +@heroUnitHeadingColor: @headingsColor; @heroUnitLeadColor: inherit; // Form states and alerts // ------------------------- -@warningText: @orange; -@warningBackground: darken(#90A38F, 10%); +@warningText: @white; +@warningBackground: @orange; @warningBorder: darken(spin(@warningBackground, -10), 3%); -@errorText: lighten(@red, 25%); -@errorBackground: darken(#90A38F, 10%); +@errorText: @white; +@errorBackground: @red; @errorBorder: darken(spin(@errorBackground, -10), 3%); -@successText: #9ED99C; -@successBackground: darken(#90A38F, 10%); +@successText: @white; +@successBackground: #24C00B; @successBorder: darken(spin(@successBackground, -10), 5%); -@infoText: #9BCACD; -@infoBackground: darken(#90A38F, 10%); +@infoText: @white; +@infoBackground: #185AF9; @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); |