mail/src/sass/_variables.scss

// Typography
// -------------------------------------------
$font-size-base:                    16px;
$font-size-small:                   em(14);
$font-size-smaller:                 em(12);
$font-size-big:                     em(18);
$font-size-bigger:                  em(24);

$font-family-base:                  "PT Sans", Arial, sans-serif;
$font-family-icons:                 "icons";

$line-height-base:                  20 / 16;

// Colors
// -------------------------------------------

$color-blue:                        #00c6ff;
$color-black:                       #000;
$color-white:                       #fff;
$color-grey:                        #666;
$color-grey-input:                  #949494;
$color-grey-dark:                   #333;
$color-grey-medium:                 #aaa;
$color-grey-light:                  #ccc;
$color-grey-lighter:                #ddd;
$color-grey-lighterer:              #f0eff5;
$color-grey-lightest:               #f9f9f9;
$color-grey-dark-alpha:             rgba(0, 0, 0, 0.80);

// Layout
// -------------------------------------------

$respond-size-desktop:              768px;

$content-nav-width:                 344px;

// Animations
// -------------------------------------------

$time-nav-animation:                0.2s;
$time-li-fade:                      0.15s;

// Components
// -------------------------------------------

$nav-max-width:                     347px;
$nav-width:                         80%;
$nav-padding:                       15px;

$lightbox-padding:                  15px;
$lightbox-max-width:                662px;
$lightbox-width:                    90%;
$lightbox-min-height:               644px;

$btn-back-color:                    $color-blue;
$btn-color:                         #fff;
$btn-shadow-color:                  $color-grey-light;
$btn-font-size:                     $font-size-big;
$btn-padding-horizontal:            0.7em;
$btn-padding-vertical:              0.5em;
$btn-disabled-back-color:           $color-grey-lighter;
$btn-disabled-color:                #fff;

$btn-icon-color:                    $color-blue;
$btn-icon-disabled-color:           $color-grey;

$label-back-color:                  $color-blue;
$label-color:                       #fff;
$label-shadow-color:                $color-grey-light;
$label-font-size:                   $font-size-small;
$label-padding-horizontal:          0.8em;
$label-padding-vertical:            0.3em;

$label-primary-back-color:          #ff878d;
$label-primary-color:               #fff;

$label-light-back-color:            #fff;
$label-light-color:                 $color-blue;
$label-light-shadow-color:          $color-grey-lighter;
$label-light-padding-horizontal:    0.3em;
$label-light-padding-vertical:      0.1em;