source: spip-zone/_themes_/spipr/v2/patisson/css/_variables.scss @ 119784

Last change on this file since 119784 was 119784, checked in by cedric@…, 3 months ago

code color

  • Property svn:executable set to *
File size: 46.8 KB
Line 
1// Variables
2//
3// Variables should follow the `$component-state-property-size` formula for
4// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
5
6// Color system
7
8$white:    #fff !default;
9$gray-100: #f3f3f3 !default;
10$gray-200: #e9e9e9 !default;
11$gray-300: #e2e2e2 !default;
12$gray-450: #dddddd !default;
13$gray-400: #cccccc !default;
14$gray-500: #999999 !default;
15$gray-600: #838383 !default;
16$gray-700: #666666 !default;
17$gray-800: #444444 !default;
18$gray-850: #333333 !default;
19$gray-900: #232323 !default;
20$black:    #111 !default;
21
22$grays: () !default;
23// stylelint-disable-next-line scss/dollar-variable-default
24$grays: map-merge(
25  (
26    "100": $gray-100,
27    "200": $gray-200,
28    "300": $gray-300,
29    "400": $gray-400,
30    "500": $gray-500,
31    "600": $gray-600,
32    "700": $gray-700,
33    "800": $gray-800,
34    "900": $gray-900
35  ),
36  $grays
37);
38
39$blue:    #007bff !default;
40$indigo:  #6610f2 !default;
41$purple:  #9f4cc1 !default;
42$pink:    #d9398e !default;
43$red:     #900 !default;
44$orange:  #e7503e !default;
45$yellow:  #ffc107 !default;
46$green:   #28a745 !default;
47$teal:    #20c997 !default;
48$cyan:    #17a2b8 !default;
49
50$colors: () !default;
51// stylelint-disable-next-line scss/dollar-variable-default
52$colors: map-merge(
53  (
54    "blue":       $blue,
55    "indigo":     $indigo,
56    "purple":     $purple,
57    "pink":       $pink,
58    "red":        $red,
59    "orange":     $orange,
60    "yellow":     $yellow,
61    "green":      $green,
62    "teal":       $teal,
63    "cyan":       $cyan,
64    "white":      $white,
65    "gray":       $gray-600,
66    "gray-dark":  $gray-800
67  ),
68  $colors
69);
70
71$primary:       $orange !default;
72$secondary:     $gray-600 !default;
73$success:       #5cb85c !default;
74$info:          #5bc0de !default;
75$warning:       #f0e144 !default;
76$danger:        #d9534f !default;
77$light:         $gray-100 !default;
78$dark:          $gray-800 !default;
79
80$theme-colors: () !default;
81// stylelint-disable-next-line scss/dollar-variable-default
82$theme-colors: map-merge(
83  (
84    "primary":    $primary,
85    "secondary":  $secondary,
86    "success":    $success,
87    "info":       $info,
88    "warning":    $warning,
89    "danger":     $danger,
90    "light":      $light,
91    "dark":       $dark
92  ),
93  $theme-colors
94);
95
96// Set a specific jump point for requesting color jumps
97$theme-color-interval:      8% !default;
98
99// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
100$yiq-contrasted-threshold:  150 !default;
101
102// Customize the light and dark text colors for use in our YIQ color contrast function.
103$yiq-text-dark:             $gray-900 !default;
104$yiq-text-light:            $white !default;
105
106
107// Options
108//
109// Quickly modify global styling by enabling or disabling optional features.
110
111$enable-caret:                                true !default;
112$enable-rounded:                              false !default;
113$enable-shadows:                              false !default;
114$enable-gradients:                            false !default;
115$enable-transitions:                          true !default;
116$enable-prefers-reduced-motion-media-query:   true !default;
117$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
118$enable-grid-classes:                         true !default;
119$enable-pointer-cursor-for-buttons:           true !default;
120$enable-print-styles:                         true !default;
121$enable-responsive-font-sizes:                false !default;
122$enable-validation-icons:                     true !default;
123$enable-deprecation-messages:                 true !default;
124
125
126// Spacing
127//
128// Control the default styling of most Bootstrap elements by modifying these
129// variables. Mostly focused on spacing.
130// You can add more entries to the $spacers map, should you need more variation.
131
132$spacer: 1.65rem !default;
133$spacers: () !default;
134// stylelint-disable-next-line scss/dollar-variable-default
135$spacers: map-merge(
136  (
137    0: 0,
138    1: ($spacer * .25),
139    2: ($spacer * .5),
140    3: $spacer,
141    4: ($spacer * 1.5),
142    5: ($spacer * 3)
143  ),
144  $spacers
145);
146
147// This variable affects the `.h-*` and `.w-*` classes.
148$sizes: () !default;
149// stylelint-disable-next-line scss/dollar-variable-default
150$sizes: map-merge(
151  (
152    25: 25%,
153    50: 50%,
154    75: 75%,
155    100: 100%,
156    auto: auto
157  ),
158  $sizes
159);
160
161
162// Body
163//
164// Settings for the `<body>` element.
165
166$body-bg:                   $white !default;
167$body-color:                $gray-800 !default;
168
169
170// Links
171//
172// Style anchor elements.
173
174$link-color:                              $black !default;
175$link-decoration:                         none !default;
176$link-hover-color:                        theme-color("primary") !default;
177$link-hover-decoration:                   none !default;
178// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
179$emphasized-link-hover-darken-percentage: 15% !default;
180
181// Paragraphs
182//
183// Style p element.
184
185$paragraph-margin-bottom:   $spacer !default;
186
187
188// Grid breakpoints
189//
190// Define the minimum dimensions at which your layout will change,
191// adapting to different screen sizes, for use in media queries.
192
193$grid-breakpoints: (
194  xs: 0,
195  sm: 576px,
196  md: 768px,
197  lg: 992px,
198  xl: 1200px
199) !default;
200
201@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
202@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
203
204
205// Grid containers
206//
207// Define the maximum width of `.container` for different screen sizes.
208
209$container-max-widths: (
210  sm: 540px,
211  md: 750px,
212  lg: 960px,
213  xl: 1140px
214) !default;
215
216@include _assert-ascending($container-max-widths, "$container-max-widths");
217
218
219// Grid columns
220//
221// Set the number of columns and specify the width of the gutters.
222
223$grid-columns:                12 !default;
224$grid-gutter-width:           30px !default;
225
226
227// Components
228//
229// Define common padding and border radius sizes and more.
230
231$line-height-lg:              1.65 !default;
232$line-height-sm:              1.65 !default;
233
234$border-width:                1px !default;
235$border-color:                $gray-300 !default;
236
237$border-radius:               .25rem !default;
238$border-radius-lg:            .3rem !default;
239$border-radius-sm:            .2rem !default;
240
241$rounded-pill:                50rem !default;
242
243$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
244$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
245$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
246
247$component-active-color:      $white !default;
248$component-active-bg:         theme-color("primary") !default;
249
250$caret-width:                 .3em !default;
251$caret-vertical-align:        $caret-width * .85 !default;
252$caret-spacing:               $caret-width * .85 !default;
253
254$transition-base:             all .2s ease-in-out !default;
255$transition-fade:             opacity .15s linear !default;
256$transition-collapse:         height .35s ease !default;
257
258$embed-responsive-aspect-ratios: () !default;
259// stylelint-disable-next-line scss/dollar-variable-default
260$embed-responsive-aspect-ratios: join(
261  (
262    (21 9),
263    (16 9),
264    (4 3),
265    (1 1),
266  ),
267  $embed-responsive-aspect-ratios
268);
269
270// Typography
271//
272// Font, line-height, and color for body text, headings, and more.
273
274// stylelint-disable value-keyword-case
275
276$font-family-sans-serif:      "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
277$font-family-serif:           Georgia, Cambria, "Times New Roman", Times, serif !default;
278$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace !default;
279$font-family-base:            $font-family-serif !default;
280$font-family-alt:             $font-family-sans-serif !default;
281
282// stylelint-enable value-keyword-case
283
284$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
285$font-size-lg:                $font-size-base * 1.25 !default;
286$font-size-sm:                $font-size-base * .875 !default;
287
288$font-weight-lighter:         lighter !default;
289$font-weight-light:           300 !default;
290$font-weight-normal:          400 !default;
291$font-weight-bold:            700 !default;
292$font-weight-bolder:          bolder !default;
293
294$font-weight-base:            $font-weight-normal !default;
295$line-height-base:            1.5 !default;
296
297$h1-font-size:                $font-size-base * 2 !default;
298$h2-font-size:                $font-size-base * 1.5 !default;
299$h3-font-size:                $font-size-base * 1.25 !default;
300$h4-font-size:                $font-size-base * 1.1 !default;
301$h5-font-size:                $font-size-base !default;
302$h6-font-size:                $font-size-base !default;
303
304$headings-margin-bottom:      $spacer / 2 !default;
305$headings-font-family:       "Cormorant Garamond", $font-family-serif !default;
306$headings-font-weight:        300 !default;
307$headings-line-height:        1.1 !default;
308$headings-color:              null !default;
309
310$display1-size:               6rem !default;
311$display2-size:               5.5rem !default;
312$display3-size:               4.5rem !default;
313$display4-size:               3.5rem !default;
314
315$display1-weight:             300 !default;
316$display2-weight:             300 !default;
317$display3-weight:             300 !default;
318$display4-weight:             300 !default;
319$display-line-height:         $headings-line-height !default;
320
321$lead-font-size:              $font-size-base * 1.25 !default;
322$lead-font-weight:            300 !default;
323
324$small-font-size:             80% !default;
325
326$text-muted:                  $gray-600 !default;
327
328$blockquote-small-color:      $gray-600 !default;
329$blockquote-small-font-size:  $small-font-size !default;
330$blockquote-font-size:        $font-size-base !default;
331
332$hr-border-color:             rgba($black, .1) !default;
333$hr-border-width:             $border-width !default;
334
335$mark-padding:                .2em !default;
336
337$dt-font-weight:              $font-weight-bold !default;
338
339$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
340$nested-kbd-font-weight:      $font-weight-bold !default;
341
342$list-inline-padding:         .5rem !default;
343
344$mark-bg:                     #fcf8e3 !default;
345
346$hr-margin-y:                 $spacer !default;
347
348
349// Tables
350//
351// Customizes the `.table` component with basic values, each used across all table variations.
352
353$table-cell-padding:          .75rem !default;
354$table-cell-padding-sm:       .3rem !default;
355
356$table-color:                 $body-color !default;
357$table-bg:                    null !default;
358$table-accent-bg:             rgba($black, .05) !default;
359$table-hover-color:           $table-color !default;
360$table-hover-bg:              rgba($black, .075) !default;
361$table-active-bg:             $table-hover-bg !default;
362
363$table-border-width:          $border-width !default;
364$table-border-color:          $border-color !default;
365
366$table-head-bg:               $gray-200 !default;
367$table-head-color:            $gray-700 !default;
368
369$table-dark-color:            $white !default;
370$table-dark-bg:               $gray-800 !default;
371$table-dark-accent-bg:        rgba($white, .05) !default;
372$table-dark-hover-color:      $table-dark-color !default;
373$table-dark-hover-bg:         rgba($white, .075) !default;
374$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
375$table-dark-color:            $white !default;
376
377$table-striped-order:         odd !default;
378
379$table-caption-color:         $text-muted !default;
380
381$table-bg-level:              -9 !default;
382$table-border-level:          -6 !default;
383
384
385// Buttons + Forms
386//
387// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
388
389$input-btn-padding-y:         .375rem !default;
390$input-btn-padding-x:         .75rem !default;
391$input-btn-font-family:       null !default;
392$input-btn-font-size:         $font-size-base !default;
393$input-btn-line-height:       $line-height-base !default;
394
395$input-btn-focus-width:       .2rem !default;
396$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
397$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
398
399$input-btn-padding-y-sm:      .25rem !default;
400$input-btn-padding-x-sm:      .5rem !default;
401$input-btn-font-size-sm:      $font-size-sm !default;
402$input-btn-line-height-sm:    $line-height-sm !default;
403
404$input-btn-padding-y-lg:      .5rem !default;
405$input-btn-padding-x-lg:      1rem !default;
406$input-btn-font-size-lg:      $font-size-lg !default;
407$input-btn-line-height-lg:    $line-height-lg !default;
408
409$input-btn-border-width:      $border-width !default;
410
411
412// Buttons
413//
414// For each of Bootstrap's buttons, define text, background, and border color.
415
416$btn-padding-y:               $input-btn-padding-y !default;
417$btn-padding-x:               $input-btn-padding-x !default;
418$btn-font-family:             $input-btn-font-family !default;
419$btn-font-size:               $input-btn-font-size !default;
420$btn-line-height:             $input-btn-line-height !default;
421
422$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
423$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
424$btn-font-size-sm:            $input-btn-font-size-sm !default;
425$btn-line-height-sm:          $input-btn-line-height-sm !default;
426
427$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
428$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
429$btn-font-size-lg:            $input-btn-font-size-lg !default;
430$btn-line-height-lg:          $input-btn-line-height-lg !default;
431
432$btn-border-width:            $input-btn-border-width !default;
433
434$btn-font-weight:             $font-weight-normal !default;
435$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
436$btn-focus-width:             $input-btn-focus-width !default;
437$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
438$btn-disabled-opacity:        .65 !default;
439$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
440
441$btn-link-disabled-color:     $gray-600 !default;
442
443$btn-block-spacing-y:         .5rem !default;
444
445// Allows for customizing button radius independently from global border radius
446$btn-border-radius:           $border-radius !default;
447$btn-border-radius-lg:        $border-radius-lg !default;
448$btn-border-radius-sm:        $border-radius-sm !default;
449
450$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;
451
452
453// Forms
454
455$label-margin-bottom:                   .5rem !default;
456
457$input-padding-y:                       $input-btn-padding-y !default;
458$input-padding-x:                       $input-btn-padding-x !default;
459$input-font-family:                     $input-btn-font-family !default;
460$input-font-size:                       $input-btn-font-size !default;
461$input-font-weight:                     $font-weight-base !default;
462$input-line-height:                     $input-btn-line-height !default;
463
464$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
465$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
466$input-font-size-sm:                    $input-btn-font-size-sm !default;
467$input-line-height-sm:                  $input-btn-line-height-sm !default;
468
469$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
470$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
471$input-font-size-lg:                    $input-btn-font-size-lg !default;
472$input-line-height-lg:                  $input-btn-line-height-lg !default;
473
474$input-bg:                              $white !default;
475$input-disabled-bg:                     $gray-200 !default;
476
477$input-color:                           $gray-700 !default;
478$input-border-color:                    $gray-400 !default;
479$input-border-width:                    $input-btn-border-width !default;
480$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
481
482$input-border-radius:                   $border-radius !default;
483$input-border-radius-lg:                $border-radius-lg !default;
484$input-border-radius-sm:                $border-radius-sm !default;
485
486$input-focus-bg:                        $input-bg !default;
487$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
488$input-focus-color:                     $input-color !default;
489$input-focus-width:                     $input-btn-focus-width !default;
490$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
491
492$input-placeholder-color:               $gray-600 !default;
493$input-plaintext-color:                 $body-color !default;
494
495$input-height-border:                   $input-border-width * 2 !default;
496
497$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
498$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
499$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
500
501$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
502$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
503$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
504
505$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
506
507$form-text-margin-top:                  .1875rem !default;
508
509$form-check-input-gutter:               1.25rem !default;
510$form-check-input-margin-y:             .3rem !default;
511$form-check-input-margin-x:             .25rem !default;
512
513$form-check-inline-margin-x:            .75rem !default;
514$form-check-inline-input-margin-x:      .3125rem !default;
515
516$form-grid-gutter-width:                10px !default;
517$form-group-margin-bottom:              1.5rem !default;
518
519$input-group-addon-color:               $input-color !default;
520$input-group-addon-bg:                  $gray-200 !default;
521$input-group-addon-border-color:        $input-border-color !default;
522
523$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
524
525$custom-control-gutter:                 .5rem !default;
526$custom-control-spacer-x:               1rem !default;
527
528$custom-control-indicator-size:         1rem !default;
529$custom-control-indicator-bg:           $input-bg !default;
530
531$custom-control-indicator-bg-size:      50% 50% !default;
532$custom-control-indicator-box-shadow:   $input-box-shadow !default;
533$custom-control-indicator-border-color: $gray-500 !default;
534$custom-control-indicator-border-width: $input-border-width !default;
535
536$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
537$custom-control-label-disabled-color:           $gray-600 !default;
538
539$custom-control-indicator-checked-color:        $component-active-color !default;
540$custom-control-indicator-checked-bg:           $component-active-bg !default;
541$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
542$custom-control-indicator-checked-box-shadow:   none !default;
543$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
544
545$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
546$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
547
548$custom-control-indicator-active-color:         $component-active-color !default;
549$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
550$custom-control-indicator-active-box-shadow:    none !default;
551$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
552
553$custom-checkbox-indicator-border-radius:       $border-radius !default;
554$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,%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;
555
556$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
557$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
558$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,%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;
559$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
560$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
561
562$custom-radio-indicator-border-radius:          50% !default;
563$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%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;
564
565$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
566$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
567$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
568
569$custom-select-padding-y:           $input-padding-y !default;
570$custom-select-padding-x:           $input-padding-x !default;
571$custom-select-font-family:         $input-font-family !default;
572$custom-select-font-size:           $input-font-size !default;
573$custom-select-height:              $input-height !default;
574$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
575$custom-select-font-weight:         $input-font-weight !default;
576$custom-select-line-height:         $input-line-height !default;
577$custom-select-color:               $input-color !default;
578$custom-select-disabled-color:      $gray-600 !default;
579$custom-select-bg:                  $input-bg !default;
580$custom-select-disabled-bg:         $gray-200 !default;
581$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
582$custom-select-indicator-color:     $gray-800 !default;
583$custom-select-indicator:           str-replace(url("data:image/svg+xml,%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;
584$custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
585
586$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
587$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
588$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
589
590$custom-select-border-width:        $input-border-width !default;
591$custom-select-border-color:        $input-border-color !default;
592$custom-select-border-radius:       $border-radius !default;
593$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
594
595$custom-select-focus-border-color:  $input-focus-border-color !default;
596$custom-select-focus-width:         $input-focus-width !default;
597$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
598
599$custom-select-padding-y-sm:        $input-padding-y-sm !default;
600$custom-select-padding-x-sm:        $input-padding-x-sm !default;
601$custom-select-font-size-sm:        $input-font-size-sm !default;
602$custom-select-height-sm:           $input-height-sm !default;
603
604$custom-select-padding-y-lg:        $input-padding-y-lg !default;
605$custom-select-padding-x-lg:        $input-padding-x-lg !default;
606$custom-select-font-size-lg:        $input-font-size-lg !default;
607$custom-select-height-lg:           $input-height-lg !default;
608
609$custom-range-track-width:          100% !default;
610$custom-range-track-height:         .5rem !default;
611$custom-range-track-cursor:         pointer !default;
612$custom-range-track-bg:             $gray-300 !default;
613$custom-range-track-border-radius:  1rem !default;
614$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
615
616$custom-range-thumb-width:                   1rem !default;
617$custom-range-thumb-height:                  $custom-range-thumb-width !default;
618$custom-range-thumb-bg:                      $component-active-bg !default;
619$custom-range-thumb-border:                  0 !default;
620$custom-range-thumb-border-radius:           1rem !default;
621$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
622$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
623$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
624$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
625$custom-range-thumb-disabled-bg:             $gray-500 !default;
626
627$custom-file-height:                $input-height !default;
628$custom-file-height-inner:          $input-height-inner !default;
629$custom-file-focus-border-color:    $input-focus-border-color !default;
630$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
631$custom-file-disabled-bg:           $input-disabled-bg !default;
632
633$custom-file-padding-y:             $input-padding-y !default;
634$custom-file-padding-x:             $input-padding-x !default;
635$custom-file-line-height:           $input-line-height !default;
636$custom-file-font-family:           $input-font-family !default;
637$custom-file-font-weight:           $input-font-weight !default;
638$custom-file-color:                 $input-color !default;
639$custom-file-bg:                    $input-bg !default;
640$custom-file-border-width:          $input-border-width !default;
641$custom-file-border-color:          $input-border-color !default;
642$custom-file-border-radius:         $input-border-radius !default;
643$custom-file-box-shadow:            $input-box-shadow !default;
644$custom-file-button-color:          $custom-file-color !default;
645$custom-file-button-bg:             $input-group-addon-bg !default;
646$custom-file-text: (
647  en: "Browse"
648) !default;
649
650
651// Form validation
652
653$form-feedback-margin-top:          $form-text-margin-top !default;
654$form-feedback-font-size:           $small-font-size !default;
655$form-feedback-valid-color:         theme-color("success") !default;
656$form-feedback-invalid-color:       theme-color("danger") !default;
657
658$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
659$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
660$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
661$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
662
663$form-validation-states: () !default;
664// stylelint-disable-next-line scss/dollar-variable-default
665$form-validation-states: map-merge(
666  (
667    "valid": (
668      "color": $form-feedback-valid-color,
669      "icon": $form-feedback-icon-valid
670    ),
671    "invalid": (
672      "color": $form-feedback-invalid-color,
673      "icon": $form-feedback-icon-invalid
674    ),
675  ),
676  $form-validation-states
677);
678
679// Z-index master list
680//
681// Warning: Avoid customizing these values. They're used for a bird's eye view
682// of components dependent on the z-axis and are designed to all work together.
683
684$zindex-dropdown:                   1000 !default;
685$zindex-sticky:                     1020 !default;
686$zindex-fixed:                      1030 !default;
687$zindex-modal-backdrop:             1040 !default;
688$zindex-modal:                      1050 !default;
689$zindex-popover:                    1060 !default;
690$zindex-tooltip:                    1070 !default;
691
692
693// Navs
694
695$nav-link-padding-y:                .5rem !default;
696$nav-link-padding-x:                1rem !default;
697$nav-link-disabled-color:           $gray-600 !default;
698
699$nav-tabs-border-color:             $gray-300 !default;
700$nav-tabs-border-width:             $border-width !default;
701$nav-tabs-border-radius:            $border-radius !default;
702$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
703$nav-tabs-link-active-color:        $gray-700 !default;
704$nav-tabs-link-active-bg:           $body-bg !default;
705$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
706
707$nav-pills-border-radius:           $border-radius !default;
708$nav-pills-link-active-color:       $component-active-color !default;
709$nav-pills-link-active-bg:          $component-active-bg !default;
710
711$nav-divider-color:                 $gray-200 !default;
712$nav-divider-margin-y:              $spacer / 2 !default;
713
714
715// Navbar
716
717$navbar-padding-y:                  0.75rem !default;
718$navbar-padding-x:                  0 !default;
719
720$navbar-nav-link-padding-x:         1rem !default;
721
722$navbar-brand-font-size:            $font-size-lg !default;
723// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
724$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
725$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
726$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
727
728$navbar-toggler-padding-y:          .25rem !default;
729$navbar-toggler-padding-x:          .75rem !default;
730$navbar-toggler-font-size:          $font-size-lg !default;
731$navbar-toggler-border-radius:      $btn-border-radius !default;
732
733$navbar-dark-color:                 rgba($white, .5) !default;
734$navbar-dark-hover-color:           rgba($white, .75) !default;
735$navbar-dark-active-color:          $white !default;
736$navbar-dark-disabled-color:        rgba($white, .25) !default;
737$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%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;
738$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
739
740$navbar-light-color:                rgba($black, .5) !default;
741$navbar-light-hover-color:          rgba($black, .7) !default;
742$navbar-light-active-color:         rgba($black, .9) !default;
743$navbar-light-disabled-color:       rgba($black, .3) !default;
744$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%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;
745$navbar-light-toggler-border-color: rgba($black, .1) !default;
746
747$navbar-light-brand-color:                $navbar-light-active-color !default;
748$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
749$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
750$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
751
752
753// Dropdowns
754//
755// Dropdown menu container and contents.
756
757$dropdown-min-width:                10rem !default;
758$dropdown-padding-y:                .5rem !default;
759$dropdown-spacer:                   .125rem !default;
760$dropdown-font-size:                $font-size-base !default;
761$dropdown-color:                    $body-color !default;
762$dropdown-bg:                       $white !default;
763$dropdown-border-color:             rgba($black, .15) !default;
764$dropdown-border-radius:            $border-radius !default;
765$dropdown-border-width:             $border-width !default;
766$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
767$dropdown-divider-bg:               $gray-200 !default;
768$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
769$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
770
771$dropdown-link-color:               $gray-900 !default;
772$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
773$dropdown-link-hover-bg:            $gray-100 !default;
774
775$dropdown-link-active-color:        $component-active-color !default;
776$dropdown-link-active-bg:           $component-active-bg !default;
777
778$dropdown-link-disabled-color:      $gray-600 !default;
779
780$dropdown-item-padding-y:           .25rem !default;
781$dropdown-item-padding-x:           1.5rem !default;
782
783$dropdown-header-color:             $gray-600 !default;
784
785
786// Pagination
787
788$pagination-padding-y:              .5rem !default;
789$pagination-padding-x:              .75rem !default;
790$pagination-padding-y-sm:           .25rem !default;
791$pagination-padding-x-sm:           .5rem !default;
792$pagination-padding-y-lg:           .75rem !default;
793$pagination-padding-x-lg:           1.5rem !default;
794$pagination-line-height:            1.25 !default;
795
796$pagination-color:                  $link-color !default;
797$pagination-bg:                     $white !default;
798$pagination-border-width:           $border-width !default;
799$pagination-border-color:           $gray-300 !default;
800
801$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
802$pagination-focus-outline:          0 !default;
803
804$pagination-hover-color:            $link-hover-color !default;
805$pagination-hover-bg:               $gray-200 !default;
806$pagination-hover-border-color:     $gray-300 !default;
807
808$pagination-active-color:           $component-active-color !default;
809$pagination-active-bg:              $component-active-bg !default;
810$pagination-active-border-color:    $pagination-active-bg !default;
811
812$pagination-disabled-color:         $gray-600 !default;
813$pagination-disabled-bg:            $white !default;
814$pagination-disabled-border-color:  $gray-300 !default;
815
816
817// Jumbotron
818
819$jumbotron-padding:                 2rem !default;
820$jumbotron-color:                   null !default;
821$jumbotron-bg:                      $gray-200 !default;
822
823
824// Cards
825
826$card-spacer-y:                     .75rem !default;
827$card-spacer-x:                     1.25rem !default;
828$card-border-width:                 $border-width !default;
829$card-border-radius:                $border-radius !default;
830$card-border-color:                 rgba($black, .125) !default;
831$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
832$card-cap-bg:                       rgba($black, .03) !default;
833$card-cap-color:                    null !default;
834$card-color:                        null !default;
835$card-bg:                           $white !default;
836
837$card-img-overlay-padding:          1.25rem !default;
838
839$card-group-margin:                 $grid-gutter-width / 2 !default;
840$card-deck-margin:                  $card-group-margin !default;
841
842$card-columns-count:                3 !default;
843$card-columns-gap:                  1.25rem !default;
844$card-columns-margin:               $card-spacer-y !default;
845
846
847// Tooltips
848
849$tooltip-font-size:                 $font-size-sm !default;
850$tooltip-max-width:                 200px !default;
851$tooltip-color:                     $white !default;
852$tooltip-bg:                        $black !default;
853$tooltip-border-radius:             $border-radius !default;
854$tooltip-opacity:                   .9 !default;
855$tooltip-padding-y:                 .25rem !default;
856$tooltip-padding-x:                 .5rem !default;
857$tooltip-margin:                    0 !default;
858
859$tooltip-arrow-width:               .8rem !default;
860$tooltip-arrow-height:              .4rem !default;
861$tooltip-arrow-color:               $tooltip-bg !default;
862
863// Form tooltips must come after regular tooltips
864$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
865$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
866$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
867$form-feedback-tooltip-line-height:   $line-height-base !default;
868$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
869$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
870
871
872// Popovers
873
874$popover-font-size:                 $font-size-sm !default;
875$popover-bg:                        $white !default;
876$popover-max-width:                 276px !default;
877$popover-border-width:              $border-width !default;
878$popover-border-color:              rgba($black, .2) !default;
879$popover-border-radius:             $border-radius-lg !default;
880$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
881
882$popover-header-bg:                 darken($popover-bg, 3%) !default;
883$popover-header-color:              $headings-color !default;
884$popover-header-padding-y:          .5rem !default;
885$popover-header-padding-x:          .75rem !default;
886
887$popover-body-color:                $body-color !default;
888$popover-body-padding-y:            $popover-header-padding-y !default;
889$popover-body-padding-x:            $popover-header-padding-x !default;
890
891$popover-arrow-width:               1rem !default;
892$popover-arrow-height:              .5rem !default;
893$popover-arrow-color:               $popover-bg !default;
894
895$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
896
897
898// Toasts
899
900$toast-max-width:                   350px !default;
901$toast-padding-x:                   .75rem !default;
902$toast-padding-y:                   .25rem !default;
903$toast-font-size:                   .875rem !default;
904$toast-color:                       null !default;
905$toast-background-color:            rgba($white, .85) !default;
906$toast-border-width:                1px !default;
907$toast-border-color:                rgba(0, 0, 0, .1) !default;
908$toast-border-radius:               .25rem !default;
909$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
910
911$toast-header-color:                $gray-600 !default;
912$toast-header-background-color:     rgba($white, .85) !default;
913$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
914
915
916// Badges
917
918$badge-font-size:                   75% !default;
919$badge-font-weight:                 $font-weight-bold !default;
920$badge-padding-y:                   .25em !default;
921$badge-padding-x:                   .4em !default;
922$badge-border-radius:               $border-radius !default;
923
924$badge-transition:                  $btn-transition !default;
925$badge-focus-width:                 $input-btn-focus-width !default;
926
927$badge-pill-padding-x:              .6em !default;
928// Use a higher than normal value to ensure completely rounded edges when
929// customizing padding or font-size on labels.
930$badge-pill-border-radius:          10rem !default;
931
932
933// Modals
934
935// Padding applied to the modal body
936$modal-inner-padding:               1rem !default;
937
938$modal-dialog-margin:               .5rem !default;
939$modal-dialog-margin-y-sm-up:       1.75rem !default;
940
941$modal-title-line-height:           $line-height-base !default;
942
943$modal-content-color:               null !default;
944$modal-content-bg:                  $white !default;
945$modal-content-border-color:        rgba($black, .2) !default;
946$modal-content-border-width:        $border-width !default;
947$modal-content-border-radius:       $border-radius-lg !default;
948$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
949$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
950
951$modal-backdrop-bg:                 $black !default;
952$modal-backdrop-opacity:            .5 !default;
953$modal-header-border-color:         $border-color !default;
954$modal-footer-border-color:         $modal-header-border-color !default;
955$modal-header-border-width:         $modal-content-border-width !default;
956$modal-footer-border-width:         $modal-header-border-width !default;
957$modal-header-padding-y:            1rem !default;
958$modal-header-padding-x:            1rem !default;
959$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
960
961$modal-xl:                          1140px !default;
962$modal-lg:                          800px !default;
963$modal-md:                          500px !default;
964$modal-sm:                          300px !default;
965
966$modal-fade-transform:              translate(0, -50px) !default;
967$modal-show-transform:              none !default;
968$modal-transition:                  transform .3s ease-out !default;
969
970
971// Alerts
972//
973// Define alert colors, border radius, and padding.
974
975$alert-padding-y:                   .75rem !default;
976$alert-padding-x:                   1.25rem !default;
977$alert-margin-bottom:               1rem !default;
978$alert-border-radius:               $border-radius !default;
979$alert-link-font-weight:            $font-weight-bold !default;
980$alert-border-width:                $border-width !default;
981
982$alert-bg-level:                    -10 !default;
983$alert-border-level:                -9 !default;
984$alert-color-level:                 6 !default;
985
986
987// Progress bars
988
989$progress-height:                   1rem !default;
990$progress-font-size:                $font-size-base * .75 !default;
991$progress-bg:                       $gray-200 !default;
992$progress-border-radius:            $border-radius !default;
993$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
994$progress-bar-color:                $white !default;
995$progress-bar-bg:                   theme-color("primary") !default;
996$progress-bar-animation-timing:     1s linear infinite !default;
997$progress-bar-transition:           width .6s ease !default;
998
999
1000// List group
1001
1002$list-group-color:                  null !default;
1003$list-group-bg:                     $white !default;
1004$list-group-border-color:           rgba($black, .125) !default;
1005$list-group-border-width:           $border-width !default;
1006$list-group-border-radius:          $border-radius !default;
1007
1008$list-group-item-padding-y:         .75rem !default;
1009$list-group-item-padding-x:         1.25rem !default;
1010
1011$list-group-hover-bg:               $gray-100 !default;
1012$list-group-active-color:           $component-active-color !default;
1013$list-group-active-bg:              $component-active-bg !default;
1014$list-group-active-border-color:    $list-group-active-bg !default;
1015
1016$list-group-disabled-color:         $gray-600 !default;
1017$list-group-disabled-bg:            $list-group-bg !default;
1018
1019$list-group-action-color:           $gray-700 !default;
1020$list-group-action-hover-color:     $list-group-action-color !default;
1021
1022$list-group-action-active-color:    $body-color !default;
1023$list-group-action-active-bg:       $gray-200 !default;
1024
1025
1026// Image thumbnails
1027
1028$thumbnail-padding:                 .25rem !default;
1029$thumbnail-bg:                      $body-bg !default;
1030$thumbnail-border-width:            $border-width !default;
1031$thumbnail-border-color:            $gray-300 !default;
1032$thumbnail-border-radius:           $border-radius !default;
1033$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
1034
1035
1036// Figures
1037
1038$figure-caption-font-size:          90% !default;
1039$figure-caption-color:              $gray-600 !default;
1040
1041
1042// Breadcrumbs
1043
1044$breadcrumb-padding-y:              .75rem !default;
1045$breadcrumb-padding-x:              1rem !default;
1046$breadcrumb-item-padding:           .5rem !default;
1047
1048$breadcrumb-margin-bottom:          1rem !default;
1049
1050$breadcrumb-bg:                     $gray-200 !default;
1051$breadcrumb-divider-color:          $gray-600 !default;
1052$breadcrumb-active-color:           $gray-600 !default;
1053$breadcrumb-divider:                quote("/") !default;
1054
1055$breadcrumb-border-radius:          $border-radius !default;
1056
1057
1058// Carousel
1059
1060$carousel-control-color:             $white !default;
1061$carousel-control-width:             15% !default;
1062$carousel-control-opacity:           .5 !default;
1063$carousel-control-hover-opacity:     .9 !default;
1064$carousel-control-transition:        opacity .15s ease !default;
1065
1066$carousel-indicator-width:           30px !default;
1067$carousel-indicator-height:          3px !default;
1068$carousel-indicator-hit-area-height: 10px !default;
1069$carousel-indicator-spacer:          3px !default;
1070$carousel-indicator-active-bg:       $white !default;
1071$carousel-indicator-transition:      opacity .6s ease !default;
1072
1073$carousel-caption-width:             70% !default;
1074$carousel-caption-color:             $white !default;
1075
1076$carousel-control-icon-width:        20px !default;
1077
1078$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%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;
1079$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%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;
1080
1081$carousel-transition-duration:       .6s !default;
1082$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1083
1084
1085// Spinners
1086
1087$spinner-width:         2rem !default;
1088$spinner-height:        $spinner-width !default;
1089$spinner-border-width:  .25em !default;
1090
1091$spinner-width-sm:        1rem !default;
1092$spinner-height-sm:       $spinner-width-sm !default;
1093$spinner-border-width-sm: .2em !default;
1094
1095
1096// Close
1097
1098$close-font-size:                   $font-size-base * 1.5 !default;
1099$close-font-weight:                 $font-weight-bold !default;
1100$close-color:                       $black !default;
1101$close-text-shadow:                 0 1px 0 $white !default;
1102
1103
1104// Code
1105
1106$code-font-size:                    87.5% !default;
1107$code-color:                        $orange !default;
1108
1109$kbd-padding-y:                     .2rem !default;
1110$kbd-padding-x:                     .4rem !default;
1111$kbd-font-size:                     $code-font-size !default;
1112$kbd-color:                         $white !default;
1113$kbd-bg:                            $gray-900 !default;
1114
1115$pre-color:                         $gray-900 !default;
1116$pre-scrollable-max-height:         340px !default;
1117
1118
1119// Utilities
1120
1121$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
1122$overflows: auto, hidden !default;
1123$positions: static, relative, absolute, fixed, sticky !default;
1124
1125
1126// Printing
1127
1128$print-page-size:                   a3 !default;
1129$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
Note: See TracBrowser for help on using the repository browser.