Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
Loading items

Target

Select target project
  • konstantin/akplanning
  • matedealer/akplanning
  • kif/akplanning
  • mirco/akplanning
  • lordofthevoid/akplanning
  • voidptr/akplanning
  • xayomer/akplanning-fork
  • mollux/akplanning
  • neumantm/akplanning
  • mmarx/akplanning
  • nerf/akplanning
  • felix_bonn/akplanning
  • sebastian.uschmann/akplanning
13 results
Select Git revision
Loading items
Show changes
Showing
with 690 additions and 120 deletions
...@@ -184,6 +184,7 @@ ...@@ -184,6 +184,7 @@
white-space: nowrap; // prevent links from randomly breaking onto new lines white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s border: 0; // For `<button>`s
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
&:hover, &:hover,
&:focus { &:focus {
......
...@@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 ...@@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
} }
// Return WCAG2.1 relative luminance // Return WCAG2.2 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) { @function luminance($color) {
...@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 ...@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
); );
@each $name, $value in $rgb { @each $name, $value in $rgb {
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1)); $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value)); $rgb: map-merge($rgb, ($name: $value));
} }
......
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
// //
// Rows contain your columns. // Rows contain your columns.
:root {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
@if $enable-grid-classes { @if $enable-grid-classes {
.row { .row {
@include make-row(); @include make-row();
......
@import "helpers/clearfix"; @import "helpers/clearfix";
@import "helpers/color-bg"; @import "helpers/color-bg";
@import "helpers/colored-links"; @import "helpers/colored-links";
@import "helpers/focus-ring";
@import "helpers/icon-link";
@import "helpers/ratio"; @import "helpers/ratio";
@import "helpers/position"; @import "helpers/position";
@import "helpers/stacks"; @import "helpers/stacks";
......
...@@ -43,31 +43,6 @@ ...@@ -43,31 +43,6 @@
} }
} }
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: var(--#{$prefix}list-group-action-color);
text-align: inherit; // For `<button>`s (anchors inherit)
// Hover state
&:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: var(--#{$prefix}list-group-action-hover-color);
text-decoration: none;
background-color: var(--#{$prefix}list-group-action-hover-bg);
}
&:active {
color: var(--#{$prefix}list-group-action-active-color);
background-color: var(--#{$prefix}list-group-action-active-bg);
}
}
// Individual list items // Individual list items
// //
// Use on `li`s or `div`s within the `.list-group` parent. // Use on `li`s or `div`s within the `.list-group` parent.
...@@ -115,6 +90,33 @@ ...@@ -115,6 +90,33 @@
} }
} }
// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive
// list items. Includes an extra `.active` modifier class for selected items.
.list-group-item-action {
width: 100%; // For `<button>`s (anchors become 100% by default though)
color: var(--#{$prefix}list-group-action-color);
text-align: inherit; // For `<button>`s (anchors inherit)
&:not(.active) {
// Hover state
&:hover,
&:focus {
z-index: 1; // Place hover/focus items above their siblings for proper border styling
color: var(--#{$prefix}list-group-action-hover-color);
text-decoration: none;
background-color: var(--#{$prefix}list-group-action-hover-bg);
}
&:active {
color: var(--#{$prefix}list-group-action-active-color);
background-color: var(--#{$prefix}list-group-action-active-bg);
}
}
}
// Horizontal // Horizontal
// //
// Change the layout of list group items from vertical (default) to horizontal. // Change the layout of list group items from vertical (default) to horizontal.
...@@ -180,13 +182,18 @@ ...@@ -180,13 +182,18 @@
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors { @each $state in map-keys($theme-colors) {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale); .list-group-item-#{$state} {
$list-group-variant-color: shift-color($value, $list-group-item-color-scale); --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) { --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale)); --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
} }
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
} }
// scss-docs-end list-group-modifiers // scss-docs-end list-group-modifiers
...@@ -6,6 +6,90 @@ ...@@ -6,6 +6,90 @@
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default; $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb // scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-map
$theme-colors-text: (
"primary": $primary-text-emphasis,
"secondary": $secondary-text-emphasis,
"success": $success-text-emphasis,
"info": $info-text-emphasis,
"warning": $warning-text-emphasis,
"danger": $danger-text-emphasis,
"light": $light-text-emphasis,
"dark": $dark-text-emphasis,
) !default;
// scss-docs-end theme-text-map
// scss-docs-start theme-bg-subtle-map
$theme-colors-bg-subtle: (
"primary": $primary-bg-subtle,
"secondary": $secondary-bg-subtle,
"success": $success-bg-subtle,
"info": $info-bg-subtle,
"warning": $warning-bg-subtle,
"danger": $danger-bg-subtle,
"light": $light-bg-subtle,
"dark": $dark-bg-subtle,
) !default;
// scss-docs-end theme-bg-subtle-map
// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
"secondary": $secondary-border-subtle,
"success": $success-border-subtle,
"info": $info-border-subtle,
"warning": $warning-border-subtle,
"danger": $danger-border-subtle,
"light": $light-border-subtle,
"dark": $dark-border-subtle,
) !default;
// scss-docs-end theme-border-subtle-map
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;
@if $enable-dark-mode {
// scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,
"secondary": $secondary-text-emphasis-dark,
"success": $success-text-emphasis-dark,
"info": $info-text-emphasis-dark,
"warning": $warning-text-emphasis-dark,
"danger": $danger-text-emphasis-dark,
"light": $light-text-emphasis-dark,
"dark": $dark-text-emphasis-dark,
) !default;
// scss-docs-end theme-text-dark-map
// scss-docs-start theme-bg-subtle-dark-map
$theme-colors-bg-subtle-dark: (
"primary": $primary-bg-subtle-dark,
"secondary": $secondary-bg-subtle-dark,
"success": $success-bg-subtle-dark,
"info": $info-bg-subtle-dark,
"warning": $warning-bg-subtle-dark,
"danger": $danger-bg-subtle-dark,
"light": $light-bg-subtle-dark,
"dark": $dark-bg-subtle-dark,
) !default;
// scss-docs-end theme-bg-subtle-dark-map
// scss-docs-start theme-border-subtle-dark-map
$theme-colors-border-subtle-dark: (
"primary": $primary-border-subtle-dark,
"secondary": $secondary-border-subtle-dark,
"success": $success-border-subtle-dark,
"info": $info-border-subtle-dark,
"warning": $warning-border-subtle-dark,
"danger": $danger-border-subtle-dark,
"light": $light-border-subtle-dark,
"dark": $dark-border-subtle-dark,
) !default;
// scss-docs-end theme-border-subtle-dark-map
}
// Utilities maps // Utilities maps
// //
// Extends the default `$theme-colors` maps to help create our utilities. // Extends the default `$theme-colors` maps to help create our utilities.
...@@ -25,6 +109,17 @@ $utilities-text: map-merge( ...@@ -25,6 +109,17 @@ $utilities-text: map-merge(
) )
) !default; ) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default; $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
"secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
"success-emphasis": var(--#{$prefix}success-text-emphasis),
"info-emphasis": var(--#{$prefix}info-text-emphasis),
"warning-emphasis": var(--#{$prefix}warning-text-emphasis),
"danger-emphasis": var(--#{$prefix}danger-text-emphasis),
"light-emphasis": var(--#{$prefix}light-text-emphasis),
"dark-emphasis": var(--#{$prefix}dark-text-emphasis)
) !default;
// scss-docs-end utilities-text-colors // scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors // scss-docs-start utilities-bg-colors
...@@ -37,18 +132,43 @@ $utilities-bg: map-merge( ...@@ -37,18 +132,43 @@ $utilities-bg: map-merge(
) )
) !default; ) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default; $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
) !default;
// scss-docs-end utilities-bg-colors // scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors // scss-docs-start utilities-border-colors
$utilities-border: map-merge( $utilities-border: map-merge(
$utilities-colors, $utilities-colors,
( (
"black": to-rgb($black),
"white": to-rgb($white) "white": to-rgb($white)
) )
) !default; ) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default; $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
"secondary-subtle": var(--#{$prefix}secondary-border-subtle),
"success-subtle": var(--#{$prefix}success-border-subtle),
"info-subtle": var(--#{$prefix}info-border-subtle),
"warning-subtle": var(--#{$prefix}warning-border-subtle),
"danger-subtle": var(--#{$prefix}danger-border-subtle),
"light-subtle": var(--#{$prefix}light-border-subtle),
"dark-subtle": var(--#{$prefix}dark-border-subtle)
) !default;
// scss-docs-end utilities-border-colors // scss-docs-end utilities-border-colors
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
$gutters: $spacers !default; $gutters: $spacers !default;
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
// Helpers // Helpers
@import "mixins/breakpoints"; @import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme"; @import "mixins/color-scheme";
@import "mixins/image"; @import "mixins/image";
@import "mixins/resize"; @import "mixins/resize";
...@@ -21,13 +22,11 @@ ...@@ -21,13 +22,11 @@
@import "mixins/utilities"; @import "mixins/utilities";
// Components // Components
@import "mixins/alert";
@import "mixins/backdrop"; @import "mixins/backdrop";
@import "mixins/buttons"; @import "mixins/buttons";
@import "mixins/caret"; @import "mixins/caret";
@import "mixins/pagination"; @import "mixins/pagination";
@import "mixins/lists"; @import "mixins/lists";
@import "mixins/list-group";
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/table-variants"; @import "mixins/table-variants";
......
...@@ -59,8 +59,8 @@ ...@@ -59,8 +59,8 @@
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
.modal.fade & { .modal.fade & {
@include transition($modal-transition);
transform: $modal-fade-transform; transform: $modal-fade-transform;
@include transition($modal-transition);
} }
.modal.show & { .modal.show & {
transform: $modal-show-transform; transform: $modal-show-transform;
...@@ -126,14 +126,17 @@ ...@@ -126,14 +126,17 @@
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
align-items: center; align-items: center;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: var(--#{$prefix}modal-header-padding); padding: var(--#{$prefix}modal-header-padding);
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color); border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius)); @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
.btn-close { .btn-close {
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5); padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto; // Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
margin-left: auto;
} }
} }
......
...@@ -28,6 +28,8 @@ ...@@ -28,6 +28,8 @@
font-weight: var(--#{$prefix}nav-link-font-weight); font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-color); color: var(--#{$prefix}nav-link-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);
background: none;
border: 0;
@include transition($nav-link-transition); @include transition($nav-link-transition);
&:hover, &:hover,
...@@ -36,8 +38,14 @@ ...@@ -36,8 +38,14 @@
text-decoration: if($link-hover-decoration == underline, none, null); text-decoration: if($link-hover-decoration == underline, none, null);
} }
&:focus-visible {
outline: 0;
box-shadow: $nav-link-focus-box-shadow;
}
// Disabled state lightens text // Disabled state lightens text
&.disabled { &.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color); color: var(--#{$prefix}nav-link-disabled-color);
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
...@@ -63,7 +71,6 @@ ...@@ -63,7 +71,6 @@
.nav-link { .nav-link {
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
background: none;
border: var(--#{$prefix}nav-tabs-border-width) solid transparent; border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
...@@ -73,13 +80,6 @@ ...@@ -73,13 +80,6 @@
isolation: isolate; isolation: isolate;
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color); border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
} }
&.disabled,
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
background-color: transparent;
border-color: transparent;
}
} }
.nav-link.active, .nav-link.active,
...@@ -110,15 +110,7 @@ ...@@ -110,15 +110,7 @@
// scss-docs-end nav-pills-css-vars // scss-docs-end nav-pills-css-vars
.nav-link { .nav-link {
background: none;
border: 0;
@include border-radius(var(--#{$prefix}nav-pills-border-radius)); @include border-radius(var(--#{$prefix}nav-pills-border-radius));
&:disabled {
color: var(--#{$prefix}nav-link-disabled-color);
background-color: transparent;
border-color: transparent;
}
} }
.nav-link.active, .nav-link.active,
...@@ -129,6 +121,39 @@ ...@@ -129,6 +121,39 @@
} }
//
// Underline
//
.nav-underline {
// scss-docs-start nav-underline-css-vars
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
// scss-docs-end nav-underline-css-vars
gap: var(--#{$prefix}nav-underline-gap);
.nav-link {
padding-right: 0;
padding-left: 0;
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
&:hover,
&:focus {
border-bottom-color: currentcolor;
}
}
.nav-link.active,
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
}
}
// //
// Justified variants // Justified variants
// //
...@@ -144,8 +169,8 @@ ...@@ -144,8 +169,8 @@
.nav-justified { .nav-justified {
> .nav-link, > .nav-link,
.nav-item { .nav-item {
flex-basis: 0;
flex-grow: 1; flex-grow: 1;
flex-basis: 0;
text-align: center; text-align: center;
} }
} }
......
...@@ -100,10 +100,12 @@ ...@@ -100,10 +100,12 @@
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
.show > .nav-link, .nav-link {
.nav-link.active { &.active,
&.show {
color: var(--#{$prefix}navbar-active-color); color: var(--#{$prefix}navbar-active-color);
} }
}
.dropdown-menu { .dropdown-menu {
position: static; position: static;
...@@ -137,8 +139,8 @@ ...@@ -137,8 +139,8 @@
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent. // on the `.navbar` parent.
.navbar-collapse { .navbar-collapse {
flex-basis: 100%;
flex-grow: 1; flex-grow: 1;
flex-basis: 100%;
// For always expanded or extra full navbars, ensure content aligns itself // For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities. // properly vertically. Can be easily overridden with flex utilities.
align-items: center; align-items: center;
...@@ -264,7 +266,8 @@ ...@@ -264,7 +266,8 @@
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true); @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
} }
.navbar-dark { .navbar-dark,
.navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars // scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color}; --#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
...@@ -276,3 +279,11 @@ ...@@ -276,3 +279,11 @@
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars // scss-docs-end navbar-dark-css-vars
} }
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}
}
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width}; --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color}; --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow}; --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
// scss-docs-end offcanvas-css-vars // scss-docs-end offcanvas-css-vars
} }
...@@ -42,7 +44,7 @@ ...@@ -42,7 +44,7 @@
background-clip: padding-box; background-clip: padding-box;
outline: 0; outline: 0;
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow)); @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
@include transition(transform $offcanvas-transition-duration ease-in-out); @include transition(var(--#{$prefix}offcanvas-transition));
&.offcanvas-start { &.offcanvas-start {
top: 0; top: 0;
...@@ -121,20 +123,21 @@ ...@@ -121,20 +123,21 @@
.offcanvas-header { .offcanvas-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x); padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
.btn-close { .btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5); padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
// Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x)); margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
margin-left: auto;
} }
} }
.offcanvas-title { .offcanvas-title {
margin-bottom: 0; margin-bottom: 0;
line-height: $offcanvas-title-line-height; line-height: var(--#{$prefix}offcanvas-title-line-height);
} }
.offcanvas-body { .offcanvas-body {
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
margin-left: $pagination-margin-start; margin-left: $pagination-margin-start;
} }
@if $pagination-margin-start == ($pagination-border-width * -1) { @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
&:first-child { &:first-child {
.page-link { .page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius)); @include border-start-radius(var(--#{$prefix}pagination-border-radius));
......
...@@ -3,12 +3,15 @@ ...@@ -3,12 +3,15 @@
// scss-docs-start progress-keyframes // scss-docs-start progress-keyframes
@if $enable-transitions { @if $enable-transitions {
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; } 0% {
background-position-x: var(--#{$prefix}progress-height);
}
} }
} }
// scss-docs-end progress-keyframes // scss-docs-end progress-keyframes
.progress { .progress,
.progress-stacked {
// scss-docs-start progress-css-vars // scss-docs-start progress-css-vars
--#{$prefix}progress-height: #{$progress-height}; --#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size); @include rfs($progress-font-size, --#{$prefix}progress-font-size);
...@@ -46,6 +49,14 @@ ...@@ -46,6 +49,14 @@
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
} }
.progress-stacked > .progress {
overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
width: 100%;
}
@if $enable-transitions { @if $enable-transitions {
.progress-bar-animated { .progress-bar-animated {
animation: $progress-bar-animation-timing progress-bar-stripes; animation: $progress-bar-animation-timing progress-bar-stripes;
......
...@@ -87,7 +87,7 @@ hr { ...@@ -87,7 +87,7 @@ hr {
font-style: $headings-font-style; font-style: $headings-font-style;
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
line-height: $headings-line-height; line-height: $headings-line-height;
color: $headings-color; color: var(--#{$prefix}heading-color);
} }
h1 { h1 {
...@@ -217,6 +217,7 @@ small { ...@@ -217,6 +217,7 @@ small {
mark { mark {
padding: $mark-padding; padding: $mark-padding;
color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg); background-color: var(--#{$prefix}highlight-bg);
} }
...@@ -241,11 +242,11 @@ sup { top: -.5em; } ...@@ -241,11 +242,11 @@ sup { top: -.5em; }
// Links // Links
a { a {
color: var(--#{$prefix}link-color); color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration; text-decoration: $link-decoration;
&:hover { &:hover {
color: var(--#{$prefix}link-hover-color); --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
...@@ -498,9 +499,9 @@ legend { ...@@ -498,9 +499,9 @@ legend {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: $legend-margin-bottom; margin-bottom: $legend-margin-bottom;
@include font-size($legend-font-size);
font-weight: $legend-font-weight; font-weight: $legend-font-weight;
line-height: inherit; line-height: inherit;
@include font-size($legend-font-size);
+ * { + * {
clear: left; // 2 clear: left; // 2
...@@ -524,15 +525,15 @@ legend { ...@@ -524,15 +525,15 @@ legend {
height: auto; height: auto;
} }
// 1. Correct the outline style in Safari. // 1. This overrides the extra rounded corners on search inputs in iOS so that our
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply // `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see // be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586. // https://github.com/twbs/bootstrap/issues/11586.
// 2. Correct the outline style in Safari.
[type="search"] { [type="search"] {
outline-offset: -2px; // 1 -webkit-appearance: textfield; // 1
-webkit-appearance: textfield; // 2 outline-offset: -2px; // 2
} }
// 1. A few input types should stay LTR // 1. A few input types should stay LTR
......
:root { :root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`. // Note: Custom variable values only support SassScript inside `#{}`.
// Colors // Colors
...@@ -21,10 +22,20 @@ ...@@ -21,10 +22,20 @@
--#{$prefix}#{$color}-rgb: #{$value}; --#{$prefix}#{$color}-rgb: #{$value};
} }
@each $color, $value in $theme-colors-text {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// Fonts // Fonts
...@@ -39,17 +50,50 @@ ...@@ -39,17 +50,50 @@
@if $font-size-root != null { @if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root}; --#{$prefix}root-font-size: #{$font-size-root};
} }
--#{$prefix}body-font-family: #{$font-family-base}; --#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size); @include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
@if $body-text-align != null { @if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align}; --#{$prefix}body-text-align: #{$body-text-align};
} }
--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg}; --#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
// scss-docs-end root-body-variables // scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
--#{$prefix}link-decoration: #{$link-decoration};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
@if $link-hover-decoration != null {
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
}
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var // scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width}; --#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style}; --#{$prefix}border-style: #{$border-style};
...@@ -60,14 +104,84 @@ ...@@ -60,14 +104,84 @@
--#{$prefix}border-radius-sm: #{$border-radius-sm}; --#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg}; --#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl}; --#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-2xl: #{$border-radius-2xl}; --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill}; --#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var // scss-docs-end root-border-var
--#{$prefix}link-color: #{$link-color}; --#{$prefix}box-shadow: #{$box-shadow};
--#{$prefix}link-hover-color: #{$link-hover-color}; --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
--#{$prefix}code-color: #{$code-color}; // Focus styles
// scss-docs-start root-focus-variables
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
// scss-docs-end root-focus-variables
--#{$prefix}highlight-bg: #{$mark-bg}; // scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
// scss-docs-end root-form-validation-variables
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// scss-docs-start root-dark-mode-vars
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
@each $color, $value in $theme-colors-text-dark {
--#{$prefix}#{$color}-text-emphasis: #{$value};
}
@each $color, $value in $theme-colors-bg-subtle-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}
@each $color, $value in $theme-colors-border-subtle-dark {
--#{$prefix}#{$color}-border-subtle: #{$value};
}
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}highlight-color: #{$mark-color-dark};
--#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
// scss-docs-end root-dark-mode-vars
}
} }
...@@ -3,6 +3,12 @@ ...@@ -3,6 +3,12 @@
// //
.table { .table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
// End of reset
--#{$prefix}table-color: #{$table-color}; --#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg}; --#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color}; --#{$prefix}table-border-color: #{$table-border-color};
...@@ -16,7 +22,6 @@ ...@@ -16,7 +22,6 @@
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align; vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color); border-color: var(--#{$prefix}table-border-color);
...@@ -27,9 +32,11 @@ ...@@ -27,9 +32,11 @@
// stylelint-disable-next-line selector-max-universal // stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * { > :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x; padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg); background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width; border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
} }
> tbody { > tbody {
...@@ -42,7 +49,7 @@ ...@@ -42,7 +49,7 @@
} }
.table-group-divider { .table-group-divider {
border-top: ($table-border-width * 2) solid $table-group-separator-color; border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
} }
// //
...@@ -72,7 +79,7 @@ ...@@ -72,7 +79,7 @@
// //
// When borders are added on all sides of the cells, the corners can render odd when // When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent. // these borders do not have the same color or if they are semi-transparent.
// Therefor we add top and border bottoms to the `tr`s and left and right borders // Therefore we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s // to the `td`s or `th`s
.table-bordered { .table-bordered {
...@@ -104,16 +111,16 @@ ...@@ -104,16 +111,16 @@
// For rows // For rows
.table-striped { .table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) > * { > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
color: var(--#{$prefix}table-striped-color); --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
} }
} }
// For columns // For columns
.table-striped-columns { .table-striped-columns {
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
color: var(--#{$prefix}table-striped-color); --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
} }
} }
...@@ -122,8 +129,8 @@ ...@@ -122,8 +129,8 @@
// The `.table-active` class can be added to highlight rows or cells // The `.table-active` class can be added to highlight rows or cells
.table-active { .table-active {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg); --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
color: var(--#{$prefix}table-active-color); --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
} }
// Hover effect // Hover effect
...@@ -132,8 +139,8 @@ ...@@ -132,8 +139,8 @@
.table-hover { .table-hover {
> tbody > tr:hover > * { > tbody > tr:hover > * {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
color: var(--#{$prefix}table-hover-color); --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
} }
} }
......
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
z-index: var(--#{$prefix}tooltip-zindex); z-index: var(--#{$prefix}tooltip-zindex);
display: block; display: block;
padding: var(--#{$prefix}tooltip-arrow-height);
margin: var(--#{$prefix}tooltip-margin); margin: var(--#{$prefix}tooltip-margin);
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true); @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
...@@ -45,7 +44,7 @@ ...@@ -45,7 +44,7 @@
} }
.bs-tooltip-top .tooltip-arrow { .bs-tooltip-top .tooltip-arrow {
bottom: 0; bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::before { &::before {
top: -1px; top: -1px;
...@@ -56,7 +55,7 @@ ...@@ -56,7 +55,7 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow { .bs-tooltip-end .tooltip-arrow {
left: 0; left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
...@@ -70,7 +69,7 @@ ...@@ -70,7 +69,7 @@
/* rtl:end:ignore */ /* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow { .bs-tooltip-bottom .tooltip-arrow {
top: 0; top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
&::before { &::before {
bottom: -1px; bottom: -1px;
...@@ -81,7 +80,7 @@ ...@@ -81,7 +80,7 @@
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow { .bs-tooltip-start .tooltip-arrow {
right: 0; right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
width: var(--#{$prefix}tooltip-arrow-height); width: var(--#{$prefix}tooltip-arrow-height);
height: var(--#{$prefix}tooltip-arrow-width); height: var(--#{$prefix}tooltip-arrow-width);
......
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
// Type display classes // Type display classes
@each $display, $font-size in $display-font-sizes { @each $display, $font-size in $display-font-sizes {
.display-#{$display} { .display-#{$display} {
@include font-size($font-size);
font-family: $display-font-family; font-family: $display-font-family;
font-style: $display-font-style; font-style: $display-font-style;
font-weight: $display-font-weight; font-weight: $display-font-weight;
line-height: $display-line-height; line-height: $display-line-height;
@include font-size($font-size);
} }
} }
......
...@@ -22,6 +22,20 @@ $utilities: map-merge( ...@@ -22,6 +22,20 @@ $utilities: map-merge(
) )
), ),
// scss-docs-end utils-float // scss-docs-end utils-float
// Object Fit utilities
// scss-docs-start utils-object-fit
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),
// scss-docs-end utils-object-fit
// Opacity utilities // Opacity utilities
// scss-docs-start utils-opacity // scss-docs-start utils-opacity
"opacity": ( "opacity": (
...@@ -39,6 +53,14 @@ $utilities: map-merge( ...@@ -39,6 +53,14 @@ $utilities: map-merge(
"overflow": ( "overflow": (
property: overflow, property: overflow,
values: auto hidden visible scroll, values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
), ),
// scss-docs-end utils-overflow // scss-docs-end utils-overflow
// scss-docs-start utils-display // scss-docs-start utils-display
...@@ -47,7 +69,7 @@ $utilities: map-merge( ...@@ -47,7 +69,7 @@ $utilities: map-merge(
print: true, print: true,
property: display, property: display,
class: d, class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
), ),
// scss-docs-end utils-display // scss-docs-end utils-display
// scss-docs-start utils-shadow // scss-docs-start utils-shadow
...@@ -55,13 +77,21 @@ $utilities: map-merge( ...@@ -55,13 +77,21 @@ $utilities: map-merge(
property: box-shadow, property: box-shadow,
class: shadow, class: shadow,
values: ( values: (
null: $box-shadow, null: var(--#{$prefix}box-shadow),
sm: $box-shadow-sm, sm: var(--#{$prefix}box-shadow-sm),
lg: $box-shadow-lg, lg: var(--#{$prefix}box-shadow-lg),
none: none, none: none,
) )
), ),
// scss-docs-end utils-shadow // scss-docs-end utils-shadow
// scss-docs-start utils-focus-ring
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position // scss-docs-start utils-position
"position": ( "position": (
property: position, property: position,
...@@ -141,9 +171,13 @@ $utilities: map-merge( ...@@ -141,9 +171,13 @@ $utilities: map-merge(
), ),
values: $utilities-border-colors values: $utilities-border-colors
), ),
"subtle-border-color": (
property: border-color,
class: border,
values: $utilities-border-subtle
),
"border-width": ( "border-width": (
css-var: true, property: border-width,
css-variable-name: border-width,
class: border, class: border,
values: $border-widths values: $border-widths
), ),
...@@ -450,6 +484,18 @@ $utilities: map-merge( ...@@ -450,6 +484,18 @@ $utilities: map-merge(
class: gap, class: gap,
values: $spacers values: $spacers
), ),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
),
// scss-docs-end utils-spacing // scss-docs-end utils-spacing
// Text // Text
// scss-docs-start utils-text // scss-docs-start utils-text
...@@ -473,11 +519,12 @@ $utilities: map-merge( ...@@ -473,11 +519,12 @@ $utilities: map-merge(
property: font-weight, property: font-weight,
class: fw, class: fw,
values: ( values: (
light: $font-weight-light,
lighter: $font-weight-lighter, lighter: $font-weight-lighter,
light: $font-weight-light,
normal: $font-weight-normal, normal: $font-weight-normal,
bold: $font-weight-bold, medium: $font-weight-medium,
semibold: $font-weight-semibold, semibold: $font-weight-semibold,
bold: $font-weight-bold,
bolder: $font-weight-bolder bolder: $font-weight-bolder
) )
), ),
...@@ -535,9 +582,12 @@ $utilities: map-merge( ...@@ -535,9 +582,12 @@ $utilities: map-merge(
values: map-merge( values: map-merge(
$utilities-text-colors, $utilities-text-colors,
( (
"muted": $text-muted, "muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated "black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated "white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit, "reset": inherit,
) )
) )
...@@ -552,7 +602,62 @@ $utilities: map-merge( ...@@ -552,7 +602,62 @@ $utilities: map-merge(
100: 1 100: 1
) )
), ),
"text-color": (
property: color,
class: text,
values: $utilities-text-emphasis-colors
),
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
css-var: true,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"link-offset": (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: .125em,
2: .25em,
3: .375em,
)
),
"link-underline": (
property: text-decoration-color,
class: link-underline,
local-vars: (
"link-underline-opacity": 1
),
values: map-merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
)
)
),
"link-underline-opacity": (
css-var: true,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
),
),
// scss-docs-end utils-links
// scss-docs-start utils-bg-color // scss-docs-start utils-bg-color
"background-color": ( "background-color": (
property: background-color, property: background-color,
...@@ -563,7 +668,9 @@ $utilities: map-merge( ...@@ -563,7 +668,9 @@ $utilities: map-merge(
values: map-merge( values: map-merge(
$utilities-bg-colors, $utilities-bg-colors,
( (
"transparent": transparent "transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
) )
) )
), ),
...@@ -578,6 +685,11 @@ $utilities: map-merge( ...@@ -578,6 +685,11 @@ $utilities: map-merge(
100: 1 100: 1
) )
), ),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),
// scss-docs-end utils-bg-color // scss-docs-end utils-bg-color
"gradient": ( "gradient": (
property: background-image, property: background-image,
...@@ -606,7 +718,7 @@ $utilities: map-merge( ...@@ -606,7 +718,7 @@ $utilities: map-merge(
2: var(--#{$prefix}border-radius), 2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg), 3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl), 4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl), 5: var(--#{$prefix}border-radius-xxl),
circle: 50%, circle: 50%,
pill: var(--#{$prefix}border-radius-pill) pill: var(--#{$prefix}border-radius-pill)
) )
...@@ -614,22 +726,62 @@ $utilities: map-merge( ...@@ -614,22 +726,62 @@ $utilities: map-merge(
"rounded-top": ( "rounded-top": (
property: border-top-left-radius border-top-right-radius, property: border-top-left-radius border-top-right-radius,
class: rounded-top, class: rounded-top,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-end": ( "rounded-end": (
property: border-top-right-radius border-bottom-right-radius, property: border-top-right-radius border-bottom-right-radius,
class: rounded-end, class: rounded-end,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-bottom": ( "rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius, property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom, class: rounded-bottom,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-start": ( "rounded-start": (
property: border-bottom-left-radius border-top-left-radius, property: border-bottom-left-radius border-top-left-radius,
class: rounded-start, class: rounded-start,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-xxl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
// scss-docs-end utils-border-radius // scss-docs-end utils-border-radius
// scss-docs-start utils-visibility // scss-docs-start utils-visibility
...@@ -640,8 +792,15 @@ $utilities: map-merge( ...@@ -640,8 +792,15 @@ $utilities: map-merge(
visible: visible, visible: visible,
invisible: hidden, invisible: hidden,
) )
) ),
// scss-docs-end utils-visibility // scss-docs-end utils-visibility
// scss-docs-start utils-zindex
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)
// scss-docs-end utils-zindex
), ),
$utilities $utilities
); );
// 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: 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: 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
//
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
//
// Close button
//
$btn-close-filter-dark: $btn-close-white-filter !default;