add types and fix loading

This commit is contained in:
Fran Jurmanović
2025-02-12 00:48:43 +01:00
parent e9487ba38f
commit d29165261c
22 changed files with 410 additions and 146 deletions

15
src/styles/button.css Normal file
View File

@@ -0,0 +1,15 @@
.btn {
@apply mx-1 rounded px-4 py-1 font-bold;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-login {
@apply flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
}
.btn:hover {
@apply cursor-pointer bg-blue-700;
}
.btn:disabled {
@apply cursor-default bg-blue-500 opacity-60;
}

27
src/styles/inputs.css Normal file
View File

@@ -0,0 +1,27 @@
.form-textarea {
@apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
}
.form {
@apply block;
}
.form-input {
@apply min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6;
}
.form-select {
@apply col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
}
.form:disabled {
@apply opacity-60;
}
.input-block {
@apply flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600;
}
.form-login {
@apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
}

43
src/styles/loader.css Normal file
View File

@@ -0,0 +1,43 @@
/* HTML: <div class="loader"></div> */
.loader {
width: 40px;
height: 40px;
--c: no-repeat linear-gradient(orange 0 0);
background: var(--c), var(--c), var(--c), var(--c);
background-size: 21px 21px;
animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}
@keyframes l5 {
0% {
background-position:
0 0,
100% 0,
100% 100%,
0 100%;
}
33% {
background-position:
0 0,
100% 0,
100% 100%,
0 100%;
width: 60px;
height: 60px;
}
66% {
background-position:
100% 0,
100% 100%,
0 100%,
0 0;
width: 60px;
height: 60px;
}
100% {
background-position:
100% 0,
100% 100%,
0 100%,
0 0;
}
}