@bee-design/ui
Version:
Bee Design React UI Library.
1 lines • 3.13 kB
CSS
.bee-alert{box-sizing:border-box;border-radius:var(--bee-border-radius-small);padding:8px 15px;font-size:14px;overflow:hidden;display:flex;width:100%;text-align:left;align-items:center;line-height:1.5715}.bee-alert-with-title{padding:15px 15px}.bee-alert-with-title{align-items:flex-start}.bee-alert-info{border:1px solid transparent;background-color:var(--bee-color-primary-light-1)}.bee-alert-success{border:1px solid transparent;background-color:var(--bee-color-success-light-1)}.bee-alert-warning{border:1px solid transparent;background-color:var(--bee-color-warning-light-1)}.bee-alert-error{border:1px solid transparent;background-color:var(--bee-color-danger-light-1)}.bee-alert-banner{border:none;border-radius:0}.bee-alert-content-wrapper{position:relative;flex:1}.bee-alert-title{font-size:12px;font-weight:500;line-height:1.5;margin-bottom:4px}.bee-alert-info .bee-alert-title{color:var(--bee-color-text-1)}.bee-alert-info .bee-alert-content{color:var(--bee-color-text-1)}.bee-alert-info.bee-alert-with-title .bee-alert-content{color:var(--bee-color-text-2)}.bee-alert-success .bee-alert-title{color:var(--bee-color-text-1)}.bee-alert-success .bee-alert-content{color:var(--bee-color-text-1)}.bee-alert-success.bee-alert-with-title .bee-alert-content{color:var(--bee-color-text-2)}.bee-alert-warning .bee-alert-title{color:var(--bee-color-text-1)}.bee-alert-warning .bee-alert-content{color:var(--bee-color-text-1)}.bee-alert-warning.bee-alert-with-title .bee-alert-content{color:var(--bee-color-text-2)}.bee-alert-error .bee-alert-title{color:var(--bee-color-text-1)}.bee-alert-error .bee-alert-content{color:var(--bee-color-text-1)}.bee-alert-error.bee-alert-with-title .bee-alert-content{color:var(--bee-color-text-2)}.bee-alert-icon-wrapper{margin-right:8px;height:22.001px;display:flex;align-items:center}.bee-alert-icon-wrapper svg{font-size:16px}.bee-alert-with-title .bee-alert-icon-wrapper{height:18px}.bee-alert-with-title .bee-alert-icon-wrapper svg{font-size:18px}.bee-alert-info .bee-alert-icon-wrapper svg{color:rgb(var(--bee-primary-6))}.bee-alert-success .bee-alert-icon-wrapper svg{color:rgb(var(--bee-success-6))}.bee-alert-warning .bee-alert-icon-wrapper svg{color:rgb(var(--bee-warning-6))}.bee-alert-error .bee-alert-icon-wrapper svg{color:rgb(var(--bee-danger-6))}.bee-alert-close-btn{box-sizing:border-box;padding:0;border:none;outline:0;font-size:12px;color:var(--bee-color-text-2);background-color:transparent;cursor:pointer;transition:color .1s cubic-bezier(0,0,1,1);margin-left:8px;top:4px;right:0}.bee-alert-close-btn:hover{color:var(--bee-color-text-1)}.bee-alert-action+.bee-alert-close-btn{margin-left:8px}.bee-alert-action{margin-left:8px}.bee-alert-with-title .bee-alert-close-btn{margin-top:0;margin-right:0}.bee-alert-rtl{direction:rtl;text-align:right}.bee-alert-rtl .bee-alert-with-title{align-items:flex-end}.bee-alert-rtl .bee-alert-icon-wrapper{margin-right:0;margin-left:8px}.bee-alert-rtl .bee-alert-close-btn{right:initial;left:0}.bee-alert-rtl .bee-alert-action{margin-left:0;margin-right:8px}.bee-alert-rtl .bee-alert-action+.bee-alert-close-btn{margin-left:0;margin-right:8px}