-
-
Notifications
You must be signed in to change notification settings - Fork 700
/
hint.base.min.css
5 lines (4 loc) · 5.65 KB
/
hint.base.min.css
1
2
3
4
5
/*! Hint.css (base version) - v3.0.0 - 2023-11-29
* https://kushagra.dev/lab/hint/
* Copyright (c) 2023 Kushagra Gour */
[class*=hint--]{position:relative;display:inline-block}[class*=hint--]:after,[class*=hint--]:before{position:absolute;transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;transition:.3s ease;transition-delay:0s}[class*=hint--]:hover:after,[class*=hint--]:hover:before{visibility:visible;opacity:1;transition-delay:.1s}[class*=hint--]:before{content:"";position:absolute;background:#383838;border:6px solid transparent;clip-path:polygon(0 0,100% 0,100% 100%);z-index:1000001}[class*=hint--]:after{background:#383838;color:#fff;padding:8px 10px;font-size:1rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1rem;white-space:nowrap}[class*=hint--][aria-label]:after{content:attr(aria-label)}[class*=hint--][data-hint]:after{content:attr(data-hint)}[aria-label=""]:after,[aria-label=""]:before,[data-hint=""]:after,[data-hint=""]:before{display:none!important}.hint--top{--rotation:135deg}.hint--top:after,.hint--top:before{bottom:100%;left:50%}.hint--top:before{margin-bottom:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--top:after{transform:translateX(-50%)}.hint--top:hover:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--top:hover:after{transform:translateX(-50%) translateY(-8px)}.hint--bottom{--rotation:-45deg}.hint--bottom:after,.hint--bottom:before{top:100%;left:50%}.hint--bottom:before{margin-top:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--bottom:after{transform:translateX(-50%)}.hint--bottom:hover:before{transform:translateY(8px) rotate(var(--rotation))}.hint--bottom:hover:after{transform:translateX(-50%) translateY(8px)}.hint--right{--rotation:-135deg}.hint--right:before{margin-left:-5.5px;margin-bottom:-6px;transform:rotate(var(--rotation))}.hint--right:after{margin-bottom:calc(-1 * (1rem + 16px)/ 2)}.hint--right:after,.hint--right:before{left:100%;bottom:50%}.hint--right:hover:before{transform:translateX(8px) rotate(var(--rotation))}.hint--right:hover:after{transform:translateX(8px)}.hint--left{--rotation:45deg}.hint--left:before{margin-right:-5.5px;margin-bottom:-6px;transform:rotate(var(--rotation))}.hint--left:after{margin-bottom:calc(-1 * (1rem + 16px)/ 2)}.hint--left:after,.hint--left:before{right:100%;bottom:50%}.hint--left:hover:before{transform:translateX(-8px) rotate(var(--rotation))}.hint--left:hover:after{transform:translateX(-8px)}.hint--top-left{--rotation:135deg}.hint--top-left:after,.hint--top-left:before{bottom:100%;left:50%}.hint--top-left:before{margin-bottom:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--top-left:after{transform:translateX(-100%);margin-left:12px}.hint--top-left:hover:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--top-left:hover:after{transform:translateX(-100%) translateY(-8px)}.hint--top-right{--rotation:135deg}.hint--top-right:after,.hint--top-right:before{bottom:100%;left:50%}.hint--top-right:before{margin-bottom:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--top-right:after{transform:translateX(0);margin-left:-12px}.hint--top-right:hover:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--top-right:hover:after{transform:translateY(-8px)}.hint--bottom-left{--rotation:-45deg}.hint--bottom-left:after,.hint--bottom-left:before{top:100%;left:50%}.hint--bottom-left:before{margin-top:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--bottom-left:after{transform:translateX(-100%);margin-left:12px}.hint--bottom-left:hover:before{transform:translateY(8px) rotate(var(--rotation))}.hint--bottom-left:hover:after{transform:translateX(-100%) translateY(8px)}.hint--bottom-right{--rotation:-45deg}.hint--bottom-right:after,.hint--bottom-right:before{top:100%;left:50%}.hint--bottom-right:before{margin-top:-5.5px;transform:rotate(var(--rotation));left:calc(50% - 6px)}.hint--bottom-right:after{transform:translateX(0);margin-left:-12px}.hint--bottom-right:hover:before{transform:translateY(8px) rotate(var(--rotation))}.hint--bottom-right:hover:after{transform:translateY(8px)}.hint--fit:after,.hint--large:after,.hint--medium:after,.hint--small:after{box-sizing:border-box;white-space:normal;line-height:1.4em;word-wrap:break-word}.hint--small:after{width:80px}.hint--medium:after{width:150px}.hint--large:after{width:300px}.hint--fit:after{width:100%}.hint--always:after,.hint--always:before{opacity:1;visibility:visible}.hint--always.hint--top:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--always.hint--top:after{transform:translateX(-50%) translateY(-8px)}.hint--always.hint--top-left:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--always.hint--top-left:after{transform:translateX(-100%) translateY(-8px)}.hint--always.hint--top-right:before{transform:translateY(-8px) rotate(var(--rotation))}.hint--always.hint--top-right:after{transform:translateY(-8px)}.hint--always.hint--bottom:before{transform:translateY(8px) rotate(var(--rotation))}.hint--always.hint--bottom:after{transform:translateX(-50%) translateY(8px)}.hint--always.hint--bottom-left:before{transform:translateY(8px) rotate(var(--rotation))}.hint--always.hint--bottom-left:after{transform:translateX(-100%) translateY(8px)}.hint--always.hint--bottom-right:before{transform:translateY(8px) rotate(var(--rotation))}.hint--always.hint--bottom-right:after{transform:translateY(8px)}.hint--always.hint--left:before{transform:translateX(-8px) rotate(var(--rotation))}.hint--always.hint--left:after{transform:translateX(-8px)}.hint--always.hint--right:before{transform:translateX(8px) rotate(var(--rotation))}.hint--always.hint--right:after{transform:translateX(8px)}