modules/frontend/app/primitives/form-field/index.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../public/stylesheets/variables';

.theme--ignite {
    [ignite-icon='info'], .tipLabel {
        color: $ignite-brand-success;
    }

    .ignite-form-field {
        width: 100%;

        &.radio--ignite {
            width: auto;

        }

        &.ignite-form-field-dropdown {
            .ignite-form-field__control button {
                display: inline-block;
                overflow: hidden !important;
                text-overflow: ellipsis;
            }
        }

        [ignite-icon='info'], .tipLabel {
            margin-left: 4px;
            flex: 0 0 auto;
        }


        label.required {
            content: '*';
            margin-left: 0.25em;
        }

        .ignite-form-field__control {
            width: 100%;

            .input-tip {
                display: flex;
                overflow: visible;

                & > input,
                & > button {
                    overflow: visible;

                    box-sizing: border-box;
                    width: 100%;
                    max-width: initial;
                    height: 36px;
                    padding: 0 10px;
                    margin-right: 0;

                    border: solid 1px #c5c5c5;
                    border-radius: 4px;
                    background-color: #ffffff;
                    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);

                    color: $text-color;
                    line-height: 36px;

                    &.ng-invalid:not(.ng-pristine),
                    &.ng-invalid.ng-touched {
                        border-color: $ignite-brand-primary;
                        box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-primary, .5);
                    }

                    &:focus {
                        border-color: $ignite-brand-success;
                        box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-success, .5);
                    }

                    &:disabled {
                        opacity: .5;
                    }


                    &:focus {
                        border-color: $ignite-brand-success;
                        box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-success, .5);
                    }

                    &:disabled {
                        opacity: .5;
                    }
                }

                & > input[type='number'] {
                    text-align: left;
                }
            }

            .tipField {
                line-height: 36px;
            }
       }
    }
    .ignite-form-field__label {
        float: left;
        width: 100%;
        margin: 0 0 2px;
        padding: 0 10px;
        height: 16px;
        display: inline-flex;
        align-items: center;

        color: $gray-light;
        font-size: 12px;
        line-height: 12px;

        &-disabled {
            opacity: 0.5;   
        }
    }
   .ignite-form-field__errors {
        color: $ignite-brand-primary;
        padding: 5px 10px 0;
        line-height: 14px;
        font-size: 12px;
        clear: both;

        &:empty {
            display: none;
        }

        [ng-message] + [ng-message] {
            margin-top: 10px;
        }
   }
   @keyframes error-pulse {
        from {
            color: $ignite-brand-primary;
        }
        50% {
            color: transparent;
        }
        to {
            color: $ignite-brand-primary;
        }
   }
   .ignite-form-field__error-blink {
        .ignite-form-field__errors {
            animation-name: error-pulse;
            animation-iteration-count: 2;
            animation-duration: 500ms;
        }
   }

   .ignite-form-field.form-field-checkbox {
        input[disabled] ~ * {
            opacity: 0.5;
        }
   }
}

.form-field {
    position: relative;
    width: 100%;

    &__label {
        display: flex;
        margin: 0 0 4px;

        color: #424242;
        font-size: 14px;
        line-height: 1.25;

        .icon-help {
            line-height: 14px;
        }

        &.required:after {
            content: '';
        }

        i {
            font-style: normal;
            color: $gray-light;
        }

        svg {
            flex: 0 0 auto;
            margin-left: 4px;
        }

        [ignite-icon='info'] {
            position: relative;
            top: 1px;

            color: $ignite-brand-success;
        }
    }

    &__control {
        overflow: visible;
        display: flex;
        flex-direction: row;
        width: 100%;

        & > input::placeholder,
        & > button.select-toggle.placeholder {
            color: rgba(66, 66, 66, 0.5);
            text-align: left;
        }

        & > input,
        & > button:not(.btn-ignite) {
            outline: none;
            overflow: visible;

            box-sizing: border-box;
            width: 100%;
            max-width: initial;
            min-width: 0;
            height: 36px;
            padding: 9px 10px;
            margin-right: 0;

            border: solid 1px #c5c5c5;
            border-radius: 4px;
            background-color: #ffffff;
            box-shadow: none;

            color: $text-color;
            font-size: 14px;
            text-align: left;
            line-height: 16px;

            &.ng-invalid:not(.ng-pristine),
            &.ng-invalid.ng-touched {
                border-color: #c5c5c5;
                box-shadow: none;
            }

            &.ng-invalid:focus,
            &:focus {
                border-color: $ignite-brand-success;
                box-shadow: none;
            }
        }

        &--postfix::after {
            content: attr(data-postfix);
            display: inline-flex;
            align-self: center;
            margin-left: 10px;
        }

        // Added right offset to appearance of input for invalid password
        & > input[type='email'].ng-invalid.ng-touched,
        & > input[type='text'].ng-invalid.ng-touched,
        & > input[type='password'].ng-invalid.ng-touched {
            padding-right: 36px;
        }

        // Added right offset to appearance of dropdown for invalid data
        & > button.select-toggle.ng-invalid.ng-touched {
            &:after {
                right: 36px;
            }
        }
    }

    &__control-group {
        input {
            min-width: 0;
            margin-right: -1px;

            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;

            &:focus {
                z-index: 1;
            }
        }

        input + * {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            flex: 0 0 auto;
            width: 60px !important;
        }
    }

    &__errors {
        position: absolute;
        right: 0;
        bottom: 0;

        display: flex;

        [ng-message] {
            // TODO: remove after replace all fields to new
            overflow: visible !important;
            animation: none !important;
        }
    }

    &__control--postfix + &__errors::after {
        content: attr(data-postfix);
        margin-left: 10px;
        visibility: hidden;
    }

    &__error {
        z-index: 2;
        position: relative;
        width: 0;
        height: 36px;
        float: right;

        color: $brand-primary;
        line-height: $input-height;
        pointer-events: initial;
        text-align: center;

        &:before {
            position: absolute;
            right: 0;
            width: 38px;
        }

        div:first-child {
            display: none;
        }

        [bs-tooltip] {
            z-index: 1;
            position: absolute;
            top: 0;
            right: 0;
            width: 36px;
            height: 36px;
        }

        [ignite-icon] {
            position: absolute;
            top: 10px;
            right: 0;
            width: 38px;
        }
    }

    [disabled] {
        opacity: .5;
    }
}

.theme--ignite-errors-horizontal {
    .form-field__control {
        // Reset offset to appearance of input for invalid password
        & > input[type='email'].ng-invalid.ng-touched,
        & > input[type='text'].ng-invalid.ng-touched,
        & > input[type='password'].ng-invalid.ng-touched {
            padding-right: 0;
        }
        // Reset offset to appearance of dropdown for invalid data
        & > button.select-toggle.ng-invalid.ng-touched {
            &:after {
                right: 10px;
            }
        }
    }

    .form-field__errors {
        position: relative;
        
        padding: 5px 10px 0px;

        color: $ignite-brand-primary;
        font-size: 12px;
        line-height: 14px;

        &:empty {
            display: none;
        }

        [ng-message] + [ng-message] {
            margin-top: 10px;
        }
    }

    .form-field__error {
        float: none;
        width: auto;
        height: auto;
        position: static;

        text-align: left;
        line-height: 14px;

        div:first-child {
            display: block;
        }

        [bs-tooltip],
        [ignite-icon] {
            display: none;
        }
    }

    .form-field__error + .form-field__error {
        margin-top: 10px;
    }

    .form-field__checkbox {
        flex-wrap: wrap;

        .form-field__errors {
            margin-left: -10px;
            flex-basis: 100%;

            .form-field__error {
                width: auto;

                div {
                    width: auto;
                }
            }
        }
    }
}

.form-field__radio,
.form-field__checkbox {
    $errorSize: 16px;
    display: inline-flex;
    width: auto;

    сursor: pointer;

    .form-field {
        &__label {
            order: 1;
            margin: 0;
            cursor: pointer;
        }

        &__control {
            width: auto;
            margin-right: 10px;
            padding: 3px 0;
            flex: 0 0 auto;

            input {
                width: auto;
                height: auto;
                margin: 0;
                border-radius: 0;
            }
        }

        &__errors {
            position: static;
            right: initial;
            bottom: initial;
            order: 3;
            margin-left: 5px;

            .form-field__error {
                width: $errorSize;
                height: $errorSize;

                div {
                    // Required to correctly position error popover
                    top: -10px;
                    height: 36px;
                    
                    width: $errorSize;                    
                }

                [ignite-icon] {
                    width: $errorSize;
                    top: 0;
                }
            }
        }
    }
}

.form-field__radio {
    .form-field__control {
        padding: 2px 0;
    }

    .form-field__control > input[type='radio'] {
        -webkit-appearance: none;

        width: 13px;
        height: 13px;
        padding: 0;

        background: white;
        border: none;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgb(197, 197, 197);

        &:focus {
            outline: none;
            border: none;
            box-shadow: 0 0 0 2px rgba(0, 103, 185, .3),
                  inset 0 0 0 1px rgb(197, 197, 197);
        }

        &:checked {
            border: none;
            box-shadow: inset 0 0 0 5px rgba(0, 103, 185, 1); 

            &:focus {
                box-shadow: 0 0 0 2px rgba(0, 103, 185, .3),
                      inset 0 0 0 5px rgba(0, 103, 185, 1); 
            }
        }
    }
}

.form-field__checkbox {
    .form-field__control > input[type='checkbox'] {
        border-radius: 2px;

        background-image: url(/images/checkbox.svg);
        width: 12px !important;
        height: 12px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-repeat: no-repeat;
        background-size: 100%;
        padding: 0;
        border: none;

        &:checked {
            background-image: url(/images/checkbox-active.svg);
        }

        &:disabled {
            opacity: 0.5;
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 103, 185, .3);
        }
    }
}

.form-field--inline {
    display: inline-block;
    width: auto;

    .form-field {
        display: flex;
        align-items: baseline;
    }

    .form-field__label {
        white-space: nowrap;
    }

    form-field-size,
    .form-field__text {
        .form-field__control {
            margin-left: 10px;
        }
    }

    .form-field__dropdown,
    .form-field__datepicker,
    .form-field__timepicker {
        .form-field__control {
            width: auto;

            input,
            button {
                color: transparent;

                text-shadow: 0 0 0 $ignite-brand-success;

                border: none;
                box-shadow: none;

                background: linear-gradient(to right, rgb(0, 103, 185), transparent) 0px 25px / 0px, 
                            linear-gradient(to right, rgb(0, 103, 185) 70%, transparent 0%) 0% 0% / 8px 1px repeat-x,
                            0% 0% / 0px, 0% 0% / 4px;
                background-size: 0, 8px 1px, 0, 0;
                background-position: 1px 25px;

                padding-left: 0px;
                padding-right: 0px;
                margin-left: 10px;
                margin-right: 10px;

                &:hover, &:focus {
                    text-shadow: 0 0 0 change-color($ignite-brand-success, $lightness: 26%);
                }
            }
        }
    }

    .form-field__dropdown {
        button::after {
            display: none;
        }
    }
}

.form-field__password {
    // Validation error notification will overlap with visibility button if it's not moved more to the left
    input[type='password'].ng-invalid.ng-touched,
    input[type='password'].ng-invalid.ng-touched + input {
        padding-right: 62px;
    }

    // Extra space for visibility button
    input {
        padding-right: 36px;
    }

    // Distance between error notification and visibility button
    .form-field__errors {
        right: 26px;
    }

    password-visibility-toggle-button {
        position: absolute;
        right: 0;
        height: 36px;
    }
}

.form-field__dropdown {
    .form-field__control {
        > button:not(.btn-ignite) {
            padding-top: 10px;
        }
    }
}

.form-field__ace {
    .ace_editor {
        width: 100%;
        min-height: 70px;
        margin: 0;

        border: solid 1px #c5c5c5;
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: none;

        .ace_content {
            padding-left: 2px;
        }

        &.ace_focus {
            border-color: $ignite-brand-success;
            box-shadow: none;
        }
    }
}

.form-field.ignite-form-field label.required {
    margin-left: 0 !important;
}

.form-fieldset {
    padding: 10px;

    border: 1px solid hsla(0, 0%, 77%, .5);
    border-radius: 4px;

    legend {
        width: auto;
        margin: 0 -5px;
        padding: 0 5px;

        border: 0;

        color: #393939;
        font-size: 14px;
        line-height: 1.42857;
    }

    legend + * {
        margin-top: 0 !important;
    }

    & > *:last-child {
        margin-bottom: 0 !important;
    }
}