Anmeldungsmodal
parent
02bdd79ed4
commit
d7328bb087
|
@ -15,8 +15,7 @@ module.exports = {
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
theme: {
|
theme: {
|
||||||
// Extend the default Tailwind theme.
|
// Extend the default Tailwind theme.
|
||||||
extend: {
|
extend: {},
|
||||||
},
|
|
||||||
},
|
},
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
// Disable Preflight base styles in builds targeting the editor.
|
// Disable Preflight base styles in builds targeting the editor.
|
||||||
|
@ -38,7 +37,7 @@ module.exports = {
|
||||||
const colorUtilities = {};
|
const colorUtilities = {};
|
||||||
const colors = theme('colors');
|
const colors = theme('colors');
|
||||||
const themecolors = themejson().config.theme.extend.colors;
|
const themecolors = themejson().config.theme.extend.colors;
|
||||||
for (const color in themecolors){
|
for (const color in themecolors) {
|
||||||
colorUtilities[`.btn-${color}`] = {
|
colorUtilities[`.btn-${color}`] = {
|
||||||
'--btn-color': themecolors[color]
|
'--btn-color': themecolors[color]
|
||||||
}
|
}
|
||||||
|
@ -75,8 +74,8 @@ module.exports = {
|
||||||
],
|
],
|
||||||
safelist: [
|
safelist: [
|
||||||
{ pattern: /btn-([a-zA-Z]+)$/ },
|
{ pattern: /btn-([a-zA-Z]+)$/ },
|
||||||
{ pattern: /bg-([a-zA-Z]+)$/, variants: ['has-\[\:checked\]']},
|
{ pattern: /bg-([a-zA-Z]+)$/, variants: ['has-\[\:checked\]'] },
|
||||||
{ pattern: /text-([a-zA-Z]+)$/, variants: ['hover', 'group-hover','has-\[\:checked\]'] },
|
{ pattern: /text-([a-zA-Z]+)$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
|
||||||
{ pattern: /shadow-([a-zA-Z]+)$/ },
|
{ pattern: /shadow-([a-zA-Z]+)$/ },
|
||||||
{ pattern: /border-([a-zA-Z]+)$/ },
|
{ pattern: /border-([a-zA-Z]+)$/ },
|
||||||
]
|
]
|
||||||
|
|
|
@ -11,10 +11,11 @@ use WoWPress\Frontend\ToggleButton;
|
||||||
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
|
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
|
||||||
<template x-teleport="body">
|
<template x-teleport="body">
|
||||||
<div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
|
<div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
|
||||||
<div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
|
<div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-deepblue bg-opacity-75 transition-opacity"></div>
|
||||||
<!-- Modal Content -->
|
<!-- Modal Content -->
|
||||||
<div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
|
<div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
|
||||||
<!-- Modal Body -->
|
<!-- Modal Body -->
|
||||||
|
<form action="">
|
||||||
<div class="grid grid-cols-2 gap-auto p-auto">
|
<div class="grid grid-cols-2 gap-auto p-auto">
|
||||||
<button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
|
<button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
|
||||||
<div class="col-span-2 text-center">Anwesenheit</div>
|
<div class="col-span-2 text-center">Anwesenheit</div>
|
||||||
|
@ -93,6 +94,7 @@ use WoWPress\Frontend\ToggleButton;
|
||||||
<span>Status Speichern</span>
|
<span>Status Speichern</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -98,6 +98,11 @@
|
||||||
"slug": "alliance",
|
"slug": "alliance",
|
||||||
"color": "#f7941e",
|
"color": "#f7941e",
|
||||||
"name": "Allianz"
|
"name": "Allianz"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"slug": "deepblue",
|
||||||
|
"color": "#000032",
|
||||||
|
"name": "Tiefblau"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue