37 lines
1.8 KiB
Vue
37 lines
1.8 KiB
Vue
<template>
|
|
<Fieldset legend="Rounded" :toggleable="true">
|
|
<section class="grid grid-cols-4 mb-3 gap-2">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-sm">none</span>
|
|
<input v-model="$preset.primitive.borderRadius.none" 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">xs</span>
|
|
<input v-model="$preset.primitive.borderRadius.xs" 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">sm</span>
|
|
<input v-model="$preset.primitive.borderRadius.sm" 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">md</span>
|
|
<input v-model="$preset.primitive.borderRadius.md" 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">lg</span>
|
|
<input v-model="$preset.primitive.borderRadius.lg" 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">xl</span>
|
|
<input v-model="$preset.primitive.borderRadius.xl" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
|
|
</div>
|
|
</section>
|
|
</Fieldset>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['$preset']
|
|
};
|
|
</script>
|