diff options
Diffstat (limited to 'library/font_awesome/src/assets/less/variables.less')
| -rwxr-xr-x | library/font_awesome/src/assets/less/variables.less | 347 |
1 files changed, 347 insertions, 0 deletions
diff --git a/library/font_awesome/src/assets/less/variables.less b/library/font_awesome/src/assets/less/variables.less new file mode 100755 index 000000000..5b692ae1a --- /dev/null +++ b/library/font_awesome/src/assets/less/variables.less @@ -0,0 +1,347 @@ +// +// Variables +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +@black: #000; +@grayDarker: #222; +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; +@white: #fff; + +// Blues +// ------------------------- +@blueDarker: #003366; +@blueDark: #005f9b; // Pantone 3015 C; +@blue: #009add; // Pantone 2925 C; +@blueLight: #b8dcf2; +@blueLighter: #f0f9ff; + +// Greens +// ------------------------- +@greenDarker: #41683b; +@greenDark: #678943; +@green: #95bf52; +@greenLight: #ddefbd; +@greenLighter: #f3f9e8; + +// Reds +// ------------------------- +@redDarker: #702222; +@redDark: #ba4a4a; +@red: #dd7373; +@redLight: #f2adb1; +@redLighter: #fff0f0; + +// Yellows +// ------------------------- +@yellowDarker: #5b4411; +@yellowDark: #cc9600; +@yellow: #f9e27d; +@yellowLight: #fff5bd; +@yellowLighter: #fffcee; + +// Oranges +// ------------------------- +@orangeDarker: #8c3900; +@orangeDark: #cc5d11; +@orange: #f4914e; +@orangeLight: #ffd0a6; +@orangeLighter: #fff4e6; + +// Purples +// ------------------------- +@purpleDarker: #4a226d; +@purpleDark: #7457ad; +@purple: #9780d6; +@purpleLight: #c3b8f4; +@purpleLighter: #fbf5ff; + + +// Accent colors +// ------------------------- +@red: #9d261d; +@redDark: darken(@red, 10%); + + +// Scaffolding +// ------------------------- +@bodyBackground: @white; +@textColor: @grayDark; + + +// Links +// ------------------------- +@linkColor: lighten(@red, 10%); +@linkColorHover: @red; + + +// Typography +// ------------------------- +@sansFontFamily: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; +@serifFontFamily: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif; +@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +@baseFontSize: 14px; +@baseFontFamily: @sansFontFamily; +@baseLineHeight: 20px; +@altFontFamily: @serifFontFamily; + +@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily +@headingsFontWeight: 500; // 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: 11px 19px; // 44px +@paddingSmall: 2px 10px; // 26px +@paddingMini: 0 6px; // 22px + +@baseBorderRadius: 4px; +@borderRadiusLarge: 6px; +@borderRadiusSmall: 3px; + + +// Tables +// ------------------------- +@tableBackground: transparent; // overall background-color +@tableBackgroundAccent: #f9f9f9; // for striping +@tableBackgroundHover: #f5f5f5; // for hover +@tableBorder: #ddd; // table and cell border + +// Buttons +// ------------------------- +@btnBackground: @white; +@btnBackgroundHighlight: darken(@white, 10%); +@btnBorder: #bbb; + +@btnPrimaryBackground: #fffeb8; +@btnPrimaryBackgroundHighlight: #c49c38; + +@btnInfoBackground: @blue; +@btnInfoBackgroundHighlight: mix(@blue, @blueDark, 50%); + +@btnSuccessBackground: @green; +@btnSuccessBackgroundHighlight: @greenDark; + +@btnWarningBackground: @yellow; +@btnWarningBackgroundHighlight: @yellowDark; + +@btnDangerBackground: lighten(@red, 20%); +@btnDangerBackgroundHighlight: lighten(@red, 5%); + +@btnInverseBackground: #444; +@btnInverseBackgroundHighlight: @grayDarker; + + +// Forms +// ------------------------- +@inputBackground: @white; +@inputBorder: #ccc; +@inputBorderRadius: @baseBorderRadius; +@inputDisabledBackground: @grayLighter; +@formActionsBackground: #f5f5f5; +@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + + +// Dropdowns +// ------------------------- +@dropdownBackground: @white; +@dropdownBorder: rgba(0,0,0,.2); +@dropdownDividerTop: #e5e5e5; +@dropdownDividerBottom: @white; + +@dropdownLinkColor: @grayDark; +@dropdownLinkColorHover: @white; +@dropdownLinkColorActive: @white; + +@dropdownLinkBackgroundActive: @linkColor; +@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; + + + +// 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: #f5f5f5; + + +// Navbar +// ------------------------- +@navbarCollapseWidth: 767px; +@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; + +@navbarHeight: 40px; +@navbarBackgroundHighlight: #ffffff; +@navbarBackground: darken(@navbarBackgroundHighlight, 5%); +@navbarBorder: darken(@navbarBackground, 12%); + +@navbarText: #777; +@navbarLinkColor: #777; +@navbarLinkColorHover: @grayDark; +@navbarLinkColorActive: @gray; +@navbarLinkBackgroundHover: transparent; +@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); + +@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: #fff; +@paginationBorder: #ddd; +@paginationActiveBackground: #f5f5f5; + + +// Hero unit +// ------------------------- +@heroUnitBackground: @grayLighter; +@heroUnitHeadingColor: inherit; +@heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +@warningText: mix(@yellowDark, @yellowDarker, 80%); +@warningBackground: @yellowLighter; +@warningBorder: darken(spin(@warningBackground, -10), 7%); + +@errorText: @red; +@errorBackground: @redLighter; +@errorBorder: darken(spin(@errorBackground, -10), 4%); + +@successText: mix(@greenDarker, @greenDark, 30%); +@successBackground: @greenLighter; +@successBorder: darken(spin(@successBackground, -10), 13%); + +@infoText: mix(@blueDark, @blue, 50%); +@infoBackground: @blueLighter; +@infoBorder: darken(spin(@infoBackground, -10), 7%); + +@inverseText: @white; +@inverseBackground: @gray; +@inverseBorder: darken(spin(@inverseBackground, -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; +@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); |