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

SMS Design React UI Library.

.sms-message-wrapper{width:100%;position:fixed;z-index:1003;padding:0 10px;text-align:center;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box}.sms-message-wrapper-top{top:40px}.sms-message-wrapper-bottom{bottom:40px}.sms-message{position:relative;display:inline-block;padding:10px 16px 10px 16px;line-height:1;border-radius:var(--border-radius-small);border:1px solid var(--color-neutral-3);margin-bottom:16px;background-color:var(--color-bg-popup);text-align:center;-webkit-box-shadow:0 4px 10px rgba(0,0,0,.1);box-shadow:0 4px 10px rgba(0,0,0,.1);overflow:hidden;pointer-events:auto;-webkit-transition:opacity .1s cubic-bezier(0,0,1,1);transition:opacity .1s cubic-bezier(0,0,1,1)}.sms-message-closable{padding-right:38px}.sms-message-icon{font-size:20px;color:var(--color-text-1);margin-right:8px;vertical-align:middle;display:inline-block;-webkit-animation:sms-msg-fade .1s cubic-bezier(0,0,1,1),sms-msg-fade .4s cubic-bezier(.3,1.3,.3,1);animation:sms-msg-fade .1s cubic-bezier(0,0,1,1),sms-msg-fade .4s cubic-bezier(.3,1.3,.3,1)}.sms-message-content{vertical-align:middle;color:var(--color-text-1);font-size:14px}.sms-message-info{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.sms-message-info .sms-message-icon{color:rgb(var(--primary-6))}.sms-message-info .sms-message-content{color:var(--color-text-1)}.sms-message-success{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.sms-message-success .sms-message-icon{color:rgb(var(--success-6))}.sms-message-success .sms-message-content{color:var(--color-text-1)}.sms-message-warning{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.sms-message-warning .sms-message-icon{color:rgb(var(--warning-6))}.sms-message-warning .sms-message-content{color:var(--color-text-1)}.sms-message-error{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.sms-message-error .sms-message-icon{color:rgb(var(--danger-6))}.sms-message-error .sms-message-content{color:var(--color-text-1)}.sms-message-loading{background-color:var(--color-bg-popup);border-color:var(--color-neutral-3)}.sms-message-loading .sms-message-icon{color:rgb(var(--primary-6))}.sms-message-loading .sms-message-content{color:var(--color-text-1)}.sms-message-close-btn{position:absolute;top:14px;right:12px;color:var(--color-text-1);font-size:12px}.sms-message-close-btn>svg{position:relative}.sms-message .sms-icon-hover.sms-message-icon-hover::before{width:20px;height:20px}.fadeMessage-appear,.fadeMessage-enter{opacity:0}.fadeMessage-appear-active,.fadeMessage-enter-active{opacity:1;-webkit-transition:opacity .1s cubic-bezier(0,0,1,1);transition:opacity .1s cubic-bezier(0,0,1,1)}.fadeMessage-exit{opacity:0;overflow:hidden}.fadeMessage-exit-active{opacity:0;height:0;-webkit-transition:all .3s cubic-bezier(.34,.69,.1,1);transition:all .3s cubic-bezier(.34,.69,.1,1)}@-webkit-keyframes sms-msg-fade{from{opacity:0}to{opacity:1}}@keyframes sms-msg-fade{from{opacity:0}to{opacity:1}}@-webkit-keyframes sms-msg-scale{from{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sms-msg-scale{from{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}