159 lines
5.1 KiB
CSS
159 lines
5.1 KiB
CSS
/* Form Controls
|
|
---------------------------------------------------------------------------- */
|
|
.form-control {
|
|
@apply h-9 placeholder-gray-400 dark:placeholder-gray-600 leading-normal box-border focus:outline-none;
|
|
}
|
|
|
|
.form-control-bordered {
|
|
@apply ring-1 ring-gray-950/10 dark:ring-gray-100/10 focus:ring-2 focus:ring-primary-500;
|
|
}
|
|
|
|
.form-control-bordered-error {
|
|
@apply ring-red-400 dark:ring-red-500 !important;
|
|
}
|
|
|
|
.form-control-focused {
|
|
@apply ring-2 ring-primary-500;
|
|
}
|
|
|
|
.form-control[data-disabled],
|
|
.form-control:disabled {
|
|
@apply bg-gray-50 dark:bg-gray-800 text-gray-400 outline-none;
|
|
}
|
|
|
|
/* Form Inputs
|
|
---------------------------------------------------------------------------- */
|
|
.form-input {
|
|
@apply appearance-none text-sm w-full bg-white dark:bg-gray-900 shadow rounded appearance-none placeholder:text-gray-400 dark:placeholder:text-gray-500 px-3 text-gray-600 dark:text-gray-400;
|
|
}
|
|
|
|
/* Form Selects
|
|
---------------------------------------------------------------------------- */
|
|
input[type='search'] {
|
|
@apply pr-2;
|
|
}
|
|
|
|
.dark .form-input,
|
|
.dark input[type='search'] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.form-control + .form-select-arrow,
|
|
.form-control > .form-select-arrow {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 11px;
|
|
}
|
|
|
|
/*.form-input-row {*/
|
|
/* @apply bg-white px-3 text-gray-600 border-0 rounded-none shadow-none h-[3rem];*/
|
|
/*}*/
|
|
|
|
/*.form-select {*/
|
|
/* @apply pl-3 pr-8;*/
|
|
/*}*/
|
|
|
|
/*input.form-input:read-only,*/
|
|
/*textarea.form-input:read-only,*/
|
|
/*.form-input:active:disabled,*/
|
|
/*.form-input:focus:disabled,*/
|
|
/*.form-select:active:disabled,*/
|
|
/*.form-select:focus:disabled {*/
|
|
/* box-shadow: none;*/
|
|
/*}*/
|
|
|
|
/*input.form-input:read-only:not([type='color']),*/
|
|
/*textarea.form-input:read-only,*/
|
|
/*.form-input:disabled,*/
|
|
/*.form-input.disabled,*/
|
|
/*.form-select:disabled {*/
|
|
/* @apply bg-gray-50 dark:bg-gray-700;*/
|
|
/* cursor: not-allowed;*/
|
|
/*}*/
|
|
|
|
/*input.form-input[type='color']:not(:disabled) {*/
|
|
/* cursor: pointer;*/
|
|
/*}*
|
|
/* Checkbox
|
|
---------------------------------------------------------------------------- */
|
|
.fake-checkbox {
|
|
@apply select-none flex-shrink-0 h-4 w-4 text-primary-500 bg-white dark:bg-gray-900 rounded;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background-origin: border-box;
|
|
|
|
@apply border border-gray-300;
|
|
@apply dark:border-gray-700;
|
|
}
|
|
|
|
.checkbox {
|
|
@apply appearance-none inline-block align-middle select-none flex-shrink-0 h-4 w-4 text-primary-500 bg-white dark:bg-gray-900 rounded;
|
|
-webkit-print-color-adjust: exact;
|
|
color-adjust: exact;
|
|
@apply border border-gray-300 focus:border-primary-300;
|
|
@apply dark:border-gray-700 dark:focus:border-gray-500;
|
|
@apply disabled:bg-gray-300 dark:disabled:bg-gray-700;
|
|
@apply enabled:hover:cursor-pointer;
|
|
}
|
|
|
|
.checkbox:focus,
|
|
.checkbox:active {
|
|
@apply outline-none ring-primary-200 ring-2 dark:ring-gray-700;
|
|
}
|
|
|
|
.fake-checkbox-checked,
|
|
.checkbox:checked {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M5.695 7.28A1 1 0 0 0 4.28 8.696l2 2a1 1 0 0 0 1.414 0l4-4A1 1 0 0 0 10.28 5.28L6.988 8.574 5.695 7.28Z'/%3E%3C/g%3E%3C/svg%3E");
|
|
border-color: transparent;
|
|
background-color: currentColor;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.fake-checkbox-indeterminate,
|
|
.checkbox:indeterminate {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M12 8a1 1 0 0 1-.883.993L11 9H5a1 1 0 0 1-.117-1.993L5 7h6a1 1 0 0 1 1 1Z'/%3E%3C/g%3E%3C/svg%3E");
|
|
border-color: transparent;
|
|
background-color: currentColor;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
html.dark .fake-checkbox-indeterminate,
|
|
html.dark .checkbox:indeterminate {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath fill='%230F172A' fill-rule='nonzero' d='M12 8a1 1 0 0 1-.883.993L11 9H5a1 1 0 0 1-.117-1.993L5 7h6a1 1 0 0 1 1 1Z'/%3E%3C/g%3E%3C/svg%3E");
|
|
@apply bg-primary-500;
|
|
}
|
|
|
|
html.dark .fake-checkbox-checked,
|
|
html.dark .checkbox:checked {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h16v16H0z'/%3E%3Cpath fill='%230F172A' fill-rule='nonzero' d='M5.695 7.28A1 1 0 0 0 4.28 8.696l2 2a1 1 0 0 0 1.414 0l4-4A1 1 0 0 0 10.28 5.28L6.988 8.574 5.695 7.28Z'/%3E%3C/g%3E%3C/svg%3E");
|
|
@apply bg-primary-500;
|
|
}
|
|
|
|
/* File Upload
|
|
---------------------------------------------------------------------------- */
|
|
.form-file {
|
|
@apply relative;
|
|
}
|
|
|
|
.form-file-btn {
|
|
}
|
|
|
|
.form-file-input {
|
|
@apply opacity-0 overflow-hidden absolute;
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.form-file-input:focus + .form-file-btn,
|
|
.form-file-input + .form-file-btn:hover {
|
|
@apply bg-primary-600 cursor-pointer;
|
|
}
|
|
|
|
.form-file-input:focus + .form-file-btn {
|
|
}
|