scinote-web/app/assets/stylesheets/tailwind/inputs.css
2023-09-07 15:42:37 +02:00

79 lines
1.7 KiB
CSS

@layer components {
.sci-input-container-v2 {
@apply relative h-[2.5rem] flex items-center;
}
.sci-input-container-v2.input-sm {
@apply h-[2.25rem] bg-transparent p-0.5 outline-none;
}
.sci-input-container-v2 input {
@apply w-full h-full bg-transparent p-0.5 border rounded outline-none absolute top-0 pl-2;
border-color: var(--sn-sleepy-grey);
}
.sci-input-container-v2 input::placeholder {
color: var(--sn-sleepy-grey);
}
.sci-input-container-v2 .sci-input-field-v2 {
@apply h-[2.25rem];
}
.sci-input-container-v2 .error {
border-color: var(--sn-coral) !important;
}
.sci-input-container-v2 input:focus {
border-color: var(--sn-science-blue);
box-shadow: none;
}
.sci-input-container-v2 input:hover {
border-color: var(--sn-science-blue-hover);
}
.sci-input-container-v2 input:disabled {
background-color: var(--sn-super-light-grey);
color: var(--sn-light-grey);
border: 1px solid var(--sn-light-grey);
}
.sci-input-container-v2 .sn-icon {
@apply m-2;
color: var(--sn-black)
}
.sci-input-container-v2.right-icon .sn-icon {
@apply absolute right-0;
}
.sci-input-container-v2.left-icon input {
@apply pl-10;
}
.sci-input-container-v2.right-icon input {
@apply pr-10;
}
.sci-input-container-v2.left-icon input {
@apply pl-10;
}
.sci-input-container-v2.textarea-lg {
@apply h-[9rem];
}
.sci-input-container-v2 textarea {
@apply w-full h-full bg-transparent px-2 border rounded outline-none absolute top-0;
border-color: var(--sn-sleepy-grey);
}
.sci-input-container-v2 textarea::placeholder {
color: var(--sn-sleepy-grey);
}
.sci-input-container-v2 textarea:focus {
border-color: var(--sn-science-blue);
}
}