<info-box>
<details>
<summary>
<div class="infobox__teaser">
<div class="infobox__teaser__left">
<span class="infobox__teaser__heading">Ich bin eine Infobox</span>
<i class="icon icon-info"></i>
</div>
<div class="infobox__teaser__right">
<i class="icon infobox__teaser__chevron"></i>
</div>
</div>
</summary>
<div class="infobox__content">
<h2>Ich bin eine Headline</h2>
<p> Lorem gibson man engine dome assassin savant marketing neural Chatsubo. Advert meta-BASE jump decay long-chain hydrocarbons Freeside range-rover carbon youtube motion cardboard hacker.
</p>
<p> Lorem gibson man engine dome assassin savant marketing neural Chatsubo. Advert meta-BASE jump decay long-chain hydrocarbons Freeside range-rover carbon youtube motion cardboard hacker.
</p>
<ul>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
</ul>
</div>
</details>
</info-box>
<info-box>
<details>
<summary>
<div class="infobox__teaser">
<div class="infobox__teaser__left">
<span class="infobox__teaser__heading">Ich bin eine Infobox</span>
<i class="icon icon-info"></i>
</div>
<div class="infobox__teaser__right">
<i class="icon infobox__teaser__chevron"></i>
</div>
</div>
</summary>
<div class="infobox__content">
<h2>Ich bin eine Headline</h2>
<p> Lorem gibson man engine dome assassin savant marketing neural Chatsubo. Advert meta-BASE jump decay long-chain hydrocarbons Freeside range-rover carbon youtube motion cardboard hacker.
</p>
<p> Lorem gibson man engine dome assassin savant marketing neural Chatsubo. Advert meta-BASE jump decay long-chain hydrocarbons Freeside range-rover carbon youtube motion cardboard hacker.
</p>
<ul>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
<li>
Ich bin ein lustiges Listenitem
</li>
</ul>
</div>
</details>
</info-box>
/* No context defined. */
$info-box-icon-font-size: ms(3);
info-box {
display: block;
margin-bottom: $spacer-base;
}
.infobox__teaser {
@extend %heading-font-bold;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid $infobox-teaser-border-color;
background-color: $infobox-teaser-background-color-closed;
color: $infobox-teaser-text-color-closed;
cursor: pointer;
font-size: $font-size-xs;
.icon {
padding-left: 10px;
font-size: $info-box-icon-font-size;
}
.infobox__teaser__heading {
display: inline-flex;
align-items: center;
}
.infobox__teaser__right {
padding: $spacer-sm $spacer-md $spacer-sm 0;
}
.infobox__teaser__left {
padding: $spacer-sm 0 $spacer-sm $spacer-md;
}
}
.infobox__teaser__chevron {
&::before {
content: $icon-chevron-down;
}
}
details {
::-webkit-details-marker {
display: none; // hides marker in Safari
}
&[open] {
.infobox__teaser {
background-color: $infobox-teaser-background-color-open;
color: $infobox-teaser-text-color-open;
.infobox__teaser__chevron::before {
content: $icon-chevron-up;
}
}
.infobox__content {
padding: $spacer-sm $spacer-sm $spacer-md;
background-color: $infobox-content-background-color;
p {
@extend %heading-font-regular;
font-size: $font-size-base;
line-height: $paragraph-line-height;
}
}
}
}
summary {
display: block; // hides marker in all browser but Safari
}
No notes defined.