@sd-angular/core 19.0.0-beta.84 → 19.0.0-beta.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (130) hide show
  1. package/README.md +716 -716
  2. package/assets/fonts/fonts.scss +115 -115
  3. package/assets/scss/bootstrap-4.6.2/_alert.scss +52 -52
  4. package/assets/scss/bootstrap-4.6.2/_badge.scss +54 -54
  5. package/assets/scss/bootstrap-4.6.2/_breadcrumb.scss +42 -42
  6. package/assets/scss/bootstrap-4.6.2/_button-group.scss +163 -163
  7. package/assets/scss/bootstrap-4.6.2/_buttons.scss +142 -142
  8. package/assets/scss/bootstrap-4.6.2/_card.scss +286 -286
  9. package/assets/scss/bootstrap-4.6.2/_carousel.scss +200 -200
  10. package/assets/scss/bootstrap-4.6.2/_close.scss +40 -40
  11. package/assets/scss/bootstrap-4.6.2/_code.scss +48 -48
  12. package/assets/scss/bootstrap-4.6.2/_custom-forms.scss +526 -526
  13. package/assets/scss/bootstrap-4.6.2/_dropdown.scss +192 -192
  14. package/assets/scss/bootstrap-4.6.2/_forms.scss +347 -347
  15. package/assets/scss/bootstrap-4.6.2/_functions.scss +190 -190
  16. package/assets/scss/bootstrap-4.6.2/_grid.scss +73 -73
  17. package/assets/scss/bootstrap-4.6.2/_images.scss +42 -42
  18. package/assets/scss/bootstrap-4.6.2/_input-group.scss +211 -211
  19. package/assets/scss/bootstrap-4.6.2/_jumbotron.scss +17 -17
  20. package/assets/scss/bootstrap-4.6.2/_list-group.scss +154 -154
  21. package/assets/scss/bootstrap-4.6.2/_media.scss +8 -8
  22. package/assets/scss/bootstrap-4.6.2/_mixins.scss +47 -47
  23. package/assets/scss/bootstrap-4.6.2/_modal.scss +240 -240
  24. package/assets/scss/bootstrap-4.6.2/_nav.scss +125 -125
  25. package/assets/scss/bootstrap-4.6.2/_navbar.scss +332 -332
  26. package/assets/scss/bootstrap-4.6.2/_pagination.scss +74 -74
  27. package/assets/scss/bootstrap-4.6.2/_popover.scss +170 -170
  28. package/assets/scss/bootstrap-4.6.2/_print.scss +132 -132
  29. package/assets/scss/bootstrap-4.6.2/_progress.scss +47 -47
  30. package/assets/scss/bootstrap-4.6.2/_reboot.scss +484 -484
  31. package/assets/scss/bootstrap-4.6.2/_root.scss +19 -19
  32. package/assets/scss/bootstrap-4.6.2/_spinners.scss +65 -65
  33. package/assets/scss/bootstrap-4.6.2/_tables.scss +185 -185
  34. package/assets/scss/bootstrap-4.6.2/_toasts.scss +46 -46
  35. package/assets/scss/bootstrap-4.6.2/_tooltip.scss +115 -115
  36. package/assets/scss/bootstrap-4.6.2/_transitions.scss +26 -26
  37. package/assets/scss/bootstrap-4.6.2/_type.scss +125 -125
  38. package/assets/scss/bootstrap-4.6.2/_utilities.scss +18 -18
  39. package/assets/scss/bootstrap-4.6.2/_variables.scss +1150 -1150
  40. package/assets/scss/bootstrap-4.6.2/bootstrap-grid.scss +30 -30
  41. package/assets/scss/bootstrap-4.6.2/bootstrap-reboot.scss +12 -12
  42. package/assets/scss/bootstrap-4.6.2/bootstrap.scss +44 -44
  43. package/assets/scss/bootstrap-4.6.2/mixins/_alert.scss +13 -13
  44. package/assets/scss/bootstrap-4.6.2/mixins/_background-variant.scss +23 -23
  45. package/assets/scss/bootstrap-4.6.2/mixins/_badge.scss +17 -17
  46. package/assets/scss/bootstrap-4.6.2/mixins/_border-radius.scss +76 -76
  47. package/assets/scss/bootstrap-4.6.2/mixins/_box-shadow.scss +20 -20
  48. package/assets/scss/bootstrap-4.6.2/mixins/_breakpoints.scss +123 -123
  49. package/assets/scss/bootstrap-4.6.2/mixins/_buttons.scss +110 -110
  50. package/assets/scss/bootstrap-4.6.2/mixins/_caret.scss +62 -62
  51. package/assets/scss/bootstrap-4.6.2/mixins/_clearfix.scss +7 -7
  52. package/assets/scss/bootstrap-4.6.2/mixins/_deprecate.scss +10 -10
  53. package/assets/scss/bootstrap-4.6.2/mixins/_float.scss +14 -14
  54. package/assets/scss/bootstrap-4.6.2/mixins/_forms.scss +195 -195
  55. package/assets/scss/bootstrap-4.6.2/mixins/_gradients.scss +45 -45
  56. package/assets/scss/bootstrap-4.6.2/mixins/_grid-framework.scss +80 -80
  57. package/assets/scss/bootstrap-4.6.2/mixins/_grid.scss +69 -69
  58. package/assets/scss/bootstrap-4.6.2/mixins/_hover.scss +37 -37
  59. package/assets/scss/bootstrap-4.6.2/mixins/_image.scss +36 -36
  60. package/assets/scss/bootstrap-4.6.2/mixins/_list-group.scss +21 -21
  61. package/assets/scss/bootstrap-4.6.2/mixins/_lists.scss +7 -7
  62. package/assets/scss/bootstrap-4.6.2/mixins/_nav-divider.scss +11 -11
  63. package/assets/scss/bootstrap-4.6.2/mixins/_pagination.scss +22 -22
  64. package/assets/scss/bootstrap-4.6.2/mixins/_reset-text.scss +17 -17
  65. package/assets/scss/bootstrap-4.6.2/mixins/_resize.scss +6 -6
  66. package/assets/scss/bootstrap-4.6.2/mixins/_screen-reader.scss +34 -34
  67. package/assets/scss/bootstrap-4.6.2/mixins/_size.scss +7 -7
  68. package/assets/scss/bootstrap-4.6.2/mixins/_table-row.scss +39 -39
  69. package/assets/scss/bootstrap-4.6.2/mixins/_text-emphasis.scss +17 -17
  70. package/assets/scss/bootstrap-4.6.2/mixins/_text-hide.scss +11 -11
  71. package/assets/scss/bootstrap-4.6.2/mixins/_text-truncate.scss +8 -8
  72. package/assets/scss/bootstrap-4.6.2/mixins/_transition.scss +26 -26
  73. package/assets/scss/bootstrap-4.6.2/mixins/_visibility.scss +8 -8
  74. package/assets/scss/bootstrap-4.6.2/utilities/_align.scss +8 -8
  75. package/assets/scss/bootstrap-4.6.2/utilities/_background.scss +19 -19
  76. package/assets/scss/bootstrap-4.6.2/utilities/_borders.scss +75 -75
  77. package/assets/scss/bootstrap-4.6.2/utilities/_clearfix.scss +3 -3
  78. package/assets/scss/bootstrap-4.6.2/utilities/_display.scss +26 -26
  79. package/assets/scss/bootstrap-4.6.2/utilities/_embed.scss +39 -39
  80. package/assets/scss/bootstrap-4.6.2/utilities/_flex.scss +51 -51
  81. package/assets/scss/bootstrap-4.6.2/utilities/_float.scss +11 -11
  82. package/assets/scss/bootstrap-4.6.2/utilities/_interactions.scss +5 -5
  83. package/assets/scss/bootstrap-4.6.2/utilities/_overflow.scss +5 -5
  84. package/assets/scss/bootstrap-4.6.2/utilities/_position.scss +32 -32
  85. package/assets/scss/bootstrap-4.6.2/utilities/_screenreaders.scss +11 -11
  86. package/assets/scss/bootstrap-4.6.2/utilities/_shadows.scss +6 -6
  87. package/assets/scss/bootstrap-4.6.2/utilities/_sizing.scss +20 -20
  88. package/assets/scss/bootstrap-4.6.2/utilities/_spacing.scss +73 -73
  89. package/assets/scss/bootstrap-4.6.2/utilities/_stretched-link.scss +19 -19
  90. package/assets/scss/bootstrap-4.6.2/utilities/_text.scss +72 -72
  91. package/assets/scss/bootstrap-4.6.2/utilities/_visibility.scss +13 -13
  92. package/assets/scss/bootstrap-4.6.2/vendor/_rfs.scss +228 -228
  93. package/assets/scss/core/print.scss +47 -47
  94. package/assets/scss/core/scrollbar.scss +30 -30
  95. package/assets/scss/core/typography.scss +121 -121
  96. package/fesm2022/sd-angular-core-components-anchor-v2.mjs +4 -4
  97. package/fesm2022/sd-angular-core-components-anchor-v2.mjs.map +1 -1
  98. package/fesm2022/sd-angular-core-components-avatar.mjs +2 -2
  99. package/fesm2022/sd-angular-core-components-avatar.mjs.map +1 -1
  100. package/fesm2022/sd-angular-core-components-chart.mjs +40 -40
  101. package/fesm2022/sd-angular-core-components-chart.mjs.map +1 -1
  102. package/fesm2022/sd-angular-core-components-quick-action.mjs.map +1 -1
  103. package/fesm2022/sd-angular-core-components-tab-router.mjs +4 -4
  104. package/fesm2022/sd-angular-core-components-tab-router.mjs.map +1 -1
  105. package/fesm2022/sd-angular-core-components-table.mjs +20 -20
  106. package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
  107. package/fesm2022/sd-angular-core-components-upload-file.mjs +4 -4
  108. package/fesm2022/sd-angular-core-components-upload-file.mjs.map +1 -1
  109. package/fesm2022/sd-angular-core-directives.mjs.map +1 -1
  110. package/fesm2022/sd-angular-core-forms-directives.mjs.map +1 -1
  111. package/fesm2022/sd-angular-core-forms-models.mjs.map +1 -1
  112. package/fesm2022/sd-angular-core-forms-select.mjs +2 -2
  113. package/fesm2022/sd-angular-core-forms-select.mjs.map +1 -1
  114. package/fesm2022/sd-angular-core-forms.mjs.map +1 -1
  115. package/fesm2022/sd-angular-core-modules-authom.mjs.map +1 -1
  116. package/fesm2022/sd-angular-core-modules-layout.mjs +2 -2
  117. package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
  118. package/fesm2022/sd-angular-core-pipes.mjs.map +1 -1
  119. package/fesm2022/sd-angular-core-services-api.mjs.map +1 -1
  120. package/fesm2022/sd-angular-core-services-cache.mjs.map +1 -1
  121. package/fesm2022/sd-angular-core-services-confirm.mjs.map +1 -1
  122. package/fesm2022/sd-angular-core-services-firebase.mjs.map +1 -1
  123. package/fesm2022/sd-angular-core-services-license.mjs.map +1 -1
  124. package/fesm2022/sd-angular-core-services-storage.mjs.map +1 -1
  125. package/fesm2022/sd-angular-core-utilities-extensions.mjs.map +1 -1
  126. package/fesm2022/sd-angular-core-utilities-models.mjs.map +1 -1
  127. package/fesm2022/sd-angular-core.mjs.map +1 -1
  128. package/package.json +36 -36
  129. package/sd-angular-core-19.0.0-beta.86.tgz +0 -0
  130. package/sd-angular-core-19.0.0-beta.84.tgz +0 -0
@@ -1,1150 +1,1150 @@
1
- @use 'sass:map';
2
- // Variables
3
- //
4
- // Variables should follow the `$component-state-property-size` formula for
5
- // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
6
-
7
- // Color system
8
-
9
- $white: #fff !default;
10
- $gray-100: #f8f9fa !default;
11
- $gray-200: #e9ecef !default;
12
- $gray-300: #dee2e6 !default;
13
- $gray-400: #ced4da !default;
14
- $gray-500: #adb5bd !default;
15
- $gray-600: #6c757d !default;
16
- $gray-700: #495057 !default;
17
- $gray-800: #343a40 !default;
18
- $gray-900: #212529 !default;
19
- $black: #000 !default;
20
-
21
- $grays: () !default;
22
- $grays: map.merge(
23
- (
24
- "100": $gray-100,
25
- "200": $gray-200,
26
- "300": $gray-300,
27
- "400": $gray-400,
28
- "500": $gray-500,
29
- "600": $gray-600,
30
- "700": $gray-700,
31
- "800": $gray-800,
32
- "900": $gray-900
33
- ),
34
- $grays
35
- );
36
-
37
- $blue: #007bff !default;
38
- $indigo: #6610f2 !default;
39
- $purple: #6f42c1 !default;
40
- $pink: #e83e8c !default;
41
- $red: #dc3545 !default;
42
- $orange: #fd7e14 !default;
43
- $yellow: #ffc107 !default;
44
- $green: #28a745 !default;
45
- $teal: #20c997 !default;
46
- $cyan: #17a2b8 !default;
47
-
48
- $colors: () !default;
49
- $colors: map.merge(
50
- (
51
- "blue": $blue,
52
- "indigo": $indigo,
53
- "purple": $purple,
54
- "pink": $pink,
55
- "red": $red,
56
- "orange": $orange,
57
- "yellow": $yellow,
58
- "green": $green,
59
- "teal": $teal,
60
- "cyan": $cyan,
61
- "white": $white,
62
- "gray": $gray-600,
63
- "gray-dark": $gray-800
64
- ),
65
- $colors
66
- );
67
-
68
- $primary: $blue !default;
69
- $secondary: $gray-600 !default;
70
- $success: $green !default;
71
- $info: $cyan !default;
72
- $warning: $yellow !default;
73
- $danger: $red !default;
74
- $light: $gray-100 !default;
75
- $dark: $gray-800 !default;
76
-
77
- $theme-colors: () !default;
78
- $theme-colors: map.merge(
79
- (
80
- "primary": $primary,
81
- "secondary": $secondary,
82
- "success": $success,
83
- "info": $info,
84
- "warning": $warning,
85
- "danger": $danger,
86
- "light": $light,
87
- "dark": $dark
88
- ),
89
- $theme-colors
90
- );
91
-
92
- // Set a specific jump point for requesting color jumps
93
- $theme-color-interval: 8% !default;
94
-
95
- // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
96
- $yiq-contrasted-threshold: 150 !default;
97
-
98
- // Customize the light and dark text colors for use in our YIQ color contrast function.
99
- $yiq-text-dark: $gray-900 !default;
100
- $yiq-text-light: $white !default;
101
-
102
- // Characters which are escaped by the escape-svg function
103
- $escaped-characters: (
104
- ("<", "%3c"),
105
- (">", "%3e"),
106
- ("#", "%23"),
107
- ("(", "%28"),
108
- (")", "%29"),
109
- ) !default;
110
-
111
-
112
- // Options
113
- //
114
- // Quickly modify global styling by enabling or disabling optional features.
115
-
116
- $enable-caret: true !default;
117
- $enable-rounded: true !default;
118
- $enable-shadows: false !default;
119
- $enable-gradients: false !default;
120
- $enable-transitions: true !default;
121
- $enable-prefers-reduced-motion-media-query: true !default;
122
- $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
123
- $enable-grid-classes: true !default;
124
- $enable-pointer-cursor-for-buttons: true !default;
125
- $enable-print-styles: true !default;
126
- $enable-responsive-font-sizes: false !default;
127
- $enable-validation-icons: true !default;
128
- $enable-deprecation-messages: true !default;
129
-
130
-
131
- // Spacing
132
- //
133
- // Control the default styling of most Bootstrap elements by modifying these
134
- // variables. Mostly focused on spacing.
135
- // You can add more entries to the $spacers map, should you need more variation.
136
-
137
- $spacer: 1rem !default;
138
- $spacers: () !default;
139
- $spacers: map.merge(
140
- (
141
- 0: 0,
142
- 1: ($spacer * .25),
143
- 2: ($spacer * .5),
144
- 3: $spacer,
145
- 4: ($spacer * 1.5),
146
- 5: ($spacer * 3)
147
- ),
148
- $spacers
149
- );
150
-
151
- // This variable affects the `.h-*` and `.w-*` classes.
152
- $sizes: () !default;
153
- $sizes: map.merge(
154
- (
155
- 25: 25%,
156
- 50: 50%,
157
- 75: 75%,
158
- 100: 100%,
159
- auto: auto
160
- ),
161
- $sizes
162
- );
163
-
164
-
165
- // Body
166
- //
167
- // Settings for the `<body>` element.
168
-
169
- $body-bg: $white !default;
170
- $body-color: $gray-900 !default;
171
-
172
-
173
- // Links
174
- //
175
- // Style anchor elements.
176
-
177
- $link-color: theme-color("primary") !default;
178
- $link-decoration: none !default;
179
- $link-hover-color: darken($link-color, 15%) !default;
180
- $link-hover-decoration: underline !default;
181
- // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
182
- $emphasized-link-hover-darken-percentage: 15% !default;
183
-
184
- // Paragraphs
185
- //
186
- // Style p element.
187
-
188
- $paragraph-margin-bottom: 1rem !default;
189
-
190
-
191
- // Grid breakpoints
192
- //
193
- // Define the minimum dimensions at which your layout will change,
194
- // adapting to different screen sizes, for use in media queries.
195
-
196
- $grid-breakpoints: (
197
- xs: 0,
198
- sm: 576px,
199
- md: 768px,
200
- lg: 992px,
201
- xl: 1200px
202
- ) !default;
203
-
204
- @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
205
- @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
206
-
207
-
208
- // Grid containers
209
- //
210
- // Define the maximum width of `.container` for different screen sizes.
211
-
212
- $container-max-widths: (
213
- sm: 540px,
214
- md: 720px,
215
- lg: 960px,
216
- xl: 1140px
217
- ) !default;
218
-
219
- @include _assert-ascending($container-max-widths, "$container-max-widths");
220
-
221
-
222
- // Grid columns
223
- //
224
- // Set the number of columns and specify the width of the gutters.
225
-
226
- $grid-columns: 12 !default;
227
- $grid-gutter-width: 30px !default;
228
- $grid-row-columns: 6 !default;
229
-
230
-
231
- // Components
232
- //
233
- // Define common padding and border radius sizes and more.
234
-
235
- $line-height-lg: 1.5 !default;
236
- $line-height-sm: 1.5 !default;
237
-
238
- $border-width: 1px !default;
239
- $border-color: $gray-300 !default;
240
-
241
- $border-radius: .25rem !default;
242
- $border-radius-lg: .3rem !default;
243
- $border-radius-sm: .2rem !default;
244
-
245
- $rounded-pill: 50rem !default;
246
-
247
- $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
248
- $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
249
- $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
250
-
251
- $component-active-color: $white !default;
252
- $component-active-bg: theme-color("primary") !default;
253
-
254
- $caret-width: .3em !default;
255
- $caret-vertical-align: $caret-width * .85 !default;
256
- $caret-spacing: $caret-width * .85 !default;
257
-
258
- $transition-base: all .2s ease-in-out !default;
259
- $transition-fade: opacity .15s linear !default;
260
- $transition-collapse: height .35s ease !default;
261
- $transition-collapse-width: width .35s ease !default;
262
-
263
- $embed-responsive-aspect-ratios: () !default;
264
- $embed-responsive-aspect-ratios: join(
265
- (
266
- (21 9),
267
- (16 9),
268
- (4 3),
269
- (1 1),
270
- ),
271
- $embed-responsive-aspect-ratios
272
- );
273
-
274
- // Typography
275
- //
276
- // Font, line-height, and color for body text, headings, and more.
277
-
278
- // stylelint-disable value-keyword-case
279
- $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
280
- $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
281
- $font-family-base: $font-family-sans-serif !default;
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.5 !default;
298
- $h2-font-size: $font-size-base * 2 !default;
299
- $h3-font-size: $font-size-base * 1.75 !default;
300
- $h4-font-size: $font-size-base * 1.5 !default;
301
- $h5-font-size: $font-size-base * 1.25 !default;
302
- $h6-font-size: $font-size-base !default;
303
-
304
- $headings-margin-bottom: $spacer * .5 !default;
305
- $headings-font-family: null !default;
306
- $headings-font-weight: 500 !default;
307
- $headings-line-height: 1.2 !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: .875em !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 * 1.25 !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
- $table-th-font-weight: null !default;
369
-
370
- $table-dark-color: $white !default;
371
- $table-dark-bg: $gray-800 !default;
372
- $table-dark-accent-bg: rgba($white, .05) !default;
373
- $table-dark-hover-color: $table-dark-color !default;
374
- $table-dark-hover-bg: rgba($white, .075) !default;
375
- $table-dark-border-color: lighten($table-dark-bg, 7.5%) !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
- $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
422
-
423
- $btn-padding-y-sm: $input-btn-padding-y-sm !default;
424
- $btn-padding-x-sm: $input-btn-padding-x-sm !default;
425
- $btn-font-size-sm: $input-btn-font-size-sm !default;
426
- $btn-line-height-sm: $input-btn-line-height-sm !default;
427
-
428
- $btn-padding-y-lg: $input-btn-padding-y-lg !default;
429
- $btn-padding-x-lg: $input-btn-padding-x-lg !default;
430
- $btn-font-size-lg: $input-btn-font-size-lg !default;
431
- $btn-line-height-lg: $input-btn-line-height-lg !default;
432
-
433
- $btn-border-width: $input-btn-border-width !default;
434
-
435
- $btn-font-weight: $font-weight-normal !default;
436
- $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
437
- $btn-focus-width: $input-btn-focus-width !default;
438
- $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
439
- $btn-disabled-opacity: .65 !default;
440
- $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
441
-
442
- $btn-link-disabled-color: $gray-600 !default;
443
-
444
- $btn-block-spacing-y: .5rem !default;
445
-
446
- // Allows for customizing button radius independently from global border radius
447
- $btn-border-radius: $border-radius !default;
448
- $btn-border-radius-lg: $border-radius-lg !default;
449
- $btn-border-radius-sm: $border-radius-sm !default;
450
-
451
- $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;
452
-
453
-
454
- // Forms
455
-
456
- $label-margin-bottom: .5rem !default;
457
-
458
- $input-padding-y: $input-btn-padding-y !default;
459
- $input-padding-x: $input-btn-padding-x !default;
460
- $input-font-family: $input-btn-font-family !default;
461
- $input-font-size: $input-btn-font-size !default;
462
- $input-font-weight: $font-weight-base !default;
463
- $input-line-height: $input-btn-line-height !default;
464
-
465
- $input-padding-y-sm: $input-btn-padding-y-sm !default;
466
- $input-padding-x-sm: $input-btn-padding-x-sm !default;
467
- $input-font-size-sm: $input-btn-font-size-sm !default;
468
- $input-line-height-sm: $input-btn-line-height-sm !default;
469
-
470
- $input-padding-y-lg: $input-btn-padding-y-lg !default;
471
- $input-padding-x-lg: $input-btn-padding-x-lg !default;
472
- $input-font-size-lg: $input-btn-font-size-lg !default;
473
- $input-line-height-lg: $input-btn-line-height-lg !default;
474
-
475
- $input-bg: $white !default;
476
- $input-disabled-bg: $gray-200 !default;
477
-
478
- $input-color: $gray-700 !default;
479
- $input-border-color: $gray-400 !default;
480
- $input-border-width: $input-btn-border-width !default;
481
- $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
482
-
483
- $input-border-radius: $border-radius !default;
484
- $input-border-radius-lg: $border-radius-lg !default;
485
- $input-border-radius-sm: $border-radius-sm !default;
486
-
487
- $input-focus-bg: $input-bg !default;
488
- $input-focus-border-color: lighten($component-active-bg, 25%) !default;
489
- $input-focus-color: $input-color !default;
490
- $input-focus-width: $input-btn-focus-width !default;
491
- $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
492
-
493
- $input-placeholder-color: $gray-600 !default;
494
- $input-plaintext-color: $body-color !default;
495
-
496
- $input-height-border: $input-border-width * 2 !default;
497
-
498
- $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
499
- $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
500
- $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
501
-
502
- $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
503
- $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
504
- $input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
505
-
506
- $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
507
-
508
- $form-text-margin-top: .25rem !default;
509
-
510
- $form-check-input-gutter: 1.25rem !default;
511
- $form-check-input-margin-y: .3rem !default;
512
- $form-check-input-margin-x: .25rem !default;
513
-
514
- $form-check-inline-margin-x: .75rem !default;
515
- $form-check-inline-input-margin-x: .3125rem !default;
516
-
517
- $form-grid-gutter-width: 10px !default;
518
- $form-group-margin-bottom: 1rem !default;
519
-
520
- $input-group-addon-color: $input-color !default;
521
- $input-group-addon-bg: $gray-200 !default;
522
- $input-group-addon-border-color: $input-border-color !default;
523
-
524
- $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
525
-
526
- $custom-control-gutter: .5rem !default;
527
- $custom-control-spacer-x: 1rem !default;
528
- $custom-control-cursor: null !default;
529
-
530
- $custom-control-indicator-size: 1rem !default;
531
- $custom-control-indicator-bg: $input-bg !default;
532
-
533
- $custom-control-indicator-bg-size: 50% 50% !default;
534
- $custom-control-indicator-box-shadow: $input-box-shadow !default;
535
- $custom-control-indicator-border-color: $gray-500 !default;
536
- $custom-control-indicator-border-width: $input-border-width !default;
537
-
538
- $custom-control-label-color: null !default;
539
-
540
- $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
541
- $custom-control-label-disabled-color: $gray-600 !default;
542
-
543
- $custom-control-indicator-checked-color: $component-active-color !default;
544
- $custom-control-indicator-checked-bg: $component-active-bg !default;
545
- $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
546
- $custom-control-indicator-checked-box-shadow: null !default;
547
- $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
548
-
549
- $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
550
- $custom-control-indicator-focus-border-color: $input-focus-border-color !default;
551
-
552
- $custom-control-indicator-active-color: $component-active-color !default;
553
- $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
554
- $custom-control-indicator-active-box-shadow: null !default;
555
- $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
556
-
557
- $custom-checkbox-indicator-border-radius: $border-radius !default;
558
- $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
559
-
560
- $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
561
- $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
562
- $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
563
- $custom-checkbox-indicator-indeterminate-box-shadow: null !default;
564
- $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
565
-
566
- $custom-radio-indicator-border-radius: 50% !default;
567
- $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
568
-
569
- $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
570
- $custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
571
- $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
572
-
573
- $custom-select-padding-y: $input-padding-y !default;
574
- $custom-select-padding-x: $input-padding-x !default;
575
- $custom-select-font-family: $input-font-family !default;
576
- $custom-select-font-size: $input-font-size !default;
577
- $custom-select-height: $input-height !default;
578
- $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
579
- $custom-select-font-weight: $input-font-weight !default;
580
- $custom-select-line-height: $input-line-height !default;
581
- $custom-select-color: $input-color !default;
582
- $custom-select-disabled-color: $gray-600 !default;
583
- $custom-select-bg: $input-bg !default;
584
- $custom-select-disabled-bg: $gray-200 !default;
585
- $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
586
- $custom-select-indicator-color: $gray-800 !default;
587
- $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
588
- $custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
589
-
590
- $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
591
- $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
592
- $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
593
-
594
- $custom-select-border-width: $input-border-width !default;
595
- $custom-select-border-color: $input-border-color !default;
596
- $custom-select-border-radius: $border-radius !default;
597
- $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
598
-
599
- $custom-select-focus-border-color: $input-focus-border-color !default;
600
- $custom-select-focus-width: $input-focus-width !default;
601
- $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
602
-
603
- $custom-select-padding-y-sm: $input-padding-y-sm !default;
604
- $custom-select-padding-x-sm: $input-padding-x-sm !default;
605
- $custom-select-font-size-sm: $input-font-size-sm !default;
606
- $custom-select-height-sm: $input-height-sm !default;
607
-
608
- $custom-select-padding-y-lg: $input-padding-y-lg !default;
609
- $custom-select-padding-x-lg: $input-padding-x-lg !default;
610
- $custom-select-font-size-lg: $input-font-size-lg !default;
611
- $custom-select-height-lg: $input-height-lg !default;
612
-
613
- $custom-range-track-width: 100% !default;
614
- $custom-range-track-height: .5rem !default;
615
- $custom-range-track-cursor: pointer !default;
616
- $custom-range-track-bg: $gray-300 !default;
617
- $custom-range-track-border-radius: 1rem !default;
618
- $custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
619
-
620
- $custom-range-thumb-width: 1rem !default;
621
- $custom-range-thumb-height: $custom-range-thumb-width !default;
622
- $custom-range-thumb-bg: $component-active-bg !default;
623
- $custom-range-thumb-border: 0 !default;
624
- $custom-range-thumb-border-radius: 1rem !default;
625
- $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
626
- $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
627
- $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge
628
- $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
629
- $custom-range-thumb-disabled-bg: $gray-500 !default;
630
-
631
- $custom-file-height: $input-height !default;
632
- $custom-file-height-inner: $input-height-inner !default;
633
- $custom-file-focus-border-color: $input-focus-border-color !default;
634
- $custom-file-focus-box-shadow: $input-focus-box-shadow !default;
635
- $custom-file-disabled-bg: $input-disabled-bg !default;
636
-
637
- $custom-file-padding-y: $input-padding-y !default;
638
- $custom-file-padding-x: $input-padding-x !default;
639
- $custom-file-line-height: $input-line-height !default;
640
- $custom-file-font-family: $input-font-family !default;
641
- $custom-file-font-weight: $input-font-weight !default;
642
- $custom-file-color: $input-color !default;
643
- $custom-file-bg: $input-bg !default;
644
- $custom-file-border-width: $input-border-width !default;
645
- $custom-file-border-color: $input-border-color !default;
646
- $custom-file-border-radius: $input-border-radius !default;
647
- $custom-file-box-shadow: $input-box-shadow !default;
648
- $custom-file-button-color: $custom-file-color !default;
649
- $custom-file-button-bg: $input-group-addon-bg !default;
650
- $custom-file-text: (
651
- en: "Browse"
652
- ) !default;
653
-
654
-
655
- // Form validation
656
-
657
- $form-feedback-margin-top: $form-text-margin-top !default;
658
- $form-feedback-font-size: $small-font-size !default;
659
- $form-feedback-valid-color: theme-color("success") !default;
660
- $form-feedback-invalid-color: theme-color("danger") !default;
661
-
662
- $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
663
- $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path 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'/></svg>") !default;
664
- $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
665
- $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
666
-
667
- $form-validation-states: () !default;
668
- $form-validation-states: map.merge(
669
- (
670
- "valid": (
671
- "color": $form-feedback-valid-color,
672
- "icon": $form-feedback-icon-valid
673
- ),
674
- "invalid": (
675
- "color": $form-feedback-invalid-color,
676
- "icon": $form-feedback-icon-invalid
677
- ),
678
- ),
679
- $form-validation-states
680
- );
681
-
682
- // Z-index master list
683
- //
684
- // Warning: Avoid customizing these values. They're used for a bird's eye view
685
- // of components dependent on the z-axis and are designed to all work together.
686
-
687
- $zindex-dropdown: 1000 !default;
688
- $zindex-sticky: 1020 !default;
689
- $zindex-fixed: 1030 !default;
690
- $zindex-modal-backdrop: 1040 !default;
691
- $zindex-modal: 1050 !default;
692
- $zindex-popover: 1060 !default;
693
- $zindex-tooltip: 1070 !default;
694
-
695
-
696
- // Navs
697
-
698
- $nav-link-padding-y: .5rem !default;
699
- $nav-link-padding-x: 1rem !default;
700
- $nav-link-disabled-color: $gray-600 !default;
701
-
702
- $nav-tabs-border-color: $gray-300 !default;
703
- $nav-tabs-border-width: $border-width !default;
704
- $nav-tabs-border-radius: $border-radius !default;
705
- $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
706
- $nav-tabs-link-active-color: $gray-700 !default;
707
- $nav-tabs-link-active-bg: $body-bg !default;
708
- $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
709
-
710
- $nav-pills-border-radius: $border-radius !default;
711
- $nav-pills-link-active-color: $component-active-color !default;
712
- $nav-pills-link-active-bg: $component-active-bg !default;
713
-
714
- $nav-divider-color: $gray-200 !default;
715
- $nav-divider-margin-y: $spacer * .5 !default;
716
-
717
-
718
- // Navbar
719
-
720
- $navbar-padding-y: $spacer * .5 !default;
721
- $navbar-padding-x: $spacer !default;
722
-
723
- $navbar-nav-link-padding-x: .5rem !default;
724
-
725
- $navbar-brand-font-size: $font-size-lg !default;
726
- // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
727
- $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
728
- $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
729
- $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
730
-
731
- $navbar-toggler-padding-y: .25rem !default;
732
- $navbar-toggler-padding-x: .75rem !default;
733
- $navbar-toggler-font-size: $font-size-lg !default;
734
- $navbar-toggler-border-radius: $btn-border-radius !default;
735
-
736
- $navbar-nav-scroll-max-height: 75vh !default;
737
-
738
- $navbar-dark-color: rgba($white, .5) !default;
739
- $navbar-dark-hover-color: rgba($white, .75) !default;
740
- $navbar-dark-active-color: $white !default;
741
- $navbar-dark-disabled-color: rgba($white, .25) !default;
742
- $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
743
- $navbar-dark-toggler-border-color: rgba($white, .1) !default;
744
-
745
- $navbar-light-color: rgba($black, .5) !default;
746
- $navbar-light-hover-color: rgba($black, .7) !default;
747
- $navbar-light-active-color: rgba($black, .9) !default;
748
- $navbar-light-disabled-color: rgba($black, .3) !default;
749
- $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
750
- $navbar-light-toggler-border-color: rgba($black, .1) !default;
751
-
752
- $navbar-light-brand-color: $navbar-light-active-color !default;
753
- $navbar-light-brand-hover-color: $navbar-light-active-color !default;
754
- $navbar-dark-brand-color: $navbar-dark-active-color !default;
755
- $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
756
-
757
-
758
- // Dropdowns
759
- //
760
- // Dropdown menu container and contents.
761
-
762
- $dropdown-min-width: 10rem !default;
763
- $dropdown-padding-x: 0 !default;
764
- $dropdown-padding-y: .5rem !default;
765
- $dropdown-spacer: .125rem !default;
766
- $dropdown-font-size: $font-size-base !default;
767
- $dropdown-color: $body-color !default;
768
- $dropdown-bg: $white !default;
769
- $dropdown-border-color: rgba($black, .15) !default;
770
- $dropdown-border-radius: $border-radius !default;
771
- $dropdown-border-width: $border-width !default;
772
- $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
773
- $dropdown-divider-bg: $gray-200 !default;
774
- $dropdown-divider-margin-y: $nav-divider-margin-y !default;
775
- $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
776
-
777
- $dropdown-link-color: $gray-900 !default;
778
- $dropdown-link-hover-color: darken($gray-900, 5%) !default;
779
- $dropdown-link-hover-bg: $gray-200 !default;
780
-
781
- $dropdown-link-active-color: $component-active-color !default;
782
- $dropdown-link-active-bg: $component-active-bg !default;
783
-
784
- $dropdown-link-disabled-color: $gray-500 !default;
785
-
786
- $dropdown-item-padding-y: .25rem !default;
787
- $dropdown-item-padding-x: 1.5rem !default;
788
-
789
- $dropdown-header-color: $gray-600 !default;
790
- $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
791
-
792
-
793
- // Pagination
794
-
795
- $pagination-padding-y: .5rem !default;
796
- $pagination-padding-x: .75rem !default;
797
- $pagination-padding-y-sm: .25rem !default;
798
- $pagination-padding-x-sm: .5rem !default;
799
- $pagination-padding-y-lg: .75rem !default;
800
- $pagination-padding-x-lg: 1.5rem !default;
801
- $pagination-line-height: 1.25 !default;
802
-
803
- $pagination-color: $link-color !default;
804
- $pagination-bg: $white !default;
805
- $pagination-border-width: $border-width !default;
806
- $pagination-border-color: $gray-300 !default;
807
-
808
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
809
- $pagination-focus-outline: 0 !default;
810
-
811
- $pagination-hover-color: $link-hover-color !default;
812
- $pagination-hover-bg: $gray-200 !default;
813
- $pagination-hover-border-color: $gray-300 !default;
814
-
815
- $pagination-active-color: $component-active-color !default;
816
- $pagination-active-bg: $component-active-bg !default;
817
- $pagination-active-border-color: $pagination-active-bg !default;
818
-
819
- $pagination-disabled-color: $gray-600 !default;
820
- $pagination-disabled-bg: $white !default;
821
- $pagination-disabled-border-color: $gray-300 !default;
822
-
823
- $pagination-border-radius-sm: $border-radius-sm !default;
824
- $pagination-border-radius-lg: $border-radius-lg !default;
825
-
826
-
827
- // Jumbotron
828
-
829
- $jumbotron-padding: 2rem !default;
830
- $jumbotron-color: null !default;
831
- $jumbotron-bg: $gray-200 !default;
832
-
833
-
834
- // Cards
835
-
836
- $card-spacer-y: .75rem !default;
837
- $card-spacer-x: 1.25rem !default;
838
- $card-border-width: $border-width !default;
839
- $card-border-radius: $border-radius !default;
840
- $card-border-color: rgba($black, .125) !default;
841
- $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
842
- $card-cap-bg: rgba($black, .03) !default;
843
- $card-cap-color: null !default;
844
- $card-height: null !default;
845
- $card-color: null !default;
846
- $card-bg: $white !default;
847
-
848
- $card-img-overlay-padding: 1.25rem !default;
849
-
850
- $card-group-margin: $grid-gutter-width * .5 !default;
851
- $card-deck-margin: $card-group-margin !default;
852
-
853
- $card-columns-count: 3 !default;
854
- $card-columns-gap: 1.25rem !default;
855
- $card-columns-margin: $card-spacer-y !default;
856
-
857
-
858
- // Tooltips
859
-
860
- $tooltip-font-size: $font-size-sm !default;
861
- $tooltip-max-width: 200px !default;
862
- $tooltip-color: $white !default;
863
- $tooltip-bg: $black !default;
864
- $tooltip-border-radius: $border-radius !default;
865
- $tooltip-opacity: .9 !default;
866
- $tooltip-padding-y: .25rem !default;
867
- $tooltip-padding-x: .5rem !default;
868
- $tooltip-margin: 0 !default;
869
-
870
- $tooltip-arrow-width: .8rem !default;
871
- $tooltip-arrow-height: .4rem !default;
872
- $tooltip-arrow-color: $tooltip-bg !default;
873
-
874
- // Form tooltips must come after regular tooltips
875
- $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
876
- $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
877
- $form-feedback-tooltip-font-size: $tooltip-font-size !default;
878
- $form-feedback-tooltip-line-height: $line-height-base !default;
879
- $form-feedback-tooltip-opacity: $tooltip-opacity !default;
880
- $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
881
-
882
-
883
- // Popovers
884
-
885
- $popover-font-size: $font-size-sm !default;
886
- $popover-bg: $white !default;
887
- $popover-max-width: 276px !default;
888
- $popover-border-width: $border-width !default;
889
- $popover-border-color: rgba($black, .2) !default;
890
- $popover-border-radius: $border-radius-lg !default;
891
- $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
892
- $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
893
-
894
- $popover-header-bg: darken($popover-bg, 3%) !default;
895
- $popover-header-color: $headings-color !default;
896
- $popover-header-padding-y: .5rem !default;
897
- $popover-header-padding-x: .75rem !default;
898
-
899
- $popover-body-color: $body-color !default;
900
- $popover-body-padding-y: $popover-header-padding-y !default;
901
- $popover-body-padding-x: $popover-header-padding-x !default;
902
-
903
- $popover-arrow-width: 1rem !default;
904
- $popover-arrow-height: .5rem !default;
905
- $popover-arrow-color: $popover-bg !default;
906
-
907
- $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
908
-
909
-
910
- // Toasts
911
-
912
- $toast-max-width: 350px !default;
913
- $toast-padding-x: .75rem !default;
914
- $toast-padding-y: .25rem !default;
915
- $toast-font-size: .875rem !default;
916
- $toast-color: null !default;
917
- $toast-background-color: rgba($white, .85) !default;
918
- $toast-border-width: 1px !default;
919
- $toast-border-color: rgba(0, 0, 0, .1) !default;
920
- $toast-border-radius: .25rem !default;
921
- $toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
922
-
923
- $toast-header-color: $gray-600 !default;
924
- $toast-header-background-color: rgba($white, .85) !default;
925
- $toast-header-border-color: rgba(0, 0, 0, .05) !default;
926
-
927
-
928
- // Badges
929
-
930
- $badge-font-size: 75% !default;
931
- $badge-font-weight: $font-weight-bold !default;
932
- $badge-padding-y: .25em !default;
933
- $badge-padding-x: .4em !default;
934
- $badge-border-radius: $border-radius !default;
935
-
936
- $badge-transition: $btn-transition !default;
937
- $badge-focus-width: $input-btn-focus-width !default;
938
-
939
- $badge-pill-padding-x: .6em !default;
940
- // Use a higher than normal value to ensure completely rounded edges when
941
- // customizing padding or font-size on labels.
942
- $badge-pill-border-radius: 10rem !default;
943
-
944
-
945
- // Modals
946
-
947
- // Padding applied to the modal body
948
- $modal-inner-padding: 1rem !default;
949
-
950
- // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
951
- $modal-footer-margin-between: .5rem !default;
952
-
953
- $modal-dialog-margin: .5rem !default;
954
- $modal-dialog-margin-y-sm-up: 1.75rem !default;
955
-
956
- $modal-title-line-height: $line-height-base !default;
957
-
958
- $modal-content-color: null !default;
959
- $modal-content-bg: $white !default;
960
- $modal-content-border-color: rgba($black, .2) !default;
961
- $modal-content-border-width: $border-width !default;
962
- $modal-content-border-radius: $border-radius-lg !default;
963
- $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
964
- $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
965
- $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
966
-
967
- $modal-backdrop-bg: $black !default;
968
- $modal-backdrop-opacity: .5 !default;
969
- $modal-header-border-color: $border-color !default;
970
- $modal-footer-border-color: $modal-header-border-color !default;
971
- $modal-header-border-width: $modal-content-border-width !default;
972
- $modal-footer-border-width: $modal-header-border-width !default;
973
- $modal-header-padding-y: 1rem !default;
974
- $modal-header-padding-x: 1rem !default;
975
- $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
976
-
977
- $modal-xl: 1140px !default;
978
- $modal-lg: 800px !default;
979
- $modal-md: 500px !default;
980
- $modal-sm: 300px !default;
981
-
982
- $modal-fade-transform: translate(0, -50px) !default;
983
- $modal-show-transform: none !default;
984
- $modal-transition: transform .3s ease-out !default;
985
- $modal-scale-transform: scale(1.02) !default;
986
-
987
-
988
- // Alerts
989
- //
990
- // Define alert colors, border radius, and padding.
991
-
992
- $alert-padding-y: .75rem !default;
993
- $alert-padding-x: 1.25rem !default;
994
- $alert-margin-bottom: 1rem !default;
995
- $alert-border-radius: $border-radius !default;
996
- $alert-link-font-weight: $font-weight-bold !default;
997
- $alert-border-width: $border-width !default;
998
-
999
- $alert-bg-level: -10 !default;
1000
- $alert-border-level: -9 !default;
1001
- $alert-color-level: 6 !default;
1002
-
1003
-
1004
- // Progress bars
1005
-
1006
- $progress-height: 1rem !default;
1007
- $progress-font-size: $font-size-base * .75 !default;
1008
- $progress-bg: $gray-200 !default;
1009
- $progress-border-radius: $border-radius !default;
1010
- $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
1011
- $progress-bar-color: $white !default;
1012
- $progress-bar-bg: theme-color("primary") !default;
1013
- $progress-bar-animation-timing: 1s linear infinite !default;
1014
- $progress-bar-transition: width .6s ease !default;
1015
-
1016
-
1017
- // List group
1018
-
1019
- $list-group-color: null !default;
1020
- $list-group-bg: $white !default;
1021
- $list-group-border-color: rgba($black, .125) !default;
1022
- $list-group-border-width: $border-width !default;
1023
- $list-group-border-radius: $border-radius !default;
1024
-
1025
- $list-group-item-padding-y: .75rem !default;
1026
- $list-group-item-padding-x: 1.25rem !default;
1027
-
1028
- $list-group-hover-bg: $gray-100 !default;
1029
- $list-group-active-color: $component-active-color !default;
1030
- $list-group-active-bg: $component-active-bg !default;
1031
- $list-group-active-border-color: $list-group-active-bg !default;
1032
-
1033
- $list-group-disabled-color: $gray-600 !default;
1034
- $list-group-disabled-bg: $list-group-bg !default;
1035
-
1036
- $list-group-action-color: $gray-700 !default;
1037
- $list-group-action-hover-color: $list-group-action-color !default;
1038
-
1039
- $list-group-action-active-color: $body-color !default;
1040
- $list-group-action-active-bg: $gray-200 !default;
1041
-
1042
-
1043
- // Image thumbnails
1044
-
1045
- $thumbnail-padding: .25rem !default;
1046
- $thumbnail-bg: $body-bg !default;
1047
- $thumbnail-border-width: $border-width !default;
1048
- $thumbnail-border-color: $gray-300 !default;
1049
- $thumbnail-border-radius: $border-radius !default;
1050
- $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
1051
-
1052
-
1053
- // Figures
1054
-
1055
- $figure-caption-font-size: 90% !default;
1056
- $figure-caption-color: $gray-600 !default;
1057
-
1058
-
1059
- // Breadcrumbs
1060
-
1061
- $breadcrumb-font-size: null !default;
1062
-
1063
- $breadcrumb-padding-y: .75rem !default;
1064
- $breadcrumb-padding-x: 1rem !default;
1065
- $breadcrumb-item-padding: .5rem !default;
1066
-
1067
- $breadcrumb-margin-bottom: 1rem !default;
1068
-
1069
- $breadcrumb-bg: $gray-200 !default;
1070
- $breadcrumb-divider-color: $gray-600 !default;
1071
- $breadcrumb-active-color: $gray-600 !default;
1072
- $breadcrumb-divider: quote("/") !default;
1073
-
1074
- $breadcrumb-border-radius: $border-radius !default;
1075
-
1076
-
1077
- // Carousel
1078
-
1079
- $carousel-control-color: $white !default;
1080
- $carousel-control-width: 15% !default;
1081
- $carousel-control-opacity: .5 !default;
1082
- $carousel-control-hover-opacity: .9 !default;
1083
- $carousel-control-transition: opacity .15s ease !default;
1084
-
1085
- $carousel-indicator-width: 30px !default;
1086
- $carousel-indicator-height: 3px !default;
1087
- $carousel-indicator-hit-area-height: 10px !default;
1088
- $carousel-indicator-spacer: 3px !default;
1089
- $carousel-indicator-active-bg: $white !default;
1090
- $carousel-indicator-transition: opacity .6s ease !default;
1091
-
1092
- $carousel-caption-width: 70% !default;
1093
- $carousel-caption-color: $white !default;
1094
-
1095
- $carousel-control-icon-width: 20px !default;
1096
-
1097
- $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
1098
- $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
1099
-
1100
- $carousel-transition-duration: .6s !default;
1101
- $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`)
1102
-
1103
-
1104
- // Spinners
1105
-
1106
- $spinner-width: 2rem !default;
1107
- $spinner-height: $spinner-width !default;
1108
- $spinner-vertical-align: -.125em !default;
1109
- $spinner-border-width: .25em !default;
1110
-
1111
- $spinner-width-sm: 1rem !default;
1112
- $spinner-height-sm: $spinner-width-sm !default;
1113
- $spinner-border-width-sm: .2em !default;
1114
-
1115
-
1116
- // Close
1117
-
1118
- $close-font-size: $font-size-base * 1.5 !default;
1119
- $close-font-weight: $font-weight-bold !default;
1120
- $close-color: $black !default;
1121
- $close-text-shadow: 0 1px 0 $white !default;
1122
-
1123
-
1124
- // Code
1125
-
1126
- $code-font-size: 87.5% !default;
1127
- $code-color: $pink !default;
1128
-
1129
- $kbd-padding-y: .2rem !default;
1130
- $kbd-padding-x: .4rem !default;
1131
- $kbd-font-size: $code-font-size !default;
1132
- $kbd-color: $white !default;
1133
- $kbd-bg: $gray-900 !default;
1134
-
1135
- $pre-color: $gray-900 !default;
1136
- $pre-scrollable-max-height: 340px !default;
1137
-
1138
-
1139
- // Utilities
1140
-
1141
- $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
1142
- $overflows: auto, hidden !default;
1143
- $positions: static, relative, absolute, fixed, sticky !default;
1144
- $user-selects: all, auto, none !default;
1145
-
1146
-
1147
- // Printing
1148
-
1149
- $print-page-size: a3 !default;
1150
- $print-body-min-width: map-get($grid-breakpoints, "lg") !default;
1
+ @use 'sass:map';
2
+ // Variables
3
+ //
4
+ // Variables should follow the `$component-state-property-size` formula for
5
+ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
6
+
7
+ // Color system
8
+
9
+ $white: #fff !default;
10
+ $gray-100: #f8f9fa !default;
11
+ $gray-200: #e9ecef !default;
12
+ $gray-300: #dee2e6 !default;
13
+ $gray-400: #ced4da !default;
14
+ $gray-500: #adb5bd !default;
15
+ $gray-600: #6c757d !default;
16
+ $gray-700: #495057 !default;
17
+ $gray-800: #343a40 !default;
18
+ $gray-900: #212529 !default;
19
+ $black: #000 !default;
20
+
21
+ $grays: () !default;
22
+ $grays: map.merge(
23
+ (
24
+ "100": $gray-100,
25
+ "200": $gray-200,
26
+ "300": $gray-300,
27
+ "400": $gray-400,
28
+ "500": $gray-500,
29
+ "600": $gray-600,
30
+ "700": $gray-700,
31
+ "800": $gray-800,
32
+ "900": $gray-900
33
+ ),
34
+ $grays
35
+ );
36
+
37
+ $blue: #007bff !default;
38
+ $indigo: #6610f2 !default;
39
+ $purple: #6f42c1 !default;
40
+ $pink: #e83e8c !default;
41
+ $red: #dc3545 !default;
42
+ $orange: #fd7e14 !default;
43
+ $yellow: #ffc107 !default;
44
+ $green: #28a745 !default;
45
+ $teal: #20c997 !default;
46
+ $cyan: #17a2b8 !default;
47
+
48
+ $colors: () !default;
49
+ $colors: map.merge(
50
+ (
51
+ "blue": $blue,
52
+ "indigo": $indigo,
53
+ "purple": $purple,
54
+ "pink": $pink,
55
+ "red": $red,
56
+ "orange": $orange,
57
+ "yellow": $yellow,
58
+ "green": $green,
59
+ "teal": $teal,
60
+ "cyan": $cyan,
61
+ "white": $white,
62
+ "gray": $gray-600,
63
+ "gray-dark": $gray-800
64
+ ),
65
+ $colors
66
+ );
67
+
68
+ $primary: $blue !default;
69
+ $secondary: $gray-600 !default;
70
+ $success: $green !default;
71
+ $info: $cyan !default;
72
+ $warning: $yellow !default;
73
+ $danger: $red !default;
74
+ $light: $gray-100 !default;
75
+ $dark: $gray-800 !default;
76
+
77
+ $theme-colors: () !default;
78
+ $theme-colors: map.merge(
79
+ (
80
+ "primary": $primary,
81
+ "secondary": $secondary,
82
+ "success": $success,
83
+ "info": $info,
84
+ "warning": $warning,
85
+ "danger": $danger,
86
+ "light": $light,
87
+ "dark": $dark
88
+ ),
89
+ $theme-colors
90
+ );
91
+
92
+ // Set a specific jump point for requesting color jumps
93
+ $theme-color-interval: 8% !default;
94
+
95
+ // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
96
+ $yiq-contrasted-threshold: 150 !default;
97
+
98
+ // Customize the light and dark text colors for use in our YIQ color contrast function.
99
+ $yiq-text-dark: $gray-900 !default;
100
+ $yiq-text-light: $white !default;
101
+
102
+ // Characters which are escaped by the escape-svg function
103
+ $escaped-characters: (
104
+ ("<", "%3c"),
105
+ (">", "%3e"),
106
+ ("#", "%23"),
107
+ ("(", "%28"),
108
+ (")", "%29"),
109
+ ) !default;
110
+
111
+
112
+ // Options
113
+ //
114
+ // Quickly modify global styling by enabling or disabling optional features.
115
+
116
+ $enable-caret: true !default;
117
+ $enable-rounded: true !default;
118
+ $enable-shadows: false !default;
119
+ $enable-gradients: false !default;
120
+ $enable-transitions: true !default;
121
+ $enable-prefers-reduced-motion-media-query: true !default;
122
+ $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
123
+ $enable-grid-classes: true !default;
124
+ $enable-pointer-cursor-for-buttons: true !default;
125
+ $enable-print-styles: true !default;
126
+ $enable-responsive-font-sizes: false !default;
127
+ $enable-validation-icons: true !default;
128
+ $enable-deprecation-messages: true !default;
129
+
130
+
131
+ // Spacing
132
+ //
133
+ // Control the default styling of most Bootstrap elements by modifying these
134
+ // variables. Mostly focused on spacing.
135
+ // You can add more entries to the $spacers map, should you need more variation.
136
+
137
+ $spacer: 1rem !default;
138
+ $spacers: () !default;
139
+ $spacers: map.merge(
140
+ (
141
+ 0: 0,
142
+ 1: ($spacer * .25),
143
+ 2: ($spacer * .5),
144
+ 3: $spacer,
145
+ 4: ($spacer * 1.5),
146
+ 5: ($spacer * 3)
147
+ ),
148
+ $spacers
149
+ );
150
+
151
+ // This variable affects the `.h-*` and `.w-*` classes.
152
+ $sizes: () !default;
153
+ $sizes: map.merge(
154
+ (
155
+ 25: 25%,
156
+ 50: 50%,
157
+ 75: 75%,
158
+ 100: 100%,
159
+ auto: auto
160
+ ),
161
+ $sizes
162
+ );
163
+
164
+
165
+ // Body
166
+ //
167
+ // Settings for the `<body>` element.
168
+
169
+ $body-bg: $white !default;
170
+ $body-color: $gray-900 !default;
171
+
172
+
173
+ // Links
174
+ //
175
+ // Style anchor elements.
176
+
177
+ $link-color: theme-color("primary") !default;
178
+ $link-decoration: none !default;
179
+ $link-hover-color: darken($link-color, 15%) !default;
180
+ $link-hover-decoration: underline !default;
181
+ // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
182
+ $emphasized-link-hover-darken-percentage: 15% !default;
183
+
184
+ // Paragraphs
185
+ //
186
+ // Style p element.
187
+
188
+ $paragraph-margin-bottom: 1rem !default;
189
+
190
+
191
+ // Grid breakpoints
192
+ //
193
+ // Define the minimum dimensions at which your layout will change,
194
+ // adapting to different screen sizes, for use in media queries.
195
+
196
+ $grid-breakpoints: (
197
+ xs: 0,
198
+ sm: 576px,
199
+ md: 768px,
200
+ lg: 992px,
201
+ xl: 1200px
202
+ ) !default;
203
+
204
+ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
205
+ @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
206
+
207
+
208
+ // Grid containers
209
+ //
210
+ // Define the maximum width of `.container` for different screen sizes.
211
+
212
+ $container-max-widths: (
213
+ sm: 540px,
214
+ md: 720px,
215
+ lg: 960px,
216
+ xl: 1140px
217
+ ) !default;
218
+
219
+ @include _assert-ascending($container-max-widths, "$container-max-widths");
220
+
221
+
222
+ // Grid columns
223
+ //
224
+ // Set the number of columns and specify the width of the gutters.
225
+
226
+ $grid-columns: 12 !default;
227
+ $grid-gutter-width: 30px !default;
228
+ $grid-row-columns: 6 !default;
229
+
230
+
231
+ // Components
232
+ //
233
+ // Define common padding and border radius sizes and more.
234
+
235
+ $line-height-lg: 1.5 !default;
236
+ $line-height-sm: 1.5 !default;
237
+
238
+ $border-width: 1px !default;
239
+ $border-color: $gray-300 !default;
240
+
241
+ $border-radius: .25rem !default;
242
+ $border-radius-lg: .3rem !default;
243
+ $border-radius-sm: .2rem !default;
244
+
245
+ $rounded-pill: 50rem !default;
246
+
247
+ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
248
+ $box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
249
+ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
250
+
251
+ $component-active-color: $white !default;
252
+ $component-active-bg: theme-color("primary") !default;
253
+
254
+ $caret-width: .3em !default;
255
+ $caret-vertical-align: $caret-width * .85 !default;
256
+ $caret-spacing: $caret-width * .85 !default;
257
+
258
+ $transition-base: all .2s ease-in-out !default;
259
+ $transition-fade: opacity .15s linear !default;
260
+ $transition-collapse: height .35s ease !default;
261
+ $transition-collapse-width: width .35s ease !default;
262
+
263
+ $embed-responsive-aspect-ratios: () !default;
264
+ $embed-responsive-aspect-ratios: join(
265
+ (
266
+ (21 9),
267
+ (16 9),
268
+ (4 3),
269
+ (1 1),
270
+ ),
271
+ $embed-responsive-aspect-ratios
272
+ );
273
+
274
+ // Typography
275
+ //
276
+ // Font, line-height, and color for body text, headings, and more.
277
+
278
+ // stylelint-disable value-keyword-case
279
+ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
280
+ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
281
+ $font-family-base: $font-family-sans-serif !default;
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.5 !default;
298
+ $h2-font-size: $font-size-base * 2 !default;
299
+ $h3-font-size: $font-size-base * 1.75 !default;
300
+ $h4-font-size: $font-size-base * 1.5 !default;
301
+ $h5-font-size: $font-size-base * 1.25 !default;
302
+ $h6-font-size: $font-size-base !default;
303
+
304
+ $headings-margin-bottom: $spacer * .5 !default;
305
+ $headings-font-family: null !default;
306
+ $headings-font-weight: 500 !default;
307
+ $headings-line-height: 1.2 !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: .875em !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 * 1.25 !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
+ $table-th-font-weight: null !default;
369
+
370
+ $table-dark-color: $white !default;
371
+ $table-dark-bg: $gray-800 !default;
372
+ $table-dark-accent-bg: rgba($white, .05) !default;
373
+ $table-dark-hover-color: $table-dark-color !default;
374
+ $table-dark-hover-bg: rgba($white, .075) !default;
375
+ $table-dark-border-color: lighten($table-dark-bg, 7.5%) !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
+ $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
422
+
423
+ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
424
+ $btn-padding-x-sm: $input-btn-padding-x-sm !default;
425
+ $btn-font-size-sm: $input-btn-font-size-sm !default;
426
+ $btn-line-height-sm: $input-btn-line-height-sm !default;
427
+
428
+ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
429
+ $btn-padding-x-lg: $input-btn-padding-x-lg !default;
430
+ $btn-font-size-lg: $input-btn-font-size-lg !default;
431
+ $btn-line-height-lg: $input-btn-line-height-lg !default;
432
+
433
+ $btn-border-width: $input-btn-border-width !default;
434
+
435
+ $btn-font-weight: $font-weight-normal !default;
436
+ $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
437
+ $btn-focus-width: $input-btn-focus-width !default;
438
+ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
439
+ $btn-disabled-opacity: .65 !default;
440
+ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
441
+
442
+ $btn-link-disabled-color: $gray-600 !default;
443
+
444
+ $btn-block-spacing-y: .5rem !default;
445
+
446
+ // Allows for customizing button radius independently from global border radius
447
+ $btn-border-radius: $border-radius !default;
448
+ $btn-border-radius-lg: $border-radius-lg !default;
449
+ $btn-border-radius-sm: $border-radius-sm !default;
450
+
451
+ $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;
452
+
453
+
454
+ // Forms
455
+
456
+ $label-margin-bottom: .5rem !default;
457
+
458
+ $input-padding-y: $input-btn-padding-y !default;
459
+ $input-padding-x: $input-btn-padding-x !default;
460
+ $input-font-family: $input-btn-font-family !default;
461
+ $input-font-size: $input-btn-font-size !default;
462
+ $input-font-weight: $font-weight-base !default;
463
+ $input-line-height: $input-btn-line-height !default;
464
+
465
+ $input-padding-y-sm: $input-btn-padding-y-sm !default;
466
+ $input-padding-x-sm: $input-btn-padding-x-sm !default;
467
+ $input-font-size-sm: $input-btn-font-size-sm !default;
468
+ $input-line-height-sm: $input-btn-line-height-sm !default;
469
+
470
+ $input-padding-y-lg: $input-btn-padding-y-lg !default;
471
+ $input-padding-x-lg: $input-btn-padding-x-lg !default;
472
+ $input-font-size-lg: $input-btn-font-size-lg !default;
473
+ $input-line-height-lg: $input-btn-line-height-lg !default;
474
+
475
+ $input-bg: $white !default;
476
+ $input-disabled-bg: $gray-200 !default;
477
+
478
+ $input-color: $gray-700 !default;
479
+ $input-border-color: $gray-400 !default;
480
+ $input-border-width: $input-btn-border-width !default;
481
+ $input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
482
+
483
+ $input-border-radius: $border-radius !default;
484
+ $input-border-radius-lg: $border-radius-lg !default;
485
+ $input-border-radius-sm: $border-radius-sm !default;
486
+
487
+ $input-focus-bg: $input-bg !default;
488
+ $input-focus-border-color: lighten($component-active-bg, 25%) !default;
489
+ $input-focus-color: $input-color !default;
490
+ $input-focus-width: $input-btn-focus-width !default;
491
+ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
492
+
493
+ $input-placeholder-color: $gray-600 !default;
494
+ $input-plaintext-color: $body-color !default;
495
+
496
+ $input-height-border: $input-border-width * 2 !default;
497
+
498
+ $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
499
+ $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
500
+ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
501
+
502
+ $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
503
+ $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
504
+ $input-height-lg: add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
505
+
506
+ $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
507
+
508
+ $form-text-margin-top: .25rem !default;
509
+
510
+ $form-check-input-gutter: 1.25rem !default;
511
+ $form-check-input-margin-y: .3rem !default;
512
+ $form-check-input-margin-x: .25rem !default;
513
+
514
+ $form-check-inline-margin-x: .75rem !default;
515
+ $form-check-inline-input-margin-x: .3125rem !default;
516
+
517
+ $form-grid-gutter-width: 10px !default;
518
+ $form-group-margin-bottom: 1rem !default;
519
+
520
+ $input-group-addon-color: $input-color !default;
521
+ $input-group-addon-bg: $gray-200 !default;
522
+ $input-group-addon-border-color: $input-border-color !default;
523
+
524
+ $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
525
+
526
+ $custom-control-gutter: .5rem !default;
527
+ $custom-control-spacer-x: 1rem !default;
528
+ $custom-control-cursor: null !default;
529
+
530
+ $custom-control-indicator-size: 1rem !default;
531
+ $custom-control-indicator-bg: $input-bg !default;
532
+
533
+ $custom-control-indicator-bg-size: 50% 50% !default;
534
+ $custom-control-indicator-box-shadow: $input-box-shadow !default;
535
+ $custom-control-indicator-border-color: $gray-500 !default;
536
+ $custom-control-indicator-border-width: $input-border-width !default;
537
+
538
+ $custom-control-label-color: null !default;
539
+
540
+ $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
541
+ $custom-control-label-disabled-color: $gray-600 !default;
542
+
543
+ $custom-control-indicator-checked-color: $component-active-color !default;
544
+ $custom-control-indicator-checked-bg: $component-active-bg !default;
545
+ $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
546
+ $custom-control-indicator-checked-box-shadow: null !default;
547
+ $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
548
+
549
+ $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
550
+ $custom-control-indicator-focus-border-color: $input-focus-border-color !default;
551
+
552
+ $custom-control-indicator-active-color: $component-active-color !default;
553
+ $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
554
+ $custom-control-indicator-active-box-shadow: null !default;
555
+ $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
556
+
557
+ $custom-checkbox-indicator-border-radius: $border-radius !default;
558
+ $custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
559
+
560
+ $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
561
+ $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
562
+ $custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
563
+ $custom-checkbox-indicator-indeterminate-box-shadow: null !default;
564
+ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
565
+
566
+ $custom-radio-indicator-border-radius: 50% !default;
567
+ $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
568
+
569
+ $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
570
+ $custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
571
+ $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
572
+
573
+ $custom-select-padding-y: $input-padding-y !default;
574
+ $custom-select-padding-x: $input-padding-x !default;
575
+ $custom-select-font-family: $input-font-family !default;
576
+ $custom-select-font-size: $input-font-size !default;
577
+ $custom-select-height: $input-height !default;
578
+ $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
579
+ $custom-select-font-weight: $input-font-weight !default;
580
+ $custom-select-line-height: $input-line-height !default;
581
+ $custom-select-color: $input-color !default;
582
+ $custom-select-disabled-color: $gray-600 !default;
583
+ $custom-select-bg: $input-bg !default;
584
+ $custom-select-disabled-bg: $gray-200 !default;
585
+ $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
586
+ $custom-select-indicator-color: $gray-800 !default;
587
+ $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
588
+ $custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
589
+
590
+ $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
591
+ $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
592
+ $custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
593
+
594
+ $custom-select-border-width: $input-border-width !default;
595
+ $custom-select-border-color: $input-border-color !default;
596
+ $custom-select-border-radius: $border-radius !default;
597
+ $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
598
+
599
+ $custom-select-focus-border-color: $input-focus-border-color !default;
600
+ $custom-select-focus-width: $input-focus-width !default;
601
+ $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
602
+
603
+ $custom-select-padding-y-sm: $input-padding-y-sm !default;
604
+ $custom-select-padding-x-sm: $input-padding-x-sm !default;
605
+ $custom-select-font-size-sm: $input-font-size-sm !default;
606
+ $custom-select-height-sm: $input-height-sm !default;
607
+
608
+ $custom-select-padding-y-lg: $input-padding-y-lg !default;
609
+ $custom-select-padding-x-lg: $input-padding-x-lg !default;
610
+ $custom-select-font-size-lg: $input-font-size-lg !default;
611
+ $custom-select-height-lg: $input-height-lg !default;
612
+
613
+ $custom-range-track-width: 100% !default;
614
+ $custom-range-track-height: .5rem !default;
615
+ $custom-range-track-cursor: pointer !default;
616
+ $custom-range-track-bg: $gray-300 !default;
617
+ $custom-range-track-border-radius: 1rem !default;
618
+ $custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
619
+
620
+ $custom-range-thumb-width: 1rem !default;
621
+ $custom-range-thumb-height: $custom-range-thumb-width !default;
622
+ $custom-range-thumb-bg: $component-active-bg !default;
623
+ $custom-range-thumb-border: 0 !default;
624
+ $custom-range-thumb-border-radius: 1rem !default;
625
+ $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
626
+ $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
627
+ $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge
628
+ $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
629
+ $custom-range-thumb-disabled-bg: $gray-500 !default;
630
+
631
+ $custom-file-height: $input-height !default;
632
+ $custom-file-height-inner: $input-height-inner !default;
633
+ $custom-file-focus-border-color: $input-focus-border-color !default;
634
+ $custom-file-focus-box-shadow: $input-focus-box-shadow !default;
635
+ $custom-file-disabled-bg: $input-disabled-bg !default;
636
+
637
+ $custom-file-padding-y: $input-padding-y !default;
638
+ $custom-file-padding-x: $input-padding-x !default;
639
+ $custom-file-line-height: $input-line-height !default;
640
+ $custom-file-font-family: $input-font-family !default;
641
+ $custom-file-font-weight: $input-font-weight !default;
642
+ $custom-file-color: $input-color !default;
643
+ $custom-file-bg: $input-bg !default;
644
+ $custom-file-border-width: $input-border-width !default;
645
+ $custom-file-border-color: $input-border-color !default;
646
+ $custom-file-border-radius: $input-border-radius !default;
647
+ $custom-file-box-shadow: $input-box-shadow !default;
648
+ $custom-file-button-color: $custom-file-color !default;
649
+ $custom-file-button-bg: $input-group-addon-bg !default;
650
+ $custom-file-text: (
651
+ en: "Browse"
652
+ ) !default;
653
+
654
+
655
+ // Form validation
656
+
657
+ $form-feedback-margin-top: $form-text-margin-top !default;
658
+ $form-feedback-font-size: $small-font-size !default;
659
+ $form-feedback-valid-color: theme-color("success") !default;
660
+ $form-feedback-invalid-color: theme-color("danger") !default;
661
+
662
+ $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
663
+ $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path 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'/></svg>") !default;
664
+ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
665
+ $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
666
+
667
+ $form-validation-states: () !default;
668
+ $form-validation-states: map.merge(
669
+ (
670
+ "valid": (
671
+ "color": $form-feedback-valid-color,
672
+ "icon": $form-feedback-icon-valid
673
+ ),
674
+ "invalid": (
675
+ "color": $form-feedback-invalid-color,
676
+ "icon": $form-feedback-icon-invalid
677
+ ),
678
+ ),
679
+ $form-validation-states
680
+ );
681
+
682
+ // Z-index master list
683
+ //
684
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
685
+ // of components dependent on the z-axis and are designed to all work together.
686
+
687
+ $zindex-dropdown: 1000 !default;
688
+ $zindex-sticky: 1020 !default;
689
+ $zindex-fixed: 1030 !default;
690
+ $zindex-modal-backdrop: 1040 !default;
691
+ $zindex-modal: 1050 !default;
692
+ $zindex-popover: 1060 !default;
693
+ $zindex-tooltip: 1070 !default;
694
+
695
+
696
+ // Navs
697
+
698
+ $nav-link-padding-y: .5rem !default;
699
+ $nav-link-padding-x: 1rem !default;
700
+ $nav-link-disabled-color: $gray-600 !default;
701
+
702
+ $nav-tabs-border-color: $gray-300 !default;
703
+ $nav-tabs-border-width: $border-width !default;
704
+ $nav-tabs-border-radius: $border-radius !default;
705
+ $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
706
+ $nav-tabs-link-active-color: $gray-700 !default;
707
+ $nav-tabs-link-active-bg: $body-bg !default;
708
+ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
709
+
710
+ $nav-pills-border-radius: $border-radius !default;
711
+ $nav-pills-link-active-color: $component-active-color !default;
712
+ $nav-pills-link-active-bg: $component-active-bg !default;
713
+
714
+ $nav-divider-color: $gray-200 !default;
715
+ $nav-divider-margin-y: $spacer * .5 !default;
716
+
717
+
718
+ // Navbar
719
+
720
+ $navbar-padding-y: $spacer * .5 !default;
721
+ $navbar-padding-x: $spacer !default;
722
+
723
+ $navbar-nav-link-padding-x: .5rem !default;
724
+
725
+ $navbar-brand-font-size: $font-size-lg !default;
726
+ // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
727
+ $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
728
+ $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
729
+ $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
730
+
731
+ $navbar-toggler-padding-y: .25rem !default;
732
+ $navbar-toggler-padding-x: .75rem !default;
733
+ $navbar-toggler-font-size: $font-size-lg !default;
734
+ $navbar-toggler-border-radius: $btn-border-radius !default;
735
+
736
+ $navbar-nav-scroll-max-height: 75vh !default;
737
+
738
+ $navbar-dark-color: rgba($white, .5) !default;
739
+ $navbar-dark-hover-color: rgba($white, .75) !default;
740
+ $navbar-dark-active-color: $white !default;
741
+ $navbar-dark-disabled-color: rgba($white, .25) !default;
742
+ $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
743
+ $navbar-dark-toggler-border-color: rgba($white, .1) !default;
744
+
745
+ $navbar-light-color: rgba($black, .5) !default;
746
+ $navbar-light-hover-color: rgba($black, .7) !default;
747
+ $navbar-light-active-color: rgba($black, .9) !default;
748
+ $navbar-light-disabled-color: rgba($black, .3) !default;
749
+ $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
750
+ $navbar-light-toggler-border-color: rgba($black, .1) !default;
751
+
752
+ $navbar-light-brand-color: $navbar-light-active-color !default;
753
+ $navbar-light-brand-hover-color: $navbar-light-active-color !default;
754
+ $navbar-dark-brand-color: $navbar-dark-active-color !default;
755
+ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
756
+
757
+
758
+ // Dropdowns
759
+ //
760
+ // Dropdown menu container and contents.
761
+
762
+ $dropdown-min-width: 10rem !default;
763
+ $dropdown-padding-x: 0 !default;
764
+ $dropdown-padding-y: .5rem !default;
765
+ $dropdown-spacer: .125rem !default;
766
+ $dropdown-font-size: $font-size-base !default;
767
+ $dropdown-color: $body-color !default;
768
+ $dropdown-bg: $white !default;
769
+ $dropdown-border-color: rgba($black, .15) !default;
770
+ $dropdown-border-radius: $border-radius !default;
771
+ $dropdown-border-width: $border-width !default;
772
+ $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
773
+ $dropdown-divider-bg: $gray-200 !default;
774
+ $dropdown-divider-margin-y: $nav-divider-margin-y !default;
775
+ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
776
+
777
+ $dropdown-link-color: $gray-900 !default;
778
+ $dropdown-link-hover-color: darken($gray-900, 5%) !default;
779
+ $dropdown-link-hover-bg: $gray-200 !default;
780
+
781
+ $dropdown-link-active-color: $component-active-color !default;
782
+ $dropdown-link-active-bg: $component-active-bg !default;
783
+
784
+ $dropdown-link-disabled-color: $gray-500 !default;
785
+
786
+ $dropdown-item-padding-y: .25rem !default;
787
+ $dropdown-item-padding-x: 1.5rem !default;
788
+
789
+ $dropdown-header-color: $gray-600 !default;
790
+ $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default;
791
+
792
+
793
+ // Pagination
794
+
795
+ $pagination-padding-y: .5rem !default;
796
+ $pagination-padding-x: .75rem !default;
797
+ $pagination-padding-y-sm: .25rem !default;
798
+ $pagination-padding-x-sm: .5rem !default;
799
+ $pagination-padding-y-lg: .75rem !default;
800
+ $pagination-padding-x-lg: 1.5rem !default;
801
+ $pagination-line-height: 1.25 !default;
802
+
803
+ $pagination-color: $link-color !default;
804
+ $pagination-bg: $white !default;
805
+ $pagination-border-width: $border-width !default;
806
+ $pagination-border-color: $gray-300 !default;
807
+
808
+ $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
809
+ $pagination-focus-outline: 0 !default;
810
+
811
+ $pagination-hover-color: $link-hover-color !default;
812
+ $pagination-hover-bg: $gray-200 !default;
813
+ $pagination-hover-border-color: $gray-300 !default;
814
+
815
+ $pagination-active-color: $component-active-color !default;
816
+ $pagination-active-bg: $component-active-bg !default;
817
+ $pagination-active-border-color: $pagination-active-bg !default;
818
+
819
+ $pagination-disabled-color: $gray-600 !default;
820
+ $pagination-disabled-bg: $white !default;
821
+ $pagination-disabled-border-color: $gray-300 !default;
822
+
823
+ $pagination-border-radius-sm: $border-radius-sm !default;
824
+ $pagination-border-radius-lg: $border-radius-lg !default;
825
+
826
+
827
+ // Jumbotron
828
+
829
+ $jumbotron-padding: 2rem !default;
830
+ $jumbotron-color: null !default;
831
+ $jumbotron-bg: $gray-200 !default;
832
+
833
+
834
+ // Cards
835
+
836
+ $card-spacer-y: .75rem !default;
837
+ $card-spacer-x: 1.25rem !default;
838
+ $card-border-width: $border-width !default;
839
+ $card-border-radius: $border-radius !default;
840
+ $card-border-color: rgba($black, .125) !default;
841
+ $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
842
+ $card-cap-bg: rgba($black, .03) !default;
843
+ $card-cap-color: null !default;
844
+ $card-height: null !default;
845
+ $card-color: null !default;
846
+ $card-bg: $white !default;
847
+
848
+ $card-img-overlay-padding: 1.25rem !default;
849
+
850
+ $card-group-margin: $grid-gutter-width * .5 !default;
851
+ $card-deck-margin: $card-group-margin !default;
852
+
853
+ $card-columns-count: 3 !default;
854
+ $card-columns-gap: 1.25rem !default;
855
+ $card-columns-margin: $card-spacer-y !default;
856
+
857
+
858
+ // Tooltips
859
+
860
+ $tooltip-font-size: $font-size-sm !default;
861
+ $tooltip-max-width: 200px !default;
862
+ $tooltip-color: $white !default;
863
+ $tooltip-bg: $black !default;
864
+ $tooltip-border-radius: $border-radius !default;
865
+ $tooltip-opacity: .9 !default;
866
+ $tooltip-padding-y: .25rem !default;
867
+ $tooltip-padding-x: .5rem !default;
868
+ $tooltip-margin: 0 !default;
869
+
870
+ $tooltip-arrow-width: .8rem !default;
871
+ $tooltip-arrow-height: .4rem !default;
872
+ $tooltip-arrow-color: $tooltip-bg !default;
873
+
874
+ // Form tooltips must come after regular tooltips
875
+ $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
876
+ $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
877
+ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
878
+ $form-feedback-tooltip-line-height: $line-height-base !default;
879
+ $form-feedback-tooltip-opacity: $tooltip-opacity !default;
880
+ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
881
+
882
+
883
+ // Popovers
884
+
885
+ $popover-font-size: $font-size-sm !default;
886
+ $popover-bg: $white !default;
887
+ $popover-max-width: 276px !default;
888
+ $popover-border-width: $border-width !default;
889
+ $popover-border-color: rgba($black, .2) !default;
890
+ $popover-border-radius: $border-radius-lg !default;
891
+ $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
892
+ $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
893
+
894
+ $popover-header-bg: darken($popover-bg, 3%) !default;
895
+ $popover-header-color: $headings-color !default;
896
+ $popover-header-padding-y: .5rem !default;
897
+ $popover-header-padding-x: .75rem !default;
898
+
899
+ $popover-body-color: $body-color !default;
900
+ $popover-body-padding-y: $popover-header-padding-y !default;
901
+ $popover-body-padding-x: $popover-header-padding-x !default;
902
+
903
+ $popover-arrow-width: 1rem !default;
904
+ $popover-arrow-height: .5rem !default;
905
+ $popover-arrow-color: $popover-bg !default;
906
+
907
+ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
908
+
909
+
910
+ // Toasts
911
+
912
+ $toast-max-width: 350px !default;
913
+ $toast-padding-x: .75rem !default;
914
+ $toast-padding-y: .25rem !default;
915
+ $toast-font-size: .875rem !default;
916
+ $toast-color: null !default;
917
+ $toast-background-color: rgba($white, .85) !default;
918
+ $toast-border-width: 1px !default;
919
+ $toast-border-color: rgba(0, 0, 0, .1) !default;
920
+ $toast-border-radius: .25rem !default;
921
+ $toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
922
+
923
+ $toast-header-color: $gray-600 !default;
924
+ $toast-header-background-color: rgba($white, .85) !default;
925
+ $toast-header-border-color: rgba(0, 0, 0, .05) !default;
926
+
927
+
928
+ // Badges
929
+
930
+ $badge-font-size: 75% !default;
931
+ $badge-font-weight: $font-weight-bold !default;
932
+ $badge-padding-y: .25em !default;
933
+ $badge-padding-x: .4em !default;
934
+ $badge-border-radius: $border-radius !default;
935
+
936
+ $badge-transition: $btn-transition !default;
937
+ $badge-focus-width: $input-btn-focus-width !default;
938
+
939
+ $badge-pill-padding-x: .6em !default;
940
+ // Use a higher than normal value to ensure completely rounded edges when
941
+ // customizing padding or font-size on labels.
942
+ $badge-pill-border-radius: 10rem !default;
943
+
944
+
945
+ // Modals
946
+
947
+ // Padding applied to the modal body
948
+ $modal-inner-padding: 1rem !default;
949
+
950
+ // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
951
+ $modal-footer-margin-between: .5rem !default;
952
+
953
+ $modal-dialog-margin: .5rem !default;
954
+ $modal-dialog-margin-y-sm-up: 1.75rem !default;
955
+
956
+ $modal-title-line-height: $line-height-base !default;
957
+
958
+ $modal-content-color: null !default;
959
+ $modal-content-bg: $white !default;
960
+ $modal-content-border-color: rgba($black, .2) !default;
961
+ $modal-content-border-width: $border-width !default;
962
+ $modal-content-border-radius: $border-radius-lg !default;
963
+ $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
964
+ $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
965
+ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
966
+
967
+ $modal-backdrop-bg: $black !default;
968
+ $modal-backdrop-opacity: .5 !default;
969
+ $modal-header-border-color: $border-color !default;
970
+ $modal-footer-border-color: $modal-header-border-color !default;
971
+ $modal-header-border-width: $modal-content-border-width !default;
972
+ $modal-footer-border-width: $modal-header-border-width !default;
973
+ $modal-header-padding-y: 1rem !default;
974
+ $modal-header-padding-x: 1rem !default;
975
+ $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
976
+
977
+ $modal-xl: 1140px !default;
978
+ $modal-lg: 800px !default;
979
+ $modal-md: 500px !default;
980
+ $modal-sm: 300px !default;
981
+
982
+ $modal-fade-transform: translate(0, -50px) !default;
983
+ $modal-show-transform: none !default;
984
+ $modal-transition: transform .3s ease-out !default;
985
+ $modal-scale-transform: scale(1.02) !default;
986
+
987
+
988
+ // Alerts
989
+ //
990
+ // Define alert colors, border radius, and padding.
991
+
992
+ $alert-padding-y: .75rem !default;
993
+ $alert-padding-x: 1.25rem !default;
994
+ $alert-margin-bottom: 1rem !default;
995
+ $alert-border-radius: $border-radius !default;
996
+ $alert-link-font-weight: $font-weight-bold !default;
997
+ $alert-border-width: $border-width !default;
998
+
999
+ $alert-bg-level: -10 !default;
1000
+ $alert-border-level: -9 !default;
1001
+ $alert-color-level: 6 !default;
1002
+
1003
+
1004
+ // Progress bars
1005
+
1006
+ $progress-height: 1rem !default;
1007
+ $progress-font-size: $font-size-base * .75 !default;
1008
+ $progress-bg: $gray-200 !default;
1009
+ $progress-border-radius: $border-radius !default;
1010
+ $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
1011
+ $progress-bar-color: $white !default;
1012
+ $progress-bar-bg: theme-color("primary") !default;
1013
+ $progress-bar-animation-timing: 1s linear infinite !default;
1014
+ $progress-bar-transition: width .6s ease !default;
1015
+
1016
+
1017
+ // List group
1018
+
1019
+ $list-group-color: null !default;
1020
+ $list-group-bg: $white !default;
1021
+ $list-group-border-color: rgba($black, .125) !default;
1022
+ $list-group-border-width: $border-width !default;
1023
+ $list-group-border-radius: $border-radius !default;
1024
+
1025
+ $list-group-item-padding-y: .75rem !default;
1026
+ $list-group-item-padding-x: 1.25rem !default;
1027
+
1028
+ $list-group-hover-bg: $gray-100 !default;
1029
+ $list-group-active-color: $component-active-color !default;
1030
+ $list-group-active-bg: $component-active-bg !default;
1031
+ $list-group-active-border-color: $list-group-active-bg !default;
1032
+
1033
+ $list-group-disabled-color: $gray-600 !default;
1034
+ $list-group-disabled-bg: $list-group-bg !default;
1035
+
1036
+ $list-group-action-color: $gray-700 !default;
1037
+ $list-group-action-hover-color: $list-group-action-color !default;
1038
+
1039
+ $list-group-action-active-color: $body-color !default;
1040
+ $list-group-action-active-bg: $gray-200 !default;
1041
+
1042
+
1043
+ // Image thumbnails
1044
+
1045
+ $thumbnail-padding: .25rem !default;
1046
+ $thumbnail-bg: $body-bg !default;
1047
+ $thumbnail-border-width: $border-width !default;
1048
+ $thumbnail-border-color: $gray-300 !default;
1049
+ $thumbnail-border-radius: $border-radius !default;
1050
+ $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
1051
+
1052
+
1053
+ // Figures
1054
+
1055
+ $figure-caption-font-size: 90% !default;
1056
+ $figure-caption-color: $gray-600 !default;
1057
+
1058
+
1059
+ // Breadcrumbs
1060
+
1061
+ $breadcrumb-font-size: null !default;
1062
+
1063
+ $breadcrumb-padding-y: .75rem !default;
1064
+ $breadcrumb-padding-x: 1rem !default;
1065
+ $breadcrumb-item-padding: .5rem !default;
1066
+
1067
+ $breadcrumb-margin-bottom: 1rem !default;
1068
+
1069
+ $breadcrumb-bg: $gray-200 !default;
1070
+ $breadcrumb-divider-color: $gray-600 !default;
1071
+ $breadcrumb-active-color: $gray-600 !default;
1072
+ $breadcrumb-divider: quote("/") !default;
1073
+
1074
+ $breadcrumb-border-radius: $border-radius !default;
1075
+
1076
+
1077
+ // Carousel
1078
+
1079
+ $carousel-control-color: $white !default;
1080
+ $carousel-control-width: 15% !default;
1081
+ $carousel-control-opacity: .5 !default;
1082
+ $carousel-control-hover-opacity: .9 !default;
1083
+ $carousel-control-transition: opacity .15s ease !default;
1084
+
1085
+ $carousel-indicator-width: 30px !default;
1086
+ $carousel-indicator-height: 3px !default;
1087
+ $carousel-indicator-hit-area-height: 10px !default;
1088
+ $carousel-indicator-spacer: 3px !default;
1089
+ $carousel-indicator-active-bg: $white !default;
1090
+ $carousel-indicator-transition: opacity .6s ease !default;
1091
+
1092
+ $carousel-caption-width: 70% !default;
1093
+ $carousel-caption-color: $white !default;
1094
+
1095
+ $carousel-control-icon-width: 20px !default;
1096
+
1097
+ $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
1098
+ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
1099
+
1100
+ $carousel-transition-duration: .6s !default;
1101
+ $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`)
1102
+
1103
+
1104
+ // Spinners
1105
+
1106
+ $spinner-width: 2rem !default;
1107
+ $spinner-height: $spinner-width !default;
1108
+ $spinner-vertical-align: -.125em !default;
1109
+ $spinner-border-width: .25em !default;
1110
+
1111
+ $spinner-width-sm: 1rem !default;
1112
+ $spinner-height-sm: $spinner-width-sm !default;
1113
+ $spinner-border-width-sm: .2em !default;
1114
+
1115
+
1116
+ // Close
1117
+
1118
+ $close-font-size: $font-size-base * 1.5 !default;
1119
+ $close-font-weight: $font-weight-bold !default;
1120
+ $close-color: $black !default;
1121
+ $close-text-shadow: 0 1px 0 $white !default;
1122
+
1123
+
1124
+ // Code
1125
+
1126
+ $code-font-size: 87.5% !default;
1127
+ $code-color: $pink !default;
1128
+
1129
+ $kbd-padding-y: .2rem !default;
1130
+ $kbd-padding-x: .4rem !default;
1131
+ $kbd-font-size: $code-font-size !default;
1132
+ $kbd-color: $white !default;
1133
+ $kbd-bg: $gray-900 !default;
1134
+
1135
+ $pre-color: $gray-900 !default;
1136
+ $pre-scrollable-max-height: 340px !default;
1137
+
1138
+
1139
+ // Utilities
1140
+
1141
+ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
1142
+ $overflows: auto, hidden !default;
1143
+ $positions: static, relative, absolute, fixed, sticky !default;
1144
+ $user-selects: all, auto, none !default;
1145
+
1146
+
1147
+ // Printing
1148
+
1149
+ $print-page-size: a3 !default;
1150
+ $print-body-min-width: map-get($grid-breakpoints, "lg") !default;