src/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss

   1 // Bootstrap overrides
   2 //
   3 // Copy variables from `_variables.scss` to this file to override default values
   4 // without modifying source files.
   5
   6 // Colors added for IPFire branding
   7 $red_900: #b71c1c;
   8 $red_600: #e53935;
   9 $amber_800: #ff8f00;
  10 $yellow_700: #fbc02d;
  11 $blue_700: #1976d2;
  12 $blue_400: #42a5f5;
  13 $green_600: #43a047;
  14 $green_400: #66bb6a;
  15 $blue_grey_900: rgba(38, 50, 56, 1);
  16 $blue_grey_700: rgba(38, 50, 56, .7);
  17 $blue_grey_600: rgba(38, 50, 56, .6);
  18 $blue_grey_300: rgba(38, 50, 56, .3);
  19 $blue_grey_50: #eceff1;
  20 $deep_orange_a400: #ff3d00;
  21 $cyan: #00bcd4;
  22
  23 // Reassign color vars to semantic color scheme
  24 $brand-primary:             $blue !default;
  25 $brand-success:             $green !default;
  26 $brand-info:                $teal !default;
  27 $brand-warning:             $orange !default;
  28 $brand-danger:              $red !default;
  29 $brand-inverse:             $gray-dark !default;
  30
  31 // Spacing
  32 $spacer:   8px;
  33 $spacer-x: $spacer;
  34 $spacer-y: $spacer;
  35 $spacers: (
  36   0: (
  37     x: 0,
  38     y: 0
  39   ),
  40   1: (
  41     x: ($spacer-x * .25),
  42     y: ($spacer-y * .25)
  43   ),
  44   2: (
  45     x: ($spacer-x * .5),
  46     y: ($spacer-y * .5)
  47   ),
  48   3: (
  49     x: $spacer-x,
  50     y: $spacer-y
  51   ),
  52   4: (
  53     x: ($spacer-x * 1.5),
  54     y: ($spacer-y * 1.5)
  55   ),
  56   5: (
  57     x: ($spacer-x * 2),
  58     y: ($spacer-y * 2)
  59   ),
  60   6: (
  61     x: ($spacer-x * 6),
  62     y: ($spacer-y * 6)
  63   )
  64 );
  65
  66 $border-width: 2px;
  67
  68 // Body
  69 //
  70 // Settings for the `<body>` element.
  71 $body-bg:       $blue_grey_50;
  72 $body-color:    $blue_grey_900;
  73 $inverse-bg:    $gray-dark !default;
  74 $inverse-color: $gray-lighter !default;
  75
  76 // Links
  77 $link-color:            $red_900;
  78 $link-hover-color:      darken($link-color, 15%);
  79 $link-hover-decoration: none;
  80
  81 // Grid breakpoints
  82 //
  83 // Define the minimum dimensions at which your layout will change,
  84 // adapting to different screen sizes, for use in media queries.
  85 $grid-breakpoints: (
  86   xs: 0,
  87   sm: 576px,
  88   md: 768px,
  89   lg: 992px,
  90   xl: 1200px
  91 ) !default;
  92 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
  93 @include _assert-starts-at-zero($grid-breakpoints);
  94
  95 // Grid
  96 $grid-columns:               12 !default;
  97 $grid-gutter-width-base:     24px;
  98 $grid-gutter-widths: (
  99   xs: $grid-gutter-width-base,
 100   sm: $grid-gutter-width-base,
 101   md: $grid-gutter-width-base,
 102   lg: $grid-gutter-width-base,
 103   xl: $grid-gutter-width-base
 104 );
 105
 106 // Fonts
 107 @import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500');
 108 $font-family-sans-serif: 'Ubuntu', sans-serif;
 109 $font-family-base:       $font-family-sans-serif;
 110
 111 $font-size-lg:   20px;
 112
 113 $font-weight-normal: 400;
 114 $font-weight-bold: 500;
 115
 116 $font-weight-base: $font-weight-normal;
 117
 118 $font-size-h1: 36px;
 119 $font-size-h2: 32px;
 120 $font-size-h3: 24px;
 121 $font-size-h4: 20px;
 122 $font-size-h5: 16px;
 123 $font-size-h6: 12px;
 124
 125 $headings-font-weight:   400;
 126
 127 $display1-size: 120px;
 128 $display2-size: 48px;
 129 $display3-size: 32px;
 130 $display4-size: 24px;
 131
 132 $lead-font-size:   24px;
 133
 134 $small-font-size: 14px;
 135
 136
 137 // Buttons
 138 $btn-padding-x:                  16px;
 139 $btn-padding-y:                  8px;
 140 $btn-line-height:                .95;
 141 $btn-font-weight:                600;
 142 $btn-box-shadow:                 none;
 143 $btn-focus-box-shadow:           none;
 144 $btn-active-box-shadow:          none;
 145
 146 $btn-primary-bg:                 $red_900;
 147 $btn-primary-border:             $red_900;
 148
 149 $btn-secondary-color:            $blue_grey_600;
 150 $btn-secondary-bg:               $white !default;
 151 $btn-secondary-border:           $blue_grey_600;
 152
 153 $btn-info-color:                 $white !default;
 154 $btn-info-bg:                    $brand-info !default;
 155 $btn-info-border:                $btn-info-bg !default;
 156
 157 $btn-success-color:              $white !default;
 158 $btn-success-bg:                 $brand-success !default;
 159 $btn-success-border:             $btn-success-bg !default;
 160
 161 $btn-warning-color:              $white !default;
 162 $btn-warning-bg:                 $brand-warning !default;
 163 $btn-warning-border:             $btn-warning-bg !default;
 164
 165 $btn-danger-color:               $white !default;
 166 $btn-danger-bg:                  $brand-danger !default;
 167 $btn-danger-border:              $btn-danger-bg !default;
 168
 169 $btn-red900-color:                               $white !important;
 170 $btn-red900-bg:                                  $red_900;
 171 $btn-red900-border:                              $btn-red900-bg;
 172
 173 $btn-white-color:                                $red_900;
 174 $btn-white-bg:                                   $white;
 175 $btn-white-border:                               $btn-white-bg;
 176
 177 $btn-bluegrey900-color:                  $white;
 178 $btn-bluegrey900-bg:                     $blue_grey_900;
 179 $btn-bluegrey900-border:                 $btn-bluegrey900-bg;
 180
 181 $btn-link-disabled-color:        $gray-light !default;
 182
 183 $btn-padding-x-sm:               8px;
 184 $btn-padding-y-sm:               4px;
 185
 186 $btn-padding-x-lg:               32px;
 187 $btn-padding-y-lg:               12px;
 188
 189 $btn-block-spacing-y:            8px;
 190 $btn-toolbar-margin:             8px;
 191
 192 // Allows for customizing button radius independently from global border radius
 193 $btn-border-radius-lg:           2px;
 194
 195
 196 $input-btn-border-width:         $border-width;
 197
 198 // Navs
 199 $nav-item-margin:               24px;
 200 $nav-item-inline-spacer:        16px;
 201 $nav-link-padding:              8px 24px;
 202 $nav-link-hover-bg:             $gray-lighter !default;
 203 $nav-disabled-link-color:       $gray-light !default;
 204
 205 // Navbar
 206 $navbar-padding-x:                  $spacer;
 207 $navbar-padding-y:                  $spacer;
 208
 209 // Badges
 210
 211 $badge-default-bg:            $gray-light !default;
 212 $badge-primary-bg:            $brand-primary !default;
 213 $badge-success-bg:            $brand-success !default;
 214 $badge-info-bg:               $brand-info !default;
 215 $badge-warning-bg:            $brand-warning !default;
 216 $badge-danger-bg:             $brand-danger !default;
 217
 218 $badge-color:                 $white !default;
 219 $badge-link-hover-color:      $white !default;
 220 $badge-font-size:             100%;
 221 $badge-font-weight:           $font-weight-bold !default;
 222 $badge-padding-x:             .4em !default;
 223 $badge-padding-y:             .25em !default;
 224
 225 $badge-pill-padding-x:        .6em !default;
 226 // Use a higher than normal value to ensure completely rounded edges when
 227 // customizing padding or font-size on labels.
 228 $badge-pill-border-radius:    10rem !default;