<div class="c-accordion">
<label>
<input type="checkbox" class="u-none">
<div class="u-size-full u-cursor-pointer c-accordion__label u-label-04 u-p-base u-flex u-justify-between">
Label 0
<svg class="o-icon o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</div>
<div class="c-accordion__body">
<span>Body 0</span>
</div>
</label>
<label>
<input type="checkbox" class="u-none">
<div class="u-size-full u-cursor-pointer c-accordion__label u-label-04 u-p-base u-flex u-justify-between">
Label 1
<svg class="o-icon o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</div>
<div class="c-accordion__body">
<span>Body 1</span>
</div>
</label>
<label>
<input type="checkbox" class="u-none">
<div class="u-size-full u-cursor-pointer c-accordion__label u-label-04 u-p-base u-flex u-justify-between">
Label 2
<svg class="o-icon o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</div>
<div class="c-accordion__body">
<span>Body 2</span>
</div>
</label>
</div>
<div class="c-accordion">
{% for i in range(0,3) %}
<label>
<input type="{{ type }}" class="u-none" {% if type == 'radio' %}name="c-accordion__choice"{% endif %}>
<div class="u-size-full u-cursor-pointer c-accordion__label u-label-04 u-p-base u-flex u-justify-between">
Label {{ i }}
{% if icon %}
<svg class="o-icon o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ icon }}"></use>
</svg>
{% endif %}
</div>
<div class="c-accordion__body">
<span>Body {{ i }}</span>
</div>
</label>
{% endfor %}
</div>
{
"type": "checkbox",
"icon": "#icon-chevron-down"
}
// Name: accordion
// Description: Shows accordion c
//
// Component: `c-accordion`
//
.c-accordion {
--label-bg: var(--background-color);
--label-active-bg: var(--background-color-gray);
--label-hover-bg: var(--background-color-gray);
--label-border: var(--divider-color);
border-top: 0;
border-left: 1px;
border-bottom: 1px;
border-right: 1px;
border-color: var(--divider-color);
border-style: solid;
body[data-model*="approfondimento"] & {
border: none;
}
&__label {
border-top: 1px solid var(--label-border);
background-color: var(--label-bg);
label:first-of-type &{
border: none;
}
&:hover {
background-color: var(--label-hover-bg);
transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
}
}
&__body {
opacity: 0;
height: 0;
overflow: hidden;
}
input:checked {
~ .c-accordion__label {
box-shadow: inset 0 4px 0 var(--theme-color);
background-color: var(--label-active-bg);
transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
body[data-model*="approfondimento"] & {
box-shadow: none;
}
.o-icon {
transform: rotate(180deg);
transition: transform .3s ease-in-out;
}
}
~ .c-accordion__body {
opacity: 1;
height: auto;
padding: $padding-base;
transition: height .3s ease-in-out, opacity .6s ease-in-out;
overflow: auto;
}
}
// approfondimento custom values
body[data-channel*="dossier"] &,
body[data-actual-url="/signup/premium-products/"] & {
--label-bg: #{$approfondimento-gray-lighter};
--label-active-bg: #{$approfondimento-gray-lighter};
--label-hover-bg: #{$approfondimento-gray-lighter};
}
@media (prefers-color-scheme: dark) {
body[data-channel*="dossier"]:not([data-color-scheme*="light"]) &,
body[data-actual-url="/signup/premium-products/"]:not([data-color-scheme*="light"]) & {
--label-bg: #{$approfondimento-gray-darker};
--label-active-bg: #{$approfondimento-gray-darker};
--label-hover-bg: #{$approfondimento-gray-darker};
}
}
body[data-color-scheme*="dark"][data-channel*="dossier"] &,
body[data-color-scheme*="dark"][data-actual-url="/signup/premium-products/"] & {
--label-bg: #{$approfondimento-gray-darker};
--label-active-bg: #{$approfondimento-gray-darker};
--label-hover-bg: #{$approfondimento-gray-darker};
}
}
No notes defined.