@lan-ui/lan-ui/lib/toolbar/toolbar.min.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)}}.cube-checkbox{position:relative;padding:0 1rem;text-align:left;font-size:100%;color:#4c4c4c}.cube-checkbox[data-pos=right] .cube-checkbox-ui{margin-right:0;position:absolute;right:0}.cube-checkbox[data-pos=right] .cube-checkbox-label{margin-right:1.42em}.cube-checkbox-wrap{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;width:100%;height:100%;padding:.6875rem 0;line-height:1.5;word-break:break-word;word-wrap:break-word}.cube-checkbox-input{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.cube-checkbox-ui{position:relative;width:1em;height:1em;margin-right:.42em;line-height:1;border-radius:50%}.cube-checkbox-ui.cubeic-square-border{border-radius:.125rem}.cube-checkbox-ui:before,.cube-checkbox-ui i{-webkit-transition:all .2s;transition:all .2s}.cube-checkbox-ui:before{color:#ccc;display:inline-block;-webkit-transform:scale(1.24);transform:scale(1.24)}.cube-checkbox-ui i{position:absolute;top:0;left:0;color:transparent;-webkit-transform:scale(.4);transform:scale(.4)}.cube-checkbox_checked .cube-checkbox-ui:before{color:transparent}.cube-checkbox_checked .cube-checkbox-ui i{color:#1890ff;-webkit-transform:scale(1.23);transform:scale(1.23)}.cube-checkbox_disabled .cube-checkbox-ui{background-color:#fff}.cube-checkbox_disabled .cube-checkbox-ui:before,.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transition:none;transition:none}.cube-checkbox_disabled .cube-checkbox-ui:before{color:transparent}.cube-checkbox_disabled .cube-checkbox-ui i{color:#fff}.cube-checkbox_checked.cube-checkbox_disabled .cube-checkbox-ui{background-color:#fff}.cube-checkbox-hollow i{width:100%;height:100%}.cube-checkbox-hollow i:before{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:currentColor;border-radius:.125rem}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui:before{color:#1890ff}.cube-checkbox-hollow.cube-checkbox_checked .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:#1890ff}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui{background-color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui:before{color:#fff}.cube-checkbox-hollow.cube-checkbox_disabled .cube-checkbox-ui i{-webkit-transform:scale(1);transform:scale(1);color:transparent}.cube-checkbox-hollow.cube-checkbox_disabled.cube-checkbox_checked .cube-checkbox-ui i{color:#fff}.cube-toolbar{position:fixed;left:.625rem;right:.625rem;bottom:.625rem;z-index:2;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.cube-toolbar-group{display:-webkit-box;display:-webkit-flex;display:flex;height:2.75rem;overflow:hidden;box-sizing:border-box;border-radius:.125rem;box-shadow:0 1px .375rem rgba(0,0,0,.24);background-color:#efefef}.cube-toolbar-group-more{margin-bottom:.625rem}.cube-toolbar-group-more .cube-toolbar-item:last-child .cube-toolbar-down{position:absolute;top:2.75rem;right:9%;height:.625rem;color:#efefef;font-size:1.5rem;font-family:cube-icon;font-style:normal;text-shadow:0 1px .1875rem #e8e8e8;-webkit-transform:scale(1.3);transform:scale(1.3)}.cube-toolbar-group-more .cube-toolbar-item:last-child .cube-toolbar-down:before{content:"\E603";position:relative;top:-.625rem}.cube-toolbar-group-more .cube-toolbar-item:last-child .cube-toolbar-down:after{content:"";display:block;position:absolute;left:30%;top:50%;margin-top:-.375rem;width:40%;height:.125rem;background-color:#efefef}.cube-toolbar-group-more .cube-toolbar-item:last-child:active .cube-toolbar-down{color:#e8e8e8}.cube-toolbar-group-more .cube-toolbar-item:last-child:active .cube-toolbar-down:after{background-color:#e8e8e8}.cube-toolbar-item{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-flex-basis:1e-0.5625rem;flex-basis:1e-0.5625rem;width:1%;-webkit-box-align:center;-webkit-align-items:center;align-items:center;background-color:#efefef}.cube-toolbar-item:last-child{position:static}.cube-toolbar-item:last-child:after{display:none}.cube-toolbar-item:active{background-color:#e8e8e8}.cube-toolbar-item:active:after{border-color:transparent}.cube-toolbar-item .cube-toolbar-chb{height:2.75rem;padding:0;font-size:.75rem;background-color:transparent}.cube-toolbar-item .cube-toolbar-chb .cube-checkbox-wrap{padding:0;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.cube-toolbar-item .cube-toolbar-chb .cube-checkbox-wrap .cube-checkbox-ui{position:relative;left:auto;margin-right:.42em}.cube-toolbar-item .cube-btn{position:relative;padding:0 .3125rem;background-color:transparent;border:0 none;color:#4c4c4c;font-size:.75rem}.cube-toolbar-item .cube-btn:active{background-color:transparent}.cube-toolbar-item .cube-btn:active:after{display:none}.cube-toolbar-item .cube-btn i{margin-right:0}.cube-toolbar-item .cube-btn i.cubeic-more{color:#999;font-size:1rem}