generated from gitea_admin/default
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<DsHeading
|
|
as="h1"
|
|
:tone="tone"
|
|
:class="[
|
|
`section-title`,
|
|
`section-title--pad-${pad}`
|
|
]"
|
|
>
|
|
<slot />
|
|
</DsHeading>
|
|
</template>
|
|
|
|
<script setup>
|
|
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
|
defineProps({
|
|
as: { type: String, default: 'h2' },
|
|
tone: { type: String, default: 'default' },
|
|
pad: { type: String, default: 'sm' }, // xs, sm, md, lg
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.section-title {
|
|
|
|
|
|
&--pad-xs {
|
|
padding-top: var(--sp-32);
|
|
padding-bottom: var(--sp-16);
|
|
padding-left: var(--sp-45);
|
|
}
|
|
&--pad-sm {
|
|
padding-top: var(--sp-48);
|
|
padding-bottom: var(--sp-48);
|
|
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>
|