aSkelly/scss/component/_form.scss

@use '../utilities/main_utilities' as *;

form {
    display: block;
    text-align: $justify-normal;
    margin: 0 auto;

    @include color-scheme(dark) {
        border-color: $color-text-secondary--dark;
    }
}

form header {
    margin: 1.5rem 0;
    padding: 1.5rem 0;
}

input,
label,
select,
textarea {
    display: block;
    font-size: inherit;
}
label {
    color: $color-text-secondary;
    margin-bottom: rems(10px);
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
    display: inline-block;
    font-weight: normal;
    position: relative;
    top: 1px;
}

input[type="range"] {
    padding: 0.4rem 0;
}

input,
select,
textarea {
    border: 1px solid $color-text-secondary;
    border-radius: $border-radius;
    padding: rems(6px) rems(13px); //0.4rem 0.8rem;
    width: 100%;

    @include color-scheme(dark) {
        border-color: $color-text-secondary--dark;
    }
}

input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    background-color: $color-background;
}

input[readonly],
textarea[readonly] {
    background-color: $color-text-secondary;

    @include color-scheme(dark) {
        background-color: $color-text-secondary--dark;
    }
}

// This is weird, needs work
input[type="color"]{
    padding: rems(4.5px) rems(13px);
    box-sizing: content-box;
}

select{
    -webkit-appearance: menulist-button;
    color: black;
}
input::placeholder
, select option[value=""], select:invalid
,textarea::placeholder
{
	color: $color-text-secondary;
}


// Fancy inputs
.input-group{
    @include flex();
    width: 100%;
    position: relative;
    align-items: stretch;
}

// They're the same atm, but use prepend for start, and append for end as I may change them to be different
.input-group__prepend, .input-group__append{
    @include flex();
    flex: 1 0 auto; // To make the full content be shown

    // To allow for dropdowns, etc. as pre/append content
    .input-group__content{
        border: none;
        border-radius: 0;
    }
}

.input-group__content{
    @include flex();
    align-items: center;
    padding: rems(8px);
    text-align: center;
    background: $color-primary;
    color: $color-background;
}
.input-group__prepend .input-group__content{
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
}
.input-group__append .input-group__content{
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
}

// Remove the border left/right on inputs related to ap/prepends
.input-group__prepend + .input-group__input{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

// input directly before a pre/append
.input-group__input:has(+.input-group__append){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

// WIP
// Checkbox/Radio
// custom-radio, custom-checkbox
$inputSize: remsNumeric(18);
$checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
.custom-checkbox:hover{
	cursor: pointer;
}
.custom-checkbox label{
    padding-left: $inputSize*1.5rem;
}
.custom-checkbox input{
    // display: none;
}
.custom-checkbox label::after{
    content: "";
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: #{$inputSize}rem;
    height: #{$inputSize}rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.custom-checkbox input:checked~label::after{
    background-image: $checkboxIcon;
    background-color: blue;
}
.custom-checkbox label::before{
    content: "";
    position: absolute;
    top: .25rem;
    left: 0;
    display: block;
    width: #{$inputSize}rem;
    height: #{$inputSize}rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #dee2e6;
}

// Then kinda same for custom-radio
// input:checked~label::before{
//     background-color: green;
// }