[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / form.scss

input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
        margin: 0; /* safari fix */
        @include input;
}

/* set placeholder color */
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"] {
        &::placeholder {
                color: var(--wcfInputPlaceholder);

                &:focus,
                &:hover {
                        color: var(--wcfInputPlaceholderActive);
                }
        }

        &[disabled],
        &[readonly] {
                background-color: var(--wcfInputDisabledBackground) !important;
                border-color: var(--wcfInputDisabledBorder) !important;
                color: var(--wcfInputDisabledText) !important;
        }
}

textarea::placeholder {
        color: var(--wcfInputPlaceholder);

        &:focus,
        &:hover {
                color: var(--wcfInputPlaceholderActive);
        }
}

input[type="search"],
input[type="text"] {
        -webkit-appearance: none;
}

@media (pointer: coarse) {
        input[type="date"],
        input[type="datetime"],
        input[type="email"],
        input[type="number"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="text"],
        input[type="url"],
        select,
        textarea {
                font-size: 16px;
                padding: 6px 8px;
        }
}

textarea {
        border-width: 1px;
        font-weight: 400;
        resize: vertical;
        vertical-align: top;
        width: 100%;

        @include wcfFontDefault;

        &[disabled],
        &[readonly] {
                background-color: var(--wcfInputDisabledBackground) !important;
                border-color: var(--wcfInputDisabledBorder) !important;
                color: var(--wcfInputDisabledText) !important;
        }
}

input[disabled],
textarea[disabled] {
        -webkit-text-fill-color: var(--wcfInputDisabledText); /* override safari font color change */
        -webkit-opacity: 1; /* override mobile safari opacity change affecting text color */
}

select {
        // The width is determined by the browser based upon the longest <option> contained,
        // but this can cause the <select> to overflow the parent container. This is acceptable
        // to some extent, but on mobile it can cause the entire site to have a horizontal
        // scrollbar instead. Setting a `max-width` will cause the browser to respect the page
        // boundaries and nicely wrap the displayed value instead.
        max-width: 100%;

        &.fullWidth {
                width: 100%;
        }
}

.formSubmit {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;

        &:not(:first-child) {
                margin-top: 30px;
        }
}

@include screen-xs {
        .formSubmit {
                input[type="button"],
                input[type="reset"],
                input[type="submit"],
                .button,
                a.button {
                        flex: 1;
                }
        }
}

.formSubmit.formSubmit.formSubmit + .section {
        /* Intentional selector to overwrite existing selector. */
        margin-top: 20px;
}

.inputAddon {
        column-gap: 5px;
        display: flex;

        &:not(:last-child) {
                margin-bottom: 5px;
        }

        > .inputPrefix,
        > .inputSuffix {
                align-items: center;
                display: flex;
                flex: 0 0 auto;
        }

        input {
                flex: 1 auto;

                & + .inputPrefix {
                        margin-left: 5px;
                }
        }
}

.inputAddonTextarea {
        column-gap: 0;
        flex-wrap: wrap;
        row-gap: 5px;

        > textarea {
                flex: 0 0 100%;
        }

        > .ck.ck-editor {
                flex: 0 0 100%;
                margin-top: 0 !important;
        }
}

.inputAddon input,
input {
        &.tiny {
                flex-grow: 0;
                width: 80px;
        }

        &.long {
                width: 100%;
        }

        @include screen-xs {
                &.short {
                        flex-grow: 0;
                        width: 150px;
                }

                &.medium {
                        width: 100%;
                }
        }

        @include screen-sm-up {
                &.short {
                        flex-grow: 0;
                        min-width: 80px;
                        width: 10%;
                }

                &.medium {
                        flex-grow: 0;
                        min-width: 150px;
                        width: 30%;
                }
        }
}

.formError {
        --color-error: #c00;

        dt {
                color: var(--color-error) !important;
        }

        input,
        select,
        textarea {
                border-color: var(--color-error) !important;
        }
}

html[data-color-scheme="dark"] .formError {
        --color-error: #ff4747;
}

.formSuccess {
        --color-success: rgb(46, 139, 87);

        dt {
                color: var(--color-success) !important;
        }

        input,
        select,
        textarea {
                border-color: var(--color-success) !important;
        }
}

/* grid-based form controls */
.formGrid {
        dt {
                display: none;
        }

        select {
                width: 100%;
        }
}

.formFieldRequired,
.customOptionRequired {
        color: rgba(204, 0, 1, 1) !important;
}

.formFieldRequiredNotice {
        color: var(--wcfContentDimmedText);
        margin-top: 20px;
        @include wcfFontSmall;
}

html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
        color: #ff4444 !important;
}

/* password strength estimator */
.inputAddonPasswordStrength {
        align-items: flex-start;

        input.medium {
                align-self: stretch;
        }

        @include screen-xs {
                flex-wrap: wrap;

                input:is(.medium, .long) {
                        width: auto;
                }
        }
}

.passwordStrengthRating {
        flex: 0 0 auto;

        @include screen-sm-up {
                margin-left: 10px;
        }

        @include screen-xs {
                margin-top: 5px;
                width: 100%;
        }
}

.passwordStrengthScore {
        background-color: rgb(224, 224, 224);
        border-radius: 3px;
        display: block;
        height: 10px;
        overflow: hidden;
        position: relative;

        &::before {
                background-color: transparent;
                bottom: 0;
                content: "";
                left: 0;
                position: absolute;
                top: 0;
                transition:
                        background-color 0.12s linear,
                        width 0.12s linear;
                width: 0;
        }

        &[data-score="0"]::before {
                background-color: #dd2c00;
                width: 5%;
        }
        &[data-score="1"]::before {
                background-color: #ff9100;
                width: 20%;
        }
        &[data-score="2"]::before {
                background-color: #cddc39;
                width: 50%;
        }
        &[data-score="3"]::before {
                background-color: #64dd17;
                width: 85%;
        }
        &[data-score="4"]::before {
                background-color: #2e7d32;
                width: 100%;
        }
}