UNPKG

eg-imageview

Version:
152 lines (137 loc) 2.17 kB
.upload-icon { fill: #fff; margin: 0 5px; cursor: pointer; color: #ffffff; } .icon-box { position: absolute; bottom: 20px; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.7); padding: 5px 10px; transition: all 1s ease-in-out 0s; } .icon-side { position: absolute; top: 50%; visibility: hidden; opacity: 0; background: rgba(0, 0, 0, 0.7); padding: 5px 5px; transition: all 1s ease-in-out 0s; } .img-hover { &:hover { .icon-side, .icon-box { visibility: visible; opacity: 1; } } } .over-hidden { overflow: hidden; } .hide { display: none; } .left-15 { left: 15px; } .right-15 { right: 15px; } .tip-num { display: inline-block; margin-left: 15px; font-size: 16px; .red-txt { color: red; } .mar-5 { color: white; margin: 0 5px; } .white-txt { color: white; } } .img-wrap { position: relative; &.img-wrap-hidden { overflow: hidden; } &.img-wrap-show { overflow: visible; } .draggable { cursor: move; } .img-inner { width: 100%; height: 100%; } img { position: relative; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; //transition: all 1.5s ease-in-out 0s; } } .arrow-warp{ position: relative; width: 20px; height: 20px; background: transparent; display: inline-block; cursor:pointer; } .arrow { width: 100%; height: 100%; position: relative; overflow: hidden; display: inline-block; &:after { content: ""; display: block; position: absolute; top: 9px; left: -27px; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 22%; } } .inner { display: block; position: absolute; top: 5px; left: -6px; width: 0px; height: 0px; border: 5px solid; z-index: 999; border-color: transparent #fff transparent transparent; } .arrow-right{ .arrow:after{ left: 7px; } .inner{ left: 17px; border-color: transparent transparent transparent #fff; } } .imageview-dialog{ .eg-content{ padding: 0 ; } .img-hover{ padding: 15px; } }