kithkin/resources/css/lib/input.css

/**
 * default text inputs
 */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="search"],
select,
textarea {
    @apply border-md border-secondary bg-white rounded-md shadow-input h-11;
    @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;

    &[disabled] {
        @apply opacity-50 cursor-not-allowed;
    }
}

/**
 * checkboxes
 */


/**
 * radio buttons
 */

input[type="radio"] {
    @apply appearance-none p-0 align-middle select-none shrink-0 rounded-full h-6 w-6;
    @apply text-black border-md border-secondary bg-none;
    @apply focus:border-primary focus:ring-2 focus:ring-offset-2 focus:ring-cyan-600;
    print-color-adjust: exact;
    --radio-bg: var(--color-white);

    &:checked {
        @apply border-black;
        box-shadow: 0 0 0 3px var(--radio-bg) inset, 0 0 0 3px var(--radio-bg) inset;
        animation: radio-check 200ms ease-out;
    }
}
@keyframes radio-check {
    0% {
        box-shadow: 0 0 0 12px var(--radio-bg) inset, 0 0 0 12px var(--radio-bg) inset;
    }
    50% {
        box-shadow: 0 0 0 2px var(--radio-bg) inset, 0 0 0 2px var(--radio-bg) inset;
    }
    100% {
        box-shadow: 0 0 0 3px var(--radio-bg) inset, 0 0 0 3px var(--radio-bg) inset;
    }
}
.radio-label {
    @apply flex flex-row gap-2 items-center;
}


/**
 * 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;

    > .description {
        @apply text-secondary leading-tight px-2px text-sm xl:text-base;
    }
}
.label {
    @apply font-semibold text-md;
}

/**
 * form layouts
 */
form {
    &.settings {
        @apply mt-8;
        @apply 2xl:max-w-3xl;
    }
}
article.settings {
    /* scroll detection for use later */
    animation: settings-scroll;
    animation-timeline: scroll(self);
    --can-scroll: 0;
}
@keyframes settings-scroll {
    from, to { --can-scroll: 1; }
}
.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;
    }
}
.input-row {
    @apply grid gap-4;
    @apply md:gap-6;

    /* format is a string of slash-separated cols, so `1-2` is 3 cols, 1st spans 1 and 2nd spans 2 */
    &.input-row--1 {
        @apply grid-cols-1;
    }
    &.input-row--1-1 {
        @apply grid-cols-1;
        @apply md:grid-cols-2;
    }
    &.input-row--1-1-1-1 {
        @apply grid-cols-1;
        @apply md:grid-cols-2;
        @apply xl:grid-cols-4;
    }
    &.input-row--2-1-1 {
        @apply grid-cols-1;
        @apply md:grid-cols-4;

        .input-cell:first-child {
            @apply col-span-2;
        }
    }

    /* bottom actions row */
    &.input-row--actions {
        @apply pt-6 pb-8 flex flex-row gap-6 justify-between items-center;
        @apply sticky bottom-0 bg-white border-t-md border-transparent;
        transition: border-color 100ms ease-in-out;
        box-shadow: 0 -1rem 1rem white;

        &.input-row--start {
            @apply justify-start;
        }
    }

    /* generic cell and row handling */
    .input-cell {
        @apply flex flex-col gap-2;
    }
    + .input-row {
        @apply mt-6;
    }
}
h3 + .input-row {
    @apply mt-6;
}
@container style(--can-scroll: 1) {
    .input-row--actions {
        @apply !border-black;
    }
}
@container style(--can-scroll: 0) {
    .input-row--actions {
        @apply !border-transparent;
    }
}