38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
title: string
|
|
description?: string
|
|
bordered?: boolean
|
|
}>(), {
|
|
description: '',
|
|
bordered: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="form-section" :class="{ 'is-bordered': bordered }">
|
|
<div class="form-section__heading">
|
|
<h2>{{ title }}</h2>
|
|
<p v-if="description">{{ description }}</p>
|
|
</div>
|
|
<div class="form-section__content"><slot /></div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form-section { min-width: 0; padding: 20px 0; border-bottom: 0; }
|
|
.form-section.is-bordered { border-bottom: 1px solid var(--cc-border, #e3e8ef); }
|
|
.form-section:first-child { padding-top: 0; }
|
|
.form-section:last-child { padding-bottom: 0; border-bottom: 0; }
|
|
.form-section__heading { margin-bottom: 16px; }
|
|
.form-section__heading h2 { margin: 0; color: var(--cc-text, #172033); font-size: 14px; line-height: 1.4; }
|
|
.form-section__heading p { margin: 4px 0 0; color: var(--cc-muted, #667085); font-size: 12px; line-height: 1.5; }
|
|
|
|
@media (min-width: 1920px) {
|
|
.form-section { padding: 14px 0; }
|
|
.form-section:first-child { padding-top: 0; }
|
|
.form-section:last-child { padding-bottom: 0; }
|
|
.form-section__heading { margin-bottom: 10px; }
|
|
}
|
|
</style>
|