diff options
Diffstat (limited to 'journal/variables.less')
-rwxr-xr-x | journal/variables.less | 103 |
1 files changed, 88 insertions, 15 deletions
diff --git a/journal/variables.less b/journal/variables.less index 01822ae9..87434d6d 100755 --- a/journal/variables.less +++ b/journal/variables.less @@ -1,10 +1,11 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap +// +// Variables // Swatch: Journal -// Version: 2.0.4 -// ----------------------------------------------------- +// Version: 2.1.0 +// -------------------------------------------------- + -// GLOBAL VALUES +// Global values // -------------------------------------------------- @@ -49,9 +50,9 @@ @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; -@baseFontSize: 13px; +@baseFontSize: 14px; @baseFontFamily: @serifFontFamily; -@baseLineHeight: 18px; +@baseLineHeight: 20px; @altFontFamily: @sansFontFamily; @headingsFontFamily: @sansFontFamily; // empty to use BS default, @baseFontFamily @@ -104,11 +105,16 @@ // ------------------------- @dropdownBackground: @bodyBackground; @dropdownBorder: rgba(0,0,0,.2); +@dropdownDividerTop: @grayLighter; +@dropdownDividerBottom: @grayLighter; + @dropdownLinkColor: @headingsColor; + @dropdownLinkColorHover: @headingsColor; @dropdownLinkBackgroundHover: @grayLighter; -@dropdownDividerTop: @grayLighter; -@dropdownDividerBottom: @grayLighter; + +@dropdownLinkColorActive: @dropdownLinkColor; +@dropdownLinkBackgroundActive: @dropdownLinkBackgroundHover; @@ -143,11 +149,19 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: @grayLighter; + + // Navbar // ------------------------- +@navbarCollapseWidth: 979px; + @navbarHeight: 60px; @navbarBackground: @bodyBackground; @navbarBackgroundHighlight: @bodyBackground; +@navbarBorder: darken(@navbarBackground, 12%); @navbarText: @textColor; @navbarLinkColor: @headingsColor; @@ -156,12 +170,34 @@ @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: transparent; -@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: @bodyBackground; +@paginationBorder: #ddd; +@paginationActiveBackground: @grayLighter; + // 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); |