mand-mobile/lib/button/style/index.css

A Vue.js 2.0 Mobile UI Toolkit

.md-button{display:block;height:100px;line-height:100px;font-size:36px;font-weight:500;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;text-align:center;border:none;border-radius:16px;box-sizing:border-box;outline:none;-webkit-transition:all .3s;transition:all .3s;-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overflow:visible}.md-button-inner{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;word-break:break-all;word-wrap:break-word;white-space:nowrap}.md-button-loading .md-activity-indicator-svg{width:35px!important;height:35px!important;margin-right:10px}.md-button-content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 6px}.md-button-content .md-icon{padding:0}.md-button{position:relative}.md-button .md-icon{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding:0 6px}.md-button.default{background:#fff;color:#41485d}.md-button.default:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #c5cad5;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.default.active:active{background:#f9fafb}.md-button.default .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#41485d!important}.md-button.primary{background:#198cff;color:#fff}.md-button.primary:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #198cff;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.primary.active:active{background:#167de5}.md-button.primary .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#fff!important}.md-button.warning{background:#ff4040;color:#fff}.md-button.warning:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #ff4040;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.warning.active:active{background:#e9424f}.md-button.warning .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#fff!important}.md-button.disabled{background:#e2e4ea;color:#fff}.md-button.disabled:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #e2e4ea;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.disabled .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#fff!important}.md-button.plain{background:transparent}.md-button.plain.default{color:#41485d}.md-button.plain.default:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #c5cad5;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.plain.default.active:active{background:#f9fafb}.md-button.plain.default .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#41485d!important}.md-button.plain.primary{color:#198cff}.md-button.plain.primary:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #198cff;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.plain.primary.active:active{background:#ebf5ff}.md-button.plain.primary .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#198cff!important}.md-button.plain.warning{color:#ff4040}.md-button.plain.warning:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #ff4040;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.plain.warning.active:active{background:#fac3c6}.md-button.plain.warning .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#ff4040!important}.md-button.plain.disabled{color:#d9e0e7}.md-button.plain.disabled:after{content:"";position:absolute;top:0;left:0;right:auto;bottom:auto;width:200%;height:200%;border:3px solid #c5cad5;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5);z-index:2;border-radius:32px}.md-button.plain.disabled .md-button-loading .md-activity-indicator-svg .circle circle{stroke:#d9e0e7!important}.md-button.round{border-radius:100px}.md-button.round:after{border-radius:100px!important}.md-button.inline{display:inline-block;padding:0 20px}.md-button.block{width:100%}.md-button.small{height:64px;line-height:64px;font-size:28px}.md-button.small.round,.md-button.small.round:after{border-radius:64px}.md-button.link{display:inline;width:auto;height:auto;line-height:normal;font-size:28px;font-weight:400;color:#198cff;background:transparent}.md-button.link.inactive{color:#d9e0e7;opacity:1}.md-button.inactive{opacity:.3}.md-button.inactive.disabled{opacity:1}