yzhannotify/docs/yzhannotify.css

Only 0.78kB 用原生 JavaScript 在视窗或元素指定位置发通知和提示。Element and Global Notifications / Toasts with Pure / Vanilla / Native JavaScript.

.yznotify-fade-in{animation:fadeIn .1s forwards}.yznotify-fade-out{animation:fadeOut .1s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.yznotify-content{padding:4px 9px;border:1px solid #ddd;border-radius:2px;box-sizing:border-box;white-space:nowrap;color:#333;background-color:#fff}.yznotify-arrow:before{position:absolute;display:block;content:" ";width:0;height:0;border:9px solid transparent}.yznotify-arrow-top{padding-bottom:18px}.yznotify-arrow-top:before{bottom:0;border-top-color:#ddd}.yznotify-arrow-right{padding-left:18px}.yznotify-arrow-right:before{left:0;border-right-color:#ddd}.yznotify-arrow-bottom{padding-top:18px}.yznotify-arrow-bottom:before{top:0;border-bottom-color:#ddd}.yznotify-arrow-left{padding-right:18px}.yznotify-arrow-left:before{right:0;border-left-color:#ddd}.yznotify-arrow-top.yznotify-arrow-pos-center:before,.yznotify-arrow-bottom.yznotify-arrow-pos-center:before,.yznotify-global-top.yznotify-global-center,.yznotify-global-bottom.yznotify-global-center{left:50%;transform:translate(-50%)}.yznotify-arrow-top.yznotify-arrow-pos-right:before,.yznotify-arrow-bottom.yznotify-arrow-pos-right:before{right:0}.yznotify-arrow-left.yznotify-arrow-pos-center:before,.yznotify-arrow-right.yznotify-arrow-pos-center:before,.yznotify-global-left.yznotify-global-center,.yznotify-global-right.yznotify-global-center{top:50%;transform:translateY(-50%)}.yznotify-arrow-left.yznotify-arrow-pos-bottom:before,.yznotify-arrow-right.yznotify-arrow-pos-bottom:before{bottom:0}.yznotify-global{position:fixed}.yznotify-global .yznotify{margin:5px}.yznotify-global-top{top:0}.yznotify-global-right{right:0}.yznotify-global-bottom{bottom:0}.yznotify-global-left{left:0}.yznotify-ele{position:absolute}.yznotify-ele-0-top{transform:translateY(-100%);margin-top:9px}.yznotify-ele-0-top.yznotify-ele-1-center{transform:translateY(-100%) translate(-50%)}.yznotify-ele-0-bottom{margin-top:-9px}.yznotify-ele-0-bottom.yznotify-ele-1-center{transform:translate(-50%)}.yznotify-ele-0-top.yznotify-ele-1-right{transform:translateY(-100%) translate(-100%)}.yznotify-ele-0-bottom.yznotify-ele-1-right{transform:translate(-100%)}.yznotify-ele-0-left{transform:translate(-100%);margin-left:9px}.yznotify-ele-0-left.yznotify-ele-1-center{transform:translate(-100%) translateY(-50%)}.yznotify-ele-0-right{margin-left:-9px}.yznotify-ele-0-right.yznotify-ele-1-center{transform:translateY(-50%)}.yznotify-ele-0-left.yznotify-ele-1-bottom{transform:translate(-100%) translateY(-100%)}.yznotify-ele-0-right.yznotify-ele-1-bottom{transform:translateY(-100%)}