| // Cerulean 2.2.2 |
| // Variables |
| // -------------------------------------------------- |
| |
| |
| // GLOBAL VALUES |
| // -------------------------------------------------- |
| |
| |
| // Grays |
| // ------------------------- |
| @black: #000; |
| @grayDarker: #222; |
| @grayDark: #333; |
| @gray: #555; |
| @grayLight: #999; |
| @grayLighter: #F5F5F5; |
| @white: #fff; |
| |
| |
| // Accent colors |
| // ------------------------- |
| @blue: #2FA4E7; |
| @blueDark: #033C73; |
| @green: #73A839; |
| @red: #C71C22; |
| @yellow: #F7B42C; |
| @orange: #DD5600; |
| @pink: #F49AC1; |
| @purple: #9760B3; |
| |
| |
| // Scaffolding |
| // ------------------------- |
| @bodyBackground: @white; |
| @textColor: @gray; |
| |
| |
| // Links |
| // ------------------------- |
| @linkColor: @blue; |
| @linkColorHover: darken(@linkColor, 15%); |
| |
| |
| // Typography |
| // ------------------------- |
| @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| @serifFontFamily: Georgia, "Times New Roman", Times, serif; |
| @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; |
| |
| @baseFontSize: 14px; |
| @baseFontFamily: @sansFontFamily; |
| @baseLineHeight: 20px; |
| @altFontFamily: @monoFontFamily; |
| |
| @headingsFontFamily: 'Telex', sans-serif; // empty to use BS default, @baseFontFamily |
| @headingsFontWeight: bold; // instead of browser default, bold |
| @headingsColor: #317EAC; // 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: 0px 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: darken(@white, 20%); |
| |
| @btnPrimaryBackground: @linkColor; |
| @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); |
| |
| @btnInfoBackground: @purple; |
| @btnInfoBackgroundHighlight: #2f96b4; |
| |
| @btnSuccessBackground: @green; |
| @btnSuccessBackgroundHighlight: #51a351; |
| |
| @btnWarningBackground: @orange; |
| @btnWarningBackgroundHighlight: @orange; |
| |
| @btnDangerBackground: @red; |
| @btnDangerBackgroundHighlight: #bd362f; |
| |
| @btnInverseBackground: @blueDark; |
| @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: 1020; |
| @zindexFixedNavbar: 1030; |
| @zindexModalBackdrop: 1040; |
| @zindexModal: 1050; |
| |
| |
| // Sprite icons path |
| // ------------------------- |
| @iconSpritePath: "../images/glyphicons-halflings.png"; |
| @iconWhiteSpritePath: "../images/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: 979px; |
| @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; |
| |
| @navbarHeight: 50px; |
| @navbarBackgroundHighlight: lighten(@navbarBackground, 8%); |
| @navbarBackground: @blue; |
| @navbarBorder: darken(@navbarBackground, 8%); |
| |
| @navbarText: @grayLighter; |
| @navbarLinkColor: @white; |
| @navbarLinkColorHover: @white; |
| @navbarLinkColorActive: @navbarLinkColorHover; |
| @navbarLinkBackgroundHover: darken(@navbarBackground, 12%); |
| @navbarLinkBackgroundActive: darken(@navbarBackground, 12%); |
| |
| @navbarBrandColor: @navbarLinkColor; |
| |
| // Inverted navbar |
| @navbarInverseBackground: @blueDark; |
| @navbarInverseBackgroundHighlight: lighten(@navbarInverseBackground, 5%); |
| @navbarInverseBorder: darken(@navbarInverseBackground, 3%); |
| |
| @navbarInverseText: @white; |
| @navbarInverseLinkColor: @white; |
| @navbarInverseLinkColorHover: @white; |
| @navbarInverseLinkColorActive: @white; |
| @navbarInverseLinkBackgroundHover: darken(@navbarInverseBackground, 6%); |
| @navbarInverseLinkBackgroundActive: darken(@navbarInverseBackground, 6%); |
| |
| @navbarInverseSearchBackground: @white; |
| @navbarInverseSearchBackgroundFocus: @white; |
| @navbarInverseSearchBorder: @navbarInverseBackground; |
| @navbarInverseSearchPlaceholderColor: @grayLight; |
| |
| @navbarInverseBrandColor: @navbarInverseLinkColor; |
| |
| |
| // Pagination |
| // ------------------------- |
| @paginationBackground: #fff; |
| @paginationBorder: #ddd; |
| @paginationActiveBackground: #f5f5f5; |
| |
| |
| // Hero unit |
| // ------------------------- |
| @heroUnitBackground: @grayLighter; |
| @heroUnitHeadingColor: inherit; |
| @heroUnitLeadColor: inherit; |
| |
| |
| // Form states and alerts |
| // ------------------------- |
| @warningText: @orange; |
| @warningBackground: #F1CEAB; |
| @warningBorder: darken(spin(@warningBackground, -10), 3%); |
| |
| @errorText: darken(#C45559, 5%); |
| @errorBackground: #F2BDB1; |
| @errorBorder: darken(spin(@errorBackground, -10), 3%); |
| |
| @successText: darken(@green, 5%); |
| @successBackground: #D5ECBF; |
| @successBorder: darken(spin(@successBackground, -10), 5%); |
| |
| @infoText: darken(#908A62, 5%); |
| @infoBackground: #A7DFF1; |
| @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; |
| @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); |