wp-rdnyc/assets/css/_bs-vars-pre.scss

136 lines
3.1 KiB
SCSS

// Colors
// scss-docs-start color-variables
$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #eb2744;
$orange: #fd7e14;
$yellow: #EECF6D;
$green: #1db954;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-end color-variables
// define black, white, gray
$white: #fff;
$black: #000;
$gray: #7d756c; // 6c757d 7d756c
// define gray scale
$gray-100: tint-color($gray, 80%);
$gray-200: tint-color($gray, 60%);
$gray-300: tint-color($gray, 40%);
$gray-400: tint-color($gray, 20%);
$gray-500: $gray;
$gray-600: shade-color($gray, 20%);
$gray-700: shade-color($gray, 40%);
$gray-750: shade-color($gray, 50%);
$gray-800: shade-color($gray, 60%);
$gray-900: shade-color($gray, 80%);
// spaceblue is based on coolors.co 'space cadet' #/* 212c40 */ which was bg color in Lester's original design
// background will be spaceblue-800
$spaceblue-100: #aebcd5;
$spaceblue-200: #93a6c8;
$spaceblue-300: #788fba;
$spaceblue-400: #5d79ac;
$spaceblue-500: #4c6594;
$spaceblue-600: #3e5379;
$spaceblue-700: #31415e;
$spaceblue-750: #2a3751;
$spaceblue-800: #212c40;
$spaceblue-850: #1c2536;
$spaceblue-900: #151c28;
// scss-docs-start theme-color-variables
$primary: #51A39F;
$secondary: #BF98A0;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $spaceblue-100;
$dark: $spaceblue-900;
// scss-docs-end theme-color-variables
// Create your own map
$custom-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"gray": $gray-600,
"gray-dark": $gray-800
);
/* custom spacers */
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
'4-2': $spacer * 2,
'4-25': $spacer * 2.5,
5: $spacer * 3,
6: $spacer * 3.5,
7: $spacer * 4,
);
/* body, text, components */
$body-bg: $spaceblue-800;
$body-color: $gray-200;
$text-muted: $gray-400;
$component-active-color: $dark;
$component-active-bg: $primary;
$component-hover-color: tint-color($light, 5%);
$component-hover-bg: rgba($white, .125);
/* tables */
$table-bg: $dark;
/* buttons */
$btn-box-shadow: null;
/* figure captions */
$figure-caption-color: $gray-400;
/* form inputs */
$input-bg: $dark;
$input-focus-bg: $dark;
$input-border-color: $spaceblue-600;
$input-focus-color: $gray-100;
$input-placeholder-color: shade-color($spaceblue-600, 20%);
/* pagination */
$pagination-bg: $dark;
$pagination-border-color: $spaceblue-600;
$pagination-hover-color: tint-color($primary, 10%);
$pagination-hover-bg: $component-hover-bg;
$pagination-hover-border-color: $spaceblue-600;
$pagination-focus-color: tint-color($primary, 10%);
$pagination-focus-bg: tint-color($dark, 7%);
/* dropdown menus */
$dropdown-dark-bg: $dark;
$dropdown-dark-divider-bg: $spaceblue-600;
$dropdown-dark-link-color: $light;
$dropdown-dark-link-hover-color: $component-hover-color;
$dropdown-dark-link-hover-bg: $component-hover-bg; // was $spaceblue-600
$dropdown-dark-link-active-color: $component-active-color;
$dropdown-dark-link-active-bg: $component-active-bg;