wot-design
Version:
Mobile UI components built on vue.js
1 lines • 1.82 kB
CSS
@charset "UTF-8";.wd-swipe{position:relative;overflow:hidden}.wd-swipe__container{white-space:nowrap}.wd-swipe__indicators{position:absolute;display:inline-block;left:50%;bottom:8px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:0}.wd-swipe__indicator{display:inline-block;width:7px;height:3px;border-radius:4px 0;margin-right:3px;-webkit-transition:width .2s ease-in-out;transition:width .2s ease-in-out}.wd-swipe__indicator:last-child{margin-right:0}.wd-swipe__indicator.is-active{width:12px}.wd-swipe.is-vertical .wd-swipe__container{white-space:normal}.wd-swipe.is-vertical .wd-swipe-item{display:block}.wd-swipe.is-vertical .wd-swipe__indicators{left:10px;bottom:auto;top:50%}.wd-swipe.is-vertical .wd-swipe__indicator{display:block;margin-right:0;margin-bottom:3px;-webkit-transition:height .2s ease-in-out;transition:height .2s ease-in-out;width:3px;height:7px;border-radius:0 4px}.wd-swipe.is-vertical .wd-swipe__indicator.is-active{height:12px}.wd-swipe.is-vertical .wd-swipe__indicator:last-child{margin-bottom:0}.wd-swipe-item{display:inline-block}.wd-img-preview{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#252525;z-index:2000;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.wd-img-preview .wd-swipe{width:100%;height:100%}.wd-img-preview .wd-swipe-item{height:100%}.wd-img-preview__wrapper{height:100%;width:100%;position:relative}.wd-img-preview__item{position:relative;width:100%;height:100vh;line-height:100vh;z-index:2000}.wd-img-preview__page{position:absolute;top:56px;font-size:16px;color:#fff;text-align:center;width:100%}.wd-img-preview__picture{width:100%;vertical-align:middle;z-index:2002;-o-object-fit:contain;object-fit:contain}.wd-img-preview__modal{width:100%;height:100%;position:fixed;top:0;left:0;z-index:2001}