_bootstrap.scss 34.9 KB
Newer Older
Dipesh Bathaja's avatar
Dipesh Bathaja committed
1 2
// Variables
//
3 4
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
5 6 7


//
8
// Color system
Dipesh Bathaja's avatar
Dipesh Bathaja committed
9 10
//

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
), $colors);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);
// stylelint-enable

// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
96 97 98 99 100

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

101
$enable-caret:              true !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
102 103 104
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
105 106
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
Dipesh Bathaja's avatar
Dipesh Bathaja committed
107
$enable-grid-classes:       true !default;
108
$enable-print-styles:       true !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
109 110 111 112 113 114


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
115
// You can add more entries to the $spacers map, should you need more variation.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
116

117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
// stylelint-disable
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
), $spacers);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
), $sizes);
// stylelint-enable
Dipesh Bathaja's avatar
Dipesh Bathaja committed
138 139 140 141 142

// Body
//
// Settings for the `<body>` element.

143 144
$body-bg:                   $white !default;
$body-color:                $gray-900 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
145 146 147 148 149

// Links
//
// Style anchor elements.

150 151 152 153 154 155 156 157 158 159
$link-color:                theme-color("primary") !default;
$link-decoration:           none !default;
$link-hover-color:          darken($link-color, 15%) !default;
$link-hover-decoration:     underline !default;

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   1rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
160 161 162 163


// Grid breakpoints
//
164
// Define the minimum dimensions at which your layout will change,
Dipesh Bathaja's avatar
Dipesh Bathaja committed
165 166 167 168
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
169
  sm: 576px,
Dipesh Bathaja's avatar
Dipesh Bathaja committed
170 171
  md: 768px,
  lg: 992px,
172
  xl: 1200px
Dipesh Bathaja's avatar
Dipesh Bathaja committed
173
) !default;
174

175
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
176
@include _assert-starts-at-zero($grid-breakpoints);
Dipesh Bathaja's avatar
Dipesh Bathaja committed
177 178 179 180 181 182 183


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
184
  sm: 540px,
Dipesh Bathaja's avatar
Dipesh Bathaja committed
185
  md: 720px,
186
  lg: 960px,
187
  xl: 1140px
Dipesh Bathaja's avatar
Dipesh Bathaja committed
188
) !default;
189

190
@include _assert-ascending($container-max-widths, "$container-max-widths");
Dipesh Bathaja's avatar
Dipesh Bathaja committed
191 192 193 194 195 196


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

197 198
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
199

200
// Components
Dipesh Bathaja's avatar
Dipesh Bathaja committed
201
//
202
// Define common padding and border radius sizes and more.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
203

204 205
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
206

207 208
$border-width:                1px !default;
$border-color:                $gray-300 !default;
209

210 211 212
$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
213

214 215
$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
216

217
$caret-width:                 .3em !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
218

219 220 221
$transition-base:             all .2s ease-in-out !default;
$transition-fade:             opacity .15s linear !default;
$transition-collapse:         height .35s ease !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
222 223


224 225 226
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
227

228 229 230 231 232
// stylelint-disable value-keyword-case
$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
Dipesh Bathaja's avatar
Dipesh Bathaja committed
233

234 235 236
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
237

238 239 240
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
241

242 243
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
244

245 246 247 248 249 250
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
251

252 253 254 255 256
$headings-margin-bottom:      ($spacer / 2) !default;
$headings-font-family:        inherit !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              inherit !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
257

258 259 260 261
$display1-size:               6rem !default;
$display2-size:               5.5rem !default;
$display3-size:               4.5rem !default;
$display4-size:               3.5rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
262

263 264 265 266 267
$display1-weight:             300 !default;
$display2-weight:             300 !default;
$display3-weight:             300 !default;
$display4-weight:             300 !default;
$display-line-height:         $headings-line-height !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
268

269 270
$lead-font-size:              ($font-size-base * 1.25) !default;
$lead-font-weight:            300 !default;
271

272
$small-font-size:             80% !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
273

274
$text-muted:                  $gray-600 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
275

276 277
$blockquote-small-color:      $gray-600 !default;
$blockquote-font-size:        ($font-size-base * 1.25) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
278

279 280
$hr-border-color:             rgba($black, .1) !default;
$hr-border-width:             $border-width !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
281

282
$mark-padding:                .2em !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
283

284
$dt-font-weight:              $font-weight-bold !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
285

286 287 288 289 290 291 292 293
$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight:      $font-weight-bold !default;

$list-inline-padding:         .5rem !default;

$mark-bg:                     #fcf8e3 !default;

$hr-margin-y:                 $spacer !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
294 295 296 297 298 299


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.

300 301
$table-cell-padding:          .75rem !default;
$table-cell-padding-sm:       .3rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
302

303 304 305 306
$table-bg:                    transparent !default;
$table-accent-bg:             rgba($black, .05) !default;
$table-hover-bg:              rgba($black, .075) !default;
$table-active-bg:             $table-hover-bg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
307

308 309
$table-border-width:          $border-width !default;
$table-border-color:          $gray-300 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
310

311 312
$table-head-bg:               $gray-200 !default;
$table-head-color:            $gray-700 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
313

314 315 316 317 318 319 320 321
$table-dark-bg:               $gray-900 !default;
$table-dark-accent-bg:        rgba($white, .05) !default;
$table-dark-hover-bg:         rgba($white, .075) !default;
$table-dark-border-color:     lighten($gray-900, 7.5%) !default;
$table-dark-color:            $body-bg !default;


// Buttons + Forms
Dipesh Bathaja's avatar
Dipesh Bathaja committed
322
//
323
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
324

325 326 327
$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
$input-btn-line-height:       $line-height-base !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
328

329 330 331
$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
332

333 334 335
$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-line-height-sm:    $line-height-sm !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
336

337 338 339
$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-line-height-lg:    $line-height-lg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
340

341
$input-btn-border-width:      $border-width !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
342 343


344 345 346 347 348 349 350 351 352 353 354
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-line-height:             $input-btn-line-height !default;

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-line-height-sm:          $input-btn-line-height-sm !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
355

356 357 358
$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
359

360
$btn-border-width:            $input-btn-border-width !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
361

362 363 364 365 366 367
$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
368

369 370 371
$btn-link-disabled-color:     $gray-600 !default;

$btn-block-spacing-y:         .5rem !default;
372

Dipesh Bathaja's avatar
Dipesh Bathaja committed
373
// Allows for customizing button radius independently from global border radius
374 375 376 377 378
$btn-border-radius:           $border-radius !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-border-radius-sm:        $border-radius-sm !default;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
379 380 381 382


// Forms

383 384 385
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-line-height:                     $input-btn-line-height !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
386

387 388 389
$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;
390

391 392 393
$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;
394

395 396
$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;
397

398 399 400 401
$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
402

403 404 405
$input-border-radius:                   $border-radius !default;
$input-border-radius-lg:                $border-radius-lg !default;
$input-border-radius-sm:                $border-radius-sm !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
406

407 408 409 410 411
$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
412

413
$input-placeholder-color:               $gray-600 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
414

415
$input-height-border:                   $input-border-width * 2 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
416

417 418
$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
419

420 421
$input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
422

423 424
$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
425

426
$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
427

428
$form-text-margin-top:                  .25rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
429

430 431 432
$form-check-input-gutter:               1.25rem !default;
$form-check-input-margin-y:             .3rem !default;
$form-check-input-margin-x:             .25rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
433

434 435
$form-check-inline-margin-x:            .75rem !default;
$form-check-inline-input-margin-x:      .3125rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
436

437
$form-group-margin-bottom:              1rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
438

439 440 441
$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  $gray-200 !default;
$input-group-addon-border-color:        $input-border-color !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
442

443 444
$custom-control-gutter:                 1.5rem !default;
$custom-control-spacer-x:               1rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
445

446 447 448 449
$custom-control-indicator-size:         1rem !default;
$custom-control-indicator-bg:           $gray-300 !default;
$custom-control-indicator-bg-size:      50% 50% !default;
$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
450

451 452
$custom-control-indicator-disabled-bg:          $gray-200 !default;
$custom-control-label-disabled-color:     $gray-600 !default;
453

454 455 456 457
$custom-control-indicator-checked-color:        $component-active-color !default;
$custom-control-indicator-checked-bg:           $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
$custom-control-indicator-checked-box-shadow:   none !default;
458

459
$custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
460

461 462 463
$custom-control-indicator-active-color:         $component-active-color !default;
$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow:    none !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
464

465 466
$custom-checkbox-indicator-border-radius:       $border-radius !default;
$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
467

468 469 470 471
$custom-checkbox-indicator-indeterminate-bg:    $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
472

473 474
$custom-radio-indicator-border-radius:          50% !default;
$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
475

476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493
$custom-select-padding-y:           .375rem !default;
$custom-select-padding-x:          .75rem !default;
$custom-select-height:              $input-height !default;
$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height:         $input-btn-line-height !default;
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      $gray-600 !default;
$custom-select-bg:                  $white !default;
$custom-select-disabled-bg:         $gray-200 !default;
$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color:     $gray-800 !default;
$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-border-width:        $input-btn-border-width !default;
$custom-select-border-color:        $input-border-color !default;
$custom-select-border-radius:       $border-radius !default;

$custom-select-focus-border-color:  $input-focus-border-color !default;
$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
494

495 496
$custom-select-font-size-sm:        75% !default;
$custom-select-height-sm:           $input-height-sm !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
497

498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518
$custom-select-font-size-lg:        125% !default;
$custom-select-height-lg:           $input-height-lg !default;

$custom-file-height:                $input-height !default;
$custom-file-focus-border-color:    $input-focus-border-color !default;
$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;

$custom-file-padding-y:             $input-btn-padding-y !default;
$custom-file-padding-x:             $input-btn-padding-x !default;
$custom-file-line-height:           $input-btn-line-height !default;
$custom-file-color:                 $input-color !default;
$custom-file-bg:                    $input-bg !default;
$custom-file-border-width:          $input-btn-border-width !default;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$custom-file-button-bg:             $input-group-addon-bg !default;
$custom-file-text: (
  en: "Browse"
) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
519 520


521 522 523 524 525
// Form validation
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
526 527


528 529 530
// Dropdowns
//
// Dropdown menu container and contents.
Dipesh Bathaja's avatar
Dipesh Bathaja committed
531

532 533 534 535 536 537 538 539 540
$dropdown-min-width:                10rem !default;
$dropdown-padding-y:                .5rem !default;
$dropdown-spacer:                   .125rem !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black, .15) !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-divider-bg:               $gray-200 !default;
$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
541

542 543 544
$dropdown-link-color:               $gray-900 !default;
$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
$dropdown-link-hover-bg:            $gray-100 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
545

546 547
$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
548

549
$dropdown-link-disabled-color:      $gray-600 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
550

551 552
$dropdown-item-padding-y:           .25rem !default;
$dropdown-item-padding-x:           1.5rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
553

554 555 556 557
$dropdown-header-color:             $gray-600 !default;


// Z-index master list
Dipesh Bathaja's avatar
Dipesh Bathaja committed
558
//
559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-popover:                    1060 !default;
$zindex-tooltip:                    1070 !default;

// Navs

$nav-link-padding-y:                .5rem !default;
$nav-link-padding-x:                1rem !default;
$nav-link-disabled-color:           $gray-600 !default;

$nav-tabs-border-color:             $gray-300 !default;
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;

$nav-pills-border-radius:           $border-radius !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

// Navbar
Dipesh Bathaja's avatar
Dipesh Bathaja committed
589

590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633
$navbar-padding-y:                  ($spacer / 2) !default;
$navbar-padding-x:                  $spacer !default;

$navbar-nav-link-padding-x:         .5rem !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;

$navbar-toggler-padding-y:          .25rem !default;
$navbar-toggler-padding-x:          .75rem !default;
$navbar-toggler-font-size:          $font-size-lg !default;
$navbar-toggler-border-radius:      $btn-border-radius !default;

$navbar-dark-color:                 rgba($white, .5) !default;
$navbar-dark-hover-color:           rgba($white, .75) !default;
$navbar-dark-active-color:          $white !default;
$navbar-dark-disabled-color:        rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color:  rgba($white, .1) !default;

$navbar-light-color:                rgba($black, .5) !default;
$navbar-light-hover-color:          rgba($black, .7) !default;
$navbar-light-active-color:         rgba($black, .9) !default;
$navbar-light-disabled-color:       rgba($black, .3) !default;
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;

// Pagination

$pagination-padding-y:              .5rem !default;
$pagination-padding-x:              .75rem !default;
$pagination-padding-y-sm:           .25rem !default;
$pagination-padding-x-sm:           .5rem !default;
$pagination-padding-y-lg:           .75rem !default;
$pagination-padding-x-lg:           1.5rem !default;
$pagination-line-height:            1.25 !default;

$pagination-color:                  $link-color !default;
$pagination-bg:                     $white !default;
$pagination-border-width:           $border-width !default;
$pagination-border-color:           $gray-300 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
634

635
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
636

637 638 639
$pagination-hover-color:            $link-hover-color !default;
$pagination-hover-bg:               $gray-200 !default;
$pagination-hover-border-color:     $gray-300 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
640

641 642 643 644 645 646 647 648 649 650 651 652 653
$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              $component-active-bg !default;
$pagination-active-border-color:    $pagination-active-bg !default;

$pagination-disabled-color:         $gray-600 !default;
$pagination-disabled-bg:            $white !default;
$pagination-disabled-border-color:  $gray-300 !default;


// Jumbotron

$jumbotron-padding:                 2rem !default;
$jumbotron-bg:                      $gray-200 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
654 655 656 657


// Cards

658 659 660 661 662 663 664 665
$card-spacer-y:                     .75rem !default;
$card-spacer-x:                     1.25rem !default;
$card-border-width:                 $border-width !default;
$card-border-radius:                $border-radius !default;
$card-border-color:                 rgba($black, .125) !default;
$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg:                       rgba($black, .03) !default;
$card-bg:                           $white !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
666

667
$card-img-overlay-padding:          1.25rem !default;
668

669 670
$card-group-margin:                 ($grid-gutter-width / 2) !default;
$card-deck-margin:                  $card-group-margin !default;
671

672 673 674
$card-columns-count:                3 !default;
$card-columns-gap:                  1.25rem !default;
$card-columns-margin:               $card-spacer-y !default;
675

Dipesh Bathaja's avatar
Dipesh Bathaja committed
676 677 678

// Tooltips

679
$tooltip-font-size:           $font-size-sm !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
680
$tooltip-max-width:           200px !default;
681 682 683
$tooltip-color:               $white !default;
$tooltip-bg:                  $black !default;
$tooltip-border-radius:        $border-radius !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
684
$tooltip-opacity:             .9 !default;
685 686 687
$tooltip-padding-y:           .25rem !default;
$tooltip-padding-x:           .5rem !default;
$tooltip-margin:              0 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
688

689 690
$tooltip-arrow-width:         .8rem !default;
$tooltip-arrow-height:        .4rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
691 692 693 694 695
$tooltip-arrow-color:         $tooltip-bg !default;


// Popovers

696 697 698 699 700 701 702
$popover-font-size:                 $font-size-sm !default;
$popover-bg:                        $white !default;
$popover-max-width:                 276px !default;
$popover-border-width:              $border-width !default;
$popover-border-color:              rgba($black, .2) !default;
$popover-border-radius:             $border-radius-lg !default;
$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
703

704 705 706 707
$popover-header-bg:                 darken($popover-bg, 3%) !default;
$popover-header-color:              $headings-color !default;
$popover-header-padding-y:          .5rem !default;
$popover-header-padding-x:          .75rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
708

709 710 711
$popover-body-color:                $body-color !default;
$popover-body-padding-y:            $popover-header-padding-y !default;
$popover-body-padding-x:            $popover-header-padding-x !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
712

713 714 715
$popover-arrow-width:               1rem !default;
$popover-arrow-height:              .5rem !default;
$popover-arrow-color:               $popover-bg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
716

717
$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
718 719


720
// Badges
Dipesh Bathaja's avatar
Dipesh Bathaja committed
721

722 723 724 725 726
$badge-font-size:                   75% !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-padding-y:                   .25em !default;
$badge-padding-x:                   .4em !default;
$badge-border-radius:               $border-radius !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
727

728
$badge-pill-padding-x:              .6em !default;
729 730
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
731 732
$badge-pill-border-radius:          10rem !default;

Dipesh Bathaja's avatar
Dipesh Bathaja committed
733 734 735 736

// Modals

// Padding applied to the modal body
737
$modal-inner-padding:         1rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
738

739 740
$modal-dialog-margin:         .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
741

742
$modal-title-line-height:           $line-height-base !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
743

744 745
$modal-content-bg:               $white !default;
$modal-content-border-color:     rgba($black, .2) !default;
746
$modal-content-border-width:     $border-width !default;
747 748
$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
749

750
$modal-backdrop-bg:           $black !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
751
$modal-backdrop-opacity:      .5 !default;
752
$modal-header-border-color:   $gray-200 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
753
$modal-footer-border-color:   $modal-header-border-color !default;
754 755
$modal-header-border-width:   $modal-content-border-width !default;
$modal-footer-border-width:   $modal-header-border-width !default;
756 757 758 759 760
$modal-header-padding:        1rem !default;

$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
761

762
$modal-transition:                  transform .3s ease-out !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
763 764 765 766 767 768


// Alerts
//
// Define alert colors, border radius, and padding.

769 770 771 772 773 774
$alert-padding-y:                   .75rem !default;
$alert-padding-x:                   1.25rem !default;
$alert-margin-bottom:               1rem !default;
$alert-border-radius:               $border-radius !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-border-width:                $border-width !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
775

776 777 778
$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
$alert-color-level:                 6 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
779 780 781 782


// Progress bars

783 784 785 786 787 788 789 790 791
$progress-height:                   1rem !default;
$progress-font-size:                ($font-size-base * .75) !default;
$progress-bg:                       $gray-200 !default;
$progress-border-radius:            $border-radius !default;
$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color:                $white !default;
$progress-bar-bg:                   theme-color("primary") !default;
$progress-bar-animation-timing:     1s linear infinite !default;
$progress-bar-transition:           width .6s ease !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
792 793 794

// List group

795 796 797 798
$list-group-bg:                     $white !default;
$list-group-border-color:           rgba($black, .125) !default;
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
799

800 801
$list-group-item-padding-y:         .75rem !default;
$list-group-item-padding-x:         1.25rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
802

803 804 805 806
$list-group-hover-bg:               $gray-100 !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
807

808 809
$list-group-disabled-color:         $gray-600 !default;
$list-group-disabled-bg:            $list-group-bg !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
810

811 812 813 814 815
$list-group-action-color:           $gray-700 !default;
$list-group-action-hover-color:     $list-group-action-color !default;

$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $gray-200 !default;
816

Dipesh Bathaja's avatar
Dipesh Bathaja committed
817 818 819

// Image thumbnails

820 821 822 823 824 825
$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
$thumbnail-border-color:            $gray-300 !default;
$thumbnail-border-radius:           $border-radius !default;
$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
826 827 828 829


// Figures

830 831
$figure-caption-font-size:          90% !default;
$figure-caption-color:              $gray-600 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
832 833 834 835


// Breadcrumbs

836 837 838
$breadcrumb-padding-y:              .75rem !default;
$breadcrumb-padding-x:              1rem !default;
$breadcrumb-item-padding:           .5rem !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
839

840
$breadcrumb-margin-bottom:          1rem !default;
841

842 843 844 845
$breadcrumb-bg:                     $gray-200 !default;
$breadcrumb-divider-color:          $gray-600 !default;
$breadcrumb-active-color:           $gray-600 !default;
$breadcrumb-divider:                "/" !default;
846 847


Dipesh Bathaja's avatar
Dipesh Bathaja committed
848 849
// Carousel

850 851 852
$carousel-control-color:            $white !default;
$carousel-control-width:            15% !default;
$carousel-control-opacity:          .5 !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
853

854 855 856 857
$carousel-indicator-width:          30px !default;
$carousel-indicator-height:         3px !default;
$carousel-indicator-spacer:         3px !default;
$carousel-indicator-active-bg:      $white !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
858

859 860
$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;
861

862
$carousel-control-icon-width:       20px !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
863

864 865
$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
866

867
$carousel-transition:               transform .6s ease !default;
868

Dipesh Bathaja's avatar
Dipesh Bathaja committed
869 870 871

// Close

872 873 874 875
$close-font-size:                   $font-size-base * 1.5 !default;
$close-font-weight:                 $font-weight-bold !default;
$close-color:                       $black !default;
$close-text-shadow:                 0 1px 0 $white !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
876 877 878

// Code

879 880 881 882 883 884 885 886 887 888 889
$code-font-size:                    87.5% !default;
$code-color:                        $pink !default;

$kbd-padding-y:                     .2rem !default;
$kbd-padding-x:                     .4rem !default;
$kbd-font-size:                     $code-font-size !default;
$kbd-color:                         $white !default;
$kbd-bg:                            $gray-900 !default;

$pre-color:                         $gray-900 !default;
$pre-scrollable-max-height:         340px !default;
Dipesh Bathaja's avatar
Dipesh Bathaja committed
890 891


892 893 894
// Printing
$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;