// Cosmo 2.2.2 // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- $black: #000; $grayDarker: #080808; $grayDark: #999; $gray: #bbb; $grayLight: #dfdfdf; $grayLighter: #eee; $white: #fff; // Accent colors // ------------------------- $blue: #007FFF; $blueDark: #1F26B6; $green: #3FB618; $red: #FF0039; $yellow: #FFA500; $orange: #FF7518; $pink: #E671B8; $purple: #9954BB; // Scaffolding // ------------------------- $bodyBackground: $white; $textColor: #555; // Links // ------------------------- $linkColor: $blue; $linkColorHover: darken($linkColor, 10%); // Typography // ------------------------- $sansFontFamily: "Open Sans", Calibri, Candara, Arial, sans-serif; $serifFontFamily: Georgia, "Times New Roman", Times, serif; $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; $baseFontSize: 14px; $baseFontFamily: $sansFontFamily; $baseLineHeight: 20px; $altFontFamily: $serifFontFamily; $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily $headingsFontWeight: 300; // instead of browser default, bold $headingsColor: $grayDarker; // 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: 22px 30px; // 66px $paddingSmall: 2px 10px; // 26px $paddingMini: 2px 6px; // 24px $baseBorderRadius: 0px; $borderRadiusLarge: 0px; $borderRadiusSmall: 0px; // Tables // ------------------------- $tableBackground: transparent; // overall background-color $tableBackgroundAccent: #f9f9f9; // for striping $tableBackgroundHover: #E8F8FD; // for hover $tableBorder: #ddd; // table and cell border // Buttons // ------------------------- $btnBackground: $grayLighter; $btnBackgroundHighlight: darken($grayLighter, 15%); $btnBorder: #bbb; $btnPrimaryBackground: lighten($blue, 5%); $btnPrimaryBackgroundHighlight: darken($blue, 5%); $btnInfoBackground: lighten($purple, 5%); $btnInfoBackgroundHighlight: darken($purple, 5%); $btnSuccessBackground: lighten($green, 5%); $btnSuccessBackgroundHighlight: darken($green, 5%); $btnWarningBackground: lighten($orange, 5%); $btnWarningBackgroundHighlight: darken($orange, 5%); $btnDangerBackground: lighten($red, 5%); $btnDangerBackgroundHighlight: darken($red, 5%); $btnInverseBackground: lighten($black, 5%); $btnInverseBackgroundHighlight: darken($black, 5%); // Forms // ------------------------- $inputBackground: $white; $inputBorder: $gray; $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: $blue; $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: $gray; // Hr border color // ------------------------- $hrBorder: $grayLighter; // Horizontal forms & lists // ------------------------- $horizontalComponentOffset: 180px; // Wells // ------------------------- $wellBackground: $grayLighter; // Navbar // ------------------------- $navbarCollapseWidth: 979px; $navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; $navbarHeight: 50px; $navbarBackground: $grayDarker; $navbarBackgroundHighlight: $navbarBackground; $navbarBorder: transparent; $navbarText: $white; $navbarLinkColor: $white; $navbarLinkColorHover: $gray; $navbarLinkColorActive: $white; $navbarLinkBackgroundHover: rgba(0, 0, 0, 0.05); $navbarLinkBackgroundActive: transparent; $navbarBrandColor: $navbarLinkColor; // Inverted navbar $navbarInverseBackground: $blue; $navbarInverseBackgroundHighlight: $navbarInverseBackground; $navbarInverseBorder: transparent; $navbarInverseText: $white; $navbarInverseLinkColor: $white; $navbarInverseLinkColorHover: $white; $navbarInverseLinkColorActive: $navbarInverseLinkColorHover; $navbarInverseLinkBackgroundHover: rgba(0, 0, 0, 0.05); $navbarInverseLinkBackgroundActive: $navbarInverseBackground; $navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%); $navbarInverseSearchBackgroundFocus: $white; $navbarInverseSearchBorder: $navbarInverseBackground; $navbarInverseSearchPlaceholderColor: $grayDark; $navbarInverseBrandColor: $navbarInverseLinkColor; // Pagination // ------------------------- $paginationBackground: $grayLight; $paginationBorder: transparent; $paginationActiveBackground: $blue; // Hero unit // ------------------------- $heroUnitBackground: $grayLighter; $heroUnitHeadingColor: inherit; $heroUnitLeadColor: inherit; // Form states and alerts // ------------------------- $warningText: $white; $warningBackground: $orange; $warningBorder: transparent; $errorText: $white; $errorBackground: $red; $errorBorder: transparent; $successText: $white; $successBackground: $green; $successBorder: transparent; $infoText: $white; $infoBackground: $purple; $infoBorder: transparent; // Tooltips and popovers // ------------------------- $tooltipColor: #fff; $tooltipBackground: #000; $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $popoverBackground: $orange; $popoverArrowWidth: 15px; $popoverArrowColor: $orange; $popoverTitleBackground: $orange; // Special enhancement for popovers $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: transparent; // 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);