add types and fix loading
This commit is contained in:
15
src/styles/button.css
Normal file
15
src/styles/button.css
Normal 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
27
src/styles/inputs.css
Normal 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
43
src/styles/loader.css
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user