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 $dark:                                          $blue-grey-900;
  39
  40 $yiq-text-dark:                         $primary;
  41 $yiq-text-light:                        $secondary;
  42
  43 $body-bg:                                       $blue-grey-50;
  44 $body-color:                            $blue-grey-900;
  45
  46 // Breakpoints
  47 $grid-breakpoints: (
  48         xs: 0,
  49         sm: 600px,
  50         md: 768px,
  51         lg: 1024px,
  52         xl: 1280px
  53 );
  54
  55 $border-radius:                         2px;
  56 $border-radius-lg:                      2px;
  57
  58 // Fonts
  59 $font-family-sans-serif:        "Ubuntu", sans-serif;
  60
  61 $font-weight-light:                     300;
  62 $font-weight-normal:            500;
  63 $font-weight-bold:                      700;
  64
  65 // Typo
  66 $font-size-base:                        1rem;
  67 $lead-font-size:                        1.5rem;
  68 $small-font-size:                       87.5%;
  69
  70 // Headings
  71 $headings-font-weight:          300;
  72 $headings-line-height:          1.5;
  73 $headings-margin-bottom:        1.5rem;
  74 $headings-color:                        $blue-grey-900;
  75
  76 $h1-font-size:                          3rem;
  77 $h2-font-size:                          2.5rem;
  78 $h3-font-size:                          2.25rem;
  79 $h4-font-size:                          2rem;
  80 $h5-font-size:                          1.5rem;
  81 $h6-font-size:                          1.25rem;
  82
  83 $display1-size:                         7.5rem;
  84
  85 // Links
  86 $link-color:                            $primary;
  87
  88 // Navbar
  89 $navbar-brand-font-size:        36px;
  90 $navbar-brand-height:           32px;
  91
  92 $nav-link-height:                       24px;
  93 $navbar-nav-link-padding-x:     16px;
  94
  95 $navbar-padding-y:                      1.1rem;
  96
  97 // Input
  98 $input-btn-padding-x:           1rem;
  99 $input-btn-padding-y:           .5rem;
 100
 101 $input-btn-focus-box-shadow:    $shadow-3;
 102
 103 // Shadows
 104 $box-shadow:                            $shadow-1;
 105 $box-shadow-sm:                         $box-shadow;
 106 $box-shadow-lg:                         $shadow-6;
 107
 108 // Buttons
 109 $btn-border-width:                      2px;
 110
 111 $btn-box-shadow:                        0 2px 0 rgba(black, .16), 0 1px 2px rgba(black, .23);
 112 $btn-active-box-shadow:         $input-btn-focus-box-shadow;