style updates

This commit is contained in:
Hayden 2022-09-03 01:17:57 -08:00
parent f4f7123073
commit 6bbe62823d
19 changed files with 337 additions and 107 deletions

View file

@ -1,21 +1,18 @@
<template>
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-primary" />
</div>
<div class="relative flex justify-center">
<span class="isolate inline-flex -space-x-px rounded-md shadow-sm">
<div class="btn-group">
<button @click="$emit('edit')" name="options" class="btn btn-sm btn-primary">
<Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Edit </span>
</button>
<button @click="$emit('delete')" name="options" class="btn btn-sm btn-primary">
<Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Delete </span>
</button>
</div>
</span>
<div class="divider">
<div class="btn-group min-w-[180px] flex-nowrap">
<button @click="$emit('edit')" name="options" class="btn btn-sm btn-primary">
<Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Edit </span>
</button>
<button @click="$emit('delete')" name="options" class="btn btn-sm btn-primary">
<Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
<span> Delete </span>
</button>
</div>
</div>
</template>
<script lang="ts" setup>
defineEmits(['edit', 'delete']);
</script>

View file

@ -1,7 +1,7 @@
<template>
<div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6 bg-neutral">
<h3 class="text-lg font-medium leading-6 text-neutral-content">
<div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">
<slot name="title"></slot>
</h3>
<p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">

View file

@ -1,6 +1,12 @@
<template>
<div class="border-b border-base-200 pb-3">
<h3 class="text-xl font-medium leading-4 text-base-content">
<div class="pb-3">
<h3
class="text-3xl font-bold tracking-tight"
:class="{
'text-neutral-content': dark,
'text-content': !dark,
}"
>
<slot />
</h3>
<p v-if="$slots.description" class="mt-2 max-w-4xl text-sm text-gray-500">
@ -8,3 +14,12 @@
</p>
</div>
</template>
<script lang="ts" setup>
defineProps({
dark: {
type: Boolean,
default: false,
},
});
</script>