// // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; // Brand colors // ------------------------- @brand-primary: #428bca; @brand-success: #5cb85c; @brand-warning: #f0ad4e; @brand-danger: #d9534f; @brand-info: #5bc0de; // Scaffolding // ------------------------- @body-background: #fff; @text-color: @grayDark; // Links // ------------------------- @link-color: #428bca; @link-color-hover: darken(@link-color, 15%); // Typography // ------------------------- @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14; @font-size-large: (@font-size-base * 1.25); // ~18px @font-size-small: (@font-size-base * 0.85); // ~12px @font-size-mini: (@font-size-base * 0.75); // ~11px @line-height-base: 20px; @headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; // Component sizing // ------------------------- // Based on 14px font-size and 1.5 line-height @padding-large: 11px 14px; // 44px @padding-small: 2px 10px; // 26px @padding-mini: 0 6px; // 22px @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; // Tables // ------------------------- @table-background: transparent; // overall background-color @table-background-accent: #f9f9f9; // for striping @table-background-hover: #f5f5f5; // for hover @table-border: #ddd; // table and cell border // Buttons // ------------------------- @btn-color: #fff; @btn-background: #a7a9aa; @btn-border: @btn-background; @btn-background-primary: @brand-primary; @btn-border-primary: @btn-background-primary; @btn-background-success: @brand-success; @btn-border-success: @btn-background-success; @btn-background-warning: @brand-warning; @btn-border-warning: @btn-background-warning; @btn-background-danger: @brand-danger; @btn-border-danger: @btn-background-danger; @btn-background-info: @brand-info; @btn-border-info: @btn-background-info; // Forms // ------------------------- @input-background: #fff; @input-background-disabled: @grayLighter; @input-border: #ccc; @input-border-radius: @border-radius-base; @input-border-radius-search: 20px; @input-color-placeholder: @grayLight; @input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border @input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border @input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border // adjust min-height on input sizes @form-actions-background: #f5f5f5; // Dropdowns // ------------------------- @dropdown-background: #fff; @dropdown-border: rgba(0,0,0,.15); @dropdown-divider-top: #e5e5e5; @dropdown-divider-bottom: #fff; @dropdown-link-color: @grayDark; @dropdown-link-color-hover: #fff; @dropdown-link-color-active: #fff; @dropdown-link-background-active: @link-color; @dropdown-link-background-hover: @dropdown-link-background-active; // 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 :) @zindex-dropdown: 1000; @zindex-popover: 1010; @zindex-tooltip: 1030; @zindex-navbar-fixed: 1030; @zindex-modal-background: 1040; @zindex-modal: 1050; // Glyphicons font path // ------------------------- @glyphicons-font-path: "../fonts"; // Navbar // ------------------------- // Responsive collapsing // @navbar-collapse-width: 979px; // @navbar-collapse-width-desktop: @navbar-collapse-width + 1; // Basics of a navbar @navbar-height: 50px; @navbar-text: #777; @navbar-bg: #eee; // Navbar brand label @navbar-brand-color: @navbar-link-color; @navbar-brand-color-hover: darken(@navbar-link-color, 10%); @navbar-brand-bg-hover: transparent; // Navbar links @navbar-link-color: #777; @navbar-link-color-hover: #333; @navbar-link-bg-hover: transparent; @navbar-link-color-active: #555; @navbar-link-bg-active: darken(@navbar-bg, 10%); @navbar-link-color-disabled: #ccc; @navbar-link-bg-disabled: transparent; // Inverted navbar @navbar-inverse-text: @grayLight; @navbar-inverse-bg: #222; // Inverted navbar brand label @navbar-inverse-brand-color: @navbar-inverse-link-color; @navbar-inverse-brand-color-hover: #fff; @navbar-inverse-brand-bg-hover: transparent; // Inverted navbar links @navbar-inverse-link-color: @grayLight; @navbar-inverse-link-color-hover: #fff; @navbar-inverse-link-bg-hover: transparent; @navbar-inverse-link-color-active: @navbar-inverse-link-color-hover; @navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%); @navbar-inverse-link-color-disabled: #444; @navbar-inverse-link-bg-disabled: transparent; // Inverted navbar search // Normal navbar needs no special styles or vars @navbar-inverse-search-background: lighten(@navbar-inverse-bg, 25%); @navbar-inverse-search-background-focus: #fff; @navbar-inverse-search-border: @navbar-inverse-bg; @navbar-inverse-search-placeholder-color: #ccc; // Pagination // ------------------------- @pagination-background: #fff; @pagination-background-active: #f5f5f5; @pagination-border: #ddd; // Jumbotron // ------------------------- @jumbotron-background: @grayLighter; @jumbotron-heading-color: inherit; @jumbotron-lead-color: inherit; // Form states and alerts // ------------------------- @state-warning-text: #c09853; @state-warning-background: #fcf8e3; @state-warning-border: darken(spin(@state-warning-background, -10), 3%); @state-error-text: #b94a48; @state-error-background: #f2dede; @state-error-border: darken(spin(@state-error-background, -10), 3%); @state-success-text: #468847; @state-success-background: #dff0d8; @state-success-border: darken(spin(@state-success-background, -10), 5%); @state-info-text: #3a87ad; @state-info-background: #d9edf7; @state-info-border: darken(spin(@state-info-background, -10), 7%); // Tooltips and popovers // ------------------------- @tooltip-color: #fff; @tooltip-background: rgba(0,0,0,.9); @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-background; @popover-background: #fff; @popover-arrow-width: 10px; @popover-arrow-color: #fff; @popover-title-background: darken(@popover-background, 3%); // Special enhancement for popovers @popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-color: rgba(0,0,0,.25); // Labels // ------------------------- @label-success-background: @brand-success; @label-info-background: @brand-info; @label-warning-background: @brand-warning; @label-danger-background: @brand-danger; // Modals // ------------------------- @modal-inner-padding: 20px; // Progress bars // ------------------------- @progress-bg: #f5f5f5; @progress-bar-bg: @brand-primary; @progress-bar-success-bg: @brand-success; @progress-bar-warning-bg: @brand-warning; @progress-bar-danger-bg: @brand-danger; @progress-bar-info-bg: @brand-info; // Miscellaneous // ------------------------- // Hr border color @hr-border: @grayLighter; // Horizontal forms & lists @component-offset-horizontal: 180px; // Wells @well-background: #f5f5f5; // Grid system // -------------------------------------------------- @grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;