vexip-ui/css/bubble.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-bubble-vars{--vxp-bubble-color:var(--vxp-content-color-base);--vxp-bubble-bg-color:var(--vxp-bg-color-base);--vxp-bubble-b-color:var(--vxp-border-color-base);--vxp-bubble-s-color:var(--vxp-shadow-color-base);--vxp-bubble-radius:var(--vxp-radius-base);--vxp-bubble-min-width:60px;--vxp-bubble-min-height:30px;--vxp-bubble-content-v-padding:8px;--vxp-bubble-content-h-padding:14px;--vxp-bubble-arrow-size:7px;--vxp-bubble-arrow-v-offset:16px;--vxp-bubble-arrow-h-offset:28px}.vxp-bubble{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;flex-direction:column;justify-content:center;color:var(--vxp-bubble-color)}.vxp-bubble,.vxp-bubble *,.vxp-bubble ::after,.vxp-bubble ::before{box-sizing:border-box}.vxp-bubble--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-bubble__content{position:relative;min-width:var(--vxp-bubble-min-width);min-height:var(--vxp-bubble-min-height);padding:var(--vxp-bubble-content-v-padding) var(--vxp-bubble-content-h-padding);color:inherit;word-break:break-all;background-color:var(--vxp-bubble-bg-color);border:var(--vxp-border-shape) var(--vxp-bubble-b-color);border-radius:var(--vxp-bubble-radius)}.vxp-bubble--background .vxp-bubble__content{border:0}.vxp-bubble--shadow .vxp-bubble__content{border:0;box-shadow:var(--vxp-shadow-shape) var(--vxp-bubble-s-color)}.vxp-bubble__arrow,.vxp-bubble__arrow::after{position:absolute;width:0;height:0;border:0 solid transparent}.vxp-bubble__arrow::after{content:""}.vxp-bubble--primary{--vxp-bubble-color:var(--vxp-color-white);--vxp-bubble-bg-color:var(--vxp-color-primary-base);--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--primary .vxp-bubble__arrow::after{display:none}.vxp-bubble--info{--vxp-bubble-color:var(--vxp-color-white);--vxp-bubble-bg-color:var(--vxp-color-info-base);--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--info .vxp-bubble__arrow::after{display:none}.vxp-bubble--success{--vxp-bubble-color:var(--vxp-color-white);--vxp-bubble-bg-color:var(--vxp-color-success-base);--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--success .vxp-bubble__arrow::after{display:none}.vxp-bubble--warning{--vxp-bubble-color:var(--vxp-color-white);--vxp-bubble-bg-color:var(--vxp-color-warning-base);--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--warning .vxp-bubble__arrow::after{display:none}.vxp-bubble--error{--vxp-bubble-color:var(--vxp-color-white);--vxp-bubble-bg-color:var(--vxp-color-error-base);--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--error .vxp-bubble__arrow::after{display:none}.vxp-bubble--background{--vxp-bubble-b-color:var(--vxp-bubble-bg-color)}.vxp-bubble--background .vxp-bubble__arrow::after{display:none}.vxp-bubble--top,.vxp-bubble--top-end,.vxp-bubble--top-start{padding:6px 0 calc(3px + var(--vxp-bubble-arrow-size))}.vxp-bubble--top>.vxp-bubble__arrow{left:calc(50% - var(--vxp-bubble-arrow-size));bottom:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-b-color);transform:translateY(100%)}.vxp-bubble--top>.vxp-bubble__arrow::after{bottom:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--top>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--top>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--top-start>.vxp-bubble__arrow{left:calc(var(--vxp-bubble-arrow-h-offset) - var(--vxp-bubble-arrow-size));bottom:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-b-color);transform:translateY(100%)}.vxp-bubble--top-start>.vxp-bubble__arrow::after{bottom:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--top-start>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--top-start>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--top-end>.vxp-bubble__arrow{left:calc(100% - var(--vxp-bubble-arrow-h-offset) - var(--vxp-bubble-arrow-size));bottom:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-b-color);transform:translateY(100%)}.vxp-bubble--top-end>.vxp-bubble__arrow::after{bottom:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-top-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--top-end>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--top-end>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--bottom,.vxp-bubble--bottom-end,.vxp-bubble--bottom-start{padding:calc(3px + var(--vxp-bubble-arrow-size)) 0 6px}.vxp-bubble--bottom>.vxp-bubble__arrow{left:calc(50% - var(--vxp-bubble-arrow-size));top:calc(3px + var(--vxp-bubble-arrow-size));border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-b-color);transform:translateY(-100%)}.vxp-bubble--bottom>.vxp-bubble__arrow::after{top:1px;border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--bottom>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--bottom>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--bottom-start>.vxp-bubble__arrow{left:calc(var(--vxp-bubble-arrow-h-offset) - var(--vxp-bubble-arrow-size));top:calc(3px + var(--vxp-bubble-arrow-size));border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-b-color);transform:translateY(-100%)}.vxp-bubble--bottom-start>.vxp-bubble__arrow::after{top:1px;border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--bottom-start>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--bottom-start>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--bottom-end>.vxp-bubble__arrow{left:calc(100% - var(--vxp-bubble-arrow-h-offset) - var(--vxp-bubble-arrow-size));top:calc(3px + var(--vxp-bubble-arrow-size));border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-b-color);transform:translateY(-100%)}.vxp-bubble--bottom-end>.vxp-bubble__arrow::after{top:1px;border-width:0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-bottom-color:var(--vxp-bubble-bg-color);transform:translateX(-50%)}html.rtl .vxp-bubble--bottom-end>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--bottom-end>.vxp-bubble__arrow::after{transform:translateX(50%)}.vxp-bubble--left,.vxp-bubble--left-end,.vxp-bubble--left-start{padding:0;padding-inline:6px calc(3px + var(--vxp-bubble-arrow-size))}.vxp-bubble--left>.vxp-bubble__arrow{top:calc(50% - var(--vxp-bubble-arrow-size));right:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-b-color);transform:translateX(100%)}html.rtl .vxp-bubble--left>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--left>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;transform:translateX(100%) scaleX(-1)}.vxp-bubble--left>.vxp-bubble__arrow::after{inset-inline-end:1px;border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--left>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--left>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0}.vxp-bubble--left-start>.vxp-bubble__arrow{top:calc(var(--vxp-bubble-arrow-v-offset) - var(--vxp-bubble-arrow-size));right:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-b-color);transform:translateX(100%)}html.rtl .vxp-bubble--left-start>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--left-start>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;transform:translateX(100%) scaleX(-1)}.vxp-bubble--left-start>.vxp-bubble__arrow::after{inset-inline-end:1px;border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--left-start>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--left-start>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0}.vxp-bubble--left-end>.vxp-bubble__arrow{top:calc(100% - var(--vxp-bubble-arrow-v-offset) - var(--vxp-bubble-arrow-size));right:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-b-color);transform:translateX(100%)}html.rtl .vxp-bubble--left-end>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--left-end>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;transform:translateX(100%) scaleX(-1)}.vxp-bubble--left-end>.vxp-bubble__arrow::after{inset-inline-end:1px;border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);border-inline-start-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--left-end>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--left-end>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0}.vxp-bubble--right,.vxp-bubble--right-end,.vxp-bubble--right-start{padding:0;padding-inline:calc(3px + var(--vxp-bubble-arrow-size)) 6px}.vxp-bubble--right>.vxp-bubble__arrow{top:calc(50% - var(--vxp-bubble-arrow-size));left:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-b-color);transform:translateX(-100%)}html.rtl .vxp-bubble--right>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--right>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);transform:translateX(-100%) scaleX(-1)}.vxp-bubble--right>.vxp-bubble__arrow::after{inset-inline-start:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--right>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--right>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size)}.vxp-bubble--right-start>.vxp-bubble__arrow{top:calc(var(--vxp-bubble-arrow-v-offset) - var(--vxp-bubble-arrow-size));left:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-b-color);transform:translateX(-100%)}html.rtl .vxp-bubble--right-start>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--right-start>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);transform:translateX(-100%) scaleX(-1)}.vxp-bubble--right-start>.vxp-bubble__arrow::after{inset-inline-start:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--right-start>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--right-start>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size)}.vxp-bubble--right-end>.vxp-bubble__arrow{top:calc(100% - var(--vxp-bubble-arrow-v-offset) - var(--vxp-bubble-arrow-size));left:calc(3px + var(--vxp-bubble-arrow-size));border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-b-color);transform:translateX(-100%)}html.rtl .vxp-bubble--right-end>.vxp-bubble__arrow,html[dir=rtl] .vxp-bubble--right-end>.vxp-bubble__arrow{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size);transform:translateX(-100%) scaleX(-1)}.vxp-bubble--right-end>.vxp-bubble__arrow::after{inset-inline-start:1px;border-width:var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size) 0;border-inline-end-color:var(--vxp-bubble-bg-color);transform:translateY(-50%)}html.rtl .vxp-bubble--right-end>.vxp-bubble__arrow::after,html[dir=rtl] .vxp-bubble--right-end>.vxp-bubble__arrow::after{border-width:var(--vxp-bubble-arrow-size) 0 var(--vxp-bubble-arrow-size) var(--vxp-bubble-arrow-size)}