cube-ui/lib/checker/style.css

A fantastic mobile ui lib implement by Vue

.cube-checker-item{display:inline-block;vertical-align:top;text-align:center;padding:8px 10px;margin-right:10px;color:#666;background:#fff;border-radius:4px;position:relative}.cube-checker-item: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 #fcfcfc;border-radius:4px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-checker-item:after{width:200%;height:200%;border-radius:8px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-checker-item:after{width:300%;height:300%;border-radius:12px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-checker-item_active{color:#fc9153;background:rgba(252,145,83,.04);position:relative}.cube-checker-item_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 #fc9153;border-radius:4px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-checker-item_active:after{width:200%;height:200%;border-radius:8px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-checker-item_active:after{width:300%;height:300%;border-radius:12px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-checker-item_active.cube-checker-item_disabled{background:#eee;position:relative}.cube-checker-item_active.cube-checker-item_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:4px;box-sizing:border-box;width:100%;height:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.cube-checker-item_active.cube-checker-item_disabled:after{width:200%;height:200%;border-radius:8px;-webkit-transform:scale(.5);transform:scale(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cube-checker-item_active.cube-checker-item_disabled:after{width:300%;height:300%;border-radius:12px;-webkit-transform:scale(.333);transform:scale(.333)}}.cube-checker-item_disabled{color:#ccc}