<info-box>
<div class="infobox__teaser">
<div class="infobox__teaser__left">
<h6 class="infobox__teaser__heading">Ich bin eine Infobox</h6><i class="icon icon-info"></i>
</div>
<div class="infobox__teaser__right"><i class="icon infobox__teaser__chevron"></i>
</div>
</div>
<aside class="infobox__content">
<div class="infobox__content__box">
<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>
</div>
</aside>
</info-box>
<info-box>
<div class="infobox__teaser">
<div class="infobox__teaser__left">
<h6 class="infobox__teaser__heading">Ich bin eine Infobox</h6>
<i class="icon icon-info"></i>
</div>
<div class="infobox__teaser__right">
<i class="icon infobox__teaser__chevron"></i>
</div>
</div>
<aside class="infobox__content">
<div class="infobox__content__box">
<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>
</div>
</aside>
</info-box>
/* No context defined for this component. */
export default class InfoBox extends HTMLElement {
connectedCallback () {
this.classList.add('enhanced')
this.setAttribute('open', 'false')
this.contentHeight = `${this.content.clientHeight}px`
this.content.style.height = 0
this.teaser.onclick = this.toggle.bind(this)
}
get content () {
return this.querySelector('.infobox__content')
}
get teaser () {
return this.querySelector('.infobox__teaser')
}
toggle () {
this.open = !this.open
if (this.open) {
this.content.style.height = this.contentHeight
} else {
this.content.style.height = 0
}
}
get open () {
return this.getAttribute('open') === 'true'
}
set open (value) {
this.setAttribute('open', value.toString())
}
}
$info-box-icon-font-size: ms(3);
info-box {
display: block;
margin-bottom: $spacer-base;
&.enhanced {
.infobox__teaser {
cursor: pointer;
user-select: none;
}
.infobox__teaser__chevron {
&::before {
content: $icon-chevron-down;
}
}
&[open='true'] {
.infobox__teaser__chevron {
&::before {
content: $icon-chevron-up;
}
}
}
}
&[open='false'] {
.infobox__teaser,
.infobox__teaser__heading {
background-color: $infobox-teaser-background-color-closed;
color: $infobox-teaser-text-color-closed;
}
}
}
.infobox__teaser,
.infobox__teaser__heading {
background-color: $infobox-teaser-background-color-open;
color: $infobox-teaser-text-color-open;
}
.infobox__teaser {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid $infobox-teaser-border-color;
}
.infobox__teaser__heading {
@extend %heading-font-bold;
display: inline-block;
margin: 0;
line-height: $infobox-heading-line-height;
font-size: $infobox-heading-font-size;
}
.infobox__teaser__left,
.infobox__teaser__right {
display: flex;
align-items: center;
.icon {
padding-left: 10px;
font-size: $info-box-icon-font-size;
}
}
.infobox__teaser__left {
padding: $spacer-sm 0 $spacer-sm $spacer-md;
}
.infobox__teaser__right {
padding: $spacer-sm $spacer-md $spacer-sm 0;
}
.infobox__content {
transition: height 1s;
background-color: $infobox-content-background-color;
overflow: hidden;
}
.infobox__content__box {
padding: $spacer-sm $spacer-sm $spacer-md;
& p {
@extend %heading-font-regular;
line-height: $infobox-text-line-height;
font-size: $infobox-text-font-size;
}
}
There are no notes for this item.