diff options
Diffstat (limited to 'superhero/variables.less')
| -rwxr-xr-x | superhero/variables.less | 105 |
1 files changed, 87 insertions, 18 deletions
diff --git a/superhero/variables.less b/superhero/variables.less index be394e35..560b697c 100755 --- a/superhero/variables.less +++ b/superhero/variables.less @@ -1,10 +1,7 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap +// +// Variables // Swatch: Superhero -// Version: 2.0.4 -// ----------------------------------------------------- - -// GLOBAL VALUES +// Version: 2.1.0 // -------------------------------------------------- @@ -103,13 +100,18 @@ // Dropdowns // ------------------------- @dropdownBackground: lighten(@blue, 10%); -@dropdownBorder: rgba(0,0,0,0); -@dropdownLinkColor: @textColor; -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @linkColor; +@dropdownBorder: transparent; @dropdownDividerTop: transparent; @dropdownDividerBottom: @blue; +@dropdownLinkColor: @textColor; + +@dropdownLinkColorHover: @white; +@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; + +@dropdownLinkColorActive: @dropdownLinkColor; +@dropdownLinkBackgroundActive: @linkColor; + // COMPONENT VARIABLES @@ -121,7 +123,7 @@ // Try to avoid customizing these :) @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTooltip: 1020; +@zindexTooltip: 1030; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; @@ -143,11 +145,19 @@ @hrBorder: transparent; +// Wells +// ------------------------- +@wellBackground: @blue; + + // Navbar // ------------------------- -@navbarHeight: 40px; +@navbarCollapseWidth: 979px; + +@navbarHeight: 70px; @navbarBackground: @blueDark; @navbarBackgroundHighlight: @navbarBackground; +@navbarBorder: darken(@navbarBackground, 5%); @navbarText: @grayLight; @navbarLinkColor: @orange; @@ -156,12 +166,34 @@ @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; -@navbarSearchBackground: lighten(@navbarBackground, 25%); -@navbarSearchBackgroundFocus: @white; -@navbarSearchBorder: darken(@navbarSearchBackground, 30%); -@navbarSearchPlaceholderColor: #ccc; @navbarBrandColor: @navbarLinkColor; +// Inverted navbar +@navbarInverseBackground: @blue; +@navbarInverseBackgroundHighlight: @navbarInverseBackground; +@navbarInverseBorder: darken(@navbarBackground, 5%); + +@navbarInverseText: @grayLight; +@navbarInverseLinkColor: @orange; +@navbarInverseLinkColorHover: @orange; +@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: @white; +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: @grayLight; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: @blue; +@paginationBorder: transparent; +@paginationActiveBackground: @orange; + // Hero unit // ------------------------- @@ -189,10 +221,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 +250,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); |