jobdone-shared-files 0.0.1-beta.6 → 0.0.1-beta.61

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 (113) hide show
  1. package/ProjectManagement/projectNavbar.vue +144 -70
  2. package/README.md +77 -6
  3. package/common/directives/popovers.js +11 -0
  4. package/common/directives/tooltip.js +11 -0
  5. package/common/format.js +16 -2
  6. package/lightboxWithOverview.vue +132 -0
  7. package/package.json +4 -3
  8. package/style/scss/Common/Animation.scss +6 -0
  9. package/style/scss/Common/SelectableTable.scss +31 -0
  10. package/style/scss/Common/filepond.scss +28 -0
  11. package/style/scss/Common/thumbnail-group.scss +14 -0
  12. package/style/scss/Layout/LayoutBase.scss +25 -10
  13. package/style/scss/Layout/LayoutMobile.scss +203 -0
  14. package/style/scss/Layout/LayoutProject.scss +3 -5
  15. package/style/scss/Layout/LayoutTwoColumn.scss +3 -3
  16. package/style/scss/Settings/_Mixins.scss +1 -0
  17. package/style/scss/Settings/_MobileVariables.scss +12 -0
  18. package/style/scss/Settings/_basic-import.scss +3 -2
  19. package/style/scss/Settings/_bs-variables.scss +114 -74
  20. package/style/scss/Settings/_custom-variables.scss +4 -1
  21. package/tree.vue +17 -10
  22. package/treeItem.vue +1 -1
  23. package/vueLoadingOverlay.vue +10 -19
  24. package/style/scss/Bootstrap/_accordion.scss +0 -158
  25. package/style/scss/Bootstrap/_alert.scss +0 -68
  26. package/style/scss/Bootstrap/_badge.scss +0 -38
  27. package/style/scss/Bootstrap/_breadcrumb.scss +0 -40
  28. package/style/scss/Bootstrap/_button-group.scss +0 -142
  29. package/style/scss/Bootstrap/_buttons.scss +0 -207
  30. package/style/scss/Bootstrap/_card.scss +0 -238
  31. package/style/scss/Bootstrap/_carousel.scss +0 -238
  32. package/style/scss/Bootstrap/_close.scss +0 -61
  33. package/style/scss/Bootstrap/_containers.scss +0 -41
  34. package/style/scss/Bootstrap/_dropdown.scss +0 -250
  35. package/style/scss/Bootstrap/_forms.scss +0 -9
  36. package/style/scss/Bootstrap/_functions.scss +0 -302
  37. package/style/scss/Bootstrap/_grid.scss +0 -33
  38. package/style/scss/Bootstrap/_helpers.scss +0 -10
  39. package/style/scss/Bootstrap/_images.scss +0 -42
  40. package/style/scss/Bootstrap/_list-group.scss +0 -204
  41. package/style/scss/Bootstrap/_maps.scss +0 -121
  42. package/style/scss/Bootstrap/_mixins.scss +0 -42
  43. package/style/scss/Bootstrap/_modal.scss +0 -237
  44. package/style/scss/Bootstrap/_nav.scss +0 -172
  45. package/style/scss/Bootstrap/_navbar.scss +0 -286
  46. package/style/scss/Bootstrap/_offcanvas.scss +0 -146
  47. package/style/scss/Bootstrap/_pagination.scss +0 -109
  48. package/style/scss/Bootstrap/_placeholders.scss +0 -51
  49. package/style/scss/Bootstrap/_popover.scss +0 -196
  50. package/style/scss/Bootstrap/_progress.scss +0 -68
  51. package/style/scss/Bootstrap/_reboot.scss +0 -610
  52. package/style/scss/Bootstrap/_root.scss +0 -195
  53. package/style/scss/Bootstrap/_spinners.scss +0 -85
  54. package/style/scss/Bootstrap/_tables.scss +0 -164
  55. package/style/scss/Bootstrap/_toasts.scss +0 -73
  56. package/style/scss/Bootstrap/_tooltip.scss +0 -120
  57. package/style/scss/Bootstrap/_transitions.scss +0 -27
  58. package/style/scss/Bootstrap/_type.scss +0 -106
  59. package/style/scss/Bootstrap/_utilities.scss +0 -748
  60. package/style/scss/Bootstrap/_variables-dark.scss +0 -70
  61. package/style/scss/Bootstrap/_variables.scss +0 -1703
  62. package/style/scss/Bootstrap/bootstrap-grid.scss +0 -66
  63. package/style/scss/Bootstrap/bootstrap-reboot.scss +0 -10
  64. package/style/scss/Bootstrap/bootstrap-utilities.scss +0 -19
  65. package/style/scss/Bootstrap/bootstrap.scss +0 -52
  66. package/style/scss/Bootstrap/forms/_floating-labels.scss +0 -90
  67. package/style/scss/Bootstrap/forms/_form-check.scss +0 -188
  68. package/style/scss/Bootstrap/forms/_form-control.scss +0 -201
  69. package/style/scss/Bootstrap/forms/_form-range.scss +0 -91
  70. package/style/scss/Bootstrap/forms/_form-select.scss +0 -81
  71. package/style/scss/Bootstrap/forms/_form-text.scss +0 -11
  72. package/style/scss/Bootstrap/forms/_input-group.scss +0 -132
  73. package/style/scss/Bootstrap/forms/_labels.scss +0 -36
  74. package/style/scss/Bootstrap/forms/_validation.scss +0 -12
  75. package/style/scss/Bootstrap/helpers/_clearfix.scss +0 -3
  76. package/style/scss/Bootstrap/helpers/_color-bg.scss +0 -10
  77. package/style/scss/Bootstrap/helpers/_colored-links.scss +0 -12
  78. package/style/scss/Bootstrap/helpers/_position.scss +0 -36
  79. package/style/scss/Bootstrap/helpers/_ratio.scss +0 -26
  80. package/style/scss/Bootstrap/helpers/_stacks.scss +0 -15
  81. package/style/scss/Bootstrap/helpers/_stretched-link.scss +0 -15
  82. package/style/scss/Bootstrap/helpers/_text-truncation.scss +0 -7
  83. package/style/scss/Bootstrap/helpers/_visually-hidden.scss +0 -8
  84. package/style/scss/Bootstrap/helpers/_vr.scss +0 -8
  85. package/style/scss/Bootstrap/mixins/_alert.scss +0 -18
  86. package/style/scss/Bootstrap/mixins/_backdrop.scss +0 -14
  87. package/style/scss/Bootstrap/mixins/_banner.scss +0 -7
  88. package/style/scss/Bootstrap/mixins/_border-radius.scss +0 -78
  89. package/style/scss/Bootstrap/mixins/_box-shadow.scss +0 -18
  90. package/style/scss/Bootstrap/mixins/_breakpoints.scss +0 -127
  91. package/style/scss/Bootstrap/mixins/_buttons.scss +0 -70
  92. package/style/scss/Bootstrap/mixins/_caret.scss +0 -69
  93. package/style/scss/Bootstrap/mixins/_clearfix.scss +0 -9
  94. package/style/scss/Bootstrap/mixins/_color-mode.scss +0 -21
  95. package/style/scss/Bootstrap/mixins/_color-scheme.scss +0 -7
  96. package/style/scss/Bootstrap/mixins/_container.scss +0 -11
  97. package/style/scss/Bootstrap/mixins/_deprecate.scss +0 -10
  98. package/style/scss/Bootstrap/mixins/_forms.scss +0 -153
  99. package/style/scss/Bootstrap/mixins/_gradients.scss +0 -47
  100. package/style/scss/Bootstrap/mixins/_grid.scss +0 -151
  101. package/style/scss/Bootstrap/mixins/_image.scss +0 -16
  102. package/style/scss/Bootstrap/mixins/_list-group.scss +0 -27
  103. package/style/scss/Bootstrap/mixins/_lists.scss +0 -7
  104. package/style/scss/Bootstrap/mixins/_pagination.scss +0 -10
  105. package/style/scss/Bootstrap/mixins/_reset-text.scss +0 -17
  106. package/style/scss/Bootstrap/mixins/_resize.scss +0 -6
  107. package/style/scss/Bootstrap/mixins/_table-variants.scss +0 -24
  108. package/style/scss/Bootstrap/mixins/_text-truncate.scss +0 -8
  109. package/style/scss/Bootstrap/mixins/_transition.scss +0 -26
  110. package/style/scss/Bootstrap/mixins/_utilities.scss +0 -97
  111. package/style/scss/Bootstrap/mixins/_visually-hidden.scss +0 -29
  112. package/style/scss/Bootstrap/utilities/_api.scss +0 -47
  113. package/style/scss/Bootstrap/vendor/_rfs.scss +0 -354
@@ -1,1703 +0,0 @@
1
- // Variables
2
- //
3
- // Variables should follow the `$component-state-property-size` formula for
4
- // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
5
-
6
- // Color system
7
-
8
- // scss-docs-start gray-color-variables
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
- // scss-docs-end gray-color-variables
21
-
22
- // fusv-disable
23
- // scss-docs-start gray-colors-map
24
- $grays: (
25
- "100": $gray-100,
26
- "200": $gray-200,
27
- "300": $gray-300,
28
- "400": $gray-400,
29
- "500": $gray-500,
30
- "600": $gray-600,
31
- "700": $gray-700,
32
- "800": $gray-800,
33
- "900": $gray-900
34
- ) !default;
35
- // scss-docs-end gray-colors-map
36
- // fusv-enable
37
-
38
- // scss-docs-start color-variables
39
- $blue: #0d6efd !default;
40
- $indigo: #6610f2 !default;
41
- $purple: #6f42c1 !default;
42
- $pink: #d63384 !default;
43
- $red: #dc3545 !default;
44
- $orange: #fd7e14 !default;
45
- $yellow: #ffc107 !default;
46
- $green: #198754 !default;
47
- $teal: #20c997 !default;
48
- $cyan: #0dcaf0 !default;
49
- // scss-docs-end color-variables
50
-
51
- // scss-docs-start colors-map
52
- $colors: (
53
- "blue": $blue,
54
- "indigo": $indigo,
55
- "purple": $purple,
56
- "pink": $pink,
57
- "red": $red,
58
- "orange": $orange,
59
- "yellow": $yellow,
60
- "green": $green,
61
- "teal": $teal,
62
- "cyan": $cyan,
63
- "black": $black,
64
- "white": $white,
65
- "gray": $gray-600,
66
- "gray-dark": $gray-800
67
- ) !default;
68
- // scss-docs-end colors-map
69
-
70
- // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
71
- // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
72
- $min-contrast-ratio: 4.5 !default;
73
-
74
- // Customize the light and dark text colors for use in our color contrast function.
75
- $color-contrast-dark: $black !default;
76
- $color-contrast-light: $white !default;
77
-
78
- // fusv-disable
79
- $blue-100: tint-color($blue, 80%) !default;
80
- $blue-200: tint-color($blue, 60%) !default;
81
- $blue-300: tint-color($blue, 40%) !default;
82
- $blue-400: tint-color($blue, 20%) !default;
83
- $blue-500: $blue !default;
84
- $blue-600: shade-color($blue, 20%) !default;
85
- $blue-700: shade-color($blue, 40%) !default;
86
- $blue-800: shade-color($blue, 60%) !default;
87
- $blue-900: shade-color($blue, 80%) !default;
88
-
89
- $indigo-100: tint-color($indigo, 80%) !default;
90
- $indigo-200: tint-color($indigo, 60%) !default;
91
- $indigo-300: tint-color($indigo, 40%) !default;
92
- $indigo-400: tint-color($indigo, 20%) !default;
93
- $indigo-500: $indigo !default;
94
- $indigo-600: shade-color($indigo, 20%) !default;
95
- $indigo-700: shade-color($indigo, 40%) !default;
96
- $indigo-800: shade-color($indigo, 60%) !default;
97
- $indigo-900: shade-color($indigo, 80%) !default;
98
-
99
- $purple-100: tint-color($purple, 80%) !default;
100
- $purple-200: tint-color($purple, 60%) !default;
101
- $purple-300: tint-color($purple, 40%) !default;
102
- $purple-400: tint-color($purple, 20%) !default;
103
- $purple-500: $purple !default;
104
- $purple-600: shade-color($purple, 20%) !default;
105
- $purple-700: shade-color($purple, 40%) !default;
106
- $purple-800: shade-color($purple, 60%) !default;
107
- $purple-900: shade-color($purple, 80%) !default;
108
-
109
- $pink-100: tint-color($pink, 80%) !default;
110
- $pink-200: tint-color($pink, 60%) !default;
111
- $pink-300: tint-color($pink, 40%) !default;
112
- $pink-400: tint-color($pink, 20%) !default;
113
- $pink-500: $pink !default;
114
- $pink-600: shade-color($pink, 20%) !default;
115
- $pink-700: shade-color($pink, 40%) !default;
116
- $pink-800: shade-color($pink, 60%) !default;
117
- $pink-900: shade-color($pink, 80%) !default;
118
-
119
- $red-100: tint-color($red, 80%) !default;
120
- $red-200: tint-color($red, 60%) !default;
121
- $red-300: tint-color($red, 40%) !default;
122
- $red-400: tint-color($red, 20%) !default;
123
- $red-500: $red !default;
124
- $red-600: shade-color($red, 20%) !default;
125
- $red-700: shade-color($red, 40%) !default;
126
- $red-800: shade-color($red, 60%) !default;
127
- $red-900: shade-color($red, 80%) !default;
128
-
129
- $orange-100: tint-color($orange, 80%) !default;
130
- $orange-200: tint-color($orange, 60%) !default;
131
- $orange-300: tint-color($orange, 40%) !default;
132
- $orange-400: tint-color($orange, 20%) !default;
133
- $orange-500: $orange !default;
134
- $orange-600: shade-color($orange, 20%) !default;
135
- $orange-700: shade-color($orange, 40%) !default;
136
- $orange-800: shade-color($orange, 60%) !default;
137
- $orange-900: shade-color($orange, 80%) !default;
138
-
139
- $yellow-100: tint-color($yellow, 80%) !default;
140
- $yellow-200: tint-color($yellow, 60%) !default;
141
- $yellow-300: tint-color($yellow, 40%) !default;
142
- $yellow-400: tint-color($yellow, 20%) !default;
143
- $yellow-500: $yellow !default;
144
- $yellow-600: shade-color($yellow, 20%) !default;
145
- $yellow-700: shade-color($yellow, 40%) !default;
146
- $yellow-800: shade-color($yellow, 60%) !default;
147
- $yellow-900: shade-color($yellow, 80%) !default;
148
-
149
- $green-100: tint-color($green, 80%) !default;
150
- $green-200: tint-color($green, 60%) !default;
151
- $green-300: tint-color($green, 40%) !default;
152
- $green-400: tint-color($green, 20%) !default;
153
- $green-500: $green !default;
154
- $green-600: shade-color($green, 20%) !default;
155
- $green-700: shade-color($green, 40%) !default;
156
- $green-800: shade-color($green, 60%) !default;
157
- $green-900: shade-color($green, 80%) !default;
158
-
159
- $teal-100: tint-color($teal, 80%) !default;
160
- $teal-200: tint-color($teal, 60%) !default;
161
- $teal-300: tint-color($teal, 40%) !default;
162
- $teal-400: tint-color($teal, 20%) !default;
163
- $teal-500: $teal !default;
164
- $teal-600: shade-color($teal, 20%) !default;
165
- $teal-700: shade-color($teal, 40%) !default;
166
- $teal-800: shade-color($teal, 60%) !default;
167
- $teal-900: shade-color($teal, 80%) !default;
168
-
169
- $cyan-100: tint-color($cyan, 80%) !default;
170
- $cyan-200: tint-color($cyan, 60%) !default;
171
- $cyan-300: tint-color($cyan, 40%) !default;
172
- $cyan-400: tint-color($cyan, 20%) !default;
173
- $cyan-500: $cyan !default;
174
- $cyan-600: shade-color($cyan, 20%) !default;
175
- $cyan-700: shade-color($cyan, 40%) !default;
176
- $cyan-800: shade-color($cyan, 60%) !default;
177
- $cyan-900: shade-color($cyan, 80%) !default;
178
-
179
- $blues: (
180
- "blue-100": $blue-100,
181
- "blue-200": $blue-200,
182
- "blue-300": $blue-300,
183
- "blue-400": $blue-400,
184
- "blue-500": $blue-500,
185
- "blue-600": $blue-600,
186
- "blue-700": $blue-700,
187
- "blue-800": $blue-800,
188
- "blue-900": $blue-900
189
- ) !default;
190
-
191
- $indigos: (
192
- "indigo-100": $indigo-100,
193
- "indigo-200": $indigo-200,
194
- "indigo-300": $indigo-300,
195
- "indigo-400": $indigo-400,
196
- "indigo-500": $indigo-500,
197
- "indigo-600": $indigo-600,
198
- "indigo-700": $indigo-700,
199
- "indigo-800": $indigo-800,
200
- "indigo-900": $indigo-900
201
- ) !default;
202
-
203
- $purples: (
204
- "purple-100": $purple-100,
205
- "purple-200": $purple-200,
206
- "purple-300": $purple-300,
207
- "purple-400": $purple-400,
208
- "purple-500": $purple-500,
209
- "purple-600": $purple-600,
210
- "purple-700": $purple-700,
211
- "purple-800": $purple-800,
212
- "purple-900": $purple-900
213
- ) !default;
214
-
215
- $pinks: (
216
- "pink-100": $pink-100,
217
- "pink-200": $pink-200,
218
- "pink-300": $pink-300,
219
- "pink-400": $pink-400,
220
- "pink-500": $pink-500,
221
- "pink-600": $pink-600,
222
- "pink-700": $pink-700,
223
- "pink-800": $pink-800,
224
- "pink-900": $pink-900
225
- ) !default;
226
-
227
- $reds: (
228
- "red-100": $red-100,
229
- "red-200": $red-200,
230
- "red-300": $red-300,
231
- "red-400": $red-400,
232
- "red-500": $red-500,
233
- "red-600": $red-600,
234
- "red-700": $red-700,
235
- "red-800": $red-800,
236
- "red-900": $red-900
237
- ) !default;
238
-
239
- $oranges: (
240
- "orange-100": $orange-100,
241
- "orange-200": $orange-200,
242
- "orange-300": $orange-300,
243
- "orange-400": $orange-400,
244
- "orange-500": $orange-500,
245
- "orange-600": $orange-600,
246
- "orange-700": $orange-700,
247
- "orange-800": $orange-800,
248
- "orange-900": $orange-900
249
- ) !default;
250
-
251
- $yellows: (
252
- "yellow-100": $yellow-100,
253
- "yellow-200": $yellow-200,
254
- "yellow-300": $yellow-300,
255
- "yellow-400": $yellow-400,
256
- "yellow-500": $yellow-500,
257
- "yellow-600": $yellow-600,
258
- "yellow-700": $yellow-700,
259
- "yellow-800": $yellow-800,
260
- "yellow-900": $yellow-900
261
- ) !default;
262
-
263
- $greens: (
264
- "green-100": $green-100,
265
- "green-200": $green-200,
266
- "green-300": $green-300,
267
- "green-400": $green-400,
268
- "green-500": $green-500,
269
- "green-600": $green-600,
270
- "green-700": $green-700,
271
- "green-800": $green-800,
272
- "green-900": $green-900
273
- ) !default;
274
-
275
- $teals: (
276
- "teal-100": $teal-100,
277
- "teal-200": $teal-200,
278
- "teal-300": $teal-300,
279
- "teal-400": $teal-400,
280
- "teal-500": $teal-500,
281
- "teal-600": $teal-600,
282
- "teal-700": $teal-700,
283
- "teal-800": $teal-800,
284
- "teal-900": $teal-900
285
- ) !default;
286
-
287
- $cyans: (
288
- "cyan-100": $cyan-100,
289
- "cyan-200": $cyan-200,
290
- "cyan-300": $cyan-300,
291
- "cyan-400": $cyan-400,
292
- "cyan-500": $cyan-500,
293
- "cyan-600": $cyan-600,
294
- "cyan-700": $cyan-700,
295
- "cyan-800": $cyan-800,
296
- "cyan-900": $cyan-900
297
- ) !default;
298
- // fusv-enable
299
-
300
- // scss-docs-start theme-color-variables
301
- $primary: $blue !default;
302
- $secondary: $gray-600 !default;
303
- $success: $green !default;
304
- $info: $cyan !default;
305
- $warning: $yellow !default;
306
- $danger: $red !default;
307
- $light: $gray-100 !default;
308
- $dark: $gray-900 !default;
309
- // scss-docs-end theme-color-variables
310
-
311
- // scss-docs-start theme-colors-map
312
- $theme-colors: (
313
- "primary": $primary,
314
- "secondary": $secondary,
315
- "success": $success,
316
- "info": $info,
317
- "warning": $warning,
318
- "danger": $danger,
319
- "light": $light,
320
- "dark": $dark
321
- ) !default;
322
- // scss-docs-end theme-colors-map
323
-
324
- $primary-text: $blue-600 !default;
325
- $secondary-text: $gray-600 !default;
326
- $success-text: $green-600 !default;
327
- $info-text: $cyan-700 !default;
328
- $warning-text: $yellow-700 !default;
329
- $danger-text: $red-600 !default;
330
- $light-text: $gray-600 !default;
331
- $dark-text: $gray-700 !default;
332
-
333
- $primary-bg-subtle: $blue-100 !default;
334
- $secondary-bg-subtle: $gray-100 !default;
335
- $success-bg-subtle: $green-100 !default;
336
- $info-bg-subtle: $cyan-100 !default;
337
- $warning-bg-subtle: $yellow-100 !default;
338
- $danger-bg-subtle: $red-100 !default;
339
- $light-bg-subtle: mix($gray-100, $white) !default;
340
- $dark-bg-subtle: $gray-400 !default;
341
-
342
- $primary-border-subtle: $blue-200 !default;
343
- $secondary-border-subtle: $gray-200 !default;
344
- $success-border-subtle: $green-200 !default;
345
- $info-border-subtle: $cyan-200 !default;
346
- $warning-border-subtle: $yellow-200 !default;
347
- $danger-border-subtle: $red-200 !default;
348
- $light-border-subtle: $gray-200 !default;
349
- $dark-border-subtle: $gray-500 !default;
350
-
351
- // Characters which are escaped by the escape-svg function
352
- $escaped-characters: (
353
- ("<", "%3c"),
354
- (">", "%3e"),
355
- ("#", "%23"),
356
- ("(", "%28"),
357
- (")", "%29"),
358
- ) !default;
359
-
360
- // Options
361
- //
362
- // Quickly modify global styling by enabling or disabling optional features.
363
-
364
- $enable-caret: true !default;
365
- $enable-rounded: true !default;
366
- $enable-shadows: false !default;
367
- $enable-gradients: false !default;
368
- $enable-transitions: true !default;
369
- $enable-reduced-motion: true !default;
370
- $enable-smooth-scroll: true !default;
371
- $enable-grid-classes: true !default;
372
- $enable-container-classes: true !default;
373
- $enable-cssgrid: false !default;
374
- $enable-button-pointers: true !default;
375
- $enable-rfs: true !default;
376
- $enable-validation-icons: true !default;
377
- $enable-negative-margins: false !default;
378
- $enable-deprecation-messages: true !default;
379
- $enable-important-utilities: true !default;
380
-
381
- $enable-dark-mode: true !default;
382
- $color-mode-type: data !default; // `data` or `media-query`
383
-
384
- // Prefix for :root CSS variables
385
-
386
- $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
387
- $prefix: $variable-prefix !default;
388
-
389
- // Gradient
390
- //
391
- // The gradient which is added to components if `$enable-gradients` is `true`
392
- // This gradient is also added to elements with `.bg-gradient`
393
- // scss-docs-start variable-gradient
394
- $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
395
- // scss-docs-end variable-gradient
396
-
397
- // Spacing
398
- //
399
- // Control the default styling of most Bootstrap elements by modifying these
400
- // variables. Mostly focused on spacing.
401
- // You can add more entries to the $spacers map, should you need more variation.
402
-
403
- // scss-docs-start spacer-variables-maps
404
- $spacer: 1rem !default;
405
- $spacers: (
406
- 0: 0,
407
- 1: $spacer * .25,
408
- 2: $spacer * .5,
409
- 3: $spacer,
410
- 4: $spacer * 1.5,
411
- 5: $spacer * 3,
412
- ) !default;
413
- // scss-docs-end spacer-variables-maps
414
-
415
- // Position
416
- //
417
- // Define the edge positioning anchors of the position utilities.
418
-
419
- // scss-docs-start position-map
420
- $position-values: (
421
- 0: 0,
422
- 50: 50%,
423
- 100: 100%
424
- ) !default;
425
- // scss-docs-end position-map
426
-
427
- // Body
428
- //
429
- // Settings for the `<body>` element.
430
-
431
- $body-text-align: null !default;
432
- $body-color: $gray-900 !default;
433
- $body-bg: $white !default;
434
-
435
- $body-emphasis-color: $black !default;
436
-
437
- $body-secondary-color: rgba($body-color, .75) !default;
438
- $body-secondary-bg: $gray-200 !default;
439
-
440
- $body-tertiary-color: rgba($body-color, .5) !default;
441
- $body-tertiary-bg: $gray-100 !default;
442
-
443
- $emphasis-color: $black !default;
444
-
445
- // Links
446
- //
447
- // Style anchor elements.
448
-
449
- $link-color: $primary !default;
450
- $link-decoration: underline !default;
451
- $link-shade-percentage: 20% !default;
452
- $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
453
- $link-hover-decoration: null !default;
454
-
455
- $stretched-link-pseudo-element: after !default;
456
- $stretched-link-z-index: 1 !default;
457
-
458
- // Paragraphs
459
- //
460
- // Style p element.
461
-
462
- $paragraph-margin-bottom: 1rem !default;
463
-
464
-
465
- // Grid breakpoints
466
- //
467
- // Define the minimum dimensions at which your layout will change,
468
- // adapting to different screen sizes, for use in media queries.
469
-
470
- // scss-docs-start grid-breakpoints
471
- $grid-breakpoints: (
472
- xs: 0,
473
- sm: 576px,
474
- md: 768px,
475
- lg: 992px,
476
- xl: 1200px,
477
- xxl: 1400px
478
- ) !default;
479
- // scss-docs-end grid-breakpoints
480
-
481
- @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
482
- @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
483
-
484
-
485
- // Grid containers
486
- //
487
- // Define the maximum width of `.container` for different screen sizes.
488
-
489
- // scss-docs-start container-max-widths
490
- $container-max-widths: (
491
- sm: 540px,
492
- md: 720px,
493
- lg: 960px,
494
- xl: 1140px,
495
- xxl: 1320px
496
- ) !default;
497
- // scss-docs-end container-max-widths
498
-
499
- @include _assert-ascending($container-max-widths, "$container-max-widths");
500
-
501
-
502
- // Grid columns
503
- //
504
- // Set the number of columns and specify the width of the gutters.
505
-
506
- $grid-columns: 12 !default;
507
- $grid-gutter-width: 1.5rem !default;
508
- $grid-row-columns: 6 !default;
509
-
510
- // Container padding
511
-
512
- $container-padding-x: $grid-gutter-width !default;
513
-
514
-
515
- // Components
516
- //
517
- // Define common padding and border radius sizes and more.
518
-
519
- // scss-docs-start border-variables
520
- $border-width: 1px !default;
521
- $border-widths: (
522
- 1: 1px,
523
- 2: 2px,
524
- 3: 3px,
525
- 4: 4px,
526
- 5: 5px
527
- ) !default;
528
- $border-style: solid !default;
529
- $border-color: $gray-300 !default;
530
- $border-color-translucent: rgba($black, .175) !default;
531
- // scss-docs-end border-variables
532
-
533
- // scss-docs-start border-radius-variables
534
- $border-radius: .375rem !default;
535
- $border-radius-sm: .25rem !default;
536
- $border-radius-lg: .5rem !default;
537
- $border-radius-xl: 1rem !default;
538
- $border-radius-2xl: 2rem !default;
539
- $border-radius-pill: 50rem !default;
540
- // scss-docs-end border-radius-variables
541
-
542
- // scss-docs-start box-shadow-variables
543
- $box-shadow: 0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15) !default;
544
- $box-shadow-sm: 0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075) !default;
545
- $box-shadow-lg: 0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175) !default;
546
- $box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075) !default;
547
- // scss-docs-end box-shadow-variables
548
-
549
- $component-active-color: $white !default;
550
- $component-active-bg: $primary !default;
551
-
552
- // scss-docs-start caret-variables
553
- $caret-width: .3em !default;
554
- $caret-vertical-align: $caret-width * .85 !default;
555
- $caret-spacing: $caret-width * .85 !default;
556
- // scss-docs-end caret-variables
557
-
558
- $transition-base: all .2s ease-in-out !default;
559
- $transition-fade: opacity .15s linear !default;
560
- // scss-docs-start collapse-transition
561
- $transition-collapse: height .35s ease !default;
562
- $transition-collapse-width: width .35s ease !default;
563
- // scss-docs-end collapse-transition
564
-
565
- // stylelint-disable function-disallowed-list
566
- // scss-docs-start aspect-ratios
567
- $aspect-ratios: (
568
- "1x1": 100%,
569
- "4x3": calc(3 / 4 * 100%),
570
- "16x9": calc(9 / 16 * 100%),
571
- "21x9": calc(9 / 21 * 100%)
572
- ) !default;
573
- // scss-docs-end aspect-ratios
574
- // stylelint-enable function-disallowed-list
575
-
576
- // Typography
577
- //
578
- // Font, line-height, and color for body text, headings, and more.
579
-
580
- // scss-docs-start font-variables
581
- // stylelint-disable value-keyword-case
582
- $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
583
- $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
584
- // stylelint-enable value-keyword-case
585
- $font-family-base: var(--#{$prefix}font-sans-serif) !default;
586
- $font-family-code: var(--#{$prefix}font-monospace) !default;
587
-
588
- // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
589
- // $font-size-base affects the font size of the body text
590
- $font-size-root: null !default;
591
- $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
592
- $font-size-sm: $font-size-base * .875 !default;
593
- $font-size-lg: $font-size-base * 1.25 !default;
594
-
595
- $font-weight-lighter: lighter !default;
596
- $font-weight-light: 300 !default;
597
- $font-weight-normal: 400 !default;
598
- $font-weight-medium: 500 !default;
599
- $font-weight-semibold: 600 !default;
600
- $font-weight-bold: 700 !default;
601
- $font-weight-bolder: bolder !default;
602
-
603
- $font-weight-base: $font-weight-normal !default;
604
-
605
- $line-height-base: 1.5 !default;
606
- $line-height-sm: 1.25 !default;
607
- $line-height-lg: 2 !default;
608
-
609
- $h1-font-size: $font-size-base * 2.5 !default;
610
- $h2-font-size: $font-size-base * 2 !default;
611
- $h3-font-size: $font-size-base * 1.75 !default;
612
- $h4-font-size: $font-size-base * 1.5 !default;
613
- $h5-font-size: $font-size-base * 1.25 !default;
614
- $h6-font-size: $font-size-base !default;
615
- // scss-docs-end font-variables
616
-
617
- // scss-docs-start font-sizes
618
- $font-sizes: (
619
- 1: $h1-font-size,
620
- 2: $h2-font-size,
621
- 3: $h3-font-size,
622
- 4: $h4-font-size,
623
- 5: $h5-font-size,
624
- 6: $h6-font-size
625
- ) !default;
626
- // scss-docs-end font-sizes
627
-
628
- // scss-docs-start headings-variables
629
- $headings-margin-bottom: $spacer * .5 !default;
630
- $headings-font-family: null !default;
631
- $headings-font-style: null !default;
632
- $headings-font-weight: 500 !default;
633
- $headings-line-height: 1.2 !default;
634
- $headings-color: null !default;
635
- // scss-docs-end headings-variables
636
-
637
- // scss-docs-start display-headings
638
- $display-font-sizes: (
639
- 1: 5rem,
640
- 2: 4.5rem,
641
- 3: 4rem,
642
- 4: 3.5rem,
643
- 5: 3rem,
644
- 6: 2.5rem
645
- ) !default;
646
-
647
- $display-font-family: null !default;
648
- $display-font-style: null !default;
649
- $display-font-weight: 300 !default;
650
- $display-line-height: $headings-line-height !default;
651
- // scss-docs-end display-headings
652
-
653
- // scss-docs-start type-variables
654
- $lead-font-size: $font-size-base * 1.25 !default;
655
- $lead-font-weight: 300 !default;
656
-
657
- $small-font-size: .875em !default;
658
-
659
- $sub-sup-font-size: .75em !default;
660
-
661
- $text-muted: var(--#{$prefix}secondary-color) !default;
662
-
663
- $initialism-font-size: $small-font-size !default;
664
-
665
- $blockquote-margin-y: $spacer !default;
666
- $blockquote-font-size: $font-size-base * 1.25 !default;
667
- $blockquote-footer-color: $gray-600 !default;
668
- $blockquote-footer-font-size: $small-font-size !default;
669
-
670
- $hr-margin-y: $spacer !default;
671
- $hr-color: inherit !default;
672
-
673
- // fusv-disable
674
- $hr-bg-color: null !default; // Deprecated in v5.2.0
675
- $hr-height: null !default; // Deprecated in v5.2.0
676
- // fusv-enable
677
-
678
- $hr-border-color: null !default; // Allows for inherited colors
679
- $hr-border-width: var(--#{$prefix}border-width) !default;
680
- $hr-opacity: .25 !default;
681
-
682
- $legend-margin-bottom: .5rem !default;
683
- $legend-font-size: 1.5rem !default;
684
- $legend-font-weight: null !default;
685
-
686
- $dt-font-weight: $font-weight-bold !default;
687
-
688
- $list-inline-padding: .5rem !default;
689
-
690
- $mark-padding: .1875em !default;
691
- $mark-bg: $yellow-100 !default;
692
- // scss-docs-end type-variables
693
-
694
-
695
- // Tables
696
- //
697
- // Customizes the `.table` component with basic values, each used across all table variations.
698
-
699
- // scss-docs-start table-variables
700
- $table-cell-padding-y: .5rem !default;
701
- $table-cell-padding-x: .5rem !default;
702
- $table-cell-padding-y-sm: .25rem !default;
703
- $table-cell-padding-x-sm: .25rem !default;
704
-
705
- $table-cell-vertical-align: top !default;
706
-
707
- $table-color: var(--#{$prefix}body-color) !default;
708
- $table-bg: transparent !default;
709
- $table-accent-bg: transparent !default;
710
-
711
- $table-th-font-weight: null !default;
712
-
713
- $table-striped-color: $table-color !default;
714
- $table-striped-bg-factor: .05 !default;
715
- $table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
716
-
717
- $table-active-color: $table-color !default;
718
- $table-active-bg-factor: .1 !default;
719
- $table-active-bg: rgba($black, $table-active-bg-factor) !default;
720
-
721
- $table-hover-color: $table-color !default;
722
- $table-hover-bg-factor: .075 !default;
723
- $table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
724
-
725
- $table-border-factor: .1 !default;
726
- $table-border-width: var(--#{$prefix}border-width) !default;
727
- $table-border-color: var(--#{$prefix}border-color) !default;
728
-
729
- $table-striped-order: odd !default;
730
- $table-striped-columns-order: even !default;
731
-
732
- $table-group-separator-color: currentcolor !default;
733
-
734
- $table-caption-color: $text-muted !default;
735
-
736
- $table-bg-scale: -80% !default;
737
- // scss-docs-end table-variables
738
-
739
- // scss-docs-start table-loop
740
- $table-variants: (
741
- "primary": shift-color($primary, $table-bg-scale),
742
- "secondary": shift-color($secondary, $table-bg-scale),
743
- "success": shift-color($success, $table-bg-scale),
744
- "info": shift-color($info, $table-bg-scale),
745
- "warning": shift-color($warning, $table-bg-scale),
746
- "danger": shift-color($danger, $table-bg-scale),
747
- "light": $light,
748
- "dark": $dark,
749
- ) !default;
750
- // scss-docs-end table-loop
751
-
752
-
753
- // Buttons + Forms
754
- //
755
- // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
756
-
757
- // scss-docs-start input-btn-variables
758
- $input-btn-padding-y: .375rem !default;
759
- $input-btn-padding-x: .75rem !default;
760
- $input-btn-font-family: null !default;
761
- $input-btn-font-size: $font-size-base !default;
762
- $input-btn-line-height: $line-height-base !default;
763
-
764
- $input-btn-focus-width: .25rem !default;
765
- $input-btn-focus-color-opacity: .25 !default;
766
- $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
767
- $input-btn-focus-blur: 0 !default;
768
- $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
769
-
770
- $input-btn-padding-y-sm: .25rem !default;
771
- $input-btn-padding-x-sm: .5rem !default;
772
- $input-btn-font-size-sm: $font-size-sm !default;
773
-
774
- $input-btn-padding-y-lg: .5rem !default;
775
- $input-btn-padding-x-lg: 1rem !default;
776
- $input-btn-font-size-lg: $font-size-lg !default;
777
-
778
- $input-btn-border-width: var(--#{$prefix}border-width) !default;
779
- // scss-docs-end input-btn-variables
780
-
781
-
782
- // Buttons
783
- //
784
- // For each of Bootstrap's buttons, define text, background, and border color.
785
-
786
- // scss-docs-start btn-variables
787
- $btn-padding-y: $input-btn-padding-y !default;
788
- $btn-padding-x: $input-btn-padding-x !default;
789
- $btn-font-family: $input-btn-font-family !default;
790
- $btn-font-size: $input-btn-font-size !default;
791
- $btn-line-height: $input-btn-line-height !default;
792
- $btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
793
-
794
- $btn-padding-y-sm: $input-btn-padding-y-sm !default;
795
- $btn-padding-x-sm: $input-btn-padding-x-sm !default;
796
- $btn-font-size-sm: $input-btn-font-size-sm !default;
797
-
798
- $btn-padding-y-lg: $input-btn-padding-y-lg !default;
799
- $btn-padding-x-lg: $input-btn-padding-x-lg !default;
800
- $btn-font-size-lg: $input-btn-font-size-lg !default;
801
-
802
- $btn-border-width: $input-btn-border-width !default;
803
-
804
- $btn-font-weight: $font-weight-normal !default;
805
- $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
806
- $btn-focus-width: $input-btn-focus-width !default;
807
- $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
808
- $btn-disabled-opacity: .65 !default;
809
- $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
810
-
811
- $btn-link-color: var(--#{$prefix}link-color) !default;
812
- $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
813
- $btn-link-disabled-color: $gray-600 !default;
814
-
815
- // Allows for customizing button radius independently from global border radius
816
- $btn-border-radius: $border-radius !default;
817
- $btn-border-radius-sm: $border-radius-sm !default;
818
- $btn-border-radius-lg: $border-radius-lg !default;
819
-
820
- $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;
821
-
822
- $btn-hover-bg-shade-amount: 15% !default;
823
- $btn-hover-bg-tint-amount: 15% !default;
824
- $btn-hover-border-shade-amount: 20% !default;
825
- $btn-hover-border-tint-amount: 10% !default;
826
- $btn-active-bg-shade-amount: 20% !default;
827
- $btn-active-bg-tint-amount: 20% !default;
828
- $btn-active-border-shade-amount: 25% !default;
829
- $btn-active-border-tint-amount: 10% !default;
830
- // scss-docs-end btn-variables
831
-
832
-
833
- // Forms
834
-
835
- // scss-docs-start form-text-variables
836
- $form-text-margin-top: .25rem !default;
837
- $form-text-font-size: $small-font-size !default;
838
- $form-text-font-style: null !default;
839
- $form-text-font-weight: null !default;
840
- $form-text-color: $text-muted !default;
841
- // scss-docs-end form-text-variables
842
-
843
- // scss-docs-start form-label-variables
844
- $form-label-margin-bottom: .5rem !default;
845
- $form-label-font-size: null !default;
846
- $form-label-font-style: null !default;
847
- $form-label-font-weight: null !default;
848
- $form-label-color: null !default;
849
- // scss-docs-end form-label-variables
850
-
851
- // scss-docs-start form-input-variables
852
- $input-padding-y: $input-btn-padding-y !default;
853
- $input-padding-x: $input-btn-padding-x !default;
854
- $input-font-family: $input-btn-font-family !default;
855
- $input-font-size: $input-btn-font-size !default;
856
- $input-font-weight: $font-weight-base !default;
857
- $input-line-height: $input-btn-line-height !default;
858
-
859
- $input-padding-y-sm: $input-btn-padding-y-sm !default;
860
- $input-padding-x-sm: $input-btn-padding-x-sm !default;
861
- $input-font-size-sm: $input-btn-font-size-sm !default;
862
-
863
- $input-padding-y-lg: $input-btn-padding-y-lg !default;
864
- $input-padding-x-lg: $input-btn-padding-x-lg !default;
865
- $input-font-size-lg: $input-btn-font-size-lg !default;
866
-
867
- $input-bg: var(--#{$prefix}form-control-bg) !default;
868
- $input-disabled-color: null !default;
869
- $input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
870
- $input-disabled-border-color: null !default;
871
-
872
- $input-color: var(--#{$prefix}body-color) !default;
873
- $input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
874
- $input-border-width: $input-btn-border-width !default;
875
- $input-box-shadow: $box-shadow-inset !default;
876
-
877
- $input-border-radius: $border-radius !default;
878
- $input-border-radius-sm: $border-radius-sm !default;
879
- $input-border-radius-lg: $border-radius-lg !default;
880
-
881
- $input-focus-bg: $input-bg !default;
882
- $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
883
- $input-focus-color: $input-color !default;
884
- $input-focus-width: $input-btn-focus-width !default;
885
- $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
886
-
887
- $input-placeholder-color: var(--#{$prefix}secondary-color) !default;
888
- $input-plaintext-color: var(--#{$prefix}body-color) !default;
889
-
890
- $input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
891
-
892
- $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
893
- $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
894
- $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
895
-
896
- $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
897
- $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
898
- $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
899
-
900
- $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
901
-
902
- $form-color-width: 3rem !default;
903
- // scss-docs-end form-input-variables
904
-
905
- // scss-docs-start form-check-variables
906
- $form-check-input-width: 1em !default;
907
- $form-check-min-height: $font-size-base * $line-height-base !default;
908
- $form-check-padding-start: $form-check-input-width + .5em !default;
909
- $form-check-margin-bottom: .125rem !default;
910
- $form-check-label-color: null !default;
911
- $form-check-label-cursor: null !default;
912
- $form-check-transition: null !default;
913
-
914
- $form-check-input-active-filter: brightness(90%) !default;
915
-
916
- $form-check-input-bg: $input-bg !default;
917
- $form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
918
- $form-check-input-border-radius: .25em !default;
919
- $form-check-radio-border-radius: 50% !default;
920
- $form-check-input-focus-border: $input-focus-border-color !default;
921
- $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
922
-
923
- $form-check-input-checked-color: $component-active-color !default;
924
- $form-check-input-checked-bg-color: $component-active-bg !default;
925
- $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
926
- $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
927
- $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
928
-
929
- $form-check-input-indeterminate-color: $component-active-color !default;
930
- $form-check-input-indeterminate-bg-color: $component-active-bg !default;
931
- $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
932
- $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
933
-
934
- $form-check-input-disabled-opacity: .5 !default;
935
- $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
936
- $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
937
-
938
- $form-check-inline-margin-end: 1rem !default;
939
- // scss-docs-end form-check-variables
940
-
941
- // scss-docs-start form-switch-variables
942
- $form-switch-color: rgba($black, .25) !default;
943
- $form-switch-width: 2em !default;
944
- $form-switch-padding-start: $form-switch-width + .5em !default;
945
- $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
946
- $form-switch-border-radius: $form-switch-width !default;
947
- $form-switch-transition: background-position .15s ease-in-out !default;
948
-
949
- $form-switch-focus-color: $input-focus-border-color !default;
950
- $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
951
-
952
- $form-switch-checked-color: $component-active-color !default;
953
- $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
954
- $form-switch-checked-bg-position: right center !default;
955
- // scss-docs-end form-switch-variables
956
-
957
- // scss-docs-start input-group-variables
958
- $input-group-addon-padding-y: $input-padding-y !default;
959
- $input-group-addon-padding-x: $input-padding-x !default;
960
- $input-group-addon-font-weight: $input-font-weight !default;
961
- $input-group-addon-color: $input-color !default;
962
- $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
963
- $input-group-addon-border-color: $input-border-color !default;
964
- // scss-docs-end input-group-variables
965
-
966
- // scss-docs-start form-select-variables
967
- $form-select-padding-y: $input-padding-y !default;
968
- $form-select-padding-x: $input-padding-x !default;
969
- $form-select-font-family: $input-font-family !default;
970
- $form-select-font-size: $input-font-size !default;
971
- $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
972
- $form-select-font-weight: $input-font-weight !default;
973
- $form-select-line-height: $input-line-height !default;
974
- $form-select-color: $input-color !default;
975
- $form-select-bg: $input-bg !default;
976
- $form-select-disabled-color: null !default;
977
- $form-select-disabled-bg: $input-disabled-bg !default;
978
- $form-select-disabled-border-color: $input-disabled-border-color !default;
979
- $form-select-bg-position: right $form-select-padding-x center !default;
980
- $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
981
- $form-select-indicator-color: $gray-800 !default;
982
- $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
983
-
984
- $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
985
- $form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
986
- $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
987
-
988
- $form-select-border-width: $input-border-width !default;
989
- $form-select-border-color: $input-border-color !default;
990
- $form-select-border-radius: $input-border-radius !default;
991
- $form-select-box-shadow: $box-shadow-inset !default;
992
-
993
- $form-select-focus-border-color: $input-focus-border-color !default;
994
- $form-select-focus-width: $input-focus-width !default;
995
- $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
996
-
997
- $form-select-padding-y-sm: $input-padding-y-sm !default;
998
- $form-select-padding-x-sm: $input-padding-x-sm !default;
999
- $form-select-font-size-sm: $input-font-size-sm !default;
1000
- $form-select-border-radius-sm: $input-border-radius-sm !default;
1001
-
1002
- $form-select-padding-y-lg: $input-padding-y-lg !default;
1003
- $form-select-padding-x-lg: $input-padding-x-lg !default;
1004
- $form-select-font-size-lg: $input-font-size-lg !default;
1005
- $form-select-border-radius-lg: $input-border-radius-lg !default;
1006
-
1007
- $form-select-transition: $input-transition !default;
1008
- // scss-docs-end form-select-variables
1009
-
1010
- // scss-docs-start form-range-variables
1011
- $form-range-track-width: 100% !default;
1012
- $form-range-track-height: .5rem !default;
1013
- $form-range-track-cursor: pointer !default;
1014
- $form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
1015
- $form-range-track-border-radius: 1rem !default;
1016
- $form-range-track-box-shadow: $box-shadow-inset !default;
1017
-
1018
- $form-range-thumb-width: 1rem !default;
1019
- $form-range-thumb-height: $form-range-thumb-width !default;
1020
- $form-range-thumb-bg: $component-active-bg !default;
1021
- $form-range-thumb-border: 0 !default;
1022
- $form-range-thumb-border-radius: 1rem !default;
1023
- $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
1024
- $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
1025
- $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
1026
- $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
1027
- $form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
1028
- $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
1029
- // scss-docs-end form-range-variables
1030
-
1031
- // scss-docs-start form-file-variables
1032
- $form-file-button-color: $input-color !default;
1033
- $form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
1034
- $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
1035
- // scss-docs-end form-file-variables
1036
-
1037
- // scss-docs-start form-floating-variables
1038
- $form-floating-height: add(3.5rem, $input-height-border) !default;
1039
- $form-floating-line-height: 1.25 !default;
1040
- $form-floating-padding-x: $input-padding-x !default;
1041
- $form-floating-padding-y: 1rem !default;
1042
- $form-floating-input-padding-t: 1.625rem !default;
1043
- $form-floating-input-padding-b: .625rem !default;
1044
- $form-floating-label-height: 1.875em !default;
1045
- $form-floating-label-opacity: .65 !default;
1046
- $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
1047
- $form-floating-label-disabled-color: $gray-600 !default;
1048
- $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
1049
- // scss-docs-end form-floating-variables
1050
-
1051
- // Form validation
1052
-
1053
- // scss-docs-start form-feedback-variables
1054
- $form-feedback-margin-top: $form-text-margin-top !default;
1055
- $form-feedback-font-size: $form-text-font-size !default;
1056
- $form-feedback-font-style: $form-text-font-style !default;
1057
- $form-feedback-valid-color: $success !default;
1058
- $form-feedback-invalid-color: $danger !default;
1059
-
1060
- $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
1061
- $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.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;
1062
- $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
1063
- $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><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;
1064
- // scss-docs-end form-feedback-variables
1065
-
1066
- // scss-docs-start form-validation-states
1067
- $form-validation-states: (
1068
- "valid": (
1069
- "color": var(--#{$prefix}success-text),
1070
- "icon": $form-feedback-icon-valid,
1071
- "tooltip-color": #fff,
1072
- "tooltip-bg-color": var(--#{$prefix}success),
1073
- "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
1074
- "border-color": var(--#{$prefix}success),
1075
- ),
1076
- "invalid": (
1077
- "color": var(--#{$prefix}danger-text),
1078
- "icon": $form-feedback-icon-invalid,
1079
- "tooltip-color": #fff,
1080
- "tooltip-bg-color": var(--#{$prefix}danger),
1081
- "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
1082
- "border-color": var(--#{$prefix}danger),
1083
- )
1084
- ) !default;
1085
- // scss-docs-end form-validation-states
1086
-
1087
- // Z-index master list
1088
- //
1089
- // Warning: Avoid customizing these values. They're used for a bird's eye view
1090
- // of components dependent on the z-axis and are designed to all work together.
1091
-
1092
- // scss-docs-start zindex-stack
1093
- $zindex-dropdown: 1000 !default;
1094
- $zindex-sticky: 1020 !default;
1095
- $zindex-fixed: 1030 !default;
1096
- $zindex-offcanvas-backdrop: 1040 !default;
1097
- $zindex-offcanvas: 1045 !default;
1098
- $zindex-modal-backdrop: 1050 !default;
1099
- $zindex-modal: 1055 !default;
1100
- $zindex-popover: 1070 !default;
1101
- $zindex-tooltip: 1080 !default;
1102
- $zindex-toast: 1090 !default;
1103
- // scss-docs-end zindex-stack
1104
-
1105
- // scss-docs-start zindex-levels-map
1106
- $zindex-levels: (
1107
- n1: -1,
1108
- 0: 0,
1109
- 1: 1,
1110
- 2: 2,
1111
- 3: 3
1112
- ) !default;
1113
- // scss-docs-end zindex-levels-map
1114
-
1115
-
1116
- // Navs
1117
-
1118
- // scss-docs-start nav-variables
1119
- $nav-link-padding-y: .5rem !default;
1120
- $nav-link-padding-x: 1rem !default;
1121
- $nav-link-font-size: null !default;
1122
- $nav-link-font-weight: null !default;
1123
- $nav-link-color: var(--#{$prefix}link-color) !default;
1124
- $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
1125
- $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
1126
- $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
1127
-
1128
- $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
1129
- $nav-tabs-border-width: var(--#{$prefix}border-width) !default;
1130
- $nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
1131
- $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
1132
- $nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
1133
- $nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
1134
- $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
1135
-
1136
- $nav-pills-border-radius: $border-radius !default;
1137
- $nav-pills-link-active-color: $component-active-color !default;
1138
- $nav-pills-link-active-bg: $component-active-bg !default;
1139
- // scss-docs-end nav-variables
1140
-
1141
-
1142
- // Navbar
1143
-
1144
- // scss-docs-start navbar-variables
1145
- $navbar-padding-y: $spacer * .5 !default;
1146
- $navbar-padding-x: null !default;
1147
-
1148
- $navbar-nav-link-padding-x: .5rem !default;
1149
-
1150
- $navbar-brand-font-size: $font-size-lg !default;
1151
- // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
1152
- $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
1153
- $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
1154
- $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
1155
- $navbar-brand-margin-end: 1rem !default;
1156
-
1157
- $navbar-toggler-padding-y: .25rem !default;
1158
- $navbar-toggler-padding-x: .75rem !default;
1159
- $navbar-toggler-font-size: $font-size-lg !default;
1160
- $navbar-toggler-border-radius: $btn-border-radius !default;
1161
- $navbar-toggler-focus-width: $btn-focus-width !default;
1162
- $navbar-toggler-transition: box-shadow .15s ease-in-out !default;
1163
-
1164
- $navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
1165
- $navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
1166
- $navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
1167
- $navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1168
- $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{rgba($body-color, .75)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
1169
- $navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
1170
- $navbar-light-brand-color: $navbar-light-active-color !default;
1171
- $navbar-light-brand-hover-color: $navbar-light-active-color !default;
1172
- // scss-docs-end navbar-variables
1173
-
1174
- // scss-docs-start navbar-dark-variables
1175
- $navbar-dark-color: rgba($white, .55) !default;
1176
- $navbar-dark-hover-color: rgba($white, .75) !default;
1177
- $navbar-dark-active-color: $white !default;
1178
- $navbar-dark-disabled-color: rgba($white, .25) !default;
1179
- $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' 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;
1180
- $navbar-dark-toggler-border-color: rgba($white, .1) !default;
1181
- $navbar-dark-brand-color: $navbar-dark-active-color !default;
1182
- $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
1183
- // scss-docs-end navbar-dark-variables
1184
-
1185
-
1186
- // Dropdowns
1187
- //
1188
- // Dropdown menu container and contents.
1189
-
1190
- // scss-docs-start dropdown-variables
1191
- $dropdown-min-width: 10rem !default;
1192
- $dropdown-padding-x: 0 !default;
1193
- $dropdown-padding-y: .5rem !default;
1194
- $dropdown-spacer: .125rem !default;
1195
- $dropdown-font-size: $font-size-base !default;
1196
- $dropdown-color: var(--#{$prefix}body-color) !default;
1197
- $dropdown-bg: var(--#{$prefix}body-bg) !default;
1198
- $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
1199
- $dropdown-border-radius: $border-radius !default;
1200
- $dropdown-border-width: var(--#{$prefix}border-width) !default;
1201
- $dropdown-inner-border-radius: calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list
1202
- $dropdown-divider-bg: $dropdown-border-color !default;
1203
- $dropdown-divider-margin-y: $spacer * .5 !default;
1204
- $dropdown-box-shadow: $box-shadow !default;
1205
-
1206
- $dropdown-link-color: var(--#{$prefix}body-color) !default;
1207
- $dropdown-link-hover-color: $dropdown-link-color !default;
1208
- $dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1209
-
1210
- $dropdown-link-active-color: $component-active-color !default;
1211
- $dropdown-link-active-bg: $component-active-bg !default;
1212
-
1213
- $dropdown-link-disabled-color: $gray-500 !default;
1214
-
1215
- $dropdown-item-padding-y: $spacer * .25 !default;
1216
- $dropdown-item-padding-x: $spacer !default;
1217
-
1218
- $dropdown-header-color: $gray-600 !default;
1219
- $dropdown-header-padding-x: $dropdown-item-padding-x !default;
1220
- $dropdown-header-padding-y: $dropdown-padding-y !default;
1221
- // fusv-disable
1222
- $dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
1223
- // fusv-enable
1224
- // scss-docs-end dropdown-variables
1225
-
1226
- // scss-docs-start dropdown-dark-variables
1227
- $dropdown-dark-color: $gray-300 !default;
1228
- $dropdown-dark-bg: $gray-800 !default;
1229
- $dropdown-dark-border-color: $dropdown-border-color !default;
1230
- $dropdown-dark-divider-bg: $dropdown-divider-bg !default;
1231
- $dropdown-dark-box-shadow: null !default;
1232
- $dropdown-dark-link-color: $dropdown-dark-color !default;
1233
- $dropdown-dark-link-hover-color: $white !default;
1234
- $dropdown-dark-link-hover-bg: rgba($white, .15) !default;
1235
- $dropdown-dark-link-active-color: $dropdown-link-active-color !default;
1236
- $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
1237
- $dropdown-dark-link-disabled-color: $gray-500 !default;
1238
- $dropdown-dark-header-color: $gray-500 !default;
1239
- // scss-docs-end dropdown-dark-variables
1240
-
1241
-
1242
- // Pagination
1243
-
1244
- // scss-docs-start pagination-variables
1245
- $pagination-padding-y: .375rem !default;
1246
- $pagination-padding-x: .75rem !default;
1247
- $pagination-padding-y-sm: .25rem !default;
1248
- $pagination-padding-x-sm: .5rem !default;
1249
- $pagination-padding-y-lg: .75rem !default;
1250
- $pagination-padding-x-lg: 1.5rem !default;
1251
-
1252
- $pagination-font-size: $font-size-base !default;
1253
-
1254
- $pagination-color: var(--#{$prefix}link-color) !default;
1255
- $pagination-bg: var(--#{$prefix}body-bg) !default;
1256
- $pagination-border-radius: var(--#{$prefix}border-radius) !default;
1257
- $pagination-border-width: var(--#{$prefix}border-width) !default;
1258
- $pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
1259
- $pagination-border-color: var(--#{$prefix}border-color) !default;
1260
-
1261
- $pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
1262
- $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
1263
- $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
1264
- $pagination-focus-outline: 0 !default;
1265
-
1266
- $pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
1267
- $pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1268
- $pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
1269
-
1270
- $pagination-active-color: $component-active-color !default;
1271
- $pagination-active-bg: $component-active-bg !default;
1272
- $pagination-active-border-color: $component-active-bg !default;
1273
-
1274
- $pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
1275
- $pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
1276
- $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
1277
-
1278
- $pagination-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;
1279
-
1280
- $pagination-border-radius-sm: $border-radius-sm !default;
1281
- $pagination-border-radius-lg: $border-radius-lg !default;
1282
- // scss-docs-end pagination-variables
1283
-
1284
-
1285
- // Placeholders
1286
-
1287
- // scss-docs-start placeholders
1288
- $placeholder-opacity-max: .5 !default;
1289
- $placeholder-opacity-min: .2 !default;
1290
- // scss-docs-end placeholders
1291
-
1292
- // Cards
1293
-
1294
- // scss-docs-start card-variables
1295
- $card-spacer-y: $spacer !default;
1296
- $card-spacer-x: $spacer !default;
1297
- $card-title-spacer-y: $spacer * .5 !default;
1298
- $card-title-color: null !default;
1299
- $card-subtitle-color: null !default;
1300
- $card-border-width: var(--#{$prefix}border-width) !default;
1301
- $card-border-color: var(--#{$prefix}border-color-translucent) !default;
1302
- $card-border-radius: var(--#{$prefix}border-radius) !default;
1303
- $card-box-shadow: null !default;
1304
- $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1305
- $card-cap-padding-y: $card-spacer-y * .5 !default;
1306
- $card-cap-padding-x: $card-spacer-x !default;
1307
- $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
1308
- $card-cap-color: null !default;
1309
- $card-height: null !default;
1310
- $card-color: null !default;
1311
- $card-bg: var(--#{$prefix}body-bg) !default;
1312
- $card-img-overlay-padding: $spacer !default;
1313
- $card-group-margin: $grid-gutter-width * .5 !default;
1314
- // scss-docs-end card-variables
1315
-
1316
- // Accordion
1317
-
1318
- // scss-docs-start accordion-variables
1319
- $accordion-padding-y: 1rem !default;
1320
- $accordion-padding-x: 1.25rem !default;
1321
- $accordion-color: var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
1322
- $accordion-bg: var(--#{$prefix}body-bg) !default;
1323
- $accordion-border-width: var(--#{$prefix}border-width) !default;
1324
- $accordion-border-color: var(--#{$prefix}border-color) !default;
1325
- $accordion-border-radius: var(--#{$prefix}border-radius) !default;
1326
- $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
1327
-
1328
- $accordion-body-padding-y: $accordion-padding-y !default;
1329
- $accordion-body-padding-x: $accordion-padding-x !default;
1330
-
1331
- $accordion-button-padding-y: $accordion-padding-y !default;
1332
- $accordion-button-padding-x: $accordion-padding-x !default;
1333
- $accordion-button-color: var(--#{$prefix}body-color) !default;
1334
- $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
1335
- $accordion-transition: $btn-transition, border-radius .15s ease !default;
1336
- $accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
1337
- $accordion-button-active-color: var(--#{$prefix}primary-text) !default;
1338
-
1339
- $accordion-button-focus-border-color: $input-focus-border-color !default;
1340
- $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
1341
-
1342
- $accordion-icon-width: 1.25rem !default;
1343
- $accordion-icon-color: $body-color !default;
1344
- $accordion-icon-active-color: $primary-text !default;
1345
- $accordion-icon-transition: transform .2s ease-in-out !default;
1346
- $accordion-icon-transform: rotate(-180deg) !default;
1347
-
1348
- $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1349
- $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
1350
- // scss-docs-end accordion-variables
1351
-
1352
- // Tooltips
1353
-
1354
- // scss-docs-start tooltip-variables
1355
- $tooltip-font-size: $font-size-sm !default;
1356
- $tooltip-max-width: 200px !default;
1357
- $tooltip-color: var(--#{$prefix}body-bg) !default;
1358
- $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
1359
- $tooltip-border-radius: var(--#{$prefix}border-radius) !default;
1360
- $tooltip-opacity: .9 !default;
1361
- $tooltip-padding-y: $spacer * .25 !default;
1362
- $tooltip-padding-x: $spacer * .5 !default;
1363
- $tooltip-margin: null !default; // TODO: remove this in v6
1364
-
1365
- $tooltip-arrow-width: .8rem !default;
1366
- $tooltip-arrow-height: .4rem !default;
1367
- // fusv-disable
1368
- $tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
1369
- // fusv-enable
1370
- // scss-docs-end tooltip-variables
1371
-
1372
- // Form tooltips must come after regular tooltips
1373
- // scss-docs-start tooltip-feedback-variables
1374
- $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
1375
- $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
1376
- $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1377
- $form-feedback-tooltip-line-height: null !default;
1378
- $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1379
- $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1380
- // scss-docs-end tooltip-feedback-variables
1381
-
1382
-
1383
- // Popovers
1384
-
1385
- // scss-docs-start popover-variables
1386
- $popover-font-size: $font-size-sm !default;
1387
- $popover-bg: var(--#{$prefix}body-bg) !default;
1388
- $popover-max-width: 276px !default;
1389
- $popover-border-width: var(--#{$prefix}border-width) !default;
1390
- $popover-border-color: var(--#{$prefix}border-color-translucent) !default;
1391
- $popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
1392
- $popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
1393
- $popover-box-shadow: $box-shadow !default;
1394
-
1395
- $popover-header-font-size: $font-size-base !default;
1396
- $popover-header-bg: var(--#{$prefix}secondary-bg) !default;
1397
- $popover-header-color: $headings-color !default;
1398
- $popover-header-padding-y: .5rem !default;
1399
- $popover-header-padding-x: $spacer !default;
1400
-
1401
- $popover-body-color: var(--#{$prefix}body-color) !default;
1402
- $popover-body-padding-y: $spacer !default;
1403
- $popover-body-padding-x: $spacer !default;
1404
-
1405
- $popover-arrow-width: 1rem !default;
1406
- $popover-arrow-height: .5rem !default;
1407
- // scss-docs-end popover-variables
1408
-
1409
- // fusv-disable
1410
- // Deprecated in Bootstrap 5.2.0 for CSS variables
1411
- $popover-arrow-color: $popover-bg !default;
1412
- $popover-arrow-outer-color: var(--#{$prefix}border-color-translucent) !default;
1413
- // fusv-enable
1414
-
1415
-
1416
- // Toasts
1417
-
1418
- // scss-docs-start toast-variables
1419
- $toast-max-width: 350px !default;
1420
- $toast-padding-x: .75rem !default;
1421
- $toast-padding-y: .5rem !default;
1422
- $toast-font-size: .875rem !default;
1423
- $toast-color: null !default;
1424
- $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1425
- $toast-border-width: var(--#{$prefix}border-width) !default;
1426
- $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
1427
- $toast-border-radius: var(--#{$prefix}border-radius) !default;
1428
- $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
1429
- $toast-spacing: $container-padding-x !default;
1430
-
1431
- $toast-header-color: var(--#{$prefix}secondary-color) !default;
1432
- $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
1433
- $toast-header-border-color: $toast-border-color !default;
1434
- // scss-docs-end toast-variables
1435
-
1436
-
1437
- // Badges
1438
-
1439
- // scss-docs-start badge-variables
1440
- $badge-font-size: .75em !default;
1441
- $badge-font-weight: $font-weight-bold !default;
1442
- $badge-color: $white !default;
1443
- $badge-padding-y: .35em !default;
1444
- $badge-padding-x: .65em !default;
1445
- $badge-border-radius: $border-radius !default;
1446
- // scss-docs-end badge-variables
1447
-
1448
-
1449
- // Modals
1450
-
1451
- // scss-docs-start modal-variables
1452
- $modal-inner-padding: $spacer !default;
1453
-
1454
- $modal-footer-margin-between: .5rem !default;
1455
-
1456
- $modal-dialog-margin: .5rem !default;
1457
- $modal-dialog-margin-y-sm-up: 1.75rem !default;
1458
-
1459
- $modal-title-line-height: $line-height-base !default;
1460
-
1461
- $modal-content-color: null !default;
1462
- $modal-content-bg: var(--#{$prefix}body-bg) !default;
1463
- $modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
1464
- $modal-content-border-width: var(--#{$prefix}border-width) !default;
1465
- $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
1466
- $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
1467
- $modal-content-box-shadow-xs: $box-shadow-sm !default;
1468
- $modal-content-box-shadow-sm-up: $box-shadow !default;
1469
-
1470
- $modal-backdrop-bg: $black !default;
1471
- $modal-backdrop-opacity: .5 !default;
1472
-
1473
- $modal-header-border-color: var(--#{$prefix}border-color) !default;
1474
- $modal-header-border-width: $modal-content-border-width !default;
1475
- $modal-header-padding-y: $modal-inner-padding !default;
1476
- $modal-header-padding-x: $modal-inner-padding !default;
1477
- $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1478
-
1479
- $modal-footer-bg: null !default;
1480
- $modal-footer-border-color: $modal-header-border-color !default;
1481
- $modal-footer-border-width: $modal-header-border-width !default;
1482
-
1483
- $modal-sm: 300px !default;
1484
- $modal-md: 500px !default;
1485
- $modal-lg: 800px !default;
1486
- $modal-xl: 1140px !default;
1487
-
1488
- $modal-fade-transform: translate(0, -50px) !default;
1489
- $modal-show-transform: none !default;
1490
- $modal-transition: transform .3s ease-out !default;
1491
- $modal-scale-transform: scale(1.02) !default;
1492
- // scss-docs-end modal-variables
1493
-
1494
-
1495
- // Alerts
1496
- //
1497
- // Define alert colors, border radius, and padding.
1498
-
1499
- // scss-docs-start alert-variables
1500
- $alert-padding-y: $spacer !default;
1501
- $alert-padding-x: $spacer !default;
1502
- $alert-margin-bottom: 1rem !default;
1503
- $alert-border-radius: $border-radius !default;
1504
- $alert-link-font-weight: $font-weight-bold !default;
1505
- $alert-border-width: var(--#{$prefix}border-width) !default;
1506
- $alert-bg-scale: -80% !default;
1507
- $alert-border-scale: -70% !default;
1508
- $alert-color-scale: 40% !default;
1509
- $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
1510
- // scss-docs-end alert-variables
1511
-
1512
- // fusv-disable
1513
- $alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
1514
- $alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
1515
- $alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
1516
- // fusv-enable
1517
-
1518
- // Progress bars
1519
-
1520
- // scss-docs-start progress-variables
1521
- $progress-height: 1rem !default;
1522
- $progress-font-size: $font-size-base * .75 !default;
1523
- $progress-bg: var(--#{$prefix}secondary-bg) !default;
1524
- $progress-border-radius: var(--#{$prefix}border-radius) !default;
1525
- $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
1526
- $progress-bar-color: $white !default;
1527
- $progress-bar-bg: $primary !default;
1528
- $progress-bar-animation-timing: 1s linear infinite !default;
1529
- $progress-bar-transition: width .6s ease !default;
1530
- // scss-docs-end progress-variables
1531
-
1532
-
1533
- // List group
1534
-
1535
- // scss-docs-start list-group-variables
1536
- $list-group-color: var(--#{$prefix}body-color) !default;
1537
- $list-group-bg: var(--#{$prefix}body-bg) !default;
1538
- $list-group-border-color: var(--#{$prefix}border-color) !default;
1539
- $list-group-border-width: var(--#{$prefix}border-width) !default;
1540
- $list-group-border-radius: var(--#{$prefix}border-radius) !default;
1541
-
1542
- $list-group-item-padding-y: $spacer * .5 !default;
1543
- $list-group-item-padding-x: $spacer !default;
1544
- // fusv-disable
1545
- $list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
1546
- $list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
1547
- // fusv-enable
1548
-
1549
- $list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1550
- $list-group-active-color: $component-active-color !default;
1551
- $list-group-active-bg: $component-active-bg !default;
1552
- $list-group-active-border-color: $list-group-active-bg !default;
1553
-
1554
- $list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
1555
- $list-group-disabled-bg: $list-group-bg !default;
1556
-
1557
- $list-group-action-color: var(--#{$prefix}secondary-color) !default;
1558
- $list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
1559
-
1560
- $list-group-action-active-color: var(--#{$prefix}body-color) !default;
1561
- $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
1562
- // scss-docs-end list-group-variables
1563
-
1564
-
1565
- // Image thumbnails
1566
-
1567
- // scss-docs-start thumbnail-variables
1568
- $thumbnail-padding: .25rem !default;
1569
- $thumbnail-bg: var(--#{$prefix}body-bg) !default;
1570
- $thumbnail-border-width: var(--#{$prefix}border-width) !default;
1571
- $thumbnail-border-color: var(--#{$prefix}border-color) !default;
1572
- $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
1573
- $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
1574
- // scss-docs-end thumbnail-variables
1575
-
1576
-
1577
- // Figures
1578
-
1579
- // scss-docs-start figure-variables
1580
- $figure-caption-font-size: $small-font-size !default;
1581
- $figure-caption-color: var(--#{$prefix}secondary-color) !default;
1582
- // scss-docs-end figure-variables
1583
-
1584
-
1585
- // Breadcrumbs
1586
-
1587
- // scss-docs-start breadcrumb-variables
1588
- $breadcrumb-font-size: null !default;
1589
- $breadcrumb-padding-y: 0 !default;
1590
- $breadcrumb-padding-x: 0 !default;
1591
- $breadcrumb-item-padding-x: .5rem !default;
1592
- $breadcrumb-margin-bottom: 1rem !default;
1593
- $breadcrumb-bg: null !default;
1594
- $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
1595
- $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
1596
- $breadcrumb-divider: quote("/") !default;
1597
- $breadcrumb-divider-flipped: $breadcrumb-divider !default;
1598
- $breadcrumb-border-radius: null !default;
1599
- // scss-docs-end breadcrumb-variables
1600
-
1601
- // Carousel
1602
-
1603
- // scss-docs-start carousel-variables
1604
- $carousel-control-color: $white !default;
1605
- $carousel-control-width: 15% !default;
1606
- $carousel-control-opacity: .5 !default;
1607
- $carousel-control-hover-opacity: .9 !default;
1608
- $carousel-control-transition: opacity .15s ease !default;
1609
-
1610
- $carousel-indicator-width: 30px !default;
1611
- $carousel-indicator-height: 3px !default;
1612
- $carousel-indicator-hit-area-height: 10px !default;
1613
- $carousel-indicator-spacer: 3px !default;
1614
- $carousel-indicator-opacity: .5 !default;
1615
- $carousel-indicator-active-bg: $white !default;
1616
- $carousel-indicator-active-opacity: 1 !default;
1617
- $carousel-indicator-transition: opacity .6s ease !default;
1618
-
1619
- $carousel-caption-width: 70% !default;
1620
- $carousel-caption-color: $white !default;
1621
- $carousel-caption-padding-y: 1.25rem !default;
1622
- $carousel-caption-spacer: 1.25rem !default;
1623
-
1624
- $carousel-control-icon-width: 2rem !default;
1625
-
1626
- $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
1627
- $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
1628
-
1629
- $carousel-transition-duration: .6s !default;
1630
- $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`)
1631
- // scss-docs-end carousel-variables
1632
-
1633
- // scss-docs-start carousel-dark-variables
1634
- $carousel-dark-indicator-active-bg: $black !default;
1635
- $carousel-dark-caption-color: $black !default;
1636
- $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
1637
- // scss-docs-end carousel-dark-variables
1638
-
1639
-
1640
- // Spinners
1641
-
1642
- // scss-docs-start spinner-variables
1643
- $spinner-width: 2rem !default;
1644
- $spinner-height: $spinner-width !default;
1645
- $spinner-vertical-align: -.125em !default;
1646
- $spinner-border-width: .25em !default;
1647
- $spinner-animation-speed: .75s !default;
1648
-
1649
- $spinner-width-sm: 1rem !default;
1650
- $spinner-height-sm: $spinner-width-sm !default;
1651
- $spinner-border-width-sm: .2em !default;
1652
- // scss-docs-end spinner-variables
1653
-
1654
-
1655
- // Close
1656
-
1657
- // scss-docs-start close-variables
1658
- $btn-close-width: 1em !default;
1659
- $btn-close-height: $btn-close-width !default;
1660
- $btn-close-padding-x: .25em !default;
1661
- $btn-close-padding-y: $btn-close-padding-x !default;
1662
- $btn-close-color: $black !default;
1663
- $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
1664
- $btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
1665
- $btn-close-opacity: .5 !default;
1666
- $btn-close-hover-opacity: .75 !default;
1667
- $btn-close-focus-opacity: 1 !default;
1668
- $btn-close-disabled-opacity: .25 !default;
1669
- $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
1670
- // scss-docs-end close-variables
1671
-
1672
-
1673
- // Offcanvas
1674
-
1675
- // scss-docs-start offcanvas-variables
1676
- $offcanvas-padding-y: $modal-inner-padding !default;
1677
- $offcanvas-padding-x: $modal-inner-padding !default;
1678
- $offcanvas-horizontal-width: 400px !default;
1679
- $offcanvas-vertical-height: 30vh !default;
1680
- $offcanvas-transition-duration: .3s !default;
1681
- $offcanvas-border-color: $modal-content-border-color !default;
1682
- $offcanvas-border-width: $modal-content-border-width !default;
1683
- $offcanvas-title-line-height: $modal-title-line-height !default;
1684
- $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
1685
- $offcanvas-color: var(--#{$prefix}body-color) !default;
1686
- $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
1687
- $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
1688
- $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
1689
- // scss-docs-end offcanvas-variables
1690
-
1691
- // Code
1692
-
1693
- $code-font-size: $small-font-size !default;
1694
- $code-color: $pink !default;
1695
-
1696
- $kbd-padding-y: .1875rem !default;
1697
- $kbd-padding-x: .375rem !default;
1698
- $kbd-font-size: $code-font-size !default;
1699
- $kbd-color: var(--#{$prefix}body-bg) !default;
1700
- $kbd-bg: var(--#{$prefix}body-color) !default;
1701
- $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
1702
-
1703
- $pre-color: null !default;