83 lines
1.9 KiB
SCSS
83 lines
1.9 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
|
|
);
|
|
|
|
|
|
$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);
|