69 lines
3.7 KiB
Vue
69 lines
3.7 KiB
Vue
|
<template>
|
||
|
|
<Fieldset legend="Overlay" :toggleable="true">
|
||
|
|
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div>
|
||
|
|
<section class="grid grid-cols-4 mb-3 gap-2">
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Border Radius</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.select.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Shadow</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.select.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div>
|
||
|
|
<section class="grid grid-cols-4 mb-3 gap-2">
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Border Radius</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.popover.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Padding</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.popover.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Shadow</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.popover.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div>
|
||
|
|
<section class="grid grid-cols-4 mb-3 gap-2">
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Border Radius</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.modal.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Padding</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.modal.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Shadow</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.modal.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Navigation</div>
|
||
|
|
<section class="grid grid-cols-4 gap-2">
|
||
|
|
<div class="flex flex-col gap-1">
|
||
|
|
<span class="text-sm">Shadow</span>
|
||
|
|
<input v-model="$preset.semantic.overlay.navigation.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
<div class="flex flex-col gap-1"></div>
|
||
|
|
</section>
|
||
|
|
</Fieldset>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
inject: ['$preset']
|
||
|
|
};
|
||
|
|
</script>
|