266 lines
7.2 KiB
CSS
266 lines
7.2 KiB
CSS
/*
|
|
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) */
|
|
}
|