song-ui-u/theme/popover.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-popover{position:relative;display:inline-block}.x-popover__content{position:absolute;background:#fff;color:#333;padding:12px;border-radius:4px;font-size:14px;z-index:1000;min-width:150px;box-shadow:0 2px 12px rgba(0,0,0,.1);border:1px solid #ebeef5}.x-popover__content::after,.x-popover__content::before{content:"";position:absolute;width:0;height:0}.x-popover__content::before{border:6px solid transparent;z-index:1}.x-popover__content::after{border:5px solid transparent;z-index:2}.x-popover__title{padding-bottom:8px;margin-bottom:8px;font-size:16px;font-weight:500;border-bottom:1px solid #ebeef5}.x-popover--content_top{bottom:calc(100% + 10px);left:50%;transform:translateX(-50%)}.x-popover--content_top::before{bottom:-12px;left:50%;transform:translateX(-50%);border-top-color:#ebeef5}.x-popover--content_top::after{bottom:-10px;left:50%;transform:translateX(-50%);border-top-color:#fff}.x-popover--content_bottom{top:calc(100% + 10px);left:50%;transform:translateX(-50%)}.x-popover--content_bottom::before{top:-12px;left:50%;transform:translateX(-50%);border-bottom-color:#ebeef5}.x-popover--content_bottom::after{top:-10px;left:50%;transform:translateX(-50%);border-bottom-color:#fff}.x-popover--content_left{right:calc(100% + 10px);top:50%;transform:translateY(-50%)}.x-popover--content_left::before{right:-12px;top:50%;transform:translateY(-50%);border-left-color:#ebeef5}.x-popover--content_left::after{right:-10px;top:50%;transform:translateY(-50%);border-left-color:#fff}.x-popover--content_right{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}.x-popover--content_right::before{left:-12px;top:50%;transform:translateY(-50%);border-right-color:#ebeef5}.x-popover--content_right::after{left:-10px;top:50%;transform:translateY(-50%);border-right-color:#fff}.x-popover-enter-active,.x-popover-leave-active{transition:opacity .2s,transform .2s}.x-popover-enter-from,.x-popover-leave-to{opacity:0;transform:scale(.8)}