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