diff options
Diffstat (limited to 'simplex/variables.less')
| -rwxr-xr-x | simplex/variables.less | 121 |
1 files changed, 97 insertions, 24 deletions
diff --git a/simplex/variables.less b/simplex/variables.less index 6d6a914d..4a997dce 100755 --- a/simplex/variables.less +++ b/simplex/variables.less @@ -1,10 +1,11 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap +// +// Variables // Swatch: Simplex -// Version: 2.0.4 -// ----------------------------------------------------- +// Version: 2.1.0 +// -------------------------------------------------- + -// GLOBAL VALUES +// Global values // -------------------------------------------------- @@ -24,9 +25,9 @@ @blue: #029ACF; @blueDark: #043755; @green: #3D9400; -@red: #E32C3B; +@red: #D9230F; @yellow: #FFCA27; -@orange: #DA370F; +@orange: #D9831F; @pink: #ED2590; @purple: #9B479F; @@ -39,22 +40,22 @@ // Links // ------------------------- -@linkColor: @orange; +@linkColor: @red; @linkColorHover: @linkColor; // Typography // ------------------------- -@sansFontFamily: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; -@baseFontSize: 15px; +@baseFontSize: 14px; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily +@headingsFontFamily: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor @@ -104,12 +105,17 @@ // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); -@dropdownLinkColor: @textColor; -@dropdownLinkColorHover: @linkColor; -@dropdownLinkBackgroundHover: #FBEBE9; @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; +@dropdownLinkColor: @textColor; + +@dropdownLinkColorHover: @textColor; +@dropdownLinkBackgroundHover: #FBEBE9; + +@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; @@ -135,7 +141,7 @@ // Input placeholder text color // ------------------------- -@placeholderText: @gray; +@placeholderText: @grayLight; // Hr border color @@ -143,25 +149,55 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: @white; + + // Navbar // ------------------------- +@navbarCollapseWidth: 979px; + @navbarHeight: 40px; @navbarBackground: #fefefe; @navbarBackgroundHighlight: @navbarBackground; +@navbarBorder: darken(@navbarBackground, 12%); @navbarText: @gray; @navbarLinkColor: @gray; -@navbarLinkColorHover: @orange; -@navbarLinkColorActive: @orange; +@navbarLinkColorHover: @linkColor; +@navbarLinkColorActive: @linkColor; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; -@navbarSearchBackground: lighten(@navbarBackground, 25%); -@navbarSearchBackgroundFocus: @white; -@navbarSearchBorder: darken(@navbarSearchBackground, 30%); -@navbarSearchPlaceholderColor: #ccc; @navbarBrandColor: @headingsColor; +// Inverted navbar +@navbarInverseBackground: @red; +@navbarInverseBackgroundHighlight: lighten(@red, 6%); +@navbarInverseBorder: lighten(@navbarInverseBackground, 8%); + +@navbarInverseText: @white; +@navbarInverseLinkColor: @white; +@navbarInverseLinkColorHover: @white; +@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: @white; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: #fff; +@paginationBorder: #ddd; +@paginationActiveBackground: #FBEBE9; + // 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); |