@sms-frontend/components/lib/Badge/style/index.css

SMS Design React UI Library.

.sms-badge{display:inline-block;position:relative;line-height:1}.sms-badge-custom-dot,.sms-badge-dot,.sms-badge-number,.sms-badge-text{position:absolute;z-index:2;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100% 0;transform-origin:100% 0;top:2px;right:2px;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.sms-badge-custom-dot{background-color:var(--color-bg-2)}.sms-badge-number,.sms-badge-text{height:20px;min-width:20px;line-height:20px;font-weight:500;padding:0 6px;font-size:12px;color:var(--color-white);background-color:rgb(var(--danger-6));-webkit-box-shadow:0 0 0 2px var(--color-bg-2);box-shadow:0 0 0 2px var(--color-bg-2)}.sms-badge-dot{width:6px;height:6px;background-color:rgb(var(--danger-6));border-radius:var(--border-radius-circle);-webkit-box-shadow:0 0 0 2px var(--color-bg-2);box-shadow:0 0 0 2px var(--color-bg-2)}.sms-badge-no-children .sms-badge-dot,.sms-badge-no-children .sms-badge-number,.sms-badge-no-children .sms-badge-text{position:relative;display:inline-block;top:unset;right:unset;-webkit-transform:none;transform:none}.sms-badge-status-wrapper{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sms-badge-status-dot{display:inline-block;width:6px;height:6px;border-radius:var(--border-radius-circle)}.sms-badge-status-default{background-color:var(--color-fill-4)}.sms-badge-status-processing{background-color:rgb(var(--primary-6))}.sms-badge-status-success{background-color:rgb(var(--success-6))}.sms-badge-status-warning{background-color:rgb(var(--warning-6))}.sms-badge-status-error{background-color:rgb(var(--danger-6))}.sms-badge-color-red{background-color:rgb(var(--danger-6))}.sms-badge-color-orangered{background-color:#f77234}.sms-badge-color-orange{background-color:rgb(var(--orange-6))}.sms-badge-color-gold{background-color:rgb(var(--gold-6))}.sms-badge-color-lime{background-color:rgb(var(--lime-6))}.sms-badge-color-green{background-color:rgb(var(--success-6))}.sms-badge-color-cyan{background-color:rgb(var(--cyan-6))}.sms-badge-color-arcoblue{background-color:rgb(var(--primary-6))}.sms-badge-color-purple{background-color:rgb(var(--purple-6))}.sms-badge-color-pinkpurple{background-color:rgb(var(--pinkpurple-6))}.sms-badge-color-magenta{background-color:rgb(var(--magenta-6))}.sms-badge-color-gray{background-color:rgb(var(--gray-4))}.sms-badge .sms-badge-status-text{color:var(--color-text-1);margin-left:8px;font-size:12px;line-height:1.5715}.sms-badge-number-text{display:inline-block;-webkit-animation:sms-badge-scale .5s cubic-bezier(.3,1.3,.3,1);animation:sms-badge-scale .5s cubic-bezier(.3,1.3,.3,1)}@-webkit-keyframes sms-badge-scale{from{-webkit-transform:scale(0,0);transform:scale(0,0)}to{-webkit-transform:scale(1,1);transform:scale(1,1)}}@keyframes sms-badge-scale{from{-webkit-transform:scale(0,0);transform:scale(0,0)}to{-webkit-transform:scale(1,1);transform:scale(1,1)}}.badge-zoom-appear,.badge-zoom-enter{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translate(50%,-50%) scale(.2,.2);transform:translate(50%,-50%) scale(.2,.2)}.badge-zoom-appear-active,.badge-zoom-enter-active{opacity:1;-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translate(50%,-50%) scale(1,1);transform:translate(50%,-50%) scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1)}.badge-zoom-exit{opacity:1;-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translate(50%,-50%) scale(1,1);transform:translate(50%,-50%) scale(1,1)}.badge-zoom-exit-active{opacity:0;-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translate(50%,-50%) scale(.2,.2);transform:translate(50%,-50%) scale(.2,.2);-webkit-transition:opacity .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1);transition:opacity .3s cubic-bezier(.3,1.3,.3,1),transform .3s cubic-bezier(.3,1.3,.3,1),-webkit-transform .3s cubic-bezier(.3,1.3,.3,1)}