@bee-design/ui
Version:
Bee Design React UI Library.
1 lines • 3.96 kB
CSS
.bee-notification-wrapper{position:fixed;z-index:1003}.bee-notification-wrapper-topLeft{left:20px;top:20px}.bee-notification-wrapper-topRight{right:20px;top:20px}.bee-notification-wrapper-topRight .bee-notification{margin-left:auto}.bee-notification-wrapper-bottomLeft{bottom:20px;left:20px}.bee-notification-wrapper-bottomRight{bottom:20px;right:20px}.bee-notification-wrapper-bottomRight .bee-notification{margin-left:auto}.bee-notification{display:flex;position:relative;width:340px;padding:20px 20px 20px 20px;border-radius:var(--bee-border-radius-medium);border:1px solid var(--bee-color-neutral-3);margin-bottom:20px;background-color:var(--bee-color-bg-popup);box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden;box-sizing:border-box;opacity:1;transition:opacity .2s cubic-bezier(0,0,1,1)}.bee-notification-icon{font-size:24px;display:inline-flex;align-items:center;color:var(--bee-color-text-1)}.bee-notification-info{background-color:var(--bee-color-bg-popup);border-color:var(--bee-color-neutral-3)}.bee-notification-info .bee-notification-icon{color:rgb(var(--bee-primary-6))}.bee-notification-success{background-color:var(--bee-color-bg-popup);border-color:var(--bee-color-neutral-3)}.bee-notification-success .bee-notification-icon{color:rgb(var(--bee-success-6))}.bee-notification-warning{background-color:var(--bee-color-bg-popup);border-color:var(--bee-color-neutral-3)}.bee-notification-warning .bee-notification-icon{color:rgb(var(--bee-warning-6))}.bee-notification-error{background-color:var(--bee-color-bg-popup);border-color:var(--bee-color-neutral-3)}.bee-notification-error .bee-notification-icon{color:rgb(var(--bee-danger-6))}.bee-notification-left{padding-right:16px}.bee-notification-right{flex:1;word-break:break-word}.bee-notification-title{font-size:12px;font-weight:500;color:var(--bee-color-text-1);margin-bottom:4px}.bee-notification-content{font-size:14px;color:var(--bee-color-text-1)}.bee-notification-info .bee-notification-title{color:var(--bee-color-text-1)}.bee-notification-info .bee-notification-content{color:var(--bee-color-text-1)}.bee-notification-success .bee-notification-title{color:var(--bee-color-text-1)}.bee-notification-success .bee-notification-content{color:var(--bee-color-text-1)}.bee-notification-warning .bee-notification-title{color:var(--bee-color-text-1)}.bee-notification-warning .bee-notification-content{color:var(--bee-color-text-1)}.bee-notification-error .bee-notification-title{color:var(--bee-color-text-1)}.bee-notification-error .bee-notification-content{color:var(--bee-color-text-1)}.bee-notification-btn-wrapper{margin-top:16px;text-align:right}.bee-notification .bee-notification-close-btn{position:absolute;cursor:pointer;top:12px;right:12px;color:var(--bee-color-text-1);font-size:12px}.bee-notification .bee-notification-close-btn>svg{position:relative}.bee-notification .bee-icon-hover.bee-notification-icon-hover::before{width:20px;height:20px}.slideNoticeLeft-appear,.slideNoticeLeft-enter{transform:translateX(-100%)}.slideNoticeLeft-appear-active,.slideNoticeLeft-enter-active{transform:translateX(0);transition:transform .4s cubic-bezier(.3,1.3,.3,1)}.slideNoticeLeft-exit{opacity:0}.slideNoticeLeft-exit-active{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-bottom:0;transition:all .3s cubic-bezier(.34,.69,.1,1)}.slideNoticeRight-appear,.slideNoticeRight-enter{transform:translateX(100%)}.slideNoticeRight-appear-active,.slideNoticeRight-enter-active{transform:translateX(0);transition:transform .4s cubic-bezier(.3,1.3,.3,1)}.slideNoticeRight-exit{opacity:0}.slideNoticeRight-exit-active{opacity:0;height:0;transition:all .3s cubic-bezier(.34,.69,.1,1)}.bee-notification-wrapper-rtl{direction:rtl}.bee-notification-rtl{direction:rtl}.bee-notification-rtl .bee-notification-left{padding-right:0;padding-left:16px}.bee-notification-rtl .bee-notification-btn-wrapper{text-align:left}.bee-notification-rtl .bee-notification-close-btn{right:initial;left:12px}