.toast {
font-size: 13px; width: 300px; position: fixed; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; .toast-item-box { transition: .3s all; opacity: 0; transform: translateY(200%); &.visible { opacity: 1; transform: translateY(0); } &.has-btn .toast-message { padding-right: 14px; } } .toast-item { line-height: 1; display: inline-block; border-radius: 2px; margin: 7px auto; padding: 8px 12px; background-color: #3c4257; color: #fff; white-space: nowrap; } .toast-message { line-height: 1.7; vertical-align: middle; white-space: normal; text-align: left; max-width: 210px; display: inline-block; word-break: break-all; } .toast-btn { padding: 7px 14px 7px 24px; white-space: nowrap; border-right: 0; border-top: 0; border-bottom: 0; border-left: 1px solid #a3acb9; background-color: transparent; color: #7dabf8; }
}