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

An Amazing Vue3 UI Components Library, Using TypeScript.

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