wot-design/lib/theme-default/picker.css

Mobile UI components built on vue.js

@charset "UTF-8";.wd-picker-view-list li,.wd-picker-view-roller__item,.wd-picker__value.is-ellipsis{text-overflow:ellipsis;white-space:nowrap}.wd-loading{font-size:0;line-height:0;vertical-align:middle}.wd-loading__body{-webkit-animation:wd-rotate .8s linear infinite;animation:wd-rotate .8s linear infinite;-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes wd-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes wd-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.wd-picker-view__columns{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:#fff;overflow:hidden;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.wd-picker-view__mask{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.9)),to(rgba(255,255,255,.25))),-webkit-gradient(linear,left bottom,left top,from(rgba(255,255,255,.9)),to(rgba(255,255,255,.25)));background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.25)),linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,.25));background-position:top,bottom;background-repeat:no-repeat;z-index:2;pointer-events:none;-webkit-filter:blur(4px);filter:blur(4px)}.wd-picker-view__loading{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;top:0;right:0;bottom:0;left:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:3;background:rgba(255,255,255,.8)}.wd-picker-view-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;height:210px;overflow:hidden;text-align:center;list-style:none;font-size:16px;color:rgba(0,0,0,.85)}.wd-picker-view-roller{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:absolute;top:87.5px;width:100%;height:35px;margin:0;padding:0;list-style:none}.wd-picker-view-roller__item{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:16px;top:0;width:100%;padding:0 15px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#fff;height:35px;line-height:35px;overflow:hidden}.wd-picker-view-roller__item.is-hidden{visibility:hidden;opacity:0}.wd-picker-view-roller__item--disabled{color:rgba(0,0,0,.25)}.wd-picker-view-list{margin:0;padding:0;list-style:none}.wd-picker-view-list li{padding:0 15px;overflow:hidden}.wd-picker-view-content{position:absolute;top:87.5px;width:100%;height:35px;overflow:hidden;background-color:#f5f5f5;font-size:16px;pointer-events:none}.wd-picker-view-content li{height:35px;line-height:35px}@font-face{font-family:wd-icons;src:url(fonts/wd-icons.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:wd-icons;src:url(fonts/wd-icons.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" wd-icon-"],[class^=wd-icon-]{font-family:wd-icons!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wd-icon-arrow-thin-up:before{content:"\e898"}.wd-icon-arrow-thin-down:before{content:"\e899"}.wd-icon-keyboard-collapse:before{content:"\e900"}.wd-icon-keyboard-delete:before{content:"\e901"}.wd-icon-setting:before{content:"\e902"}.wd-icon-arrow-right:before{content:"\e903"}.wd-icon-arrow-down:before{content:"\e904"}.wd-icon-arrow-up:before{content:"\e905"}.wd-icon-arrow-left:before{content:"\e906"}.wd-icon-fill-camera:before{content:"\e907"}.wd-icon-star-on:before{content:"\e908"}.wd-icon-check-bold:before{content:"\e909"}.wd-icon-error-fill:before{content:"\e90a"}.wd-icon-warn-bold:before{content:"\e90b"}.wd-icon-close-outline:before{content:"\e90c"}.wd-icon-close-bold:before{content:"\e90d"}.wd-icon-check-outline:before{content:"\e90e"}.wd-icon-wifi-error:before{content:"\e90f"}.wd-icon-subscribe:before{content:"\e910"}.wd-icon-detection:before{content:"\e911"}.wd-icon-read:before{content:"\e912"}.wd-icon-fill-arrow-down:before{content:"\e913"}.wd-icon-dong:before{content:"\e914"}.wd-icon-edit-outline:before{content:"\e915"}.wd-icon-add-circle:before{content:"\e916"}.wd-icon-copy:before{content:"\e917"}.wd-icon-bags:before{content:"\e918"}.wd-icon-decrease:before{content:"\e919"}.wd-icon-jdm:before{content:"\e91a"}.wd-icon-spool:before{content:"\e91b"}.wd-icon-download:before{content:"\e91c"}.wd-icon-phone-compute:before{content:"\e91d"}.wd-icon-computer:before{content:"\e91e"}.wd-icon-clock:before{content:"\e91f"}.wd-icon-view:before{content:"\e920"}.wd-icon-eye-close:before{content:"\e921"}.wd-icon-picture:before{content:"\e922"}.wd-icon-evaluation:before{content:"\e923"}.wd-icon-goods:before{content:"\e924"}.wd-icon-lenovo:before{content:"\e925"}.wd-icon-list:before{content:"\e926"}.wd-icon-note:before{content:"\e927"}.wd-icon-video:before{content:"\e928"}.wd-icon-warning:before{content:"\e929"}.wd-icon-camera:before{content:"\e92a"}.wd-icon-transfer:before{content:"\e92b"}.wd-icon-keywords:before{content:"\e92e"}.wd-icon-chat:before{content:"\e931"}.wd-icon-delete-thin:before{content:"\e932"}.wd-icon-add:before{content:"\e933"}.wd-icon-scan:before{content:"\e934"}.wd-icon-translate-bold:before{content:"\e935"}.wd-icon-close:before{content:"\e936"}.wd-icon-search:before{content:"\e937"}.wd-icon-delete:before{content:"\e939"}.wd-icon-more:before{content:"\e93a"}.wd-icon-thin-arrow-left:before{content:"\e93b"}.wd-icon-filter:before{content:"\e93c"}.wd-icon-phone:before{content:"\e93d"}.wd-icon-refresh:before{content:"\e93e"}.wd-icon-check:before{content:"\e93f"}.wd-icon-rotate:before{content:"\e92c"}.wd-fade-enter,.wd-fade-leave-active{opacity:0}.wd-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.65);-webkit-transition:opacity .3s;transition:opacity .3s}.wd-popup{position:fixed;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out}.wd-popup__close{position:absolute;top:10px;right:10px;color:#666;font-size:24px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-tap-highlight-color:transparent}.wd-popup--center{left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.wd-popup--left{top:0;bottom:0;left:0}.wd-popup--right{top:0;right:0;bottom:0}.wd-popup--top{top:0;left:0;right:0}.wd-popup--bottom{right:0;bottom:0;left:0}.wd-popup.is-safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.wd-popup-slide-top-enter,.wd-popup-slide-top-leave-active{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.wd-popup-slide-right-enter,.wd-popup-slide-right-leave-active{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.wd-popup-slide-bottom-enter,.wd-popup-slide-bottom-leave-active{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.wd-popup-slide-left-enter,.wd-popup-slide-left-leave-active{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.wd-overflow-hidden{overflow:hidden!important}.wd-picker.is-large .wd-picker__field{font-size:16px}.wd-picker.is-large .wd-picker__arrow{font-size:18px}.wd-picker.is-error .wd-picker__arrow,.wd-picker.is-error .wd-picker__value{color:#fa4350}.wd-picker.is-align-right .wd-picker__value{text-align:right}.wd-picker__field{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 15px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:#fff;text-decoration:none;color:rgba(0,0,0,.85);font-size:14px;overflow:hidden;line-height:1.43}.wd-picker.is-cell .wd-picker__field::after{position:absolute;display:block;content:"";width:calc(100% - 15px);height:1px;left:15px;bottom:0;-webkit-transform:scaleY(.5);transform:scaleY(.5);background:#e8e8e8}.wd-picker.is-cell:last-child .wd-picker__field::after{display:none}.wd-picker.is-disabled .wd-picker__value{color:rgba(0,0,0,.15)}.wd-picker__label{position:relative;width:33%;padding:13px 0;margin-right:15px;color:rgba(0,0,0,.85);-webkit-box-sizing:border-box;box-sizing:border-box}.wd-picker__label.is-required{padding-left:12px}.wd-picker__label.is-required::after{position:absolute;left:0;top:15px;content:"*";font-size:20px;line-height:1.1;color:#fa4350}.wd-picker__value{width:0;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:13px 0;margin-right:10px;color:rgba(0,0,0,.85)}.wd-picker__arrow,.wd-picker__placeholder{color:rgba(0,0,0,.25)}.wd-picker__value.is-ellipsis{overflow:hidden}.wd-picker__arrow{display:block;margin-top:13px;font-size:16px}.wd-picker__toolbar{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:16px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:54px;line-height:16px;-webkit-box-sizing:border-box;box-sizing:border-box}.wd-picker__action{display:block;border:none;outline:0;font-size:16px;color:#4d80f0;background:0 0;padding:22px 15px 12px;-webkit-tap-highlight-color:transparent}.wd-picker__action--cancel{color:#666}.wd-picker__action.is-loading{color:rgba(0,0,0,.25)}.wd-picker__title{display:block;padding-top:10px;color:rgba(0,0,0,.85);font-weight:500}.wd-picker__region-tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.wd-picker__region{width:50%;display:inline-block;color:rgba(0,0,0,.45);text-align:center;padding:14px 0;font-size:14px;line-height:16px;-webkit-transition:all .15s ease-out;transition:all .15s ease-out;list-style:none}.wd-picker__region li:last-child{font-size:16px;margin-top:2px}.wd-picker__region.is-active{background:linear-gradient(315deg,#4f7cf8 0,#668df8 100%,#668df8 100%);color:#fff}.wd-picker__container{padding:10px 0}.wd-popup.wd-picker__popup{border-radius:16px 16px 0 0}