@arco-design/web-react
Version:
Arco Design React UI Library.
1 lines • 3.11 kB
CSS
.arco-alert{box-sizing:border-box;border-radius:var(--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}.arco-alert-with-title{padding:15px 15px}.arco-alert-with-title{align-items:flex-start}.arco-alert-info{border:1px solid transparent;background-color:var(--color-primary-light-1)}.arco-alert-success{border:1px solid transparent;background-color:var(--color-success-light-1)}.arco-alert-warning{border:1px solid transparent;background-color:var(--color-warning-light-1)}.arco-alert-error{border:1px solid transparent;background-color:var(--color-danger-light-1)}.arco-alert-banner{border:none;border-radius:0}.arco-alert-content-wrapper{position:relative;flex:1}.arco-alert-title{font-size:16px;font-weight:500;line-height:1.5;margin-bottom:4px}.arco-alert-info .arco-alert-title{color:var(--color-text-1)}.arco-alert-info .arco-alert-content{color:var(--color-text-1)}.arco-alert-info.arco-alert-with-title .arco-alert-content{color:var(--color-text-2)}.arco-alert-success .arco-alert-title{color:var(--color-text-1)}.arco-alert-success .arco-alert-content{color:var(--color-text-1)}.arco-alert-success.arco-alert-with-title .arco-alert-content{color:var(--color-text-2)}.arco-alert-warning .arco-alert-title{color:var(--color-text-1)}.arco-alert-warning .arco-alert-content{color:var(--color-text-1)}.arco-alert-warning.arco-alert-with-title .arco-alert-content{color:var(--color-text-2)}.arco-alert-error .arco-alert-title{color:var(--color-text-1)}.arco-alert-error .arco-alert-content{color:var(--color-text-1)}.arco-alert-error.arco-alert-with-title .arco-alert-content{color:var(--color-text-2)}.arco-alert-icon-wrapper{margin-right:8px;height:22.001px;display:flex;align-items:center}.arco-alert-icon-wrapper svg{font-size:16px}.arco-alert-with-title .arco-alert-icon-wrapper{height:24px}.arco-alert-with-title .arco-alert-icon-wrapper svg{font-size:18px}.arco-alert-info .arco-alert-icon-wrapper svg{color:rgb(var(--primary-6))}.arco-alert-success .arco-alert-icon-wrapper svg{color:rgb(var(--success-6))}.arco-alert-warning .arco-alert-icon-wrapper svg{color:rgb(var(--warning-6))}.arco-alert-error .arco-alert-icon-wrapper svg{color:rgb(var(--danger-6))}.arco-alert-close-btn{box-sizing:border-box;padding:0;border:none;outline:0;font-size:12px;color:var(--color-text-2);background-color:transparent;cursor:pointer;transition:color .1s cubic-bezier(0,0,1,1);margin-left:8px;top:4px;right:0}.arco-alert-close-btn:hover{color:var(--color-text-1)}.arco-alert-action+.arco-alert-close-btn{margin-left:8px}.arco-alert-action{margin-left:8px}.arco-alert-with-title .arco-alert-close-btn{margin-top:0;margin-right:0}.arco-alert-rtl{direction:rtl;text-align:right}.arco-alert-rtl .arco-alert-with-title{align-items:flex-end}.arco-alert-rtl .arco-alert-icon-wrapper{margin-right:0;margin-left:8px}.arco-alert-rtl .arco-alert-close-btn{right:initial;left:0}.arco-alert-rtl .arco-alert-action{margin-left:0;margin-right:8px}.arco-alert-rtl .arco-alert-action+.arco-alert-close-btn{margin-left:0;margin-right:8px}