From 0c0a1f576bb047b5478a463fd5078146908dfc01 Mon Sep 17 00:00:00 2001 From: Daniel Abel Date: Wed, 14 Sep 2022 07:43:05 -0500 Subject: [PATCH] feat: agrego el codigo compilado --- tooltips.css | 291 ++++++++++++++++++++++++----------------------- tooltips.min.css | 7 +- 2 files changed, 149 insertions(+), 149 deletions(-) diff --git a/tooltips.css b/tooltips.css index b8c9b7a..e9cb469 100644 --- a/tooltips.css +++ b/tooltips.css @@ -1,158 +1,163 @@ -/*! - * Tooltips v3.2.0 - * Copyright 2020 zkreations - * Daniel Abel M. (fb.com/danieI.abel) - * Licensed under MIT (github.com/zkreations/tooltips/blob/master/LICENSE) - */ -:root { - --tts-size: 14px; - --tts-arrow: 6px; - --tts-bg: rgb(0 0 0 / 90%); - --tts-color: #fff; - --tts-duration: .3s; - --tts-shadow: 0 2px 3px rgb(0 0 0 / 40%); - --tts-radius: .25em; -} -[class*=tts] { +:where([data-tts]) { position: relative; - --tts-pos: calc(100% - var(--tts-space, 0px)); + display: inline-block; +} +:where([data-tts])::before { + content: attr(aria-label); +} + +[data-tts] { + --t-po: calc(100% - var(--t-tt)); + --t-bg: var(--tts-background, rgba(0, 0, 0, 0.9)); + --t-arrow: var(--tts-arrow, 6px); + --t-offset: var(--tts-arrow-offset, 6px); } -[class*=tts]::after, -[class*=tts]::before { +[data-tts]::before, [data-tts]::after { position: absolute; - left: 50%; + top: var(--t-top); + left: var(--t-left); + right: var(--t-right); + bottom: var(--t-bottom); + opacity: var(--t-op); + z-index: 10; pointer-events: none; - z-index: 100; - font-size: var(--tts-size); - opacity:0; + transform: translate(var(--t-tx, 0), var(--t-ty, 0)) scale(var(--t-ts, 1)); + transform-origin: var(--t-to, bottom); transition-property: opacity, transform; - transition-duration: var(--tts-duration); - will-change: opacity, transform; -} -[class*=tts]::before { - content: attr(aria-label); + transition-duration: var(--tts-duration, 0.3s); + will-change: transform; +} +[data-tts]:not(:hover):not([data-tts-visible]) { + --t-op: 0; + --t-tt: var(--tts-start-translate, 0px); + --t-ts: var(--tts-start-scale, 1); +} +[data-tts]:hover, [data-tts][data-tts-visible] { + --t-tt: var(--tts-end-translate, 0px); + --t-ts: var(--tts-end-scale, 1); +} +[data-tts]::before { + font-size: var(--tts-font-size, 14px); + font-family: var(--tts-font-family, Roboto, sans-serif); + color: var(--tts-color, #fff); + padding: var(--tts-padding, 0.5em 0.75em); + border-radius: var(--tts-border-radius, 0.25em); + font-weight: normal; + line-height: 1.5; white-space: nowrap; - color: var(--tts-color); - font-weight: 400; - padding: 0.5em .75em; - background-color: var(--tts-bg); - border-radius: var(--tts-radius); - box-shadow: var(--tts-shadow); -} -[class*=tts]::after { + background-color: var(--t-bg); +} +[data-tts]::after { content: ""; border-style: solid; border-color: transparent; - border-width: var(--tts-arrow); -} -/* Directions */ -/* Up */ -.tts { - --tx: -50%; - --ty: calc(var(--tts-pos) * -1); -} -.tts::before { - transform-origin: bottom; - top: calc(var(--tts-arrow) * -1); -} -.tts::after { - transform-origin: top; - top: 0; - border-top-color: var(--tts-bg); + border-width: var(--t-arrow); +} + +[data-tts*=up], [data-tts=""] { + --t-top: 0; + --t-left: 50%; + --t-tx: -50%; +} +[data-tts*=up]::before, [data-tts=""]::before { + --t-ty: calc((var(--t-po) + var(--t-arrow)) * -1); +} +[data-tts*=up]::after, [data-tts=""]::after { + --t-to: top; + --t-ty: calc(var(--t-po) * -1); + border-top-color: var(--t-bg); border-bottom-width: 0; } -/* Down */ -.tts\:down { - --tx: -50%; - --ty: var(--tts-pos); + +[data-tts*=down] { + --t-bottom: 0; + --t-left: 50%; + --t-tx: -50%; } -.tts\:down::before { - transform-origin: top; - bottom: calc(var(--tts-arrow) * -1); +[data-tts*=down]::before { + --t-to: top; + --t-ty: calc(var(--t-po) + var(--t-arrow)); } -.tts\:down::after { - transform-origin: bottom; - bottom: 0; - border-bottom-color: var(--tts-bg); +[data-tts*=down]::after { + --t-to: bottom; + --t-ty: var(--t-po); + border-bottom-color: var(--t-bg); border-top-width: 0; } -/* Left */ -.tts\:left { - --tx: calc(var(--tts-pos) * -1); - --ty: -50%; -} -.tts\:left::after, -.tts\:left::before { - top: 50%; -} -.tts\:left::before { - transform-origin: right; - left: calc(var(--tts-arrow) * -1); -} -.tts\:left::after { - transform-origin: left; - left: calc(var(--tts-arrow) - 1px); - border-left-color: var(--tts-bg); -} -/* Right */ -.tts\:right { - --tx: var(--tts-pos); - --ty: -50%; -} -.tts\:right::after, -.tts\:right::before { - top: 50%; - left: auto; -} -.tts\:right::before { - transform-origin: left; - right: calc(var(--tts-arrow) * -1); -} -.tts\:right::after { - transform-origin: right; - right: calc(var(--tts-arrow) - 1px); - border-right-color: var(--tts-bg); -} -/* Animations */ -/* Fade */ -[class*=tts]::after, -[class*=tts]::before { - transform: translate3d(var(--tx), var(--ty), 0) scale(var(--tts-scale,1)); -} -[class*=tts]:hover::after, -[class*=tts]:focus::after, -[class*=tts]:hover::before, -[class*=tts]:focus::before { - opacity:1; - transform: translate3d(var(--tx), var(--ty), 0) scale(1); -} -/* Slide In */ -.tts-slideIn:not(:hover):not(:focus):not(.tts-visible) { - --tts-space: -1rem; -} -/* Slide Out */ -.tts-slideOut:not(:hover):not(:focus):not(.tts-visible) { - --tts-space: 1rem; -} -/*zoomIn*/ -.tts-zoomIn:not(.tts-visible) { - --tts-scale: 0.5; -} -/* Zoom Out */ -.tts-zoomOut:not(.tts-visible) { - --tts-scale: 1.4; -} -/* Options */ -/* Always Visible */ -.tts-visible::after, -.tts-visible::before { - opacity:1; -} -/* Line Break */ -.tts-wrap::before { - white-space: normal; -} -/* Is it a block? */ -[class*=tts]:not(.tts-block) { - display: inline-block; -} \ No newline at end of file + +[data-tts=left] { + --t-left: 0; + --t-top: 50%; + --t-ty: -50%; +} +[data-tts=left]::before { + --t-to: right; + --t-tx: calc((var(--t-po) + var(--t-arrow)) * -1); +} +[data-tts=left]::after { + --t-to: left; + --t-tx: calc(var(--t-po) * -1); + border-left-color: var(--t-bg); + border-right-width: 0; +} + +[data-tts=right] { + --t-right: 0; + --t-top: 50%; + --t-ty: -50%; +} +[data-tts=right]::before { + --t-to: left; + --t-tx: calc(var(--t-po) + var(--t-arrow)); +} +[data-tts=right]::after { + --t-to: right; + --t-tx: var(--t-po); + border-right-color: var(--t-bg); + border-left-width: 0; +} + +[data-tts=up-left], [data-tts=down-left] { + --t-left: 0; + --t-tx: 0; +} +[data-tts=up-left]::after, [data-tts=down-left]::after { + --t-left: var(--t-offset); +} + +[data-tts=up-left]::before { + --t-to: bottom left; +} +[data-tts=up-left]::after { + --t-to: top left; +} + +[data-tts=down-left]::before { + --t-to: top left; +} +[data-tts=down-left]::after { + --t-to: bottom left; +} + +[data-tts=up-right], [data-tts=down-right] { + --t-left: auto; + --t-right: 0; + --t-tx: 0; +} +[data-tts=up-right]::after, [data-tts=down-right]::after { + --t-right: var(--t-offset); +} + +[data-tts=up-right]::before { + --t-to: bottom right; +} +[data-tts=up-right]::after { + --t-to: top right; +} + +[data-tts=down-right]::before { + --t-to: top right; +} +[data-tts=down-right]::after { + --t-to: bottom right; +} diff --git a/tooltips.min.css b/tooltips.min.css index 2d97d36..05e5743 100644 --- a/tooltips.min.css +++ b/tooltips.min.css @@ -1,6 +1 @@ -/*! - * Tooltips v3.2.0 - * Copyright 2020 zkreations - * Daniel Abel M. (fb.com/danieI.abel) - * Licensed under MIT (github.com/zkreations/tooltips/blob/master/LICENSE) - */:root{--tts-size:14px;--tts-arrow:6px;--tts-bg:rgb(0 0 0 / 90%);--tts-color:#fff;--tts-duration:.3s;--tts-shadow:0 2px 3px rgb(0 0 0 / 40%);--tts-radius:.25em}[class*=tts]{position:relative;--tts-pos:calc(100% - var(--tts-space, 0px))}[class*=tts]::after,[class*=tts]::before{position:absolute;left:50%;pointer-events:none;z-index:100;font-size:var(--tts-size);opacity:0;transition-property:opacity,transform;transition-duration:var(--tts-duration);will-change:opacity,transform}[class*=tts]::before{content:attr(aria-label);white-space:nowrap;color:var(--tts-color);font-weight:400;padding:.5em .75em;background-color:var(--tts-bg);border-radius:var(--tts-radius);box-shadow:var(--tts-shadow)}[class*=tts]::after{content:"";border-style:solid;border-color:transparent;border-width:var(--tts-arrow)}.tts{--tx:-50%;--ty:calc(var(--tts-pos) * -1)}.tts::before{transform-origin:bottom;top:calc(var(--tts-arrow) * -1)}.tts::after{transform-origin:top;top:0;border-top-color:var(--tts-bg);border-bottom-width:0}.tts\:down{--tx:-50%;--ty:var(--tts-pos)}.tts\:down::before{transform-origin:top;bottom:calc(var(--tts-arrow) * -1)}.tts\:down::after{transform-origin:bottom;bottom:0;border-bottom-color:var(--tts-bg);border-top-width:0}.tts\:left{--tx:calc(var(--tts-pos) * -1);--ty:-50%}.tts\:left::after,.tts\:left::before{top:50%}.tts\:left::before{transform-origin:right;left:calc(var(--tts-arrow) * -1)}.tts\:left::after{transform-origin:left;left:calc(var(--tts-arrow) - 1px);border-left-color:var(--tts-bg)}.tts\:right{--tx:var(--tts-pos);--ty:-50%}.tts\:right::after,.tts\:right::before{top:50%;left:auto}.tts\:right::before{transform-origin:left;right:calc(var(--tts-arrow) * -1)}.tts\:right::after{transform-origin:right;right:calc(var(--tts-arrow) - 1px);border-right-color:var(--tts-bg)}[class*=tts]::after,[class*=tts]::before{transform:translate3d(var(--tx),var(--ty),0) scale(var(--tts-scale,1))}[class*=tts]:focus::after,[class*=tts]:focus::before,[class*=tts]:hover::after,[class*=tts]:hover::before{opacity:1;transform:translate3d(var(--tx),var(--ty),0) scale(1)}.tts-slideIn:not(:hover):not(:focus):not(.tts-visible){--tts-space:-1rem}.tts-slideOut:not(:hover):not(:focus):not(.tts-visible){--tts-space:1rem}.tts-zoomIn:not(.tts-visible){--tts-scale:0.5}.tts-zoomOut:not(.tts-visible){--tts-scale:1.4}.tts-visible::after,.tts-visible::before{opacity:1}.tts-wrap::before{white-space:normal}[class*=tts]:not(.tts-block){display:inline-block} \ No newline at end of file +:where([data-tts]){position:relative;display:inline-block}:where([data-tts])::before{content:attr(aria-label)}[data-tts]{--t-po:calc(100% - var(--t-tt));--t-bg:var(--tts-background, rgba(0, 0, 0, 0.9));--t-arrow:var(--tts-arrow, 6px);--t-offset:var(--tts-arrow-offset, 6px)}[data-tts]::after,[data-tts]::before{position:absolute;top:var(--t-top);left:var(--t-left);right:var(--t-right);bottom:var(--t-bottom);opacity:var(--t-op);z-index:10;pointer-events:none;transform:translate(var(--t-tx,0),var(--t-ty,0)) scale(var(--t-ts,1));transform-origin:var(--t-to,bottom);transition-property:opacity,transform;transition-duration:var(--tts-duration, .3s);will-change:transform}[data-tts]:not(:hover):not([data-tts-visible]){--t-op:0;--t-tt:var(--tts-start-translate, 0px);--t-ts:var(--tts-start-scale, 1)}[data-tts]:hover,[data-tts][data-tts-visible]{--t-tt:var(--tts-end-translate, 0px);--t-ts:var(--tts-end-scale, 1)}[data-tts]::before{font-size:var(--tts-font-size, 14px);font-family:var(--tts-font-family, Roboto, sans-serif);color:var(--tts-color,#fff);padding:var(--tts-padding,.5em .75em);border-radius:var(--tts-border-radius,.25em);font-weight:400;line-height:1.5;white-space:nowrap;background-color:var(--t-bg)}[data-tts]::after{content:"";border-style:solid;border-color:transparent;border-width:var(--t-arrow)}[data-tts*=up],[data-tts=""]{--t-top:0;--t-left:50%;--t-tx:-50%}[data-tts*=up]::before,[data-tts=""]::before{--t-ty:calc((var(--t-po) + var(--t-arrow)) * -1)}[data-tts*=up]::after,[data-tts=""]::after{--t-to:top;--t-ty:calc(var(--t-po) * -1);border-top-color:var(--t-bg);border-bottom-width:0}[data-tts*=down]{--t-bottom:0;--t-left:50%;--t-tx:-50%}[data-tts*=down]::before{--t-to:top;--t-ty:calc(var(--t-po) + var(--t-arrow))}[data-tts*=down]::after{--t-to:bottom;--t-ty:var(--t-po);border-bottom-color:var(--t-bg);border-top-width:0}[data-tts=left]{--t-left:0;--t-top:50%;--t-ty:-50%}[data-tts=left]::before{--t-to:right;--t-tx:calc((var(--t-po) + var(--t-arrow)) * -1)}[data-tts=left]::after{--t-to:left;--t-tx:calc(var(--t-po) * -1);border-left-color:var(--t-bg);border-right-width:0}[data-tts=right]{--t-right:0;--t-top:50%;--t-ty:-50%}[data-tts=right]::before{--t-to:left;--t-tx:calc(var(--t-po) + var(--t-arrow))}[data-tts=right]::after{--t-to:right;--t-tx:var(--t-po);border-right-color:var(--t-bg);border-left-width:0}[data-tts=down-left],[data-tts=up-left]{--t-left:0;--t-tx:0}[data-tts=down-left]::after,[data-tts=up-left]::after{--t-left:var(--t-offset)}[data-tts=down-left]::after,[data-tts=up-left]::before{--t-to:bottom left}[data-tts=down-left]::before,[data-tts=up-left]::after{--t-to:top left}[data-tts=down-right],[data-tts=up-right]{--t-left:auto;--t-right:0;--t-tx:0}[data-tts=down-right]::after,[data-tts=up-right]::after{--t-right:var(--t-offset)}[data-tts=down-right]::after,[data-tts=up-right]::before{--t-to:bottom right}[data-tts=down-right]::before,[data-tts=up-right]::after{--t-to:top right} \ No newline at end of file