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