46 lines
844 B
Vue
46 lines
844 B
Vue
<template>
|
|
<div :class="['day-divider', { 'day-divider--compact': compact }]">
|
|
<span class="day-divider__label">{{ label }}</span>
|
|
<div class="day-divider__rule" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
label: string
|
|
compact?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.day-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin: 10px 2px 4px;
|
|
}
|
|
|
|
.day-divider--compact {
|
|
margin: 6px 2px 2px;
|
|
}
|
|
|
|
.day-divider__label {
|
|
font-family: var(--font-display);
|
|
font-weight: var(--weight-semibold);
|
|
font-size: 1.5rem;
|
|
color: var(--primary-color);
|
|
line-height: 1;
|
|
text-shadow: 0 0 8px var(--neutral-0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.day-divider--compact .day-divider__label {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.day-divider__rule {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border-subtle);
|
|
}
|
|
</style>
|