/**
 * name: 
 * desc:
 * date: 2018/12/29
 * author: kelvin
 */
 @import '../../style/variable.scss';

 .x-image-view {
     cursor: pointer;
     width: .75rem;
     height: .75rem;
     &.lg {
         width: .95rem;
         height: .95rem;
     }
     &.md {
         width: .75rem;
         height: .75rem;
     }
     &.sm {
         width: .6rem;
         height: .6rem;
     }
 }
 
 .x-imgview-box {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 99999;
     background: rgba(0, 0, 0, 0.5);
     .imgview-box {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         transition: all .8s;
     }
     .img-canvas {
         transition: all .8s;
     }
     .x-imgview-loading {
         font-size: .16rem;
         color: #ffffff;
         text-align: center;
         position: absolute;
     }
     .x-imgview-close {
         background: $theme-disable-font;
         position: absolute;
         top: -0.18rem;
         right: -0.18rem;
         border-radius: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         width: .36rem;
         height: .36rem;
         & > i {
             font-size: .25rem;
             margin: 0;
             color: #ffffff;
             cursor: pointer;
         }
     }
 }

 .x-imgview-box-i18n {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
    .imgview-box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .8s;
    }
    .img-canvas {
        transition: all .8s;
    }
    .x-imgview-loading {
        font-size: .16rem;
        color: #ffffff;
        text-align: center;
        position: absolute;
    }
    .x-imgview-close {
        background: $theme-disable-font;
        position: absolute;
        top: -0.18rem;
        left: -0.18rem;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: .36rem;
        height: .36rem;
        & > i {
            font-size: .25rem;
            margin: 0;
            color: #ffffff;
            cursor: pointer;
        }
    }
}