mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 16:38:20 +01:00
fix: 🐛 Replace old registration page
This commit is contained in:
Jesse Wierzbinski
parent
fef4fa1e30
commit
d456c72bc4
|
|
@ -1,72 +1,89 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
|
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
|
||||||
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
|
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo"
|
||||||
class="mx-auto h-24 hidden md:block" />
|
class="mx-auto hidden md:inline-block h-20" />
|
||||||
<div v-if="true" class="mx-auto w-full max-w-md">
|
<div v-if="true" class="mx-auto w-full max-w-md">
|
||||||
<div v-if="Object.keys(errors).length > 0"
|
<div v-if="Object.keys(errors).length > 0"
|
||||||
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
||||||
<h2 class="font-bold text-lg">Error</h2>
|
<h2 class="font-bold text-lg">Error</h2>
|
||||||
<span class="text-sm">{{ errors.error }}</span>
|
<span class="text-sm">{{ errors.error }}</span>
|
||||||
</div>
|
</div>
|
||||||
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
|
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
|
||||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
|
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
|
||||||
|
|
||||||
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
|
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
|
||||||
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
|
<InputsField>
|
||||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
<InputsLabelAndError>
|
||||||
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<InputsLabel for="username">Username</InputsLabel>
|
||||||
{{ message }}
|
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||||
</VeeErrorMessage>
|
</InputsLabelAndError>
|
||||||
|
<InputsText id="username" type="text" placeholder="thespeedy" required v-bind="field"
|
||||||
|
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="username"
|
||||||
|
:spellcheck="false" />
|
||||||
|
</InputsField>
|
||||||
</VeeField>
|
</VeeField>
|
||||||
|
|
||||||
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
|
<VeeField name="email" v-slot="{ errorMessage, field }" validate-on-change>
|
||||||
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username" required
|
<InputsField>
|
||||||
:is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
<InputsLabelAndError>
|
||||||
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<InputsLabel for="email">Email address</InputsLabel>
|
||||||
{{ message }} (must only contain lowercase letters, numbers and underscores)
|
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||||
</VeeErrorMessage>
|
</InputsLabelAndError>
|
||||||
|
<InputsText id="email" type="email" placeholder="joseph.jones@gmail.com" required v-bind="field"
|
||||||
|
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="email" />
|
||||||
|
</InputsField>
|
||||||
</VeeField>
|
</VeeField>
|
||||||
|
|
||||||
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
|
<VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
|
||||||
<LoginInput label="Password" placeholder="hunter2" type="password" autocomplete="current-password"
|
<InputsField>
|
||||||
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
|
<InputsLabelAndError>
|
||||||
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<InputsLabel for="password">Password</InputsLabel>
|
||||||
{{ message }}
|
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||||
</VeeErrorMessage>
|
</InputsLabelAndError>
|
||||||
|
<InputsPassword id="password" placeholder="hunter2" required v-bind="field"
|
||||||
|
:disabled="isLoading" :is-invalid="!!errorMessage" :show-strength="true"
|
||||||
|
autocomplete="new-password" />
|
||||||
|
</InputsField>
|
||||||
</VeeField>
|
</VeeField>
|
||||||
|
|
||||||
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
|
<VeeField name="password-confirm" v-slot="{ errorMessage, field }" validate-on-change>
|
||||||
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
|
<InputsField>
|
||||||
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
|
<InputsLabelAndError>
|
||||||
:disabled="isLoading" />
|
<InputsLabel for="password-confirm">Confirm password</InputsLabel>
|
||||||
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||||
{{ message }}
|
</InputsLabelAndError>
|
||||||
</VeeErrorMessage>
|
<InputsPassword id="password-confirm" placeholder="hunter2" required v-bind="field"
|
||||||
|
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="new-password" />
|
||||||
|
</InputsField>
|
||||||
</VeeField>
|
</VeeField>
|
||||||
|
|
||||||
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
|
<VeeField name="tos" v-slot="{ errorMessage, field }" validate-on-change>
|
||||||
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
|
<InputsField>
|
||||||
join?</label>
|
<div class="flex flex-row gap-x-2 items-center">
|
||||||
<div class="mt-2">
|
<InputsCheckbox :checked="true" id="tos" required :disabled="true" v-bind="field" />
|
||||||
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
|
<InputsLabel for="tos" class="!text-gray-200">
|
||||||
placeholder="Brief text (optional)"
|
I agree to the Terms of Service
|
||||||
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" />
|
</InputsLabel>
|
||||||
</div>
|
</div>
|
||||||
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
||||||
{{ message }}
|
</InputsField>
|
||||||
</VeeErrorMessage>
|
|
||||||
</VeeField>
|
</VeeField>
|
||||||
|
|
||||||
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
|
<Collapsible.Root>
|
||||||
<input type="checkbox" :disabled="isLoading" name="tos"
|
<Collapsible.Trigger class="w-full">
|
||||||
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-primary-700 !ring-0 !outline-none"
|
<ButtonsSecondary type="button" class="w-full">View Terms of Service</ButtonsSecondary>
|
||||||
required />
|
</Collapsible.Trigger>
|
||||||
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
|
<Collapsible.Content
|
||||||
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
|
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
|
||||||
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
|
<div v-html="tos?.content"></div>
|
||||||
{{ message }}
|
</Collapsible.Content>
|
||||||
</VeeErrorMessage>
|
</Collapsible.Root>
|
||||||
</VeeField>
|
|
||||||
|
<p class="text-xs font-semibold text-gray-300">
|
||||||
|
Passwords are stored securely and hashed. We do not store your password in plain text.
|
||||||
|
Administrators
|
||||||
|
cannot see your password.
|
||||||
|
</p>
|
||||||
|
|
||||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
||||||
"Register" }}</ButtonsPrimary>
|
"Register" }}</ButtonsPrimary>
|
||||||
|
|
@ -84,28 +101,30 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { Collapsible } from "@ark-ui/vue";
|
||||||
|
import type { ResponseError } from "@lysand-org/client";
|
||||||
import { toTypedSchema } from "@vee-validate/zod";
|
import { toTypedSchema } from "@vee-validate/zod";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import LoginInput from "../../components/LoginInput.vue";
|
|
||||||
// TODO: Add instance TOS link
|
|
||||||
|
|
||||||
const schema = toTypedSchema(
|
const schema = toTypedSchema(
|
||||||
z
|
z
|
||||||
.object({
|
.object({
|
||||||
email: z.string().email(),
|
email: z.string().email(),
|
||||||
password: z.string().min(3),
|
password: z.string().min(3).max(255),
|
||||||
password2: z.string().min(3),
|
"password-confirm": z.string().min(3).max(255),
|
||||||
username: z
|
username: z
|
||||||
.string()
|
.string()
|
||||||
.min(3)
|
.min(3)
|
||||||
.regex(/^[a-z0-9_]+$/),
|
.regex(
|
||||||
|
/^[a-z0-9_]+$/,
|
||||||
|
"Must be lowercase letters, numbers, or underscores",
|
||||||
|
),
|
||||||
reason: z.string().optional(),
|
reason: z.string().optional(),
|
||||||
tos: z.string(),
|
|
||||||
})
|
})
|
||||||
.superRefine((data, ctx) => {
|
.superRefine((data, ctx) => {
|
||||||
if (data.password !== data.password2) {
|
if (data.password !== data["password-confirm"]) {
|
||||||
ctx.addIssue({
|
ctx.addIssue({
|
||||||
path: [...ctx.path, "password2"],
|
path: [...ctx.path, "password-confirm"],
|
||||||
code: "custom",
|
code: "custom",
|
||||||
message: "Passwords do not match",
|
message: "Passwords do not match",
|
||||||
});
|
});
|
||||||
|
|
@ -115,13 +134,10 @@ const schema = toTypedSchema(
|
||||||
);
|
);
|
||||||
|
|
||||||
const client = useClient();
|
const client = useClient();
|
||||||
const instance = useInstance();
|
const tos = useTos(client);
|
||||||
|
|
||||||
const errors = ref<{
|
const errors = ref<{
|
||||||
[key: string]: {
|
error?: string;
|
||||||
error: string;
|
|
||||||
description: string;
|
|
||||||
}[];
|
|
||||||
}>({});
|
}>({});
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
|
@ -142,16 +158,48 @@ const register = (result: {
|
||||||
"en",
|
"en",
|
||||||
result.reason || "Empty reason",
|
result.reason || "Empty reason",
|
||||||
)
|
)
|
||||||
.then(async (res) => {
|
.then(async () => {
|
||||||
navigateTo("/register/success");
|
navigateTo("/register/success");
|
||||||
})
|
})
|
||||||
.catch(async (err) => {
|
.catch(async (e) => {
|
||||||
|
const error = e as ResponseError<{
|
||||||
|
error: string;
|
||||||
|
}>;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
errors.value = error.response?.data || {};
|
errors.value = error.response.data || {};
|
||||||
console.error(err);
|
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
height: var(--height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
height: var(--height);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-scope='collapsible'][data-part='content'][data-state='open'] {
|
||||||
|
animation: slideDown 250ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-scope='collapsible'][data-part='content'][data-state='closed'] {
|
||||||
|
animation: slideUp 200ms;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
|
|
||||||
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo"
|
|
||||||
class="mx-auto hidden md:inline-block h-20" />
|
|
||||||
<div v-if="true" class="mx-auto w-full max-w-md">
|
|
||||||
<div v-if="Object.keys(errors).length > 0"
|
|
||||||
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
|
|
||||||
<h2 class="font-bold text-lg">Error</h2>
|
|
||||||
<span class="text-sm">{{ errors.error }}</span>
|
|
||||||
</div>
|
|
||||||
<VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
|
|
||||||
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
|
|
||||||
|
|
||||||
<VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
|
|
||||||
<InputsField>
|
|
||||||
<InputsLabelAndError>
|
|
||||||
<InputsLabel for="username">Username</InputsLabel>
|
|
||||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
|
||||||
</InputsLabelAndError>
|
|
||||||
<InputsText id="username" type="text" placeholder="thespeedy" required v-bind="field"
|
|
||||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="username"
|
|
||||||
:spellcheck="false" />
|
|
||||||
</InputsField>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<VeeField name="email" v-slot="{ errorMessage, field }" validate-on-change>
|
|
||||||
<InputsField>
|
|
||||||
<InputsLabelAndError>
|
|
||||||
<InputsLabel for="email">Email address</InputsLabel>
|
|
||||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
|
||||||
</InputsLabelAndError>
|
|
||||||
<InputsText id="email" type="email" placeholder="joseph.jones@gmail.com" required v-bind="field"
|
|
||||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="email" />
|
|
||||||
</InputsField>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<VeeField name="password" v-slot="{ errorMessage, field }" validate-on-change>
|
|
||||||
<InputsField>
|
|
||||||
<InputsLabelAndError>
|
|
||||||
<InputsLabel for="password">Password</InputsLabel>
|
|
||||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
|
||||||
</InputsLabelAndError>
|
|
||||||
<InputsPassword id="password" placeholder="hunter2" required v-bind="field"
|
|
||||||
:disabled="isLoading" :is-invalid="!!errorMessage" :show-strength="true"
|
|
||||||
autocomplete="new-password" />
|
|
||||||
</InputsField>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<VeeField name="password-confirm" v-slot="{ errorMessage, field }" validate-on-change>
|
|
||||||
<InputsField>
|
|
||||||
<InputsLabelAndError>
|
|
||||||
<InputsLabel for="password-confirm">Confirm password</InputsLabel>
|
|
||||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
|
||||||
</InputsLabelAndError>
|
|
||||||
<InputsPassword id="password-confirm" placeholder="hunter2" required v-bind="field"
|
|
||||||
:disabled="isLoading" :is-invalid="!!errorMessage" autocomplete="new-password" />
|
|
||||||
</InputsField>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<VeeField name="tos" v-slot="{ errorMessage, field }" validate-on-change>
|
|
||||||
<InputsField>
|
|
||||||
<div class="flex flex-row gap-x-2 items-center">
|
|
||||||
<InputsCheckbox :checked="true" id="tos" required :disabled="true" v-bind="field" />
|
|
||||||
<InputsLabel for="tos" class="!text-gray-200">
|
|
||||||
I agree to the Terms of Service
|
|
||||||
</InputsLabel>
|
|
||||||
</div>
|
|
||||||
<InputsError v-if="errorMessage">{{ errorMessage }}</InputsError>
|
|
||||||
</InputsField>
|
|
||||||
</VeeField>
|
|
||||||
|
|
||||||
<Collapsible.Root>
|
|
||||||
<Collapsible.Trigger class="w-full">
|
|
||||||
<ButtonsSecondary type="button" class="w-full">View Terms of Service</ButtonsSecondary>
|
|
||||||
</Collapsible.Trigger>
|
|
||||||
<Collapsible.Content
|
|
||||||
class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
|
|
||||||
<div v-html="tos?.content"></div>
|
|
||||||
</Collapsible.Content>
|
|
||||||
</Collapsible.Root>
|
|
||||||
|
|
||||||
<p class="text-xs font-semibold text-gray-300">
|
|
||||||
Passwords are stored securely and hashed. We do not store your password in plain text.
|
|
||||||
Administrators
|
|
||||||
cannot see your password.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
|
|
||||||
"Register" }}</ButtonsPrimary>
|
|
||||||
</VeeForm>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
|
|
||||||
disabled
|
|
||||||
</h1>
|
|
||||||
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
|
|
||||||
config!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Collapsible } from "@ark-ui/vue";
|
|
||||||
import type { ResponseError } from "@lysand-org/client";
|
|
||||||
import { toTypedSchema } from "@vee-validate/zod";
|
|
||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
const schema = toTypedSchema(
|
|
||||||
z
|
|
||||||
.object({
|
|
||||||
email: z.string().email(),
|
|
||||||
password: z.string().min(3).max(255),
|
|
||||||
"password-confirm": z.string().min(3).max(255),
|
|
||||||
username: z
|
|
||||||
.string()
|
|
||||||
.min(3)
|
|
||||||
.regex(
|
|
||||||
/^[a-z0-9_]+$/,
|
|
||||||
"Must be lowercase letters, numbers, or underscores",
|
|
||||||
),
|
|
||||||
reason: z.string().optional(),
|
|
||||||
})
|
|
||||||
.superRefine((data, ctx) => {
|
|
||||||
if (data.password !== data["password-confirm"]) {
|
|
||||||
ctx.addIssue({
|
|
||||||
path: [...ctx.path, "password-confirm"],
|
|
||||||
code: "custom",
|
|
||||||
message: "Passwords do not match",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const client = useClient();
|
|
||||||
const tos = useTos(client);
|
|
||||||
|
|
||||||
const errors = ref<{
|
|
||||||
error?: string;
|
|
||||||
}>({});
|
|
||||||
|
|
||||||
const isLoading = ref(false);
|
|
||||||
|
|
||||||
const register = (result: {
|
|
||||||
username: string;
|
|
||||||
email: string;
|
|
||||||
password: string;
|
|
||||||
reason: string;
|
|
||||||
}) => {
|
|
||||||
isLoading.value = true;
|
|
||||||
ref(client)
|
|
||||||
.value?.registerAccount(
|
|
||||||
result.username,
|
|
||||||
result.email,
|
|
||||||
result.password,
|
|
||||||
true,
|
|
||||||
"en",
|
|
||||||
result.reason || "Empty reason",
|
|
||||||
)
|
|
||||||
.then(async () => {
|
|
||||||
navigateTo("/register/success");
|
|
||||||
})
|
|
||||||
.catch(async (e) => {
|
|
||||||
const error = e as ResponseError<{
|
|
||||||
error: string;
|
|
||||||
}>;
|
|
||||||
// @ts-ignore
|
|
||||||
errors.value = error.response.data || {};
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
isLoading.value = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@keyframes slideDown {
|
|
||||||
from {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
height: var(--height);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
height: var(--height);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-scope='collapsible'][data-part='content'][data-state='open'] {
|
|
||||||
animation: slideDown 250ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-scope='collapsible'][data-part='content'][data-state='closed'] {
|
|
||||||
animation: slideUp 200ms;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue