form { @apply .m-0; } textarea, select, input, button { @apply .outline-none; } button:focus, button:focus-visible { @apply .outline-none; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } input[type=number] { -moz-appearance: textfield !important; } /** * Styling for other forms throughout the Panel. */ .input:not(select), .input-dark:not(select) { @apply .appearance-none .w-full; min-width: 0; &:required, &:invalid { box-shadow: none; } } .input:not(select) { @apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800; transition: border 150ms linear; &:focus { @apply .border-primary-400; } &.error { @apply .text-red-600 .border-red-500; } &:disabled { @apply .bg-neutral-100 .border-neutral-200; } } .input-dark:not(select) { @apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none; transition: border 150ms linear, box-shaodw 150ms ease-in; &:focus { @apply .shadow-md .border-neutral-400; } &:hover { @apply .border-neutral-400; } & + .input-help { @apply .text-xs .text-neutral-400; } &.error + .input-help { @apply .text-red-400 !important; } &:disabled { @apply .opacity-75; } } .has-error .input-dark:not(select), .input-dark.error { @apply .text-red-100 .border-red-400; } .input-help { @apply .text-xs .text-neutral-400 .pt-2; &.error { @apply .text-red-400 !important; } } label { @apply .block .text-xs .uppercase .text-neutral-700 .mb-2; } select:not(.appearance-none) { @apply .shadow-none .block .p-3 .pr-8 .rounded .border .w-full .text-sm; transition: border-color 150ms linear; &, &:hover:not(:disabled), &:focus { @apply .outline-none; } -webkit-appearance: none; -moz-appearance: none; background-size: 1rem; background-repeat: no-repeat; background-position-x: calc(100% - 0.75rem); background-position-y: center; &::-ms-expand { display: none; } } select.input:not(.appearance-none) { @apply .bg-white .border-neutral-200 .text-neutral-400; transition: color 150ms linear; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e "); &:hover:not(:disabled), &:focus { @apply .border-primary-500 .text-neutral-700; } } select.input-dark:not(.appearance-none) { @apply .bg-neutral-600 .border-neutral-500 .text-neutral-200; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e "); background-color: hsl(220deg 21% 16%); &:hover:not(:disabled), &:focus { @apply .border-neutral-400; } } .input-dark-label { @apply .uppercase .text-neutral-200; } .input-label { @apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold; &:not(.mb-0) { @apply .mb-2; } } a.btn { @apply .no-underline; } .btn { @apply .rounded .p-2 .uppercase .tracking-wide .text-sm; transition: all 150ms linear; &.btn-secondary { @apply .border .border-neutral-600 .bg-transparent .text-neutral-200; &:hover:not(:disabled) { @apply .border-neutral-500 .text-neutral-100; } &.btn-red:hover:not(:disabled) { @apply .bg-red-500 .border-red-600 .text-red-50; } &.btn-green:hover:not(:disabled) { @apply .bg-green-500 .border-green-600 .text-green-50; } } &.btn-primary { &:not(.btn-secondary) { @apply .bg-primary-500 .border-primary-600 .border .text-primary-50; } &:hover:not(:disabled) { @apply .bg-primary-600 .border-primary-700; } } &.btn-grey { @apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50; &:hover:not(:disabled) { @apply .bg-neutral-600 .border-neutral-700; } } &.btn-green { &:not(.btn-secondary) { @apply .bg-green-500 .border-green-600 .border .text-green-50; } &:hover:not(:disabled), &.btn-secondary:active:not(:disabled) { @apply .bg-green-600 .border-green-700; } } &.btn-red { &:not(.btn-secondary) { @apply .bg-red-500 .border-red-600 .text-red-50; } &:hover:not(:disabled), &.btn-secondary:active:not(:disabled) { @apply .bg-red-600 .border-red-700; } } /** * Button Sizes */ &.btn-jumbo { @apply .p-4 .w-full; } &.btn-lg { @apply .p-4 .text-sm; } &.btn-sm { @apply .p-3; } &.btn-xs { @apply .p-2 .text-xs; } &:disabled, &.disabled { opacity: 0.55; cursor: default; } } input[type="checkbox"], input[type="radio"] { @apply .cursor-pointer .appearance-none .inline-block .align-middle .select-none .flex-no-shrink .w-4 .h-4 .text-primary-400 .border .border-neutral-300 .rounded-sm; color-adjust: exact; background-origin: border-box; transition: all 75ms linear, box-shadow 25ms linear; &:checked { @apply .border-transparent .bg-no-repeat .bg-center; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); background-color: currentColor; background-size: 100% 100%; } &:focus { @apply .outline-none .border-primary-300; box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25); } } input[type="radio"] { @apply .rounded-full; }