NumericInput.less

@text-color: #707171;

.WLC-NumericInput {
    font-family: 'Ubuntu Light', Helvetica;
    font-size: 10pt;

    position: relative;

    width: 70px;
    height: 20px;
    z-index: 10;
    input {
        font-family: 'Ubuntu Light', Helvetica;
        font-size: 10pt;

        position: absolute;
        z-index: 10;
        right: 14px;

        width: 58px;
        padding: 4px 0px;

        -webkit-transition: width .2s, left .2s, right .2s;
           -moz-transition: width .2s, left .2s, right .2s;
                transition: width .2s, left .2s, right .2s;
        text-align: center;

        border: 2px solid #fff;
        background-color: #fff;

        -webkit-appearance: none;
        &.WLC-error {
            border: 2px solid #ed1d39;
            z-index: 50;
            &:focus {
                border: 2px solid #ed1d39;
            }
        }
        &.WLC-warning {
            border: 2px solid #fec114;
            z-index: 50;
            &:focus {
                border: 2px solid #fec114;
            }
        }
        &:focus {
            outline: 0;
        }
        &.WLC-WLC-focused {
            z-index: 50;
            right: 2px;

            width: 85px;

            box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
        }

        &[disabled] {
            background-color: #ececec;
        }
    }
    .WLC-symbol {
        position: absolute;
        top: 6px;
        left: -20px;
        color: @text-color;
        z-index: 10;
    }

    .WLC-warning-text {
        font-family: 'Ubuntu Light',Helvetica;
        font-size: 7pt;

        position: absolute;
        bottom: 7px;
        left: -8px;
        z-index: 30;

        width: 80px;
        height: 10px;
        padding: 2px 0;

        text-align: center;

        color: #fff;
        border-radius: 1px;
        box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
        &.WLC-warning {
            background-color: #fec114;
        }
        &.WLC-error {
            background-color: #ed1d39;
        }
    }
    .WLC-appendix {
        position: absolute;
        bottom: 4px;
        left: 29px;
        z-index: 30;

        width: 5px;
        height: 3px;
        &.WLC-error {
            background: url('Input/appendix-error.svg');
        }
        &.WLC-warning {
            background: url('Input/appendix-warning.svg');
        }
    }
}