diff options
author | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2023-07-12 01:28:23 -0400 |
commit | f64955c69d91e578e580b409ba31ac4b3477da96 (patch) | |
tree | 16f01392ddf1abfea13d7d1ede3bfb0459fe8f0d /front-end/src/bootstrap/style/inputs.scss |
Initial commit
Diffstat (limited to 'front-end/src/bootstrap/style/inputs.scss')
-rw-r--r-- | front-end/src/bootstrap/style/inputs.scss | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/front-end/src/bootstrap/style/inputs.scss b/front-end/src/bootstrap/style/inputs.scss new file mode 100644 index 0000000..64f8901 --- /dev/null +++ b/front-end/src/bootstrap/style/inputs.scss @@ -0,0 +1,65 @@ +input.input, +select.input, +textarea.input { + @apply duration-100 ease-in-out outline-none border p-2; + @apply border-gray-200 bg-inherit dark:border-dark-400 dark:text-white hover:border-gray-300 hover:dark:border-dark-200; +} + + +/* CHECKBOXES */ + +label.checkbox { + @apply flex items-center cursor-pointer; + + input[type="checkbox"] { + @apply ease-in-out duration-100 w-5 h-5; + @apply border-2 rounded-sm border-gray-300 dark:border-dark-500; + + &:checked { + @apply text-primary-500 dark:text-primary-600 border-primary-500 dark:border-primary-600; + } + } + + &.primary { + input[type="checkbox"] { + @apply appearance-none; + @apply hover:border-primary-500 dark:hover:border-primary-600; + + &:checked { + @apply bg-primary-500 dark:bg-primary-600 border-primary-500 dark:border-primary-600; + } + + &+span.check { + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + @apply bg-white dark:bg-dark-500; + } + } + + span.check { + margin: 0px 0px 1px 4px; + @apply absolute h-3 w-3; + } + } + +} + +/*Select */ + +select.input.options { + @apply text-current; +} + +select.input:disabled{ + @apply appearance-none; +} + +/*Validation inputs*/ +input.input.dirty.data-valid, +select.input.dirty.data-valid { + @apply border-primary-500 dark:border-primary-600; +} + +input.input.dirty.data-invalid, +select.input.dirty.data-invalid { + @apply border-red-600 dark:border-red-500; +} |