Rominou34/soft-css

View on GitHub
src/scss/config/colors.scss

Summary

Maintainability
Test Coverage
/*
* 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;