eliace/ergo-js

.input {
    position: relative;
    display: inline-block;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.075) inset;


    // > input {
    //     height: 34px; // ?
    // }
    


    > input, > textarea {
        line-height: 1.42857;//20px;
        padding: 0.4286em 0.5714em;
        border-radius: @border-radius;
        color: #444;
        background: none;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        font-size: inherit;

        width: 100%;


        .bordered;

        &:focus {
            .focused;
        }

        &:disabled {
            color: @disabled-color;
        }

    }




    &.flat {
        box-shadow: none;//0 2px 2px rgba(0, 0, 0, 0.075) inset;
        > input, > textarea {
//            padding-bottom: 0.4286em - (0.1429em - 0.05em);
            box-shadow: none;
            border-right: none;
            border-left: none;
            border-top-color: transparent !important;
            border-bottom-width: 0.07143em;
            border-bottom-style: solid;
//            border-bottom: 0.05em solid @border-color;
            border-radius: 0;
        }
         > input:focus:not(:disabled), > textarea:focus:not(:disabled) {
             border-bottom-width: 0.1429em;
             padding-bottom: 0.4286em - 0.07143em;

// //            border-bottom: 1px solid darken(@border-color, 10%);
         }

         &.disabled > input, &.disabled > textarea {
             border-top-color: transparent !important;
         }

    }


    &.transparent {
        box-shadow: none;
        > input {
            border-color: transparent;
        }
        > input:focus {
            box-shadow: none;
        }
    }


    &.amber {
         > input:focus:not(:disabled), > textarea:focus:not(:disabled) {
             border-color: @amber;
         }
    }


}





.input.has-icon {

    > .icon {
        position: absolute;
        right: 0;
        width: 2.286em;
        line-height: 1.42857;//20px;
        height: 100%;
        text-align: center;
        pointer-events: none;
    //    cursor: default;
//        color: rgba(0,0,0,0.3);
        transition: opacity 0.15s ease-in-out 0s;
        opacity: 0.5;
        top: 0;


        &:before, &:after {
            position: absolute;
            top: 50%;
            line-height: 1;
            margin-top: -0.5em;//-10px;
            width: 100%;
            left: 0;
        }

        &.action {
            pointer-events: auto;
        }

        &.spinner:after, &.spinner:before {
            width: 16px;
            height: 16px;
            top: 50%;
            margin-top: -8px;
            left: 50%;
            margin-left: -8px;
        }

    }


    // > input:focus    ~ .icon {
    //     opacity: 1;
    // }

    > input:disabled    ~ .icon {
        opacity: 0.15;
    }



    &.at-left {

        padding-left: 0;

        > input {
            padding-left: 2.286em;
        }
        > .icon.left {
            left: 0;
            right: auto;
        }
    }


    &.at-right {

        padding-right: 0;

        > input {
            padding-right: 2.286em;
        }
        > .icon.right {
            left: auto;
            right: 0;
        }
    }



}








.input.icon > .icon, .input.icon.left > .icon, .input.icon.right > .icon,
.input.icon > .spinner, .input.icon.left > .spinner, .input.icon.right > .spinner {
    position: absolute;
    right: 0;
    width: 2.286em;
    line-height: 1.42857;//20px;
    height: 100%;
    text-align: center;
    pointer-events: none;
//    cursor: default;
//    color: @text-color;
    top: 0;
/*    opacity: 0.5;*/
}


.input.icon > .icon {
    &:before, &:after {
        position: absolute;
        top: 50%;
        line-height: 1;
        margin-top: -0.5em;//-10px;
        width: 100%;
        left: 0;
    }
}


/*.input.icon > input,*/ .input.icon.right > input {
    padding-right: 2.286em;
}


.input.icon.left > input {
    padding-left: 2.286em;
}

.input.icon.left > .icon {
    left: 0;
    right: auto;
}




.input.icon > .spinner:before, .input.icon > .spinner:after {
    width: 16px;
    height: 16px;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
}


// FIXME
.input.icon > .icon.action {
    pointer-events: auto;
}





//--------------------------------------------------
// LAYOUTS
//--------------------------------------------------


[layout="stack"] > .input > input {
    width: 100%;
}




//--------------------------------------------------
// BLOCK
//--------------------------------------------------


.input.block, .input.fluid {
    display: block;
}

.input.block > input, .input.block > textarea, .input.fluid > input, .input.fluid > textarea {
    width: 100%;
}





//--------------------------------------------------
// STATES
//--------------------------------------------------


.input.focus > input, .input.focus > textarea {
    .focused;
}


.input.disabled > input, .input.disabled > textarea {
    border-color: #ddd;
    &::-moz-placeholder {
        color: #ddd;
    }
}


.error.input > input,
.error.input > textarea,
.error .input > input,
.error .input > textarea {
    border-color: @danger;
    color: @danger;
    &:focus {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px fade(@danger, 60%);
        border-color: @danger;
    }
}



/*

.input.danger > input, .input.danger > textarea {
    border-color: @border-color-danger;
    &:focus {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px @shadow-color-danger;
        border-color: @border-color-danger-focus;
    }
}
*/




//------------------------------------------------
// SIZES
//------------------------------------------------

.input.tiny { font-size: 0.7143rem; }
.input.small { font-size: 0.8571rem; }
.input.medium { font-size: 1rem; }
.input.large { font-size: 1.286rem; }
.input.huge { font-size: 1.571rem; }
.input.giant { font-size: 2rem; }



//--------------------------------------------------
// INPUT GROUP
//--------------------------------------------------



.input.group {
    display: inline-table;
}

.input.group > * {
    display: table-cell;
    vertical-align: middle;
    .rounded;
}

.input.group > *:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.input.group > *:not(:first-child),
.input.group > *:not(:first-child) > .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.input.group > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}



// .input.group > *:not(input) {
//     width: 1%;
// }




[layout="stack"] > .input.group {
    display: table;
    width: 100%;
}

[layout="stack"] > .input.group > input {
    width: 100%;
}

[layout="stack"] > .input.group > *:not(input) {
    width: 1%;
}



.input.group.block > input, .input.group.fluid > input {
    width: 100%;
}

.input.group.block > *:not(input), .input.group.fluid > *:not(input) {
    width: 1%;
}








.input.group > .label {
    padding: 6px 8px;
}

.input.group > * > .button {
    height: 34px;
}