generated from gitea_admin/default
75 lines
1.9 KiB
Vue
75 lines
1.9 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);
|
|
padding-right: var(--sp-8);
|
|
}
|
|
&--pad-sm {
|
|
//padding-top: var(--sp-32);
|
|
padding-bottom: var(--sp-16);
|
|
padding-left: var(--sp-45);
|
|
padding-right: var(--sp-8);
|
|
}
|
|
&--pad-md {
|
|
//padding-top: var(--sp-80);
|
|
padding-bottom: var(--sp-180);
|
|
padding-left: var(--sp-45);
|
|
padding-right: var(--sp-8);
|
|
}
|
|
&--pad-lg {
|
|
//padding-top: var(--sp-80);
|
|
padding-bottom: var(--sp-180);
|
|
padding-left: var(--sp-45);
|
|
padding-right: var(--sp-8);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.section-content {
|
|
&--pad-xs {
|
|
//padding-bottom: calc(var(--sp-16) * 0.5);
|
|
padding-left: calc(var(--sp-45) * 0.5);
|
|
//padding-right: calc(var(--sp-8) * 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 300px) {
|
|
.section-title {
|
|
padding-left: calc(var(--sp-45) - 20px);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|