src/scss/_variables.scss

   1 // Global Settings
   2 $enable-shadows:                        true;
   3 $shadow-1:                                      0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   4 $shadow-2:                                      0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
   5 $shadow-3:                                      0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
   6 $shadow-4:                                      0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26);
   7 $shadow-5:                                      0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26);
   8 $shadow-6:                                      0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22);
   9
  10 /*
  11         Colours
  12 */
  13 $red-900:                               #b71c1c;
  14 $red-600:                               #e53935;
  15
  16 $amber-800:                             #ff8f00;
  17 $yellow-700:                            #fbc02d;
  18
  19 $blue-700:                                      #1976d2;
  20 $blue-400:                                      #42a5f5;
  21
  22 $green-600:                                     #43a047;
  23 $green-400:                                     #66bb6a;
  24
  25 $blue-grey-900:                         #263238;
  26 $blue-grey-700:                         #455a64;
  27 $blue-grey-600:                         #546e7a;
  28 $blue-grey-300:                         #90a4ae;
  29 $blue-grey-50:                          #eceff1;
  30
  31 $orange-a400:                           #ff3d00;
  32
  33 $cyan:                                          #00bcd4;
  34
  35 // Theme
  36 $primary:                                       $red-900;
  37 $secondary:                                     white;
  38 $light:                                         $blue-grey-50;
  39 $dark:                                          $blue-grey-900;
  40
  41 $yiq-text-dark:                         $primary;
  42 $yiq-text-light:                        $secondary;
  43
  44 $body-bg:                                       $blue-grey-50;
  45 $body-color:                            $blue-grey-900;
  46
  47 // Breakpoints
  48 $grid-breakpoints: (
  49         xs: 0,
  50         sm: 600px,
  51         md: 768px,
  52         lg: 1024px,
  53         xl: 1280px
  54 );
  55
  56 $border-radius:                         2px;
  57 $border-radius-lg:                      2px;
  58
  59 // Fonts
  60 $font-family-sans-serif:        "Ubuntu", sans-serif;
  61
  62 $font-weight-light:                     300;
  63 $font-weight-normal:            400;
  64 $font-weight-bold:                      700;
  65
  66 // Typo
  67 $font-size-base:                        1rem;
  68 $lead-font-size:                        1.5rem;
  69 $small-font-size:                       87.5%;
  70
  71 // Headings
  72 $headings-font-weight:          500;
  73 $headings-line-height:          1.5;
  74 $headings-margin-bottom:        1.5rem;
  75 $headings-color:                        $blue-grey-900;
  76
  77 $h1-font-size:                          3rem;
  78 $h2-font-size:                          2.5rem;
  79 $h3-font-size:                          2.25rem;
  80 $h4-font-size:                          2rem;
  81 $h5-font-size:                          1.5rem;
  82 $h6-font-size:                          1.25rem;
  83
  84 $display1-size:                         7.5rem;
  85
  86 // Links
  87 $link-color:                            $primary;
  88
  89 // Navbar
  90 $navbar-brand-font-size:        36px;
  91 $navbar-brand-height:           32px;
  92
  93 $nav-link-height:                       24px;
  94 $navbar-nav-link-padding-x:     16px;
  95
  96 $navbar-padding-y:                      1.1rem;
  97
  98 // Input
  99 $input-btn-padding-x:           1rem;
 100 $input-btn-padding-y:           .5rem;
 101
 102 $input-btn-focus-box-shadow:    $shadow-3;
 103
 104 // Shadows
 105 $box-shadow:                            $shadow-1;
 106 $box-shadow-sm:                         $box-shadow;
 107 $box-shadow-lg:                         $shadow-6;
 108
 109 // Buttons
 110 $btn-border-width:                      2px;
 111
 112 $btn-box-shadow:                        0 2px 0 rgba(black, .16), 0 1px 2px rgba(black, .23);
 113 $btn-active-box-shadow:         $input-btn-focus-box-shadow;