lnked/react-starter

View on GitHub
src/assets/styles/_variable.scss

Summary

Maintainability
Test Coverage
/* Sizes */
$header-height:                 36px;
$sidebar-width:                 48px;

$aside-width:                   202px;
$aside-padding:                 0;
$content-padding:               15px;

$layout-width:                  1200px;
$layout-margin:                 42px;

/* Animation */
$a-time:                        .3s;
$a-func:                        linear;
$a-delay:                       0s;
$a-micro-time:                  .15s;
$a-long-time:                   .7s;

$font-size-base:                10px;
$font-size-limit:               12px;
// $font-family-base:              -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
$font-family-base:              'Avenir Next', Avenir, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

$p-variations-percent:          10%;

/* System */
$c-text-color:                  #29323d;

$c-normal-color:               rgba(0, 0, 0, .8);
$c-normal-background:          #e6e6e6;

$c-select-color:                #f00;
$c-select-background:           #000;

$c-placeholder-color:           #000;
$c-placeholder-opacity:         .5;

$c-focus-color:                 #4353ff;

$c-input-text:                  #29323d;

/* Colors */
$c-link:                        #656d79;
$c-blue:                        #437fc1;
$c-smalt:                       #00278c;

$c-border:                      #cdcdcd;

$c-cerulean:                    #009ee3;
$c-rangoon-green:               #1a171b;

$c-error:                       #f10;
$c-success:                     #28c75d;
$c-alert:                       #fffce0;
$c-link:                        #07c;
$c-link-visited:                #6ea4db;
$c-secondary:                   #c7c7c7;
$c-bg-secondary:                #f0f0f0;
$c-help:                        #999;

$c-black:                       #000;
$c-white:                       #fff;
$c-snow:                        #fafafa;
$c-gainsboro:                   #e1e1e1;
$c-cobalt:                      #00529f;
$c-silver:                      #ccc;
$c-roman:                       #e65d5b;

$c-smalt:                       #063d8d;
$c-whisper:                     #e5e5e5;
$c-pink-swan:                   #b3b3b3;
$c-light-blue:                  #b5d7ec;
$c-carrot-orange:               #f8991c;
$c-dark-gray:                   #a4a4a4;

$c-amaranth:                    #e2394e;

$c-white-smoke:                 #f7f7f7;

$c-lighter-color:               #b3b3b3;

/* New colors */
$c-red:                         #ff564e;
$c-green:                       #28bc00;
$c-yellow:                      #ffc000;

/* buttons */

$c-button-link:                 #0052cc;
$c-button-subtle-link:          #6b778c;

$c-info-color:                  #034067;
$c-info-border:                 #04beda;
$c-info-background:             #04beda;

$c-normal-color:                #313b4d;
$c-normal-border:               #e8e8e8;
$c-normal-background:           #fff;

$c-primary-color:               #fff;
$c-primary-border:              #0052cc;
$c-primary-background:          #0052cc;

$c-success-color:               #06543a;
$c-success-border:              #28c75d;
$c-success-background:          #28c75d;

$c-warning-color:               #8e6f31;
$c-warning-border:              #f5dc74;
$c-warning-background:          #f5dc74;

$c-danger-color:                #fff;
$c-danger-border:               #dc371d;
$c-danger-background:           #dc371d;