@lan-ui/lan-ui/lib/button/style.css

A fantastic mobile ui lib implement by Vue

.cube-btn{display:block;margin:0;padding:1.0625rem 1rem;width:100%;text-align:center;white-space:nowrap;cursor:pointer;font-size:1rem;line-height:1;color:#fff;background:#4a4c5b;outline:none;border:none;border-radius:.125rem;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.cube-btn.cube-btn_active,.cube-btn:active{background:#1890ff}.cube-btn>i{display:inline-block;margin-right:.25rem;font-size:100%;-webkit-transform:scale(1.13);transform:scale(1.13);-webkit-transform-origin:right center;transform-origin:right center}.cube-btn-inline{width:auto;display:inline-block;vertical-align:middle;padding:.5625rem .625rem;font-size:.75rem}.cube-btn-inline>i{margin-right:.125rem;-webkit-transform:scale(1.14);transform:scale(1.14)}.cube-btn-primary{color:#fff;background:#1890ff}.cube-btn-primary.cube-btn_active,.cube-btn-primary:active{background:#3672ca}.cube-btn-light{color:#4c4c4c;background:#efefef;box-shadow:0 1px .1875rem rgba(0,0,0,.1)}.cube-btn-light.cube-btn_active,.cube-btn-light:active{background:#e8e8e8}.cube-btn-outline{color:#4c4c4c;background:transparent;position:relative}.cube-btn-outline:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #4c4c4c;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn-outline:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn-outline:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-btn-outline.cube-btn_active,.cube-btn-outline:active{background:rgba(0,0,0,.08);position:relative}.cube-btn-outline.cube-btn_active:after,.cube-btn-outline:active:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #4c4c4c;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn-outline.cube-btn_active:after,.cube-btn-outline:active:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn-outline.cube-btn_active:after,.cube-btn-outline:active:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-btn-outline-primary{color:#1890ff;background:transparent;position:relative}.cube-btn-outline-primary:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #1890ff;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn-outline-primary:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn-outline-primary:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-btn-outline-primary.cube-btn_active,.cube-btn-outline-primary:active{background:rgba(24,144,255,.08);position:relative}.cube-btn-outline-primary.cube-btn_active:after,.cube-btn-outline-primary:active:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #3672ca;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn-outline-primary.cube-btn_active:after,.cube-btn-outline-primary:active:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn-outline-primary.cube-btn_active:after,.cube-btn-outline-primary:active:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-btn_disabled{color:#fff;background:#ccc;position:relative}.cube-btn_disabled:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #ccc;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn_disabled:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn_disabled:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-btn_disabled.cube-btn_active,.cube-btn_disabled:active{background:#ccc;position:relative}.cube-btn_disabled.cube-btn_active:after,.cube-btn_disabled:active:after{content:"";pointer-events:none;display:block;position:absolute;left:0;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;border:1px solid #ccc;border-radius:2px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-btn_disabled.cube-btn_active:after,.cube-btn_disabled:active:after{width:200%;height:200%;border-radius:4px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-btn_disabled.cube-btn_active:after,.cube-btn_disabled:active:after{width:300%;height:300%;border-radius:6px;-webkit-transform:scale(.333);transform:scale(.333)}}