src/scss/config/colors.scss
/*
* Soft CSS - The tweakable CSS framework
* Romain Arnaud - 2016
*/
/*
******************************************************************************
* COLOR PALETTE
******************************************************************************
*/
/*
* HOW TO USE
* - Define the default color each time ( $blue-default, $red-default, etc. )
* - The shades will be automatically calculated using lighten() and darken()
* - At the end, choose the colors of elements using the color palette
* so you have an uniform color scheme
*/
/********************
* COLOR PALETTE *
********************/
/* THEME */
$primary-color: #4586e8;
$secondary-color: #9d43e8;
/* Put true here if your theme is a night one ( dark bakcground and white font ) */
$night-theme: false;
$success-color: #36b147;
$info-color: #296dd1;
$danger-color: #cd2f2b;
$warning-color: #e7912c;
/*** COMPLEMENTARY COLORS ***/
$grey-color: #9d9d9d;
$black-color: #0e0e0e;
$blue-color: #296dd1;
$green-color: #36b147;
$red-color: #cd2f2b;
$orange-color: #e7912c;
/* GREY */
$grey-lightest: #edf1f7; /* Almost white */
$grey-lighter: #ced3db; /* Very light grey */
$grey-light: #acb4bf;
$grey-medium: #848b96;
$grey-dark: #646a72;
$grey-darker: #3e4349; /* Darky dark */
$grey-darkest: #26292d; /* Almost black */
/*** USED FOR THE ELEMENTS ***/
$shadow-normal: rgba(0,0,0,0.35);
$shadow-light: rgba(0,0,0,0.2);
/* HEADER */
$color-header: #ecf0f1;
$bg-color-header: $primary-color;
$bg-color-base: #fff; /*#ecf0f1;*/
$bg-color-primary: transparentize($primary-color, 0.9);
$border-color-primary: darken($primary-color, 10%);
$bg-color-secondary: transparentize($secondary-color, 0.85);
$border-color-secondary: darken($secondary-color, 10%);
$font-color-base: #101010;
$font-color-link: darken($primary-color, 15%);
$font-color-link-h: $primary-color;
$font-color-link-v: darken($secondary-color, 15%);
/*
******************************************************************************
* LAYOUT CONTROL
******************************************************************************
*/
/*
***** NAVIGATION *****
*/
$navtop-font-color: #ecf0f1;
$navtop-bg-color: #13499a;
$navtop-links-bg-color: #0d346d;
$navtop-highlight-bg-color: #2569ce;
$navtop-dropdown-bg-color: #2569ce;
$navtop-dropdown-bg-color-hover: #13499a;
$navtop-toggle-bg-color: #1a65d5;
$navtop-toggle-font-color: #ecf0f1;
$navside-bg-color: lighten($black-color, 6%);
$navside-font-color: #ecf0f1;
$navside-links-bg-color: lighten($black-color, 6%);
$navside-links-bg-color-hover: lighten($black-color, 10%);
$navside-header-bg-color: darken($primary-color, 12%);
$navside-header-font-color: #ecf0f1;
$navside-footer-bg-color: $black-color;
$navside-footer-font-color: #ecf0f1;