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 - Inputs
// ==============================================

//
//  Configuration
//  _____________________________________________

$input-border-color:    $c-grey;
$input-background:      $c-white;
$input-picto-color:     $c-blue-dark;


.input-text:not(textarea),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"] {

    // Reset
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    // Custom
    padding: 15px 22px;
    font-size: 1.2rem;
    font-family: $f-base;
    color: $c-blue-dark;
    background-color: $input-background;
    border: 1px solid $input-border-color;
    border-radius: $radius-input;

    // Chrome/Opera/Safari
    &::-webkit-input-placeholder {
        color: $c-blue-dark;
    }

    // Firefox 19+
    &::-moz-placeholder {
        color: $c-blue-dark;
        opacity: 1;
    }

    // IE 10+
    &:-ms-input-placeholder {
        color: $c-blue-dark;
    }

    // Firefox 18-
    &:-moz-placeholder {
        color: $c-blue-dark;
        opacity: 1;
    }

    &.disabled-skin,
    &:disabled {
        background-color: #F9FAFC;
    }
}

.input-text:not(.qty),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
    display: block;
    width: 100%;

    &.mage-error {
        border: 1px solid $c-error !important;

        // Chrome/Opera/Safari
        &::-webkit-input-placeholder {
            color: $c-error;
        }

        // Firefox 19+
        &::-moz-placeholder {
            color: $c-error;
        }

        // IE 10+
        &:-ms-input-placeholder {
            color: $c-error;
        }

        // Firefox 18-
        &:-moz-placeholder {
            color: $c-error;
        }
    }
}

// Control qty

.control.qty {
    max-width: 92px;
    margin: 0 20px;

    @include breakpoint(md) {
        max-width: 105px;
    }
}

.soon-qty-updater-wrap {
    display: flex;
    align-items: center;

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
}

.soon-qty-updater  {
    color: $c-blue;
    font-size: 2rem;
    font-weight: $fw-roboto-bold;

    &:hover {
        cursor: pointer;
    }
}

input.qty {
    width: 50px;
    padding: 5px;
    margin: 0 10px;
    text-align: center;
}

// Disable status
.input-text,
input,
button {
    &:disabled {
        opacity: 0.4 !important;
        &:hover {
            cursor: auto;
        }
    }
}

.field {

    // Search Input
    &.search {
        .control {
            position: static;
        }

        input[type="text"] {
            padding: 10px 22px;
            border-radius: 20px 0 0 20px;

            @include breakpoint(md) {
                padding: 12px 22px;
            }

            &::placeholder {
                font-style: italic;
                color: $c-blue-grey;
            }
        }
    }

    // Input Pictogramme Styles
    .control {
        position: relative;
    }

    // Color Picto
    .control .reveal-password span:before,
    .control .reveal-password:after,
    &.telephone .control:after {
        color: $input-picto-color;
    }

    // Phone
    &.telephone {
        .control {
            &:after {
                @extend %icon-icomoon;
                content:"\e906";
                position: absolute;
                top: 14px;
                right: 15px;
            }
        }
    }

    // Password
    .reveal-password {
        position: absolute;
        top: 14px;
        right: 15px;
        font-size: 2rem;
        cursor: pointer;

        &.is-active {
            // Barred eye line
            &::after {
                content: "";
                background-color: $input-picto-color;
                width: 2px;
                height: 20px;
                display: block;
                position: absolute;
                top: 0;
                left: 50%;
                -webkit-transform: rotate(10deg);
                transform: rotate(30deg);
            }
        }
    }
}