[IMP][CSS] Revamp of the .o_spoiler element to use same code as alerts

This commit is contained in:
Elisabeth Dickinson 2022-12-29 09:19:39 +01:00 committed by Antoine Vandevenne (anv)
parent 1638484a82
commit d01888d0be
2 changed files with 24 additions and 12 deletions

View File

@ -92,7 +92,7 @@ $accordion-button-color: $accordion-color !default;
$accordion-button-active-color: $accordion-button-color !default; $accordion-button-active-color: $accordion-button-color !default;
$accordion-button-bg: $accordion-bg !default; $accordion-button-bg: $accordion-bg !default;
$accordion-button-active-bg: $accordion-button-bg !default; $accordion-button-active-bg: $accordion-button-bg !default;
$accordion-button-focus-box-shadow: transparent;
$accordion-icon-transform: rotate(0deg) !default; $accordion-icon-transform: rotate(0deg) !default;
//Alert //Alert

View File

@ -1006,8 +1006,14 @@ header {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
.o_spoiler { .o_spoiler {
border-color: tint-color($dark, 30%); $background: shift-color($o-accordion-bg, $alert-bg-scale);
background-color: $o-accordion-bg; $border: shift-color($o-accordion-bg, $alert-border-scale);
$color: shift-color($o-accordion-bg, $alert-color-scale);
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
$color: mix($o-accordion-bg, color-contrast($background), abs($alert-color-scale));
}
@include alert-variant($background, $border, $color);
.accordion-button { .accordion-button {
&::after { &::after {
@ -1020,11 +1026,18 @@ header {
} }
.accordion-body { .accordion-body {
#wrap & { // FIXME: Temporary workaround to take priority over pre-existing rules.
> *:first-child { > *:first-child {
margin-top: $o-margin-s; margin-top: $o-margin-s;
} }
> p , > ul {
margin-bottom: .5rem;
}
> *:last-child {
margin-bottom: 0;
}
code, div[class^="highlight"] { code, div[class^="highlight"] {
border-color: tint-color($dark, 50%); border-color: tint-color($dark, 50%);
@ -1034,7 +1047,6 @@ header {
} }
} }
} }
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Content Tabs // Content Tabs