wot-design
Version:
Mobile UI components built on vue.js
1 lines • 20 kB
CSS
@charset "UTF-8";.wd-button,.wd-button__txt{-webkit-user-select:none;-ms-user-select:none}@font-face{font-family:wd-icons;src:url(fonts/wd-icons.ttf) format("truetype");font-weight:400;font-style:normal}.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)}}@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;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-button{position:relative;text-align:center;-webkit-appearance:none;outline:0;background:0 0;border:none;color:#000;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .2s;transition:all .2s;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.wd-button:active{color:#000;background:#f5f5f5}.wd-button.is-disabled,.wd-button.is-disabled:active{color:rgba(0,0,0,.25);background:#fff}.wd-button:active::after{border-color:rgba(0,0,0,.45)}.wd-button.is-disabled::after,.wd-button.is-disabled:active::after{border-color:#f5f5f5}.wd-button__loading{display:inline-block;margin-right:2px;vertical-align:middle;-webkit-animation:wd-rotate .8s linear infinite;animation:wd-rotate .8s linear infinite;-webkit-animation-duration:2s;animation-duration:2s}.wd-button.is-loading:active{color:#000;background:0 0}.wd-button.is-loading:active::after{border-color:#595959}.wd-button.is-primary{background:linear-gradient(315deg,#4f7cf8 0,#668df8 100%);color:#fff;font-weight:500}.wd-button.is-primary::after{border-color:linear-gradient(315deg,#4f7cf8 0,#668df8 100%)}.wd-button.is-primary:active{background:linear-gradient(315deg,#416bdf 0,#4e79ee 100%)}.wd-button.is-primary:active::after{border-color:linear-gradient(315deg,#416bdf 0,#4e79ee 100%)}.wd-button.is-primary.is-disabled,.wd-button.is-primary.is-disabled:active{background:linear-gradient(315deg,#8fadff 0,#9fb8fe 100%);color:#fff}.wd-button.is-primary.is-disabled::after{border-color:linear-gradient(315deg,#8fadff 0,#9fb8fe 100%)}.wd-button.is-primary.is-loading,.wd-button.is-primary.is-loading:active{color:#fff;background:linear-gradient(315deg,#4f7cf8 0,#668df8 100%)}.wd-button.is-primary.is-loading::after{border-color:linear-gradient(315deg,#4f7cf8 0,#668df8 100%)}.wd-button.is-primary.is-loading .wd-button__loading{color:#4d80f0}.wd-button.is-primary.is-suck{border-radius:0}.wd-button.is-success{background:#34d19d;color:#fff;font-weight:500}.wd-button.is-success::after{border-color:#34d19d}.wd-button.is-success:active{background:#2bab81}.wd-button.is-success:active::after{border-color:#2bab81}.wd-button.is-success.is-disabled,.wd-button.is-success.is-disabled:active{background:#89e4c6;color:#fff}.wd-button.is-success.is-disabled::after{border-color:#89e4c6}.wd-button.is-success.is-loading,.wd-button.is-success.is-loading:active{color:#fff;background:#34d19d}.wd-button.is-success.is-loading::after{border-color:#34d19d}.wd-button.is-success.is-loading .wd-button__loading{color:#34d19d}.wd-button.is-success.is-suck{border-radius:0}.wd-button.is-info{background:#f0f0f0;color:#000;font-weight:500}.wd-button.is-info::after{border-color:#f0f0f0}.wd-button.is-info:active{background:#e1e1e1}.wd-button.is-info:active::after{border-color:#e1e1e1}.wd-button.is-info.is-disabled::after,.wd-button.is-info.is-loading::after{border-color:#f0f0f0}.wd-button.is-info.is-disabled,.wd-button.is-info.is-disabled:active{background:#f0f0f0;color:rgba(0,0,0,.09)}.wd-button.is-info.is-loading,.wd-button.is-info.is-loading:active{color:#000;background:#f0f0f0}.wd-button.is-info.is-loading .wd-button__loading{color:#000}.wd-button.is-info.is-suck{border-radius:0}.wd-button.is-warning{background:#f0883a;color:#fff;font-weight:500}.wd-button.is-warning::after{border-color:#f0883a}.wd-button.is-warning:active{background:#c57030}.wd-button.is-warning:active::after{border-color:#c57030}.wd-button.is-warning.is-disabled,.wd-button.is-warning.is-disabled:active{background:#f6ba8d;color:#fff}.wd-button.is-warning.is-disabled::after{border-color:#f6ba8d}.wd-button.is-warning.is-loading,.wd-button.is-warning.is-loading:active{color:#fff;background:#f0883a}.wd-button.is-warning.is-loading::after{border-color:#f0883a}.wd-button.is-warning.is-loading .wd-button__loading{color:#f0883a}.wd-button.is-warning.is-suck{border-radius:0}.wd-button.is-error{background:#fa4350;color:#fff;font-weight:500}.wd-button.is-error::after{border-color:#fa4350}.wd-button.is-error:active{background:#cd3742}.wd-button.is-error:active::after{border-color:#cd3742}.wd-button.is-error.is-disabled,.wd-button.is-error.is-disabled:active{background:#fc929a;color:#fff}.wd-button.is-error.is-disabled::after{border-color:#fc929a}.wd-button.is-error.is-loading,.wd-button.is-error.is-loading:active{color:#fff;background:#fa4350}.wd-button.is-error.is-loading::after{border-color:#fa4350}.wd-button.is-error.is-loading .wd-button__loading{color:#fa4350}.wd-button.is-error.is-suck{border-radius:0}.wd-button.is-small{height:28px;padding:0 11px;border-radius:2px;font-size:12px;font-weight:400}.wd-button.is-small.is-round{border-radius:14px}.wd-button.is-small.is-round::after{border-radius:28px}.wd-button.is-small .wd-button__loading{width:14px;height:14px}.wd-button.is-medium{height:36px;padding:0 15px;border-radius:4px;font-size:14px}.wd-button.is-medium::after{border-radius:8px}.wd-button.is-medium:not(.is-plain).is-primary{-webkit-box-shadow:0 2px 4px 0 rgba(77,128,240,.25);box-shadow:0 2px 4px 0 rgba(77,128,240,.25)}.wd-button.is-medium:not(.is-plain).is-success{-webkit-box-shadow:0 2px 4px 0 rgba(52,209,157,.25);box-shadow:0 2px 4px 0 rgba(52,209,157,.25)}.wd-button.is-medium:not(.is-plain).is-warning{-webkit-box-shadow:0 2px 4px 0 rgba(240,136,58,.25);box-shadow:0 2px 4px 0 rgba(240,136,58,.25)}.wd-button.is-medium:not(.is-plain).is-error{-webkit-box-shadow:0 2px 4px 0 rgba(250,67,80,.25);box-shadow:0 2px 4px 0 rgba(250,67,80,.25)}.wd-button.is-medium.is-round:not(.is-icon){min-width:118px;border-radius:18px}.wd-button.is-medium.is-round:not(.is-icon)::after{border-radius:36px}.wd-button.is-medium.is-round.is-text{min-width:0;border-radius:0}.wd-button.is-medium .wd-button__loading{width:18px;height:18px}.wd-button.is-large{height:44px;padding:0 36px;border-radius:8px;font-size:16px}.wd-button.is-large::after{border-radius:16px}.wd-button.is-large:not(.is-plain).is-primary{-webkit-box-shadow:0 4px 8px 0 rgba(77,128,240,.25);box-shadow:0 4px 8px 0 rgba(77,128,240,.25)}.wd-button.is-large:not(.is-plain).is-success{-webkit-box-shadow:0 4px 8px 0 rgba(52,209,157,.25);box-shadow:0 4px 8px 0 rgba(52,209,157,.25)}.wd-button.is-large:not(.is-plain).is-warning{-webkit-box-shadow:0 4px 8px 0 rgba(240,136,58,.25);box-shadow:0 4px 8px 0 rgba(240,136,58,.25)}.wd-button.is-large:not(.is-plain).is-error{-webkit-box-shadow:0 4px 8px 0 rgba(250,67,80,.25);box-shadow:0 4px 8px 0 rgba(250,67,80,.25)}.wd-button.is-large.is-round:not(.is-icon){border-radius:22px}.wd-button.is-large.is-round:not(.is-icon)::after{border-radius:44px}.wd-button.is-large.is-round.is-text{border-radius:0}.wd-button.is-large .wd-button__loading{width:24px;height:24px}.wd-button.is-text{color:#4d80f0;padding:4px 0}.wd-button.is-text::after{display:none}.wd-button.is-text:active{color:linear-gradient(315deg,#416bdf 0,#4e79ee 100%);background:0 0}.wd-button.is-text.is-disabled{color:rgba(0,0,0,.25);background:0 0}.wd-button.is-plain{background:#fff}.wd-button.is-plain::after{position:absolute;display:block;content:'';width:200%;height:200%;left:0;top:0;border:1px solid #595959;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:left top;transform-origin:left top}.wd-button.is-plain.is-primary{color:#4d80f0;background:0 0}.wd-button.is-plain.is-primary::after{border-color:#4d80f0}.wd-button.is-plain.is-primary:active{color:linear-gradient(315deg,#416bdf 0,#4e79ee 100%);background:0 0}.wd-button.is-plain.is-primary:active::after{border-color:linear-gradient(315deg,#416bdf 0,#4e79ee 100%)}.wd-button.is-plain.is-primary.is-disabled{background:0 0}.wd-button.is-plain.is-primary.is-disabled::after{border-color:linear-gradient(315deg,#8fadff 0,#9fb8fe 100%)}.wd-button.is-plain.is-primary.is-disabled:active{background:0 0}.wd-button.is-plain.is-primary.is-loading,.wd-button.is-plain.is-primary.is-loading:active{color:#4d80f0;background:0 0}.wd-button.is-plain.is-primary.is-disabled,.wd-button.is-plain.is-primary.is-disabled:active,.wd-button.is-plain.is-primary:active{background-color:#eff4fe}.wd-button.is-plain.is-primary.is-loading::after,.wd-button.is-plain.is-primary.is-loading:active::after{border-color:#4d80f0}.wd-button.is-plain.is-primary.is-disabled{opacity:1;color:#9db9f6}.wd-button.is-plain.is-success{color:#34d19d;background:0 0}.wd-button.is-plain.is-success::after{border-color:#34d19d}.wd-button.is-plain.is-success:active{color:#2bab81;background:0 0}.wd-button.is-plain.is-success:active::after{border-color:#2bab81}.wd-button.is-plain.is-success.is-disabled{color:#89e4c6;background:0 0}.wd-button.is-plain.is-success.is-disabled::after{border-color:#89e4c6}.wd-button.is-plain.is-success.is-disabled:active{background:0 0}.wd-button.is-plain.is-success.is-loading,.wd-button.is-plain.is-success.is-loading:active{color:#34d19d;background:0 0}.wd-button.is-plain.is-info,.wd-button.is-plain.is-info:active{color:rgba(0,0,0,.85);background:0 0}.wd-button.is-plain.is-success.is-loading::after,.wd-button.is-plain.is-success.is-loading:active::after{border-color:#34d19d}.wd-button.is-plain.is-info.is-disabled{color:rgba(0,0,0,.09);background:0 0}.wd-button.is-plain.is-info.is-disabled:active{background:0 0}.wd-button.is-plain.is-info.is-loading,.wd-button.is-plain.is-info.is-loading:active{color:rgba(0,0,0,.85);background:0 0}.wd-button.is-plain.is-info.is-disabled,.wd-button.is-plain.is-info.is-disabled:active,.wd-button.is-plain.is-info:active{background-color:#f0f0f0}.wd-button.is-plain.is-info.is-loading::after,.wd-button.is-plain.is-info.is-loading:active::after{border-color:#f0f0f0}.wd-button.is-plain.is-info::after{border-color:#f0f0f0;border-color:rgba(0,0,0,.45)}.wd-button.is-plain.is-info:active::after{border-color:rgba(0,0,0,.45)}.wd-button.is-plain.is-info.is-disabled::after,.wd-button.is-plain.is-info.is-disabled:active::after{border-color:#f0f0f0}.wd-button.is-plain.is-info.is-loading::after,.wd-button.is-plain.is-info.is-loading:active::after{border-color:rgba(0,0,0,.45)}.wd-button.is-plain.is-warning{color:#f0883a;background:0 0}.wd-button.is-plain.is-warning::after{border-color:#f0883a}.wd-button.is-plain.is-warning:active{color:#c57030;background:0 0}.wd-button.is-plain.is-warning:active::after{border-color:#c57030}.wd-button.is-plain.is-warning.is-disabled{color:#f6ba8d;background:0 0}.wd-button.is-plain.is-warning.is-disabled::after{border-color:#f6ba8d}.wd-button.is-plain.is-warning.is-disabled:active{background:0 0}.wd-button.is-plain.is-warning.is-loading,.wd-button.is-plain.is-warning.is-loading:active{color:#f0883a;background:0 0}.wd-button.is-plain.is-warning.is-loading::after,.wd-button.is-plain.is-warning.is-loading:active::after{border-color:#f0883a}.wd-button.is-plain.is-error{color:#fa4350;background:0 0}.wd-button.is-plain.is-error::after{border-color:#fa4350}.wd-button.is-plain.is-error:active{color:#cd3742;background:0 0}.wd-button.is-plain.is-error:active::after{border-color:#cd3742}.wd-button.is-plain.is-error.is-disabled{color:#fc929a;background:0 0}.wd-button.is-plain.is-error.is-disabled::after{border-color:#fc929a}.wd-button.is-plain.is-error.is-disabled:active{background:0 0}.wd-button.is-plain.is-error.is-loading,.wd-button.is-plain.is-error.is-loading:active{color:#fa4350;background:0 0}.wd-button.is-plain.is-error.is-loading::after,.wd-button.is-plain.is-error.is-loading:active::after{border-color:#fa4350}.wd-button.is-plain.is-suck:active{background:#eff4fe}.wd-button.is-plain.is-suck.is-disabled{background:#fff}.wd-button.is-suck{font-size:16px;height:50px;width:100%;border-radius:0}.wd-button.is-suck::after{display:none}.wd-button.is-block{width:100%}.wd-button.is-icon{width:40px;height:40px;padding:0;line-height:40px;text-align:center;border-radius:50%;font-size:0;color:#000}.wd-button.is-icon::after{display:none}.wd-button__icon,.wd-button__txt{display:inline-block;vertical-align:middle}.wd-button.is-icon:active{background:#eee}.wd-button.is-icon.is-disabled{color:#a7a7a7;background:0 0}.wd-button.is-icon.is-disabled:active{background:0 0}.wd-button__icon{margin-right:2px;font-size:18px}.wd-button__txt{-moz-user-select:none;user-select:none}@keyframes wd-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.wd-img-cropper{background:#000;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1}.wd-img-cropper__wrapper{position:relative;background:rgba(0,0,0,.45)}.wd-img-cropper__cut{z-index:3;position:absolute;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;pointer-events:none}.wd-img-cropper__cut .wd-img-cropper__cut--bottom,.wd-img-cropper__cut .wd-img-cropper__cut--left,.wd-img-cropper__cut .wd-img-cropper__cut--right,.wd-img-cropper__cut .wd-img-cropper__cut--top{background-color:rgba(0,0,0,.85);-webkit-transition:background .2s;transition:background .2s}.wd-img-cropper__cut .wd-img-cropper__cut--bottom.is-hightlight,.wd-img-cropper__cut .wd-img-cropper__cut--left.is-hightlight,.wd-img-cropper__cut .wd-img-cropper__cut--right.is-hightlight,.wd-img-cropper__cut .wd-img-cropper__cut--top.is-hightlight{background-color:rgba(0,0,0,0)}.wd-img-cropper__cut .wd-img-cropper__cut--bottom,.wd-img-cropper__cut .wd-img-cropper__cut--right{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.wd-img-cropper__cut--middle{display:-webkit-box;display:-ms-flexbox;display:flex}.wd-img-cropper__cut--body{background-color:transparent;position:relative}.wd-img-cropper__cut--body::before{content:"";border:1px solid #fff;width:calc(200% - 1px);height:calc(200% - 1px);position:absolute;-webkit-transform:scale(.5) translate(-1px,-1px);transform:scale(.5) translate(-1px,-1px);top:-50%;left:-50%}.wd-img-cropper__cut--body .is-left-bottom::before,.wd-img-cropper__cut--body .is-left-top::before,.wd-img-cropper__cut--body .is-right-bottom::before,.wd-img-cropper__cut--body .is-right-top::before{content:"";position:absolute;width:2px;height:20px;background-color:#fff}.wd-img-cropper__cut--body .is-left-bottom::after,.wd-img-cropper__cut--body .is-left-top::after,.wd-img-cropper__cut--body .is-right-bottom::after,.wd-img-cropper__cut--body .is-right-top::after{content:"";position:absolute;width:20px;height:2px;background-color:#fff}.wd-img-cropper__cut--body .is-left-top::after,.wd-img-cropper__cut--body .is-left-top::before{left:-2px;top:-2px}.wd-img-cropper__cut--body .is-left-bottom::after,.wd-img-cropper__cut--body .is-left-bottom::before{left:-2px;bottom:-2px}.wd-img-cropper__cut--body .is-right-top::after,.wd-img-cropper__cut--body .is-right-top::before{right:-2px;top:-2px}.wd-img-cropper__cut--body .is-right-bottom::after,.wd-img-cropper__cut--body .is-right-bottom::before{right:-2px;bottom:-2px}.wd-img-cropper__cut--body .is-gridlines-x,.wd-img-cropper__cut--body .is-gridlines-y{width:100%;height:100%;position:absolute;left:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex}.wd-img-cropper__cut--body .is-gridlines-x{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.wd-img-cropper__cut--body .is-gridlines-x::before{content:"";display:inline-block;width:66.66%;height:200%;border:1px solid #fff;border-top:none;border-bottom:none;-webkit-transform:scale(.5) translate(0,-50%);transform:scale(.5) translate(0,-50%)}.wd-img-cropper__cut--body .is-gridlines-y{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.wd-img-cropper__cut--body .is-gridlines-y::after{content:"";-ms-flex-negative:0;flex-shrink:0;display:inline-block;width:200%;height:66.66%;border:1px solid #fff;border-left:none;border-right:none;-webkit-transform:scale(.5) translate(-50%,0);transform:scale(.5) translate(-50%,0)}.wd-img-cropper__img{z-index:2;top:0;left:0;position:absolute;border:none;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:center;transform-origin:center}.wd-img-cropper__canvas{position:fixed;background:#fff;width:150px;height:150px;z-index:4;top:-200%;pointer-events:none}.wd-img-cropper__footer{position:fixed;z-index:4;bottom:10px;width:100%;height:15vh;text-align:center}.wd-img-cropper__footer--rotate{color:#fff;font-size:24px}.wd-img-cropper__footer--button{position:relative;text-align:left;margin:0 20px;padding-top:4vh}.wd-img-cropper__footer--button .is-cancel{display:inline-block;color:#fff;font-size:16px}.wd-img-cropper__footer--button .is-confirm{position:absolute;right:0;width:56px;border-radius:16px;font-size:16px}