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