src/scss/_variables.scss

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