Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/common/forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// FORMS
// ==============================================

form {
    legend {
        @extend .title-3;
        margin-bottom: 0;
        color: $c-blue;
        font-weight: $fw-roboto-regular;
    }

    label,
    .label {
        display: block;
        font-size: 1.4rem;
        margin-bottom: 10px;
        text-align: left;

        a {
            @extend .link-1;
        }
    }

    .required {
        em {
            margin-left: 1px;
            font-style: normal;
        }
    }

    .fieldset {
        border: 0 none;

        & + .fieldset {
            margin-top: 15px;

            @include breakpoint(sm) {
                margin-top: 30px;
            }
        }

        .fields > .field + .field {
            margin-top: 20px;

            @include breakpoint(md) {
                margin-top: 0;
            }
        }

        > .field + .field,
        > .fields + .fields,
        > .field + .fields,
        > .fields + .field,
        > .field + .field-recaptcha,
        > .fields + .field-recaptcha {
            margin-top: 15px;

            @include breakpoint(sm) {
                margin-top: 25px;
            }
        }

        // Note
        .note + .field {
            margin-top: 15px;
        }

        .message {
            margin-top: 20px;
        }
    }

    .field {
        &:not(.search) {
            position: relative;
        }

        // Password (with strength meter)
        &.password {
            .control {
                display: flex;
                flex-direction: column;

                .mage-error {
                    order: 2;
                }

                .input-text {
                    order: 0;
                }
            }
        }

        // Confirmation
        &.confirmation .control {
            position: relative;

            &::after {
                position: absolute;
                right: -20px;
                top: 50%;
                transform: translateY(-50%);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transition: opacity .3s linear;
                @extend %icon-icomoon;
                content: '\e937';
            }

            &.is-valid {
                &::after {
                    visibility: visible;
                    opacity: 1;
                    color: $c-green;
                }
            }
        }

        // Add-on
        &.with-addon {
            .addon {
                display: flex;
                align-items: center;

                input {
                    flex-grow: 1;
                    margin-right: 10px;
                }
            }
        }

        // Captcha
        &.captcha {
            .captcha-image {
                display: flex;
                align-items: center;
                margin-top: 10px;

                @include breakpoint(only-md) {
                    justify-content: center;
                }
            }

            .action {
                margin-left: 20px;
                font-size: 2.5rem;
                color: $c-blue-dark;
                border: 2px solid $c-blue;
                width: 40px;
                height: 40px;
                border-radius: 50%;

                &:before {
                    content:"\e93b";
                    display: block;
                    @extend %icon-icomoon;
                }

                > span {
                    @include visually-hidden;
                }

                &:hover {
                    cursor: pointer;

                }
            }
        }

        // Required
        &.required:not(.choice),
        &._required:not(.choice) {
            & > .label {
                &::after {
                    content:"*";
                }
            }
        }
    }

    // Horizontal multiple fields
    .fields,
    .select-box {
        @include breakpoint(md) {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-left: -10px;
            margin-right: -10px;
        }
    }

    .fields .field,
    .select-box > select {
        @include breakpoint(md) {
            flex: 1;
            margin: 0 10px;
        }
    }

    .fields + .field,
    .select-box > select + select {
        @include breakpoint(only-md) {
            margin-top: 20px;
        }
    }

    // Address
    .street {
        .label {
            font-weight: normal;
            margin: 0 0 10px 0;
        }

        .field {
            margin: 0 0 10px 0;

            &.additional {
                margin: 15px 0 0 0;
            }

            // Hide duplicate required element
            .label::after {
                display: none;
            }
        }

        @include breakpoint(sm){
            .field {
                &.additional {
                    margin: 25px 0 0 0;
                }
            }
        }
    }

    // Errors
    .control {
        > .mage-error + .mage-error  {
            margin-top: 6px;
        }

        .mage-error {
            color: $c-error;
            font-size:  1.2rem;
        }

        div.mage-error {
            margin-left: 12px;
        }
    }

    // Actions
    .actions-toolbar {
        margin-top: 5px;

        div.secondary {
            margin-top: 5px;
            margin-bottom: 25px;
            text-align: right;

            .action {
                &.back {
                    display: none;
                }
                &.remind {
                    color: $c-blue-dark;
                    font-size: 1.2rem;

                    @include breakpoint(md) {
                        font-size: 1rem;
                    }
                }
            }
        }

        button {
            font-family: $f-roboto;
        }

        .remind {
            border-bottom: 1px solid;
        }
    }

    &.form.contact {
        .actions-toolbar {
            margin-top: 20px;

            @include breakpoint(md) {
                margin-top: 30px;
            }
        }
    }

    // Field Error message
    .field-error {
        margin-top: 5px;
        color: $c-error;
        font-size: 10px;
    }

    //
    //  Newsletter
    //  _____________________________________________

    &.subscribe {
        display: flex;
        align-items: flex-start;

        .field.newsletter {
            flex-grow: 1;

            .label {
                @extend .visually-hidden;
            }
        }

        .actions {
            margin-left: 6px;
        }
    }
}

.message + form {
    margin-top: 20px;
}

// Cta Back
.action.back {
    color: $c-blue-grey;
    font-size: 1.5rem;
    margin: 0;

    &:before {
        display: inline-block;
        position: relative;
        top: -1px;
        margin-right: 10px;
        vertical-align: middle;
        transform: rotate(180deg);
        content:"\e914";
        font-size: 1.8rem;
        @extend %icon-icomoon;
    }
}

// Simple back link (use span inside element to get the text underline )
.back-link {
    font-size: 1.4rem;
    color: $c-blue-dark;

    &::before {
        content:"<";
        margin-right: 5px;
    }

    span {
        text-decoration: underline;
    }
}

//
//  Hide Form Label
//  _____________________________________________

.header-login-container .login {
    .field .label {
        @extend .visually-hidden;
    }
}