steve
/
mybuddy
mirror of https://github.com/snachodog/mybuddy.git
1
0
Fork 0
Code Issues 3 Packages Projects 1 Releases Wiki Activity

Add and use a "Blue Orange" darker theme.

This commit is contained in:
Christopher Charbonneau Wells 2017-09-27 11:11:17 -04:00
parent b4ac40d2d4
commit 0ff03b8851
2 changed files with 136 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
babyblotter/static_src/scss/_variables.scss
View File

@ -1,4 +1,5 @@
@import 'functions'; @import 'functions';
@import '../../../node_modules/bootstrap/scss/variables'; @import '../../../node_modules/bootstrap/scss/variables';
@import 'themes/blueorange';
// Baby Blotter site-wide custom variables. */ // Baby Blotter site-wide variables.

134
babyblotter/static_src/scss/themes/blueorange.scss Normal file
View File

@ -0,0 +1,134 @@
// Blue Orange theme variables.
//
// Color system
//
$blue: #236e96;
$indigo: #472395;
$purple: #712395;
$pink: #952393;
$red: #952330;
$orange: #ff7f00;
$yellow: #ffbe42;
$green: #239556;
$teal: #5abccc;
$cyan: #15b2d3;
$theme-colors: (
primary: $blue,
secondary: $orange,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
);
// Body
//
// Settings for the `<body>` element.
$body-bg: $gray-700;
$body-color: $gray-400;
// Links
//
// Style anchor elements.
$link-color: theme-color("info");
$link-hover-color: darken($link-color, 15%);
// Components
//
// Define common padding and border radius sizes and more.
$border-color: $gray-200;
$component-active-color: $gray-400;
$component-active-bg: theme-color("primary");
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default;
$hr-border-color: rgba($black,.1) !default;
$mark-bg: #fcf8e3 !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-border-color: $gray-800;
$table-head-bg: theme-color("primary");
$table-inverse-bg: theme-color("dark");
// Forms
$input-bg: $gray-400;
$input-disabled-bg: $gray-600;
$input-color: $black;
$input-border-color: rgba($gray-600,.15);
$input-group-addon-bg: $gray-500;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-bg: $gray-700;
$dropdown-divider-bg: $gray-800;
$dropdown-link-color: $body-color;
$dropdown-link-hover-color: darken($body-color, 5%);
$dropdown-link-hover-bg: theme-color("primary");
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-header-color: theme-color("secondary");
// Pagination
$pagination-color: $link-color;
$pagination-bg: theme-color("dark");
$pagination-border-color: lighten(theme-color("dark"), 5%);
$pagination-hover-color: $link-hover-color;
$pagination-hover-bg: $gray-900;
$pagination-hover-border-color: $gray-800;
$pagination-active-color: $body-color;
$pagination-active-bg: theme-color("primary");
$pagination-active-border-color: theme-color("primary");
$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $pagination-bg;
$pagination-disabled-border-color: $pagination-border-color;
// Cards
$card-bg: theme-color("dark");
// Progress bars
$progress-bg: $gray-600;
// List group
$list-group-bg: theme-color("dark");
$list-group-hover-bg: darken($list-group-bg, 5%);
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-action-color: $gray-400;
$list-group-action-hover-color: $list-group-action-color;