joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
1 lines • 2.3 kB
CSS
joomla-tip{display:inline-block;position:relative}joomla-tip button{background:#1c3d5c;border:0;border-radius:50%;color:#fff;font-family:serif;font-size:1.4rem;font-weight:700;height:1.6rem;line-height:1.4rem;width:1.6rem}joomla-tip .toggletip-bubble{animation-duration:.3s;background:#222;border-radius:.25rem;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;display:inline-block;font-size:.9rem;line-height:1.2rem;padding:.5rem .8rem;position:absolute;transition:all ease-in;width:14rem;z-index:1040}joomla-tip .toggletip-bubble:after{border-style:solid;content:"";height:0;position:absolute;right:100%;top:.6rem;width:0}joomla-tip .toggletip-bubble.top{animation-name:toggletip-fadeInTop;bottom:100%;left:50%;margin-bottom:.6rem;transform:translate(-50%)}joomla-tip .toggletip-bubble.top:after{border-color:#222 transparent transparent;border-width:6px 6px 0;bottom:auto;left:50%;top:100%;transform:translateX(-50%)}joomla-tip .toggletip-bubble.left{animation-name:toggletip-fadeInLeft;margin-right:.6rem;right:100%;top:50%;transform:translateY(-50%)}joomla-tip .toggletip-bubble.left:after{border-color:transparent transparent transparent #222;border-width:6px 0 6px 6px;bottom:auto;left:100%;top:50%;transform:translateY(-50%)}joomla-tip .toggletip-bubble.right{animation-name:toggletip-fadeInRight;left:100%;margin-left:.6rem;top:50%;transform:translateY(-50%)}joomla-tip .toggletip-bubble.right:after{border-color:transparent #222 transparent transparent;border-width:6px 6px 6px 0;bottom:auto;right:100%;top:50%;transform:translateY(-50%)}joomla-tip .toggletip-bubble.bottom{animation-name:toggletip-fadeInBottom;left:50%;margin-top:.6rem;top:100%;transform:translate(-50%)}joomla-tip .toggletip-bubble.bottom:after{border-color:transparent transparent #222;border-width:0 6px 6px;left:50%;top:-6px;transform:translateX(-50%)}@keyframes toggletip-fadeInRight{0%{opacity:0;transform:translate(-10px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes toggletip-fadeInLeft{0%{opacity:0;transform:translate(10px,-50%)}to{opacity:1;transform:translateY(-50%)}}@keyframes toggletip-fadeInTop{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@keyframes toggletip-fadeInBottom{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}