generated from gitea_admin/default
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
:class="[
|
|
`section-content`,
|
|
`section-content--tone-${tone}`,
|
|
`section-content--pad-${pad}`
|
|
]"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
as: { type: String, default: 'h2' },
|
|
tone: { type: String, default: 'default' },
|
|
pad: { type: String, default: '' }, // xs, sm, md, lg
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.section-content {
|
|
|
|
&--tone-default { background: transparent; }
|
|
&--tone-brand { background: var(--c-brand_rouge); }
|
|
&--tone-brand_rouge45 { background: var(--c-brand_rouge45); }
|
|
&--tone-muted { background: var(--c-brand_rouge-weak); }
|
|
&--tone-dark { background: var(--c-backgroud-black); }
|
|
&--tone-brandreverse { background: var(--c-backgroud-brandreverse); }
|
|
|
|
&--pad-xs {
|
|
padding-top: var(--sp-32);
|
|
padding-bottom: var(--sp-16);
|
|
padding-left: var(--sp-45);
|
|
}
|
|
&--pad-sm {
|
|
padding-top: var(--sp-32);
|
|
padding-bottom: var(--sp-16);
|
|
padding-left: var(--sp-45);
|
|
}
|
|
&--pad-md {
|
|
padding-top: var(--sp-80);
|
|
padding-bottom: var(--sp-180);
|
|
padding-left: var(--sp-45);
|
|
}
|
|
&--pad-lg {
|
|
padding-top: var(--sp-80);
|
|
padding-bottom: var(--sp-180);
|
|
padding-left: var(--sp-45);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
.section-title {
|
|
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|