diff options
Diffstat (limited to '2/flatly/variables.less')
| -rw-r--r-- | 2/flatly/variables.less | 300 |
1 files changed, 300 insertions, 0 deletions
diff --git a/2/flatly/variables.less b/2/flatly/variables.less new file mode 100644 index 00000000..3cc6f12e --- /dev/null +++ b/2/flatly/variables.less @@ -0,0 +1,300 @@ +// Flatness by Jenil (www.jgog.in) +// Bootswatch 2.3.2 +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + +// Grays +// ------------------------- +@black: #000; +@grayDarker: #222; +@grayDark: #7b8a8b; +@gray: #95A5A6; +@grayLight: #b4bcc2; +@grayLighter: #ECF0F1; +@white: #fff; + + +// Accent colors +// ------------------------- +@blue: #3498DB; +@blueDark: #2C3E50; +@green: #18BC9C; +@red: #E74C3C; +@yellow: #e6bb0d; +@orange: #F39C12; +@pink: #ff6699; +@purple: #8E44AD; + + +// Scaffolding +// ------------------------- +@bodyBackground: @white; +@textColor: @blueDark; + + +// Links +// ------------------------- +@linkColor: #1ABC9C; +@linkColorHover: lighten(@linkColor, 5%); + + +// Typography +// ------------------------- +@sansFontFamily: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; +@serifFontFamily: Georgia, "Times New Roman", Times, serif; +@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; + +@baseFontSize: 15px; +@baseFontFamily: @sansFontFamily; +@baseLineHeight: 20px; +@altFontFamily: @serifFontFamily; + +@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily +@headingsFontWeight: bold; // instead of browser default, bold +@headingsColor: inherit; // empty to use BS default, @textColor + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +@fontSizeLarge: @baseFontSize * 1.25; // ~18px +@fontSizeSmall: @baseFontSize * 0.85; // ~12px +@fontSizeMini: @baseFontSize * 0.75; // ~11px + +@paddingLarge: 18px 36px; // 44px +@paddingSmall: 2px 12px; // 26px +@paddingMini: 1px 8px; // 24px + +@baseBorderRadius: 6px; +@borderRadiusLarge: 10px; +@borderRadiusSmall: 3px; + + +// Tables +// ------------------------- +@tableBackground: transparent; // overall background-color +@tableBackgroundAccent: #f9f9f9; // for striping +@tableBackgroundHover: #f5f5f5; // for hover +@tableBorder: #ddd; // table and cell border + +// Buttons +// ------------------------- +@btnBackground: @grayLight; +@btnBackgroundHighlight: lighten(@btnBackground, 10%); +@btnBorder: #ddd; + +@btnPrimaryBackground: @textColor; +@btnPrimaryBackgroundHighlight: lighten(@btnPrimaryBackground, 10%); + +@btnInfoBackground: @blue; +@btnInfoBackgroundHighlight: lighten(@btnInfoBackground, 10%); + +@btnSuccessBackground: @green; +@btnSuccessBackgroundHighlight: lighten(@btnSuccessBackground, 10%); + +@btnWarningBackground: @orange; +@btnWarningBackgroundHighlight: lighten(@btnWarningBackground, 10%); + +@btnDangerBackground: @red; +@btnDangerBackgroundHighlight: lighten(@btnDangerBackground, 10%); + +@btnInverseBackground: @grayDarker; +@btnInverseBackgroundHighlight: lighten(@btnInverseBackground, 10%); + + +// Forms +// ------------------------- +@inputBackground: @white; +@inputBorder: #dce4ec; +@inputBorderRadius: @baseBorderRadius; +@inputDisabledBackground: #eaeded; +@formActionsBackground: #f5f5f5; +@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + + +// Dropdowns +// ------------------------- +@dropdownBackground: @blueDark; +@dropdownBorder: rgba(0,0,0,0); +@dropdownDividerTop: rgba(0,0,0,0.2); +@dropdownDividerBottom: rgba(0,0,0,0.2); + +@dropdownLinkColor: @white; +@dropdownLinkColorHover: @white; +@dropdownLinkColorActive: @dropdownLinkColor; + +@dropdownLinkBackgroundActive: @green; +@dropdownLinkBackgroundHover: @green; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +@zindexDropdown: 1000; +@zindexPopover: 1010; +@zindexTooltip: 1030; +@zindexFixedNavbar: 1030; +@zindexModalBackdrop: 1040; +@zindexModal: 1050; + + +// Sprite icons path +// ------------------------- +@iconSpritePath: "../img/glyphicons-halflings.png"; +@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +@placeholderText: @grayLight; + + +// Hr border color +// ------------------------- +@hrBorder: @grayLighter; + + +// Horizontal forms & lists +// ------------------------- +@horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +@wellBackground: @grayLighter; + + +// Navbar +// ------------------------- +@navbarCollapseWidth: 979px; +@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; + +@navbarHeight: 50px; +@navbarBackgroundHighlight: @textColor; +@navbarBackground: @textColor; +@navbarBorder: darken(@navbarBackground, 5%); + +@navbarText: @white; +@navbarLinkColor: @white; +@navbarLinkColorHover: @linkColor; +@navbarLinkColorActive: @linkColor; +@navbarLinkBackgroundHover: transparent; +@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); + +@navbarBrandColor: @navbarLinkColor; + +// Inverted navbar +@navbarInverseBackground: @green; +@navbarInverseBackgroundHighlight: @green; +@navbarInverseBorder: darken(@green, 5%); + +@navbarInverseText: @white; +@navbarInverseLinkColor: @white; +@navbarInverseLinkColorHover: @blueDark; +@navbarInverseLinkColorActive: @blueDark; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: darken(@navbarInverseBackground, 5%); + +@navbarInverseSearchBackground: @white; +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @grayLight; +@navbarInverseSearchPlaceholderColor: @gray; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + +// Pagination +// ------------------------- +@paginationBackground: #fff; +@paginationBorder: #ddd; +@paginationActiveBackground: @grayLighter; + + +// Hero unit +// ------------------------- +@heroUnitBackground: @grayLighter; +@heroUnitHeadingColor: inherit; +@heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +@warningText: @yellow; +@warningBackground: @yellow; +@warningBorder: transparent; + +@errorText: @red; +@errorBackground: @red; +@errorBorder: transparent; + +@successText: @green; +@successBackground: @green; +@successBorder: transparent; + +@infoText: @blue; +@infoBackground: @blue; +@infoBorder: transparent; + + +// Tooltips and popovers +// ------------------------- +@tooltipColor: #fff; +@tooltipBackground: @blueDark; +@tooltipArrowWidth: 5px; +@tooltipArrowColor: @tooltipBackground; + +@popoverBackground: @blueDark; +@popoverArrowWidth: 10px; +@popoverArrowColor: @blueDark; +@popoverTitleBackground: @blueDark; + +// Special enhancement for popovers +@popoverArrowOuterWidth: @popoverArrowWidth + 1; +@popoverArrowOuterColor: rgba(0,0,0,.25); + + + +// GRID +// -------------------------------------------------- + + +// Default 940px grid +// ------------------------- +@gridColumns: 12; +@gridColumnWidth: 60px; +@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: 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); |