89 lines
2.1 KiB
SCSS
89 lines
2.1 KiB
SCSS
// Override default Bootstrap's accordion component
|
|
|
|
.accordion {
|
|
--#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size};
|
|
--#{$prefix}accordion-btn-font-weight: #{$accordion-button-font-weight};
|
|
--#{$prefix}accordion-body-font-size: #{$accordion-body-font-size};
|
|
}
|
|
|
|
.accordion-button {
|
|
@include font-size(var(--#{$prefix}accordion-btn-font-size));
|
|
font-weight: var(--#{$prefix}accordion-btn-font-weight);
|
|
|
|
&:focus-visible {
|
|
@include box-shadow($focus-ring-box-shadow);
|
|
}
|
|
|
|
&:not(.collapsed) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.accordion-item {
|
|
border: 0;
|
|
border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
|
|
}
|
|
|
|
.accordion-body {
|
|
padding-bottom: var(--#{$prefix}accordion-btn-padding-y);
|
|
@include font-size(var(--#{$prefix}accordion-body-font-size));
|
|
}
|
|
|
|
|
|
// Alternative button icon
|
|
|
|
.accordion-alt-icon {
|
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-alt)};
|
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-alt)};
|
|
}
|
|
|
|
|
|
// Update accordion / collapse button label text
|
|
|
|
[data-label-collapsed] {
|
|
&::before {
|
|
content: attr(data-label-expanded);
|
|
}
|
|
|
|
&.collapsed::before,
|
|
.collapsed > &::before {
|
|
content: attr(data-label-collapsed);
|
|
}
|
|
}
|
|
|
|
|
|
// Collapse toggle icon
|
|
|
|
.collapse-toggle-icon {
|
|
:not(.collapsed) > & {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
|
|
// Hiding collapse toggle
|
|
|
|
.hiding-collapse-toggle:not(.collapsed) {
|
|
display: none;
|
|
}
|
|
|
|
|
|
// Dark mode
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
.accordion:not([data-bs-theme="light"]) {
|
|
.accordion-button::after {
|
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
|
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
|
|
}
|
|
}
|
|
.accordion-alt-icon:not([data-bs-theme="light"]) {
|
|
.accordion-button::after {
|
|
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-alt-dark)};
|
|
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-alt-dark)};
|
|
}
|
|
}
|
|
}
|
|
}
|