89 lines
1.4 KiB
Vue
89 lines
1.4 KiB
Vue
<template>
|
|
<div class="quickfacts" :class="{ open: isExpanded }">
|
|
<h4 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h4>
|
|
|
|
<div class="quickfacts__list">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isExpanded: false,
|
|
};
|
|
},
|
|
methods: {
|
|
toggle() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@scss/base.scss";
|
|
|
|
.quickfacts {
|
|
border-radius: 1em;
|
|
overflow: hidden;
|
|
margin: 1em 0;
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
|
|
top: 1em;
|
|
right: 1em;
|
|
|
|
transform: rotate(180deg);
|
|
transition: 0.3s all ease-in-out;
|
|
|
|
border: {
|
|
right: 0.625em solid transparent;
|
|
bottom: 0.625em solid #fff;
|
|
left: 0.625em solid transparent;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
.quickfacts__head {
|
|
background-color: $bg-color-light;
|
|
}
|
|
|
|
.quickfacts__list {
|
|
max-height: 17em;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
&:before {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
&__head {
|
|
background-color: $bg-color-dark;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0.75rem 1.5rem;
|
|
transition: 0.3s all ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__list {
|
|
background-color: rgba($bg-color-dark, 0.5);
|
|
max-height: 0em;
|
|
padding: 0 1.5rem;
|
|
transition: 0.3s all ease-in-out;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding-left: 1.25em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|