web/bootstrap5
4
Fork 0
Code Issues Pull requests Projects Releases Activity

Apply theme to 5.3.8

Browse source
This commit is contained in:
ThePetrovich 2026-08-17 22:24:19 +08:00
parent f203f0c103
commit be164cfe0a
930 changed files with 53160 additions and 42297 deletions
Download patch file Download diff file Expand all files Collapse all files

79
scss/_list-group.scss
View file

@ -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
//
// Use on `li`s or `div`s within the `.list-group` parent.
@ -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
//
// Change the layout of list group items from vertical (default) to horizontal.
@ -180,13 +182,28 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
// Customization: as with alerts, we keep solid, fully saturated contextual
// list items rather than upstream v5.3's pale `-bg-subtle` treatment. This is
// the equivalent of the v5.2 `$list-group-item-bg-scale` /
// `$list-group-item-color-scale` both being `0%`; those variables are
// deprecated and no longer read in v5.3.
//
// The hover and active states step the background progressively darker so the
// three states stay distinguishable against the solid resting colour.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
$hover-bg: shade-color($value, 10%);
$active-bg: shade-color($value, 20%);
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
.list-group-item-#{$state} {
--#{$prefix}list-group-color: #{color-contrast($value)};
--#{$prefix}list-group-bg: #{$value};
--#{$prefix}list-group-action-hover-color: #{color-contrast($hover-bg)};
--#{$prefix}list-group-action-hover-bg: #{$hover-bg};
--#{$prefix}list-group-action-active-color: #{color-contrast($active-bg)};
--#{$prefix}list-group-action-active-bg: #{$active-bg};
--#{$prefix}list-group-active-color: #{color-contrast($active-bg)};
--#{$prefix}list-group-active-bg: #{$active-bg};
--#{$prefix}list-group-active-border-color: #{$active-bg};
}
}
// scss-docs-end list-group-modifiers