/* Variables ======================================== */ :root { /* Global values */ /* Grays */ --black: #000; --gray-darker: #222; --gray-dark: #333; --gray: #555; --gray-light: #999; --gray-lighter: #eee; --white: #fff; /* Accent colors */ --blue: #049cdb; --blue-dark: #0064cd; --green: #46a546; --red: #9d261d; --yellow: #ffc40d; --orange: #f89406; --pink: #c3325f; --purple: #7a43b6; /* Scaffolding */ --body-background: var(--white); --text-color: var(--gray-dark); /* Links */ --link-color: #08c; --link-color-hover: #005580; /* darken(#08c, 15%) */ /* Typography */ --sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; --serif-font-family: Georgia, "Times New Roman", Times, serif; --mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace; --base-font-size: 14px; --base-font-family: var(--sans-font-family); --base-line-height: 20px; --alt-font-family: var(--serif-font-family); --headings-font-family: inherit; --headings-font-weight: bold; --headings-color: inherit; /* Component sizing */ --font-size-large: calc(var(--base-font-size) * 1.25); /* ~18px */ --font-size-small: calc(var(--base-font-size) * 0.85); /* ~12px */ --font-size-mini: calc(var(--base-font-size) * 0.75); /* ~11px */ --padding-large: 11px 19px; --padding-small: 2px 10px; --padding-mini: 0 6px; --base-border-radius: 4px; --border-radius-large: 6px; --border-radius-small: 3px; /* Tables */ --table-background: transparent; --table-background-accent: #f9f9f9; --table-background-hover: #f5f5f5; --table-border: #ddd; /* Buttons */ --btn-background: var(--white); --btn-background-highlight: #e6e6e6; /* darken(#fff, 10%) */ --btn-border: #ccc; --btn-primary-background: var(--link-color); --btn-primary-background-highlight: #04c; /* spin(#08c, 20%) */ --btn-info-background: #5bc0de; --btn-info-background-highlight: #2f96b4; --btn-success-background: #62c462; --btn-success-background-highlight: #51a351; --btn-warning-background: #fbb450; /* lighten(#f89406, 15%) */ --btn-warning-background-highlight: var(--orange); --btn-danger-background: #ee5f5b; --btn-danger-background-highlight: #bd362f; --btn-inverse-background: #444; --btn-inverse-background-highlight: var(--gray-darker); /* Forms */ --input-background: var(--white); --input-border: #ccc; --input-border-radius: var(--base-border-radius); --input-disabled-background: var(--gray-lighter); --form-actions-background: #f5f5f5; --input-height: calc(var(--base-line-height) + 10px); /* Dropdowns */ --dropdown-background: var(--white); --dropdown-border: rgba(0, 0, 0, .2); --dropdown-divider-top: #e5e5e5; --dropdown-divider-bottom: var(--white); --dropdown-link-color: var(--gray-dark); --dropdown-link-color-hover: var(--white); --dropdown-link-color-active: var(--white); --dropdown-link-background-active: var(--link-color); --dropdown-link-background-hover: var(--dropdown-link-background-active); /* Z-index master list */ --zindex-dropdown: 1000; --zindex-popover: 1010; --zindex-tooltip: 1030; --zindex-fixed-navbar: 1030; --zindex-modal-backdrop: 1040; --zindex-modal: 1050; /* Sprite icons path */ --icon-sprite-path: "../img/glyphicons-halflings.png"; --icon-white-sprite-path: "../img/glyphicons-halflings-white.png"; /* Input placeholder text color */ --placeholder-text: var(--gray-light); /* Hr border color */ --hr-border: var(--gray-lighter); /* Horizontal forms & lists */ --horizontal-component-offset: 180px; /* Wells */ --well-background: #f5f5f5; /* Navbar */ --navbar-collapse-width: 979px; --navbar-collapse-desktop-width: calc(var(--navbar-collapse-width) + 1); --navbar-height: 40px; --navbar-background-highlight: #ffffff; --navbar-background: #f5f5f5; /* darken(#ffffff, 5%) */ --navbar-border: #d4d4d4; /* darken(#f5f5f5, 12%) */ --navbar-text: #777; --navbar-link-color: #777; --navbar-link-color-hover: var(--gray-dark); --navbar-link-color-active: var(--gray); --navbar-link-background-hover: transparent; --navbar-link-background-active: #e6e6e6; /* darken(#f5f5f5, 5%) */ --navbar-brand-color: var(--navbar-link-color); /* Inverted navbar */ --navbar-inverse-background: #111111; --navbar-inverse-background-highlight: #222222; --navbar-inverse-border: #252525; --navbar-inverse-text: var(--gray-light); --navbar-inverse-link-color: var(--gray-light); --navbar-inverse-link-color-hover: var(--white); --navbar-inverse-link-color-active: var(--navbar-inverse-link-color-hover); --navbar-inverse-link-background-hover: transparent; --navbar-inverse-link-background-active: var(--navbar-inverse-background); --navbar-inverse-search-background: #2c2c2c; /* lighten(#111111, 25%) */ --navbar-inverse-search-background-focus: var(--white); --navbar-inverse-search-border: var(--navbar-inverse-background); --navbar-inverse-search-placeholder-color: #ccc; --navbar-inverse-brand-color: var(--navbar-inverse-link-color); /* Pagination */ --pagination-background: #fff; --pagination-border: #ddd; --pagination-active-background: #f5f5f5; /* Hero unit */ --hero-unit-background: var(--gray-lighter); --hero-unit-heading-color: inherit; --hero-unit-lead-color: inherit; /* Form states and alerts */ --warning-text: #c09853; --warning-background: #fcf8e3; --warning-border: #fbeed5; /* darken(spin(#fcf8e3, -10), 3%) */ --error-text: #b94a48; --error-background: #f2dede; --error-border: #eed3d7; /* darken(spin(#f2dede, -10), 3%) */ --success-text: #468847; --success-background: #dff0d8; --success-border: #d6e9c6; /* darken(spin(#dff0d8, -10), 5%) */ --info-text: #3a87ad; --info-background: #d9edf7; --info-border: #bce8f1; /* darken(spin(#d9edf7, -10), 7%) */ /* Tooltips and popovers */ --tooltip-color: #fff; --tooltip-background: #000; --tooltip-arrow-width: 5px; --tooltip-arrow-color: var(--tooltip-background); --popover-background: #fff; --popover-arrow-width: 10px; --popover-arrow-color: #fff; --popover-title-background: #f7f7f7; /* darken(#fff, 3%) */ /* Special enhancement for popovers */ --popover-arrow-outer-width: calc(var(--popover-arrow-width) + 1); --popover-arrow-outer-color: rgba(0, 0, 0, .25); /* GRID */ --grid-columns: 12; --grid-column-width: 60px; --grid-gutter-width: 20px; --grid-row-width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1))); /* 1200px min */ --grid-column-width-1200: 70px; --grid-gutter-width-1200: 30px; --grid-row-width-1200: calc((var(--grid-columns) * var(--grid-column-width-1200)) + (var(--grid-gutter-width-1200) * (var(--grid-columns) - 1))); /* 768px-979px */ --grid-column-width-768: 42px; --grid-gutter-width-768: 20px; --grid-row-width-768: calc((var(--grid-columns) * var(--grid-column-width-768)) + (var(--grid-gutter-width-768) * (var(--grid-columns) - 1))); /* Fluid grid */ --fluid-grid-column-width: 6.38298%; /* percentage(60px/940px) */ --fluid-grid-gutter-width: 2.12766%; /* percentage(20px/940px) */ /* 1200px min */ --fluid-grid-column-width-1200: 5.98291%; /* percentage(70px/1170px) */ --fluid-grid-gutter-width-1200: 2.5641%; /* percentage(30px/1170px) */ /* 768px-979px */ --fluid-grid-column-width-768: 5.80111%; /* percentage(42px/724px) */ --fluid-grid-gutter-width-768: 2.76243%; /* percentage(20px/724px) */ }