react-zeanium-ui-ui/less/button/default.less

Zeanium UI Framework for React.js

@import "../rt.variables.less";
@height: 3rem;


.rt-status(@color: @rt-color-default){
    border: 1px solid @color;
    color: @color;
    &:hover{
        background-color: @color;
        color: #FFF;
    }
}

@-webkit-keyframes loading {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg);background:#2ecc71;}
    100% {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}


@-moz-keyframes loading {
    0% {-moz-transform: rotate(0deg);}
    50% {-moz-transform: rotate(180deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-moz-keyframes loading_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

@-ms-keyframes loading {
    0% {-ms-transform: rotate(0deg);}
    50% {-ms-transform: rotate(180deg);}
    100% {-ms-transform: rotate(360deg);}
}
@-ms-keyframes loading_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

@keyframes loading {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}
@keyframes loading_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

.rt-button.c-default{
    height: @height;
    line-height: @height;

    /*.rt-status(@rt-color-default);*/

    &.default{
        .rt-status(@rt-color-default);
    }

    &.primary{
        .rt-status(@rt-color-primary);
    }

    &.success{
        .rt-status(@rt-color-success);
    }

    &.info{
        .rt-status(@rt-color-info);
    }

    &.warning{
        .rt-status(@rt-color-warning);
    }

    &.danger{
        .rt-status(@rt-color-danger);
    }


    &.loading {
        &>*:first-child{
            -webkit-animation: loading 1.5s infinite linear;
            -moz-animation: loading 1.5s infinite linear;
            -ms-animation: loading 1.5s infinite linear;
            animation: loading 1.5s infinite linear;
        }
        color: @rt-disabled-color !important;
        border: 1px solid @rt-disabled-color !important;
        background-color: transparent !important;
    }

    &>.loading{
        position:relative;
        width:16px;
        height:16px;
        background:#3498db;
        border-radius:50px;
        &:after{
            position:absolute;
            width:32px;
            height:32px;
            border-top:2px solid #9b59b6;
            border-bottom:2px solid #9b59b6;
            border-left:2px solid transparent;
            border-right:2px solid transparent;
            border-radius:50px;
            content:'';
            top:-16px;
            left:-16px;
        }
    }
}