tyh-ui2
Version:
The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.
2 lines (1 loc) • 1.94 kB
CSS
.tyh-notification{width:320px;min-height:75px;background-color:#fff;border-radius:5px;padding:15px 20px;box-sizing:border-box;position:fixed;box-shadow:2px 2px 15px 1px #0003;z-index:4000}.tyh-notification .tyh-notification-body{display:flex}.tyh-notification .tyh-notification-body .tyh-notification-icon{font-size:27px;margin:6px 16px 0 0}.tyh-notification .tyh-notification-body .tyh-notification-icon-{color:#eee}.tyh-notification .tyh-notification-body .tyh-notification-icon-primary{color:#3a6ff4}.tyh-notification .tyh-notification-body .tyh-notification-icon-success{color:#54c600}.tyh-notification .tyh-notification-body .tyh-notification-icon-danger{color:#d10f1b}.tyh-notification .tyh-notification-body .tyh-notification-icon-warning{color:#fbcc30}.tyh-notification .tyh-notification-body .tyh-notification-content{max-width:200px}.tyh-notification .tyh-notification-body .tyh-notification-content .tyh-notification-title{margin:0;color:#333;font-size:16px;display:block}.tyh-notification .tyh-notification-body .tyh-notification-content .tyh-notification-message{margin-top:3px}.tyh-notification .tyh-notification-body .tyh-notification-content .tyh-notification-message p{font-size:15px;color:#606266;margin:0}.tyh-notification .tyh-notification-body .tyh-ui-close{font-size:18px;cursor:pointer;position:absolute;top:18px;right:13px;color:#bbb}.tyh-notification-top-left{top:20px;left:-320px;animation:onLeft .23s linear forwards}.tyh-notification-top-right{top:20px;right:-320px;animation:onRight .23s linear forwards}.tyh-notification-bottom-left{bottom:20px;left:-320px;animation:onLeft .23s linear forwards}.tyh-notification-bottom-right{bottom:20px;right:-320px;animation:onRight .23s linear forwards}@keyframes onRight{to{right:20px}}@keyframes onLeft{to{left:20px}}.tyh-notification-fade-enter-from,.tyh-notification-fade-leave-to{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}