@import "mixin";
/**
 * 指令：图片上传工具
 * -----------------
 */
.bm-upload-img {
    position: relative;
    width: 100px;
    height: 100px;
    .bm-upload-img-bg {
        position: relative;
        z-index: 10;
        i.fa-image {
            padding: 21px 19px 19px 17px;
            font-size: 50px;
            color: #bbb;
            background: #eee;
        }
        i.fa-plus {
            position: absolute;
            top: 22px;
            right: 18px;
            font-size: 20px;
            color: #bbb;
            text-shadow: #eee -3px 0 0, #eee 0 3px 0;
        }
    }
    .bm-upload-img-input {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        width: 100px;
        height: 100px;
        overflow: hidden;
        input[type="file"] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100px;
            font-size: 81px;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor: pointer;
        }
    }
    .bm-upload-img-uping {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 30;
        width: 90px;
        height: 90px;
        line-height: 100px;
        text-align: center;
        color: #aaa;
        background: #eee;
        i.fa-spinner {
            font-size: 30px;
            @include prefixer(animation, uploadImgRotate 3s infinite linear);
        }
    }
    .bm-upload-img-view {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100px;
        height: 100px;
        outline: none;
        > span {
            display: inline-block;
            width: 90px;
            height: 90px;
            text-align: center;
            line-height: 90px;
            background: #eee;
            > img {
                max-width: 100%;
                max-height: 100%;
                cursor: pointer;
            }
        }
        > i {
            display: none;
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 1;
            width: 30px;
            height: 30px;
            color: #ccc;
            font-size: 22px;
            text-align: center;
            line-height: 26px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            &:hover {
                color: #fff;
                background: #da4f49;
                border-color: #da4f49;
                @include prefixer(box-shadow, rgba(128,79,73,.5) 0 0 4px);
            }
        }
        &:hover > i,
        &:focus > i {
            display: block;
        }
    }
}
.bm-upload-img-super {
    > .layui-layer-title {
        position: absolute;
        z-index: 2;
        width: 100%;
        background: none;
        border: none;
    }
    > .layui-layer-content {
        position: relative;
        background: #eee;
        > img {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            top: 50%;
            left: 50%;
            @include prefixer(transform, translate(-50%, -50%));
        }
        > span {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            max-width: 80%;
            padding: 0 7px;
            overflow: hidden;
            white-space: nowrap;
            line-height: 30px;
            text-overflow: ellipsis;
            background: rgba(#fff, .75);
            opacity: 0;
        }
        &:hover {
            > span {
                display: block;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
    .layui-layer-resize {
        right: 1px;
        bottom: 1px;
        width: 24px;
        height: 24px;
        font: normal normal normal 16px/1 FontAwesome;
        &:before {
            display: block;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            content: "\f07d";
            @include prefixer(transform, rotate(-45deg));
        }
        &:hover,
        &:active {
            background: rgba(255,255,255,.6);
        }
    }
}
.bm-upload-img-del {
    max-width: 220px;
    max-height: 220px;
    background: #eee;
}
@include keyframes2("uploadImgRotate", (0%: ((transform, rotate(0), on), ()), 100%: ((transform , rotate(360deg), on), ())));