mirror of https://github.com/rancher/ui.git
228 lines
8.0 KiB
SCSS
228 lines
8.0 KiB
SCSS
// Background color for `<body>`.
|
|
$body-bg : white;
|
|
|
|
// Global text color on `<body>`.
|
|
$text-color : $secondary;
|
|
$text-muted : $mid-grey;
|
|
|
|
$primary : $primary; //button non state
|
|
$primary-dark : darken($primary, 20%);
|
|
|
|
// States
|
|
$success : $success; //good
|
|
$info : $info; //transitioning
|
|
$warning : $warning; //orange degraded
|
|
$error : $error; //red stopped inactive bad
|
|
|
|
$bg-default : $light-grey;
|
|
$bg-disabled : lighten($mid-grey, 25);
|
|
$bg-primary : $primary;
|
|
$bg-secondary : $secondary;
|
|
$bg-success : $success;
|
|
$bg-info : $info;
|
|
$bg-warning : $warning;
|
|
$bg-error : $error;
|
|
|
|
// // Global textual link color.
|
|
$link-color : $link-color;
|
|
|
|
// Link hover color set via `darken()` function.
|
|
$link-hover-color : $info;
|
|
|
|
// Link hover decoration.
|
|
$link-hover-decoration : none;
|
|
|
|
// Accent colors
|
|
$accent-one : $light-grey;
|
|
$accent-two : $mid-grey;
|
|
$accent-three : $dark-grey;
|
|
|
|
$accent-bg : $accent-one;
|
|
$accent-border : rgba(255, 255, 255, .5);
|
|
|
|
// Header
|
|
$header : $secondary;
|
|
$header-link : $light-grey;
|
|
$header-link-active : $primary;
|
|
$user-btn : darken($header, 10%);
|
|
|
|
$header-text : $secondary;
|
|
|
|
$footer : $light-grey;
|
|
|
|
// Horizontal line color.
|
|
$border : $light-grey;
|
|
|
|
$shadow : rgba($mid-grey, 0.35);
|
|
|
|
// Default background color used for all tables.
|
|
$table-bg : lighten($light-grey, 5%);
|
|
$table-header : $link-color;
|
|
|
|
// Background color used for `.table-striped`
|
|
$table-bg-accent : $light-grey;
|
|
// Background color used for `.table-hover`
|
|
$table-bg-hover : rgba($info, 0.15);
|
|
$table-bg-active : $table-bg-hover;
|
|
$table-bg-selected : rgba($accent-two, .3);
|
|
// Border color for table and cell borders
|
|
$table-border-color : rgba($mid-grey, .2);
|
|
|
|
// banners
|
|
$banner-default : $light-grey;
|
|
$banner-disabled : rgba($mid-grey, .65);
|
|
$banner-primary : rgba($primary, .1);
|
|
$banner-secondary : rgba($secondary, .1);
|
|
$banner-success : rgba($success, .1);
|
|
$banner-info : rgba($info, .1);
|
|
$banner-warning : rgba($warning, .1);
|
|
$banner-error : rgba($error, .1);
|
|
$banner-color : dark;
|
|
|
|
|
|
// Global color for active items (e.g., navs or dropdowns).
|
|
$component-active-color : white;
|
|
// Global background color for active items (e.g., navs or dropdowns).
|
|
$component-active-bg : $primary;
|
|
|
|
|
|
|
|
// Forms
|
|
// Placeholder text color
|
|
$input-color-placeholder : $mid-grey;
|
|
|
|
// `<input>` background color
|
|
$input-bg : lighten($light-grey, 4%);
|
|
$input-bg-hover : $mid-grey;
|
|
|
|
// `<input disabled>` background color
|
|
$input-bg-disabled : $mid-grey;
|
|
|
|
// Text color for `<input>`s
|
|
$input-color : $secondary;
|
|
// `<input>` border color
|
|
$input-border : $light-grey;
|
|
// Border color for textual input addons
|
|
$input-group-addon-border-color : $input-border;
|
|
|
|
// Border color for inputs on focus
|
|
$input-border-focus : $info;
|
|
|
|
$legend-color : $text-color;
|
|
$legend-border-color : $light-grey;
|
|
|
|
// Background color for textual input addons
|
|
$input-group-addon-bg : $light-grey;
|
|
|
|
// Background for the dropdown menu.
|
|
$dropdown-bg : $light-grey;
|
|
// Dropdown menu `border-color`.
|
|
$dropdown-border : $light-grey;
|
|
|
|
// Divider color for between dropdown items.
|
|
$dropdown-divider-bg : $light-grey;
|
|
|
|
// Dropdown link text color.
|
|
$dropdown-link-color : $link-color;
|
|
// Hover color for dropdown links.
|
|
$dropdown-link-hover-color : white;
|
|
// Hover background for dropdown links.
|
|
$dropdown-link-hover-bg : $component-active-bg;
|
|
|
|
// Active dropdown menu item text color.
|
|
$dropdown-link-active-color : white;
|
|
// Active dropdown menu item background color.
|
|
$dropdown-link-active-bg : $component-active-bg;
|
|
|
|
// Disabled dropdown menu item background color.
|
|
$dropdown-link-disabled-color : $light-grey;
|
|
|
|
// Pagination
|
|
$pagination-color : $primary;
|
|
$pagination-bg : #f5f5f5;
|
|
$pagination-border : #ddd;
|
|
|
|
$pagination-hover-color : $link-hover-color;
|
|
$pagination-hover-bg : $light-grey;
|
|
$pagination-hover-border : #ddd;
|
|
|
|
$pagination-active-color : $light-grey;
|
|
$pagination-active-bg : white;
|
|
$pagination-active-border : #ddd;
|
|
|
|
$pagination-disabled-color : $light-grey;
|
|
$pagination-disabled-bg : white;
|
|
$pagination-disabled-border : #ddd;
|
|
|
|
// Jumbotron
|
|
$jumbotron-bg : $light-grey;
|
|
|
|
// Form states and alerts Define colors for form feedback states and, by default, alerts.
|
|
|
|
$state-success-text : white;
|
|
$state-success-bg : $success;
|
|
$state-success-border : darken(adjust-hue($state-success-bg, -10), 5%);
|
|
|
|
$state-info-text : white;
|
|
$state-info-bg : $info;
|
|
$state-info-border : darken(adjust-hue($state-info-bg, -10), 7%);
|
|
|
|
$state-warning-bg : $warning;
|
|
$state-warning-text : white;
|
|
$state-warning-border : darken($warning, 20%);
|
|
|
|
$state-danger-text : white;
|
|
$state-danger-bg : $error;
|
|
$state-danger-border : darken(adjust-hue($state-danger-bg, -10), 3%);
|
|
|
|
|
|
// Tooltip text color
|
|
$tooltip-color : white;
|
|
// Tooltip background color
|
|
$tooltip-bg : rgba(0,0,0,.9);
|
|
$tooltip-opacity : .9;
|
|
// Tooltip arrow color
|
|
$tooltip-arrow-color : $tooltip-bg;
|
|
|
|
|
|
// Background color of modal content area
|
|
$modal-content-bg : white;
|
|
// Modal content border color
|
|
$modal-content-border-color : transparent;
|
|
// Modal content border color **for IE8**
|
|
$modal-content-fallback-border-color : #999;
|
|
|
|
// Modal backdrop background color
|
|
$modal-overlay : rgba($light-grey, 0.75);
|
|
|
|
// Modal header border color
|
|
$modal-header-border-color : #e5e5e5;
|
|
// Modal footer border color
|
|
$modal-footer-border-color : $modal-header-border-color;
|
|
|
|
|
|
// // Default label text color
|
|
$label-color : $mid-grey;
|
|
|
|
|
|
$header-link-text : #afb9c8;
|
|
$nav-link-hover-bg : $light-grey;
|
|
|
|
// Tabs
|
|
$tab-bg : white;
|
|
$tab-active-bg : white;
|
|
$tab-hover : $dark-grey;
|
|
$tab-color : $mid-grey;
|
|
$tab-accent : $light-grey;
|
|
|
|
$close-color : white;
|
|
$close-text-shadow : 0 1px 0 white;
|
|
|
|
// Code
|
|
$code-color : mix($warning, $error, 20%);
|
|
$code-bg : #fcf2e9;
|
|
|
|
$pre-bg : #f5f5f5;
|
|
$pre-color : $dark-grey;
|
|
$pre-border-color : $light-grey;
|