@agilekit/ui 0.0.513-alpha.0 → 0.0.514-alpha.0

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