react-input-ui/collection/input-core/style.css

Collection of input fields for ReactJs

:root {
    --i-errUI-validColor: #559900;
    --i-errUI-notValidColor: #cc181e;
}


.errUI {
    bottom: 0;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 5px;
    width: 30px;
}

.errUI:before {
    -ms-transform-origin: inherit;
    -ms-transform: rotate(0deg);
    -o-transition: transform .4s ease, bottom .4s ease .3s, background-color .2s ease .6s;
    -webkit-transform-origin: inherit;
    -webkit-transform: rotate(0deg);
    -webkit-transition: bottom .4s ease .3s, background-color .2s ease .6s, -webkit-transform .4s ease;
    background-color: transparent;
    bottom: -25px;
    content: "";
    height: 26px;
    position: absolute;
    right: 15px;
    transform-origin: inherit;
    transform: rotate(0deg);
    transition: transform .4s ease, bottom .4s ease .3s, background-color .2s ease .6s;
    width: 3px;
}

.errUI:after {
    -ms-transform-origin: inherit;
    -ms-transform: rotate(0deg);
    -o-transition: transform .4s ease, visibility .4s ease, bottom .4s ease .3s, background-color .2s ease .6s, height .2s ease .6s;
    -webkit-transform-origin: inherit;
    -webkit-transform: rotate(0deg);
    -webkit-transition: visibility .4s ease, bottom .4s ease .3s, background-color .2s ease .6s, height .2s ease .6s, -webkit-transform .4s ease;
    background-color: transparent;
    bottom: -25px;
    content: "";
    height: 26px;
    position: absolute;
    right: 15px;
    transform-origin: inherit;
    transform: rotate(0deg);
    transition: transform .4s ease, visibility .4s ease, bottom .4s ease .3s, background-color .2s ease .6s, height .2s ease .6s;
    visibility: hidden;
    width: 3px;
}


/*Valid UI*/
.valid:before {
    -ms-transform-origin: inherit;
    -ms-transform: rotate(40deg);
    -o-transition: bottom .4s ease, transform .4s ease .3s;
    -webkit-transform-origin: inherit;
    -webkit-transform: rotate(40deg);
    -webkit-transition: bottom .4s ease, -webkit-transform .4s ease .3s;
    background-color: var(--i-errUI-validColor);
    bottom: 10px;
    right: 16px;
    transform-origin: inherit;
    transform: rotate(40deg);
    transition: bottom .4s ease, transform .4s ease .3s;
    visibility: visible;
}

.valid:after {
    -ms-transform-origin: inherit;
    -ms-transform: rotate(-45deg);
    -o-transition: bottom .4s ease, visibility .4s ease .3s, transform .4s ease .3s;
    -webkit-transform-origin: inherit;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: bottom .4s ease, visibility .4s ease .3s, -webkit-transform .4s ease .3s;
    background-color: var(--i-errUI-validColor);
    bottom: 10px;
    height: 15px;
    transform-origin: inherit;
    transform: rotate(-45deg);
    transition: bottom .4s ease, visibility .4s ease .3s, transform .4s ease .3s;
    visibility: visible;
}


/*Not valid UI*/
.not-valid:before {
    -ms-transform: rotate(40deg);
    -o-transition: bottom .4s ease, transform .4s ease .3s;
    -webkit-transform: rotate(40deg);
    -webkit-transition: bottom .4s ease, -webkit-transform .4s ease .3s;
    background-color: var(--i-errUI-notValidColor);
    bottom: 5px;
    transform: rotate(40deg);
    transition: bottom .4s ease, transform .4s ease .3s;
    visibility: visible;
}

.not-valid:after {
    -ms-transform: rotate(-45deg);
    -o-transition: bottom .4s ease, transform .4s ease .3s;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: bottom .4s ease, -webkit-transform .4s ease .3s;
    background-color: var(--i-errUI-notValidColor);;
    bottom: 5px;
    height: 26px;
    transform: rotate(-45deg);
    transition: bottom .4s ease, transform .4s ease .3s;
    visibility: visible;
}


/*Input validation UI*/
.input-validation {
    -o-text-overflow: ellipsis;
    -o-transition: box-shadow .3s linear;
    -webkit-transition: -webkit-box-shadow .3s linear;
    padding-right: 35px !important;
    text-overflow: ellipsis;
    transition: -webkit-box-shadow .3s linear;
    transition: box-shadow .3s linear;
}

.input-validation--not_valid {
    box-shadow: inset 0 -2px 0 0 var(--i-errUI-notValidColor) !important;
}


/*Input disabled UI*/
.input-disabled {
    opacity: .4 !important;
}