hy-checkbox/lib/AlertBox/alertBox.less

checkbox & radio ui components for react

@import "../../app/variables.less";
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    80% {
        opacity: 1
    }
    100% {
        opacity: 0;
    }
}

.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

.@{ult-prefix}-alertbox {
    background: #e8f5e9; color: @text-body;
    padding:@base-space @base-space*2;
    z-index: 200;border-radius: @border-radius;
    position: relative; border:1px solid #c8e6c9;
    &.animate {
        animation: fadeOut 3s;
    }
    .@{ult-prefix}-alertbox-icon{ position: absolute; right: @base-space*2; top: @base-space; color:fade(@black,20%);  line-height:13px;
       .iconfont{font-size: 12px;}
       &:hover{ color:fade(@black,50%);}
    }
    .@{ult-prefix}-alertbox-title{color:@text-headline; font-size: 14px; line-height: @base-space*2; margin-bottom:@base-space / 2; }
    .@{ult-prefix}-alertbox-text{ font-size: 12px;color:@text-title;}
    &.@{ult-prefix}-alertbox-warning{ background:#fff8e1; border-color:#ffecb3;}
    &.@{ult-prefix}-alertbox-danger{ background: #ffebee; border-color:#ffcdd2;}
    &.@{ult-prefix}-alertbox-default{ background: #e3f2fd; border-color:#bbdefb;}
}
.@{ult-prefix}-toastrbox{
    position: absolute;
    background: #fffc7c;
    padding: 5px 10px;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    min-width: 160px;
    transform: translate(-50%, -50%);
    z-index: 200;
    .border-radius(3px);
    .box-shadow(0px, 2px, 2px, 0.3);
    ul {
        line-height: 20px;
        font-size: 14px;
    }

    &.animate {
        animation: fadeOut 3s;
    }
    opacity: 0;
}