},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "31.25 kB"
+ "maxSize": "31.5 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
@use "mixins/box-shadow" as *;
@use "mixins/color-mode" as *;
-//
-// Base styles
-//
+// scss-docs-start accordion-variables
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
+$accordion-bg: var(--#{$prefix}body-bg) !default;
+$accordion-border-width: var(--#{$prefix}border-width) !default;
+$accordion-border-color: var(--#{$prefix}border-color) !default;
+$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: var(--#{$prefix}fg-2) !default;
+$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
+$accordion-transition: $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
+$accordion-button-active-color: var(--#{$prefix}fg) !default;
+
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-transition: transform .2s ease-in-out !default;
+$accordion-icon-transform: rotate(-180deg) !default;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+// scss-docs-end accordion-variables
@layer componenents {
.accordion {
@use "variables" as *;
@use "mixins/border-radius" as *;
-//
-// Base styles
-//
+// scss-docs-start alert-variables
+$alert-padding-y: $spacer !default;
+$alert-padding-x: $spacer !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: var(--#{$prefix}border-width) !default;
+$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
@layer components {
.alert {
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
-// Base class
-//
-// Requires one of the contextual, color modifier classes for `color` and
-// `background-color`.
+// scss-docs-start badge-variables
+$badge-font-size: .75em !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-border-radius: var(--#{$prefix}border-radius) !default;
+// scss-docs-end badge-variables
@layer components {
.badge {
+@use "sass:string";
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
+// scss-docs-start breadcrumb-variables
+$breadcrumb-font-size: null !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
+$breadcrumb-item-padding-x: .5rem !default;
+$breadcrumb-margin-bottom: 1rem !default;
+$breadcrumb-bg: null !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-divider: string.quote("/") !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
+// scss-docs-end breadcrumb-variables
+
@layer components {
.breadcrumb {
// scss-docs-start breadcrumb-css-vars
@use "mixins/box-shadow" as *;
@use "layout/breakpoints" as *;
-//
-// Base styles
-//
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color-translucent) !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-box-shadow: null !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: var(--#{$prefix}body-bg) !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables
@layer components {
.card {
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/color-mode" as *;
@use "vendor/rfs" as *;
+// scss-docs-start carousel-variables
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+$carousel-control-icon-filter: null !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
+$carousel-indicator-active-bg: $white !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$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 0'/></svg>") !default;
+$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-.708'/></svg>") !default;
+
+$carousel-transition-duration: .6s !default;
+$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`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-indicator-active-bg-dark: $black !default;
+$carousel-caption-color-dark: $black !default;
+$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
+
// Notes on the classes:
//
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/color-mode" as *;
+// scss-docs-start close-variables
+$btn-close-width: 1em !default;
+$btn-close-height: $btn-close-width !default;
+$btn-close-padding-x: .25em !default;
+$btn-close-padding-y: $btn-close-padding-x !default;
+$btn-close-color: $black !default;
+$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.414'/></svg>") !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$btn-close-opacity: .5 !default;
+$btn-close-hover-opacity: .75 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-filter: null !default;
+$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
// Transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
) !default;
// scss-docs-end grid-breakpoints
+// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
@use "sass:map";
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/caret" as *;
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
+// scss-docs-start dropdown-variables
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-x: 0 !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-font-size: $font-size-base !default;
+$dropdown-color: var(--#{$prefix}body-color) !default;
+$dropdown-bg: var(--#{$prefix}body-bg) !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
+$dropdown-border-width: var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: $spacer * .5 !default;
+$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
+
+$dropdown-link-color: var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
+
+$dropdown-item-padding-y: $spacer * .25 !default;
+$dropdown-item-padding-x: $spacer !default;
+
+$dropdown-header-color: $gray-600 !default;
+$dropdown-header-padding-x: $dropdown-item-padding-x !default;
+$dropdown-header-padding-y: $dropdown-padding-y !default;
+// scss-docs-end dropdown-variables
+
+// scss-docs-start dropdown-dark-variables
+$dropdown-dark-color: $gray-300 !default;
+$dropdown-dark-bg: $gray-800 !default;
+$dropdown-dark-border-color: $dropdown-border-color !default;
+$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color: $white !default;
+$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color: $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
+
@layer components {
// The dropdown wrapper (`<div>`)
.dropup,
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
-// Base class
-//
-// Easily usable on <ul>, <ol>, or <div>.
+// scss-docs-start list-group-variables
+$list-group-color: var(--#{$prefix}body-color) !default;
+$list-group-bg: var(--#{$prefix}body-bg) !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
+$list-group-border-width: var(--#{$prefix}border-width) !default;
+$list-group-border-radius: var(--#{$prefix}border-radius) !default;
+
+$list-group-item-padding-y: $spacer * .5 !default;
+$list-group-item-padding-x: $spacer !default;
+
+$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
+
+$list-group-action-active-color: var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
+// scss-docs-end list-group-variables
@layer components {
.list-group {
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
+// scss-docs-start nav-variables
+$nav-link-padding-y: .5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-font-size: null !default;
+$nav-link-font-weight: null !default;
+$nav-link-color: var(--#{$prefix}link-color) !default;
+$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
+$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+$nav-underline-gap: 1rem !default;
+$nav-underline-border-width: .125rem !default;
+$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
+// scss-docs-end nav-variables
+
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
@use "sass:map";
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
-// Navbar
-//
-// Provide a static navbar from which we expand to create full-width, fixed, and
-// other navbar variations.
+// scss-docs-start navbar-variables
+$navbar-padding-y: $spacer * .5 !default;
+$navbar-padding-x: null !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+// mdo-do: fix this
+// $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+// $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-height: 1.5rem !default;
+// $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
+$navbar-brand-padding-y: $navbar-brand-height * .5 !default;
+$navbar-brand-margin-end: 1rem !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+$navbar-toggler-focus-width: $btn-focus-width !default;
+$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
+
+$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
+$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
+$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
+$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
+$navbar-light-icon-color: rgba($body-color, .75) !default;
+$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
+$navbar-light-brand-color: $navbar-light-active-color !default;
+$navbar-light-brand-hover-color: $navbar-light-active-color !default;
+// scss-docs-end navbar-variables
+
+// scss-docs-start navbar-dark-variables
+$navbar-dark-color: rgba($white, .55) !default;
+$navbar-dark-hover-color: rgba($white, .75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, .25) !default;
+$navbar-dark-icon-color: $navbar-dark-color !default;
+$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+$navbar-dark-brand-color: $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
@layer components {
.navbar {
.navbar-nav {
// scss-docs-start navbar-nav-css-vars
--#{$prefix}nav-link-padding-x: 0;
- --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
- @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
- --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+ // @mdo-do: fix this, navbar shouldn't need to reuse nav link variables mb? or we need to bring them in…
+ // --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+ // @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+ // --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
//
.navbar-text {
- padding-top: $nav-link-padding-y;
- padding-bottom: $nav-link-padding-y;
+ // @mdo-do: fix this too
+ // padding-top: $nav-link-padding-y;
+ // padding-bottom: $nav-link-padding-y;
color: var(--#{$prefix}navbar-color);
a,
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;
+// scss-docs-start pagination-variables
+$pagination-padding-y: .375rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+
+$pagination-font-size: $font-size-base !default;
+
+$pagination-color: var(--#{$prefix}link-color) !default;
+$pagination-bg: var(--#{$prefix}body-bg) !default;
+$pagination-border-radius: var(--#{$prefix}border-radius) !default;
+$pagination-border-width: var(--#{$prefix}border-width) !default;
+$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
+$pagination-border-color: var(--#{$prefix}border-color) !default;
+
+$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
+
+$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
+
+$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;
+
+$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+// scss-docs-end pagination-variables
+
+
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
@use "config" as *;
@use "variables" as *;
+// scss-docs-start placeholders
+$placeholder-opacity-max: .5 !default;
+$placeholder-opacity-min: .2 !default;
+// scss-docs-end placeholders
+
+
@layer components {
.placeholder {
display: inline-block;
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
+// scss-docs-start popover-variables
+$popover-font-size: $font-size-sm !default;
+$popover-bg: var(--#{$prefix}body-bg) !default;
+$popover-max-width: 276px !default;
+$popover-border-width: var(--#{$prefix}border-width) !default;
+$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
+$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
+
+$popover-header-font-size: $font-size-base !default;
+$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: $spacer !default;
+
+$popover-body-color: var(--#{$prefix}body-color) !default;
+$popover-body-padding-y: $spacer !default;
+$popover-body-padding-x: $spacer !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+// scss-docs-end popover-variables
+
@layer components {
.popover {
// scss-docs-start popover-css-vars
@use "config" as *;
+@use "colors" as *;
@use "variables" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/box-shadow" as *;
@use "vendor/rfs" as *;
+// scss-docs-start progress-variables
+$progress-height: 1rem !default;
+$progress-font-size: $font-size-base * .75 !default;
+$progress-bg: var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+// scss-docs-end progress-variables
+
+
// Disable animation if transitions are disabled
@layer components {
@use "mixins/border-radius" as *;
@use "vendor/rfs" as *;
+// scss-docs-start toast-variables
+$toast-max-width: 350px !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
+$toast-font-size: .875rem !default;
+$toast-color: null !default;
+$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width: var(--#{$prefix}border-width) !default;
+$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
+$toast-border-radius: var(--#{$prefix}border-radius) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
+$toast-spacing: $container-padding-x !default;
+
+$toast-header-color: var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
+
@layer components {
.toast {
// scss-docs-start toast-css-vars
@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
+// scss-docs-start tooltip-variables
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: var(--#{$prefix}body-bg) !default;
+$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: $spacer * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
+$tooltip-margin: null !default; // TODO: remove this in v6
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+// scss-docs-end tooltip-variables
+
+// Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: null !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-end tooltip-feedback-variables
+
+
@layer components {
.tooltip {
// scss-docs-start tooltip-css-vars
+++ /dev/null
-// Dark color mode variables
-//
-// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
-
-//
-// Global colors
-//
-
-// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-// $primary-text-emphasis-dark: tint-color($primary, 40%) !default;
-// $secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
-// $success-text-emphasis-dark: tint-color($success, 40%) !default;
-// $info-text-emphasis-dark: tint-color($info, 40%) !default;
-// $warning-text-emphasis-dark: tint-color($warning, 40%) !default;
-// $danger-text-emphasis-dark: tint-color($danger, 40%) !default;
-// $light-text-emphasis-dark: $gray-100 !default;
-// $dark-text-emphasis-dark: $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
-
-// scss-docs-start theme-bg-subtle-dark-variables
-// $primary-bg-subtle-dark: shade-color($primary, 80%) !default;
-// $secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
-// $success-bg-subtle-dark: shade-color($success, 80%) !default;
-// $info-bg-subtle-dark: shade-color($info, 80%) !default;
-// $warning-bg-subtle-dark: shade-color($warning, 80%) !default;
-// $danger-bg-subtle-dark: shade-color($danger, 80%) !default;
-// $light-bg-subtle-dark: $gray-800 !default;
-// $dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
-
-// scss-docs-start theme-border-subtle-dark-variables
-// $primary-border-subtle-dark: shade-color($primary, 40%) !default;
-// $secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
-// $success-border-subtle-dark: shade-color($success, 40%) !default;
-// $info-border-subtle-dark: shade-color($info, 40%) !default;
-// $warning-border-subtle-dark: shade-color($warning, 40%) !default;
-// $danger-border-subtle-dark: shade-color($danger, 40%) !default;
-// $light-border-subtle-dark: $gray-700 !default;
-// $dark-border-subtle-dark: $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
-
-// $body-color-dark: $gray-300 !default;
-// $body-bg-dark: $gray-900 !default;
-// $body-secondary-color-dark: rgba($body-color-dark, .75) !default;
-// $body-secondary-bg-dark: $gray-800 !default;
-// $body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
-// $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
-// $body-emphasis-color-dark: $white !default;
-// $border-color-dark: $gray-700 !default;
-// $border-color-translucent-dark: rgba($white, .15) !default;
-// $headings-color-dark: inherit !default;
-// $link-color-dark: tint-color($primary, 40%) !default;
-// $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
-// $code-color-dark: tint-color($code-color, 40%) !default;
-// $mark-color-dark: $body-color-dark !default;
-// $mark-bg-dark: $yellow-800 !default;
-
-
-// //
-// // Forms
-// //
-
-// $form-select-indicator-color-dark: $body-color-dark !default;
-// $form-select-indicator-dark: 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-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-// $form-switch-color-dark: rgba($white, .25) !default;
-// $form-switch-bg-image-dark: 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-dark}'/></svg>") !default;
-
-// // scss-docs-start form-validation-colors-dark
-// $form-valid-color-dark: $green-300 !default;
-// $form-valid-border-color-dark: $green-300 !default;
-// $form-invalid-color-dark: $red-300 !default;
-// $form-invalid-border-color-dark: $red-300 !default;
-// // scss-docs-end form-validation-colors-dark
-
-
-// //
-// // Accordion
-// //
-
-// $accordion-icon-color-dark: $primary-text-emphasis-dark !default;
-// $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
-
-// $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><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-.708'/></svg>") !default;
-// $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><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-.708'/></svg>") !default;
-// // scss-docs-end sass-dark-mode-vars
-
-
-// //
-// // Carousel
-// //
-
-// // scss-docs-start carousel-dark-variables
-// $carousel-indicator-active-bg-dark: $black !default;
-// $carousel-caption-color-dark: $black !default;
-// $carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
-// // scss-docs-end carousel-dark-variables
-
-// //
-// // Close button
-// //
-
-// $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
$paragraph-margin-bottom: 1rem !default;
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-// scss-docs-start grid-breakpoints
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1400px
-) !default;
-// scss-docs-end grid-breakpoints
-
-// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-// scss-docs-start container-max-widths
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px,
- xxl: 1320px
-) !default;
-// scss-docs-end container-max-widths
-
-// @include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
-$grid-row-columns: 6 !default;
-
-// Container padding
-
-$container-padding-x: $grid-gutter-width !default;
-
-
// Components
//
// Define common padding and border radius sizes and more.
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
-// scss-docs-start caret-variables
-$caret-width: .3em !default;
-$caret-vertical-align: $caret-width * .85 !default;
-$caret-spacing: $caret-width * .85 !default;
-// scss-docs-end caret-variables
-
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
// scss-docs-end type-variables
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-// scss-docs-start table-variables
-$table-cell-padding-y: .5rem !default;
-$table-cell-padding-x: .5rem !default;
-$table-cell-padding-y-sm: .25rem !default;
-$table-cell-padding-x-sm: .25rem !default;
-
-$table-cell-vertical-align: top !default;
-
-$table-color: var(--#{$prefix}emphasis-color) !default;
-$table-bg: var(--#{$prefix}body-bg) !default;
-$table-accent-bg: transparent !default;
-
-$table-th-font-weight: null !default;
-
-$table-striped-color: $table-color !default;
-$table-striped-bg-factor: .05 !default;
-$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
-
-$table-active-color: $table-color !default;
-$table-active-bg-factor: .1 !default;
-$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
-
-$table-hover-color: $table-color !default;
-$table-hover-bg-factor: .075 !default;
-$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
-
-$table-border-factor: .2 !default;
-$table-border-width: var(--#{$prefix}border-width) !default;
-$table-border-color: var(--#{$prefix}border-color) !default;
-
-$table-striped-order: odd !default;
-$table-striped-columns-order: even !default;
-
-$table-group-separator-color: currentcolor !default;
-
-$table-caption-color: var(--#{$prefix}secondary-color) !default;
-
-$table-bg-scale: -80% !default;
-// scss-docs-end table-variables
-
-// scss-docs-start table-loop
-$table-variants: (
- "primary": shift-color($primary, $table-bg-scale),
- "secondary": shift-color($secondary, $table-bg-scale),
- "success": shift-color($success, $table-bg-scale),
- "info": shift-color($info, $table-bg-scale),
- "warning": shift-color($warning, $table-bg-scale),
- "danger": shift-color($danger, $table-bg-scale),
- "light": $light,
- "dark": $dark,
-) !default;
-// scss-docs-end table-loop
-
-
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
// scss-docs-end zindex-levels-map
-// Navs
-
-// scss-docs-start nav-variables
-$nav-link-padding-y: .5rem !default;
-$nav-link-padding-x: 1rem !default;
-$nav-link-font-size: null !default;
-$nav-link-font-weight: null !default;
-$nav-link-color: var(--#{$prefix}link-color) !default;
-$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
-$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
-
-$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
-$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
-$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
-$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius: var(--#{$prefix}border-radius) !default;
-$nav-pills-link-active-color: $component-active-color !default;
-$nav-pills-link-active-bg: $component-active-bg !default;
-
-$nav-underline-gap: 1rem !default;
-$nav-underline-border-width: .125rem !default;
-$nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
-// scss-docs-end nav-variables
-
-
-// Navbar
-
-// scss-docs-start navbar-variables
-$navbar-padding-y: $spacer * .5 !default;
-$navbar-padding-x: null !default;
-
-$navbar-nav-link-padding-x: .5rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-margin-end: 1rem !default;
-
-$navbar-toggler-padding-y: .25rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: $btn-border-radius !default;
-$navbar-toggler-focus-width: $btn-focus-width !default;
-$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-
-$navbar-light-color: color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
-$navbar-light-hover-color: color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
-$navbar-light-active-color: color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
-$navbar-light-disabled-color: color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
-$navbar-light-icon-color: rgba($body-color, .75) !default;
-$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
-$navbar-light-brand-color: $navbar-light-active-color !default;
-$navbar-light-brand-hover-color: $navbar-light-active-color !default;
-// scss-docs-end navbar-variables
-
-// scss-docs-start navbar-dark-variables
-$navbar-dark-color: rgba($white, .55) !default;
-$navbar-dark-hover-color: rgba($white, .75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-icon-color: $navbar-dark-color !default;
-$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color: rgba($white, .1) !default;
-$navbar-dark-brand-color: $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
-// scss-docs-end navbar-dark-variables
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-// scss-docs-start dropdown-variables
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-x: 0 !default;
-$dropdown-padding-y: .5rem !default;
-$dropdown-spacer: .125rem !default;
-$dropdown-font-size: $font-size-base !default;
-$dropdown-color: var(--#{$prefix}body-color) !default;
-$dropdown-bg: var(--#{$prefix}body-bg) !default;
-$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius: var(--#{$prefix}border-radius) !default;
-$dropdown-border-width: var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: $spacer * .5 !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
-
-$dropdown-link-color: var(--#{$prefix}body-color) !default;
-$dropdown-link-hover-color: $dropdown-link-color !default;
-$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
-
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
-
-$dropdown-item-padding-y: $spacer * .25 !default;
-$dropdown-item-padding-x: $spacer !default;
-
-$dropdown-header-color: $gray-600 !default;
-$dropdown-header-padding-x: $dropdown-item-padding-x !default;
-$dropdown-header-padding-y: $dropdown-padding-y !default;
-// scss-docs-end dropdown-variables
-
-// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color: $gray-300 !default;
-$dropdown-dark-bg: $gray-800 !default;
-$dropdown-dark-border-color: $dropdown-border-color !default;
-$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow: null !default;
-$dropdown-dark-link-color: $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color: $white !default;
-$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
-$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: $gray-500 !default;
-$dropdown-dark-header-color: $gray-500 !default;
-// scss-docs-end dropdown-dark-variables
-
-
-// Pagination
-
-// scss-docs-start pagination-variables
-$pagination-padding-y: .375rem !default;
-$pagination-padding-x: .75rem !default;
-$pagination-padding-y-sm: .25rem !default;
-$pagination-padding-x-sm: .5rem !default;
-$pagination-padding-y-lg: .75rem !default;
-$pagination-padding-x-lg: 1.5rem !default;
-
-$pagination-font-size: $font-size-base !default;
-
-$pagination-color: var(--#{$prefix}link-color) !default;
-$pagination-bg: var(--#{$prefix}body-bg) !default;
-$pagination-border-radius: var(--#{$prefix}border-radius) !default;
-$pagination-border-width: var(--#{$prefix}border-width) !default;
-$pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default;
-$pagination-border-color: var(--#{$prefix}border-color) !default;
-
-$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
-$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
-$pagination-focus-outline: 0 !default;
-
-$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
-$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
-
-$pagination-active-color: $component-active-color !default;
-$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $component-active-bg !default;
-
-$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
-$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
-$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
-
-$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;
-
-$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-// scss-docs-end pagination-variables
-
-
-// Placeholders
-
-// scss-docs-start placeholders
-$placeholder-opacity-max: .5 !default;
-$placeholder-opacity-min: .2 !default;
-// scss-docs-end placeholders
-
-// Cards
-
-// scss-docs-start card-variables
-$card-spacer-y: $spacer !default;
-$card-spacer-x: $spacer !default;
-$card-title-spacer-y: $spacer * .5 !default;
-$card-title-color: null !default;
-$card-subtitle-color: null !default;
-$card-border-width: var(--#{$prefix}border-width) !default;
-$card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: var(--#{$prefix}border-radius) !default;
-$card-box-shadow: null !default;
-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-$card-cap-padding-y: $card-spacer-y * .5 !default;
-$card-cap-padding-x: $card-spacer-x !default;
-$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
-$card-cap-color: null !default;
-$card-height: null !default;
-$card-color: null !default;
-$card-bg: var(--#{$prefix}body-bg) !default;
-$card-img-overlay-padding: $spacer !default;
-$card-group-margin: $grid-gutter-width * .5 !default;
-// scss-docs-end card-variables
-
-// Accordion
-
-// scss-docs-start accordion-variables
-$accordion-padding-y: 1rem !default;
-$accordion-padding-x: 1.25rem !default;
-$accordion-color: var(--#{$prefix}body-color) !default;
-$accordion-bg: var(--#{$prefix}body-bg) !default;
-$accordion-border-width: var(--#{$prefix}border-width) !default;
-$accordion-border-color: var(--#{$prefix}border-color) !default;
-$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
-
-$accordion-body-padding-y: $accordion-padding-y !default;
-$accordion-body-padding-x: $accordion-padding-x !default;
-
-$accordion-button-padding-y: $accordion-padding-y !default;
-$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: var(--#{$prefix}fg-2) !default;
-$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
-$accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
-$accordion-button-active-color: var(--#{$prefix}fg) !default;
-
-$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
-
-$accordion-icon-width: 1.25rem !default;
-$accordion-icon-transition: transform .2s ease-in-out !default;
-$accordion-icon-transform: rotate(-180deg) !default;
-$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-// scss-docs-end accordion-variables
-
-
-// Tooltips
-
-// scss-docs-start tooltip-variables
-$tooltip-font-size: $font-size-sm !default;
-$tooltip-max-width: 200px !default;
-$tooltip-color: var(--#{$prefix}body-bg) !default;
-$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
-$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
-$tooltip-opacity: .9 !default;
-$tooltip-padding-y: $spacer * .25 !default;
-$tooltip-padding-x: $spacer * .5 !default;
-$tooltip-margin: null !default; // TODO: remove this in v6
-
-$tooltip-arrow-width: .8rem !default;
-$tooltip-arrow-height: .4rem !default;
-// scss-docs-end tooltip-variables
-
-// Form tooltips must come after regular tooltips
-// scss-docs-start tooltip-feedback-variables
-$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size: $tooltip-font-size !default;
-$form-feedback-tooltip-line-height: null !default;
-$form-feedback-tooltip-opacity: $tooltip-opacity !default;
-$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-end tooltip-feedback-variables
-
-
-// Popovers
-
-// scss-docs-start popover-variables
-$popover-font-size: $font-size-sm !default;
-$popover-bg: var(--#{$prefix}body-bg) !default;
-$popover-max-width: 276px !default;
-$popover-border-width: var(--#{$prefix}border-width) !default;
-$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
-$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
-
-$popover-header-font-size: $font-size-base !default;
-$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
-$popover-header-color: $headings-color !default;
-$popover-header-padding-y: .5rem !default;
-$popover-header-padding-x: $spacer !default;
-
-$popover-body-color: var(--#{$prefix}body-color) !default;
-$popover-body-padding-y: $spacer !default;
-$popover-body-padding-x: $spacer !default;
-
-$popover-arrow-width: 1rem !default;
-$popover-arrow-height: .5rem !default;
-// scss-docs-end popover-variables
-
-
-// Toasts
-
-// scss-docs-start toast-variables
-$toast-max-width: 350px !default;
-$toast-padding-x: .75rem !default;
-$toast-padding-y: .5rem !default;
-$toast-font-size: .875rem !default;
-$toast-color: null !default;
-$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
-$toast-border-width: var(--#{$prefix}border-width) !default;
-$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius: var(--#{$prefix}border-radius) !default;
-$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
-$toast-spacing: $container-padding-x !default;
-
-$toast-header-color: var(--#{$prefix}secondary-color) !default;
-$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
-$toast-header-border-color: $toast-border-color !default;
-// scss-docs-end toast-variables
-
-
-// Badges
-
-// scss-docs-start badge-variables
-$badge-font-size: .75em !default;
-$badge-font-weight: $font-weight-bold !default;
-$badge-color: $white !default;
-$badge-padding-y: .35em !default;
-$badge-padding-x: .65em !default;
-$badge-border-radius: var(--#{$prefix}border-radius) !default;
-// scss-docs-end badge-variables
-
-
// Modals
// scss-docs-start modal-variables
$modal-scale-transform: scale(1.02) !default;
// scss-docs-end modal-variables
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-// scss-docs-start alert-variables
-$alert-padding-y: $spacer !default;
-$alert-padding-x: $spacer !default;
-$alert-margin-bottom: 1rem !default;
-$alert-border-radius: var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: var(--#{$prefix}border-width) !default;
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
-// scss-docs-end alert-variables
-
-
-// Progress bars
-
-// scss-docs-start progress-variables
-$progress-height: 1rem !default;
-$progress-font-size: $font-size-base * .75 !default;
-$progress-bg: var(--#{$prefix}secondary-bg) !default;
-$progress-border-radius: var(--#{$prefix}border-radius) !default;
-$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
-$progress-bar-color: $white !default;
-$progress-bar-bg: $primary !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition: width .6s ease !default;
-// scss-docs-end progress-variables
-
-
-// List group
-
-// scss-docs-start list-group-variables
-$list-group-color: var(--#{$prefix}body-color) !default;
-$list-group-bg: var(--#{$prefix}body-bg) !default;
-$list-group-border-color: var(--#{$prefix}border-color) !default;
-$list-group-border-width: var(--#{$prefix}border-width) !default;
-$list-group-border-radius: var(--#{$prefix}border-radius) !default;
-
-$list-group-item-padding-y: $spacer * .5 !default;
-$list-group-item-padding-x: $spacer !default;
-
-$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
-$list-group-active-color: $component-active-color !default;
-$list-group-active-bg: $component-active-bg !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: var(--#{$prefix}secondary-color) !default;
-$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
-
-$list-group-action-active-color: var(--#{$prefix}body-color) !default;
-$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
-// scss-docs-end list-group-variables
-
-
-// Image thumbnails
-
-// scss-docs-start thumbnail-variables
-$thumbnail-padding: .25rem !default;
-$thumbnail-bg: var(--#{$prefix}body-bg) !default;
-$thumbnail-border-width: var(--#{$prefix}border-width) !default;
-$thumbnail-border-color: var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
-$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
-// scss-docs-end thumbnail-variables
-
-
-// Figures
-
-// scss-docs-start figure-variables
-$figure-caption-font-size: $small-font-size !default;
-$figure-caption-color: var(--#{$prefix}secondary-color) !default;
-// scss-docs-end figure-variables
-
-
-// Breadcrumbs
-
-// scss-docs-start breadcrumb-variables
-$breadcrumb-font-size: null !default;
-$breadcrumb-padding-y: 0 !default;
-$breadcrumb-padding-x: 0 !default;
-$breadcrumb-item-padding-x: .5rem !default;
-$breadcrumb-margin-bottom: 1rem !default;
-$breadcrumb-bg: null !default;
-$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
-$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
-$breadcrumb-divider: string.quote("/") !default;
-$breadcrumb-divider-flipped: $breadcrumb-divider !default;
-$breadcrumb-border-radius: null !default;
-// scss-docs-end breadcrumb-variables
-
-// Carousel
-
-// scss-docs-start carousel-variables
-$carousel-control-color: $white !default;
-$carousel-control-width: 15% !default;
-$carousel-control-opacity: .5 !default;
-$carousel-control-hover-opacity: .9 !default;
-$carousel-control-transition: opacity .15s ease !default;
-$carousel-control-icon-filter: null !default;
-
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer: 3px !default;
-$carousel-indicator-opacity: .5 !default;
-$carousel-indicator-active-bg: $white !default;
-$carousel-indicator-active-opacity: 1 !default;
-$carousel-indicator-transition: opacity .6s ease !default;
-
-$carousel-caption-width: 70% !default;
-$carousel-caption-color: $white !default;
-$carousel-caption-padding-y: 1.25rem !default;
-$carousel-caption-spacer: 1.25rem !default;
-
-$carousel-control-icon-width: 2rem !default;
-
-$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 0'/></svg>") !default;
-$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-.708'/></svg>") !default;
-
-$carousel-transition-duration: .6s !default;
-$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`)
-// scss-docs-end carousel-variables
-
-
-// Close
-
-// scss-docs-start close-variables
-$btn-close-width: 1em !default;
-$btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: .25em !default;
-$btn-close-padding-y: $btn-close-padding-x !default;
-$btn-close-color: $black !default;
-$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.414'/></svg>") !default;
-$btn-close-focus-shadow: $focus-ring-box-shadow !default;
-$btn-close-opacity: .5 !default;
-$btn-close-hover-opacity: .75 !default;
-$btn-close-focus-opacity: 1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-filter: null !default;
-// scss-docs-end close-variables
-
-
// Offcanvas
// scss-docs-start offcanvas-variables
//
// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark: tint-color($success, 40%) !default;
-$info-text-emphasis-dark: tint-color($info, 40%) !default;
-$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
-$light-text-emphasis-dark: $gray-100 !default;
-$dark-text-emphasis-dark: $gray-300 !default;
-// scss-docs-end theme-text-dark-variables
-
-// scss-docs-start theme-bg-subtle-dark-variables
-$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark: shade-color($success, 80%) !default;
-$info-bg-subtle-dark: shade-color($info, 80%) !default;
-$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
-$light-bg-subtle-dark: $gray-800 !default;
-$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
-// scss-docs-end theme-bg-subtle-dark-variables
-
-// scss-docs-start theme-border-subtle-dark-variables
-$primary-border-subtle-dark: shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
-$success-border-subtle-dark: shade-color($success, 40%) !default;
-$info-border-subtle-dark: shade-color($info, 40%) !default;
-$warning-border-subtle-dark: shade-color($warning, 40%) !default;
-$danger-border-subtle-dark: shade-color($danger, 40%) !default;
-$light-border-subtle-dark: $gray-700 !default;
-$dark-border-subtle-dark: $gray-800 !default;
-// scss-docs-end theme-border-subtle-dark-variables
-
$body-color-dark: $gray-300 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
// scss-docs-end sass-dark-mode-vars
-
-
-//
-// Carousel
-//
-
-// scss-docs-start carousel-dark-variables
-$carousel-indicator-active-bg-dark: $black !default;
-$carousel-caption-color-dark: $black !default;
-$carousel-control-icon-filter-dark: invert(1) grayscale(100) !default;
-// scss-docs-end carousel-dark-variables
-
-//
-// Close button
-//
-
-$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
+// scss-docs-start thumbnail-variables
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width: var(--#{$prefix}border-width) !default;
+$thumbnail-border-color: var(--#{$prefix}border-color) !default;
+$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+// scss-docs-end thumbnail-variables
+
+// scss-docs-start figure-variables
+$figure-caption-font-size: $small-font-size !default;
+$figure-caption-color: var(--#{$prefix}secondary-color) !default;
+// scss-docs-end figure-variables
+
@layer content {
// Responsive images (ensure images don't scale beyond their parents)
//
}
caption {
- padding-top: $table-cell-padding-y;
- padding-bottom: $table-cell-padding-y;
- color: $table-caption-color;
+ // padding-top: $table-cell-padding-y;
+ // padding-bottom: $table-cell-padding-y;
+ // color: $table-caption-color;
+ padding-block: .5rem;
+ color: var(--#{$prefix}secondary-color);
text-align: left;
}
// 3. Fix alignment for Safari
th {
- font-weight: $table-th-font-weight; // 1
+ // font-weight: $table-th-font-weight; // 1 // mdo-do: it's null by default. maybe we remove?
text-align: inherit; // 2
text-align: -webkit-match-parent; // 3
}
@use "../functions" as *;
@use "../layout/breakpoints" as *;
+// scss-docs-start table-variables
+$table-cell-padding-y: .5rem !default;
+$table-cell-padding-x: .5rem !default;
+$table-cell-padding-y-sm: .25rem !default;
+$table-cell-padding-x-sm: .25rem !default;
+
+$table-cell-vertical-align: top !default;
+
+$table-color: var(--#{$prefix}emphasis-color) !default;
+$table-bg: var(--#{$prefix}body-bg) !default;
+$table-accent-bg: transparent !default;
+
+// $table-th-font-weight: null !default;
+
+$table-striped-color: $table-color !default;
+$table-striped-bg-factor: .05 !default;
+$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
+
+$table-active-color: $table-color !default;
+$table-active-bg-factor: .1 !default;
+$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
+
+$table-hover-color: $table-color !default;
+$table-hover-bg-factor: .075 !default;
+$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+
+$table-border-factor: .2 !default;
+$table-border-width: var(--#{$prefix}border-width) !default;
+$table-border-color: var(--#{$prefix}border-color) !default;
+
+$table-striped-order: odd !default;
+$table-striped-columns-order: even !default;
+
+$table-group-separator-color: currentcolor !default;
+
+// $table-caption-color: var(--#{$prefix}secondary-color) !default;
+
+$table-bg-scale: -80% !default;
+// scss-docs-end table-variables
+
+// scss-docs-start table-loop
+$table-variants: (
+ "primary": shift-color($primary, $table-bg-scale),
+ "secondary": shift-color($secondary, $table-bg-scale),
+ "success": shift-color($success, $table-bg-scale),
+ "info": shift-color($info, $table-bg-scale),
+ "warning": shift-color($warning, $table-bg-scale),
+ "danger": shift-color($danger, $table-bg-scale),
+ "light": $light,
+ "dark": $dark,
+) !default;
+// scss-docs-end table-loop
+
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
+@use "../tooltip" as *; // bring in tooltip variables
// Form validation
//
@use "../config" as *;
@use "../variables" as *;
+// scss-docs-start caret-variables
+$caret-width: .3em !default;
+$caret-vertical-align: $caret-width * .85 !default;
+$caret-spacing: $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
### Sass variables
-<ScssDocs name="accordion-variables" file="scss/_variables.scss" />
+<ScssDocs name="accordion-variables" file="scss/_accordion.scss" />
## Usage
### Sass variables
-<ScssDocs name="alert-variables" file="scss/_variables.scss" />
+<ScssDocs name="alert-variables" file="scss/_alert.scss" />
### Sass loops
### Sass variables
-<ScssDocs name="badge-variables" file="scss/_variables.scss" />
+<ScssDocs name="badge-variables" file="scss/_badge.scss" />
### Sass variables
-<ScssDocs name="breadcrumb-variables" file="scss/_variables.scss" />
+<ScssDocs name="breadcrumb-variables" file="scss/_breadcrumb.scss" />
### Sass variables
-<ScssDocs name="card-variables" file="scss/_variables.scss" />
+<ScssDocs name="card-variables" file="scss/_card.scss" />
Variables for all carousels:
-<ScssDocs name="carousel-variables" file="scss/_variables.scss" />
+<ScssDocs name="carousel-variables" file="scss/_carousel.scss" />
Variables for the [dark carousel](#dark-carousel):
-<ScssDocs name="carousel-dark-variables" file="scss/_variables-dark.scss" />
+<ScssDocs name="carousel-dark-variables" file="scss/_carousel.scss" />
## Usage
### Sass variables
-<ScssDocs name="close-variables" file="scss/_variables.scss" />
+<ScssDocs name="close-variables" file="scss/_close.scss" />
Variables for all dropdowns:
-<ScssDocs name="dropdown-variables" file="scss/_variables.scss" />
+<ScssDocs name="dropdown-variables" file="scss/_dropdown.scss" />
Variables for the [dark dropdown](#dark-dropdowns):
-<ScssDocs name="dropdown-dark-variables" file="scss/_variables.scss" />
+<ScssDocs name="dropdown-dark-variables" file="scss/_dropdown.scss" />
Variables for the CSS-based carets that indicate a dropdown’s interactivity:
-<ScssDocs name="caret-variables" file="scss/_variables.scss" />
+<ScssDocs name="caret-variables" file="scss/mixins/_caret.scss" />
### Sass mixins
### Sass variables
-<ScssDocs name="list-group-variables" file="scss/_variables.scss" />
+<ScssDocs name="list-group-variables" file="scss/_list-group.scss" />
### Sass loops
Variables for all navbars:
-<ScssDocs name="navbar-variables" file="scss/_variables.scss" />
+<ScssDocs name="navbar-variables" file="scss/_navbar.scss" />
Variables for the [dark navbar](#color-schemes):
-<ScssDocs name="navbar-dark-variables" file="scss/_variables.scss" />
+<ScssDocs name="navbar-dark-variables" file="scss/_navbar.scss" />
### Sass loops
### Sass variables
-<ScssDocs name="nav-variables" file="scss/_variables.scss" />
+<ScssDocs name="nav-variables" file="scss/_nav.scss" />
## JavaScript behavior
### Sass variables
-<ScssDocs name="pagination-variables" file="scss/_variables.scss" />
+<ScssDocs name="pagination-variables" file="scss/_pagination.scss" />
### Sass mixins
-{/*<ScssDocs name="pagination-mixin" file="scss/mixins/_pagination.scss" />*/}
+<ScssDocs name="pagination-mixin" file="scss/_pagination.scss" />
### Sass variables
-<ScssDocs name="placeholders" file="scss/_variables.scss" />
+<ScssDocs name="placeholders" file="scss/_placeholders.scss" />
### Sass variables
-<ScssDocs name="popover-variables" file="scss/_variables.scss" />
+<ScssDocs name="popover-variables" file="scss/_popover.scss" />
## Usage
### Sass variables
-<ScssDocs name="progress-variables" file="scss/_variables.scss" />
+<ScssDocs name="progress-variables" file="scss/_progress.scss" />
### Keyframes
### Sass variables
-<ScssDocs name="toast-variables" file="scss/_variables.scss" />
+<ScssDocs name="toast-variables" file="scss/_toasts.scss" />
## Usage
### Sass variables
-<ScssDocs name="tooltip-variables" file="scss/_variables.scss" />
+<ScssDocs name="tooltip-variables" file="scss/_tooltip.scss" />
## Usage
### Sass variables
-<ScssDocs name="figure-variables" file="scss/_variables.scss" />
+<ScssDocs name="figure-variables" file="scss/content/_images.scss" />
Variables are available for image thumbnails.
-<ScssDocs name="thumbnail-variables" file="scss/_variables.scss" />
+<ScssDocs name="thumbnail-variables" file="scss/content/_images.scss" />
Behind the scenes it looks like this:
-{/*<ScssDocs name="table-variant" file="scss/mixins/_table-variants.scss" />*/}
+<ScssDocs name="table-variant" file="scss/content/_tables.scss" />
## Table borders
### Sass variables
-<ScssDocs name="table-variables" file="scss/_variables.scss" />
+<ScssDocs name="table-variables" file="scss/content/_tables.scss" />
### Sass loops
-<ScssDocs name="table-loop" file="scss/_variables.scss" />
+<ScssDocs name="table-loop" file="scss/content/_tables.scss" />
### Customizing
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
-<ScssDocs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" />
+<ScssDocs name="sass-dark-mode-vars" file="scss/_variables.scss" />
### Sass mixins
Should you modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map.
-<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
+<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
<ScssDocs name="form-validation-colors" file="scss/_variables.scss" />
-<ScssDocs name="form-validation-colors-dark" file="scss/_variables-dark.scss" />
+<ScssDocs name="form-validation-colors-dark" file="scss/_variables.scss" />
### Sass mixins
These breakpoints are customizable via Sass—you’ll find them in a Sass map in our `_variables.scss` stylesheet.
-<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
+<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]([[docsref:/layout/grid#css]]).
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
-<ScssDocs name="container-max-widths" file="scss/_variables.scss" />
+<ScssDocs name="container-max-widths" file="scss/_config.scss" />
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]([[docsref:/layout/grid#css]]).
$grid-row-columns: 6;
```
-<ScssDocs name="grid-breakpoints" file="scss/_variables.scss" />
+<ScssDocs name="grid-breakpoints" file="scss/_config.scss" />
-<ScssDocs name="container-max-widths" file="scss/_variables.scss" />
+<ScssDocs name="container-max-widths" file="scss/_config.scss" />
### Sass mixins
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
-<ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" />
+{/* <ScssDocs name="theme-bg-subtle-variables" file="scss/_variables.scss" /> */}
-<ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" />
+{/* <ScssDocs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps
Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode:
-<ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" />
+{/* <ScssDocs name="theme-border-subtle-variables" file="scss/_variables.scss" /> */}
-<ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" />
+{/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps
Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
-<ScssDocs name="theme-text-variables" file="scss/_variables.scss" />
+{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
-<ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" />
+{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
### Sass maps
projects / thirdparty / bootstrap.git / commitdiff
