vue-amazing-ui/lib/badge/Badge.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.zoom-enter[data-v-a9f5c8fb]{animation-duration:.3s;animation-timing-function:cubic-bezier(.12,.4,.29,1.46);animation-fill-mode:both;animation-name:zoomBadgeIn-a9f5c8fb}@keyframes zoomBadgeIn-a9f5c8fb{0%{transform:scale(0) translate(50%,-50%);opacity:0}to{transform:scale(1) translate(50%,-50%)}}.zoom-leave[data-v-a9f5c8fb]{animation-duration:.3s;animation-timing-function:cubic-bezier(.12,.4,.29,1.46);animation-fill-mode:both;animation-name:zoomBadgeOut-a9f5c8fb}@keyframes zoomBadgeOut-a9f5c8fb{0%{transform:scale(1) translate(50%,-50%)}to{transform:scale(0) translate(50%,-50%);opacity:0}}.badge-wrap[data-v-a9f5c8fb]{position:relative;display:inline-block;width:fit-content;font-size:14px;color:#000000e0;line-height:1}.badge-wrap .status-dot[data-v-a9f5c8fb]{position:relative;top:-1px;display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%}.badge-wrap .dot-ripple[data-v-a9f5c8fb]:after{box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-width:1px;border-style:solid;border-color:inherit;border-radius:50%;animation-name:dotRipple-a9f5c8fb;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;content:""}@keyframes dotRipple-a9f5c8fb{0%{transform:scale(.8);opacity:.5}to{transform:scale(2.4);opacity:0}}.badge-wrap .status-text[data-v-a9f5c8fb]{margin-left:8px;color:#000000e0;font-size:14px}.badge-wrap .value[data-v-a9f5c8fb]{position:absolute;top:0;z-index:var(--badge-z-index);right:0;transform:translate(50%,-50%);transform-origin:100% 0%}.badge-wrap .badge-value[data-v-a9f5c8fb]{position:absolute;top:0;z-index:var(--badge-z-index);right:0;transform:translate(50%,-50%);transform-origin:100% 0%;overflow:hidden;padding:0 8px;min-width:20px;height:20px;color:#fff;font-weight:400;font-size:12px;line-height:20px;white-space:nowrap;text-align:center;background:#ff4d4f;border-radius:10px;box-shadow:0 0 0 1px #fff;transition:background .2s}.badge-wrap .badge-value .number-value[data-v-a9f5c8fb]{position:relative;display:inline-block;height:20px;transition:all .3s cubic-bezier(.12,.4,.29,1.46);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}.badge-wrap .badge-value .number-value .number[data-v-a9f5c8fb]{display:inline-block;height:20px;margin:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}.badge-wrap .small-num[data-v-a9f5c8fb]{padding:0}.badge-wrap .only-number[data-v-a9f5c8fb]{position:relative;top:auto;display:block;transform-origin:50% 50%;transform:none}.badge-wrap .only-dot[data-v-a9f5c8fb]{width:6px;min-width:6px;height:6px;background:#ff4d4f;border-radius:100%;box-shadow:0 0 0 1px #fff;padding:0;transition:background .3s}.badge-wrap .status-success[data-v-a9f5c8fb]{color:#52c41a;background-color:#52c41a}.badge-wrap .status-error[data-v-a9f5c8fb]{color:#ff4d4f;background-color:#ff4d4f}.badge-wrap .status-default[data-v-a9f5c8fb]{color:#00000040;background-color:#00000040}.badge-wrap .status-processing[data-v-a9f5c8fb]{color:#1677ff;background-color:#1677ff}.badge-wrap .status-warning[data-v-a9f5c8fb]{color:#faad14;background-color:#faad14}.badge-wrap .color-pink[data-v-a9f5c8fb]{color:#eb2f96;background-color:#eb2f96}.badge-wrap .color-red[data-v-a9f5c8fb]{color:#f5222d;background-color:#f5222d}.badge-wrap .color-yellow[data-v-a9f5c8fb]{color:#fadb14;background-color:#fadb14}.badge-wrap .color-orange[data-v-a9f5c8fb]{color:#fa8c16;background-color:#fa8c16}.badge-wrap .color-cyan[data-v-a9f5c8fb]{color:#13c2c2;background-color:#13c2c2}.badge-wrap .color-green[data-v-a9f5c8fb]{color:#52c41a;background-color:#52c41a}.badge-wrap .color-blue[data-v-a9f5c8fb]{color:#1677ff;background-color:#1677ff}.badge-wrap .color-purple[data-v-a9f5c8fb]{color:#722ed1;background-color:#722ed1}.badge-wrap .color-geekblue[data-v-a9f5c8fb]{color:#2f54eb;background-color:#2f54eb}.badge-wrap .color-magenta[data-v-a9f5c8fb]{color:#eb2f96;background-color:#eb2f96}.badge-wrap .color-volcano[data-v-a9f5c8fb]{color:#fa541c;background-color:#fa541c}.badge-wrap .color-gold[data-v-a9f5c8fb]{color:#faad14;background-color:#faad14}.badge-wrap .color-lime[data-v-a9f5c8fb]{color:#a0d911;background-color:#a0d911}.badge-wrap .white[data-v-a9f5c8fb]{color:#fff}.badge-status-color[data-v-a9f5c8fb]{line-height:inherit;vertical-align:baseline}