kithkin/resources/css/lib/input.css

58 lines
1.0 KiB
CSS

/**
* default text inputs
*/
input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="search"] {
@apply border-md border-gray-800 bg-white rounded-md shadow-input;
@apply focus:border-primary focus:ring-2 focus:ring-offset-2 focus:ring-cyan-600;
transition: box-shadow 125ms ease-in-out,
border-color 125ms ease-in-out;
}
/**
* specific minor types
*/
input[type="color"] {
@apply rounded-md border-white shadow-none h-10 w-16 cursor-pointer;
@apply self-start;
&::-moz-color-swatch {
@apply border-none;
}
}
/**
* labeled text inputs
*/
label.text-label {
@apply flex flex-col gap-2;
> .label {
@apply font-semibold text-md;
}
> .description {
@apply text-gray-800;
}
}
/**
* form layouts
*/
.form-grid-1 {
@apply grid grid-cols-3 gap-6;
> label {
@apply col-span-2 col-start-1;
}
> div {
@apply col-span-3 flex flex-row justify-start gap-4 pt-4;
}
}