From 2ebcb76029408b579475b46dacddbde3d4b2d350 Mon Sep 17 00:00:00 2001 From: Marco Biedermann Date: Thu, 15 Jun 2017 14:05:19 +0200 Subject: [PATCH] fix #3 - add Scss support --- microtip.css | 409 +++++++++++++++++++---------------------------- microtip.css.map | 7 + microtip.min.css | 2 +- microtip.scss | 306 +++++++++++++++++++++++++++++++++++ package.json | 1 + 5 files changed, 476 insertions(+), 249 deletions(-) create mode 100644 microtip.css.map create mode 100644 microtip.scss diff --git a/microtip.css b/microtip.css index 941aa64..367b42c 100644 --- a/microtip.css +++ b/microtip.css @@ -12,255 +12,168 @@ 2. Direction Modifiers 3. Position Modifiers --------------------------------------------------------------------*/ - - /* ------------------------------------------------ [1] Base Styles -------------------------------------------------*/ - [aria-label][role="tooltip"] { - position: relative; -} - -[aria-label][role="tooltip"]:before, -[aria-label][role="tooltip"]:after { - transform: translate3d(0, 0, 0); - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - will-change: transform; - opacity: 0; - pointer-events: none; - transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); - position: absolute; - box-sizing: border-box; - z-index: 10; - transform-origin: top; -} - -[aria-label][role="tooltip"]:before { - background-size: 100% auto !important; - content: ""; -} - -[aria-label][role="tooltip"]:after { - background: rgba(17, 17, 17, .9); - border-radius: 4px; - color: #ffffff; - content: attr(aria-label); - font-size: var(--microtip-font-size, 13px); - font-weight: var(--microtip-font-weight, normal); - text-transform: var(--microtip-text-transform, none); - padding: .5em 1em; - white-space: nowrap; - box-sizing: content-box; -} - -[aria-label][role="tooltip"]:hover:before, -[aria-label][role="tooltip"]:hover:after, -[aria-label][role="tooltip"]:focus:before, -[aria-label][role="tooltip"]:focus:after { - opacity: 1; - pointer-events: auto; -} - - - -/* ------------------------------------------------ - [2] Position Modifiers --------------------------------------------------*/ - -[role="tooltip"][data-microtip-position|="top"]:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; - height: 6px; - width: 18px; - margin-bottom: 5px; -} - -[role="tooltip"][data-microtip-position|="top"]:after { - margin-bottom: 11px; -} - -[role="tooltip"][data-microtip-position|="top"]:before { - transform: translate3d(-50%, 0, 0); - bottom: 100%; - left: 50%; -} - -[role="tooltip"][data-microtip-position|="top"]:hover:before { - transform: translate3d(-50%, -5px, 0); -} - -[role="tooltip"][data-microtip-position|="top"]:after { - transform: translate3d(-50%, 0, 0); - bottom: 100%; - left: 50%; -} - -[role="tooltip"][data-microtip-position="top"]:hover:after { - transform: translate3d(-50%, -5px, 0); -} - -/* ------------------------------------------------ - [2.1] Top Left --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="top-left"]:after { - transform: translate3d(calc(-100% + 16px), 0, 0); - bottom: 100%; -} - -[role="tooltip"][data-microtip-position="top-left"]:hover:after { - transform: translate3d(calc(-100% + 16px), -5px, 0); -} - - -/* ------------------------------------------------ - [2.2] Top Right --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="top-right"]:after { - transform: translate3d(calc(0% + -16px), 0, 0); - bottom: 100%; -} - -[role="tooltip"][data-microtip-position="top-right"]:hover:after { - transform: translate3d(calc(0% + -16px), -5px, 0); -} - - -/* ------------------------------------------------ - [2.3] Bottom --------------------------------------------------*/ -[role="tooltip"][data-microtip-position|="bottom"]:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; - height: 6px; - width: 18px; - margin-top: 5px; - margin-bottom: 0; -} - -[role="tooltip"][data-microtip-position|="bottom"]:after { - margin-top: 11px; -} - -[role="tooltip"][data-microtip-position|="bottom"]:before { - transform: translate3d(-50%, -10px, 0); - bottom: auto; - left: 50%; - top: 100%; -} - -[role="tooltip"][data-microtip-position|="bottom"]:hover:before { - transform: translate3d(-50%, 0, 0); -} - -[role="tooltip"][data-microtip-position|="bottom"]:after { - transform: translate3d(-50%, -10px, 0); - top: 100%; - left: 50%; -} - -[role="tooltip"][data-microtip-position="bottom"]:hover:after { - transform: translate3d(-50%, 0, 0); -} - - -/* ------------------------------------------------ - [2.4] Bottom Left --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="bottom-left"]:after { - transform: translate3d(calc(-100% + 16px), -10px, 0); - top: 100%; -} - -[role="tooltip"][data-microtip-position="bottom-left"]:hover:after { - transform: translate3d(calc(-100% + 16px), 0, 0); -} - - -/* ------------------------------------------------ - [2.5] Bottom Right --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="bottom-right"]:after { - transform: translate3d(calc(0% + -16px), -10px, 0); - top: 100%; -} - -[role="tooltip"][data-microtip-position="bottom-right"]:hover:after { - transform: translate3d(calc(0% + -16px), 0, 0); -} - - -/* ------------------------------------------------ - [2.6] Left --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="left"]:before, -[role="tooltip"][data-microtip-position="left"]:after { - bottom: auto; - left: auto; - right: 100%; - top: 50%; - transform: translate3d(10px, -50%, 0); -} - -[role="tooltip"][data-microtip-position="left"]:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; - height: 18px; - width: 6px; - margin-right: 5px; - margin-bottom: 0; -} - -[role="tooltip"][data-microtip-position="left"]:after { - margin-right: 11px; -} - -[role="tooltip"][data-microtip-position="left"]:hover:before, -[role="tooltip"][data-microtip-position="left"]:hover:after { - transform: translate3d(0, -50%, 0); -} - - -/* ------------------------------------------------ - [2.7] Right --------------------------------------------------*/ -[role="tooltip"][data-microtip-position="right"]:before, -[role="tooltip"][data-microtip-position="right"]:after { - bottom: auto; - left: 100%; - top: 50%; - transform: translate3d(-10px, -50%, 0); -} - -[role="tooltip"][data-microtip-position="right"]:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; - height: 18px; - width: 6px; - margin-bottom: 0; - margin-left: 5px; -} - -[role="tooltip"][data-microtip-position="right"]:after { - margin-left: 11px; -} - -[role="tooltip"][data-microtip-position="right"]:hover:before, -[role="tooltip"][data-microtip-position="right"]:hover:after { - transform: translate3d(0, -50%, 0); -} - -/* ------------------------------------------------ - [3] Size --------------------------------------------------*/ -[role="tooltip"][data-microtip-size="small"]:after { - white-space: initial; - width: 80px; -} - -[role="tooltip"][data-microtip-size="medium"]:after { - white-space: initial; - width: 150px; -} - -[role="tooltip"][data-microtip-size="large"]:after { - white-space: initial; - width: 260px; -} \ No newline at end of file + position: relative; } + [aria-label][role="tooltip"]:before, [aria-label][role="tooltip"]:after { + transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform; + opacity: 0; + pointer-events: none; + transition: all var(--microtip-transition-duration, 0.18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); + position: absolute; + box-sizing: border-box; + z-index: 10; + transform-origin: top; } + [aria-label][role="tooltip"]:before { + background-size: 100% auto !important; + content: ""; } + [aria-label][role="tooltip"]:after { + background: rgba(17, 17, 17, 0.9); + border-radius: 4px; + color: #ffffff; + content: attr(aria-label); + font-size: var(--microtip-font-size, 13px); + font-weight: var(--microtip-font-weight, normal); + text-transform: var(--microtip-text-transform, none); + padding: .5em 1em; + white-space: nowrap; + box-sizing: content-box; } + [aria-label][role="tooltip"]:hover:before, [aria-label][role="tooltip"]:hover:after, [aria-label][role="tooltip"]:focus:before, [aria-label][role="tooltip"]:focus:after { + opacity: 1; + pointer-events: auto; } + +[role="tooltip"] { + /* ------------------------------------------------ + [2] Position Modifiers + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.1] Top Left + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.2] Top Right + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.3] Bottom + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.4] Bottom Left + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.5] Bottom Right + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.6] Left + -------------------------------------------------*/ + /* ------------------------------------------------ + [2.7] Right + -------------------------------------------------*/ + /* ------------------------------------------------ + [3] Size + -------------------------------------------------*/ } + [role="tooltip"][data-microtip-position|="top"]:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 6px; + width: 18px; + margin-bottom: 5px; } + [role="tooltip"][data-microtip-position|="top"]:after { + margin-bottom: 11px; } + [role="tooltip"][data-microtip-position|="top"]:before { + transform: translate3d(-50%, 0, 0); + bottom: 100%; + left: 50%; } + [role="tooltip"][data-microtip-position|="top"]:hover:before { + transform: translate3d(-50%, -5px, 0); } + [role="tooltip"][data-microtip-position|="top"]:after { + transform: translate3d(-50%, 0, 0); + bottom: 100%; + left: 50%; } + [role="tooltip"] [data-microtip-position="top"]:hover:after { + transform: translate3d(-50%, -5px, 0); } + [role="tooltip"][data-microtip-position="top-left"]:after { + transform: translate3d(calc(-100% + 16px), 0, 0); + bottom: 100%; } + [role="tooltip"][data-microtip-position="top-left"]:hover:after { + transform: translate3d(calc(-100% + 16px), -5px, 0); } + [role="tooltip"][data-microtip-position="top-right"]:after { + transform: translate3d(calc(0% + -16px), 0, 0); + bottom: 100%; } + [role="tooltip"][data-microtip-position="top-right"]:hover:after { + transform: translate3d(calc(0% + -16px), -5px, 0); } + [role="tooltip"][data-microtip-position|="bottom"]:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 6px; + width: 18px; + margin-top: 5px; + margin-bottom: 0; } + [role="tooltip"][data-microtip-position|="bottom"]:after { + margin-top: 11px; } + [role="tooltip"][data-microtip-position|="bottom"]:before { + transform: translate3d(-50%, -10px, 0); + bottom: auto; + left: 50%; + top: 100%; } + [role="tooltip"][data-microtip-position|="bottom"]:hover:before { + transform: translate3d(-50%, 0, 0); } + [role="tooltip"][data-microtip-position|="bottom"]:after { + transform: translate3d(-50%, -10px, 0); + top: 100%; + left: 50%; } + [role="tooltip"][data-microtip-position="bottom"]:hover:after { + transform: translate3d(-50%, 0, 0); } + [role="tooltip"][data-microtip-position="bottom-left"]:after { + transform: translate3d(calc(-100% + 16px), -10px, 0); + top: 100%; } + [role="tooltip"][data-microtip-position="bottom-left"]:hover:after { + transform: translate3d(calc(-100% + 16px), 0, 0); } + [role="tooltip"][data-microtip-position="bottom-right"]:after { + transform: translate3d(calc(0% + -16px), -10px, 0); + top: 100%; } + [role="tooltip"][data-microtip-position="bottom-right"]:hover:after { + transform: translate3d(calc(0% + -16px), 0, 0); } + [role="tooltip"][data-microtip-position="left"]:before, [role="tooltip"][data-microtip-position="left"]:after { + bottom: auto; + left: auto; + right: 100%; + top: 50%; + transform: translate3d(10px, -50%, 0); } + [role="tooltip"][data-microtip-position="left"]:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 18px; + width: 6px; + margin-right: 5px; + margin-bottom: 0; } + [role="tooltip"][data-microtip-position="left"]:after { + margin-right: 11px; } + [role="tooltip"][data-microtip-position="left"]:hover:before, [role="tooltip"][data-microtip-position="left"]:hover:after { + transform: translate3d(0, -50%, 0); } + [role="tooltip"][data-microtip-position="right"]:before, [role="tooltip"][data-microtip-position="right"]:after { + bottom: auto; + left: 100%; + top: 50%; + transform: translate3d(-10px, -50%, 0); } + [role="tooltip"][data-microtip-position="right"]:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 18px; + width: 6px; + margin-bottom: 0; + margin-left: 5px; } + [role="tooltip"][data-microtip-position="right"]:after { + margin-left: 11px; } + [role="tooltip"][data-microtip-position="right"]:hover:before, [role="tooltip"][data-microtip-position="right"]:hover:after { + transform: translate3d(0, -50%, 0); } + [role="tooltip"][data-microtip-size="small"]:after { + white-space: initial; + width: 80px; } + [role="tooltip"][data-microtip-size="medium"]:after { + white-space: initial; + width: 150px; } + [role="tooltip"][data-microtip-size="large"]:after { + white-space: initial; + width: 260px; } + +/*# sourceMappingURL=microtip.css.map */ diff --git a/microtip.css.map b/microtip.css.map new file mode 100644 index 0000000..e4c692a --- /dev/null +++ b/microtip.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["microtip.scss"], +"names": [], +"file": "microtip.css" +} \ No newline at end of file diff --git a/microtip.min.css b/microtip.min.css index 8ae459d..ae62129 100644 --- a/microtip.min.css +++ b/microtip.min.css @@ -12,4 +12,4 @@ 2. Direction Modifiers 3. Position Modifiers --------------------------------------------------------------------*/ -[aria-label][role="tooltip"]{position:relative}[aria-label][role="tooltip"]:before,[aria-label][role="tooltip"]:after{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all var(--microtip-transition-duration,.18s) var(--microtip-transition-easing,ease-in-out) var(--microtip-transition-delay,0s);position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}[aria-label][role="tooltip"]:before{background-size:100% auto!important;content:""}[aria-label][role="tooltip"]:after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(aria-label);font-size:var(--microtip-font-size,13px);font-weight:var(--microtip-font-weight,normal);text-transform:var(--microtip-text-transform,none);padding:.5em 1em;white-space:nowrap;box-sizing:content-box}[aria-label][role="tooltip"]:hover:before,[aria-label][role="tooltip"]:hover:after,[aria-label][role="tooltip"]:focus:before,[aria-label][role="tooltip"]:focus:after{opacity:1;pointer-events:auto}[role="tooltip"][data-microtip-position|="top"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-bottom:5px}[role="tooltip"][data-microtip-position|="top"]:after{margin-bottom:11px}[role="tooltip"][data-microtip-position|="top"]:before{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role="tooltip"][data-microtip-position|="top"]:hover:before{transform:translate3d(-50%,-5px,0)}[role="tooltip"][data-microtip-position|="top"]:after{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role="tooltip"][data-microtip-position="top"]:hover:after{transform:translate3d(-50%,-5px,0)}[role="tooltip"][data-microtip-position="top-left"]:after{transform:translate3d(calc(-100% + 16px),0,0);bottom:100%}[role="tooltip"][data-microtip-position="top-left"]:hover:after{transform:translate3d(calc(-100% + 16px),-5px,0)}[role="tooltip"][data-microtip-position="top-right"]:after{transform:translate3d(calc(0% + -16px),0,0);bottom:100%}[role="tooltip"][data-microtip-position="top-right"]:hover:after{transform:translate3d(calc(0% + -16px),-5px,0)}[role="tooltip"][data-microtip-position|="bottom"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0}[role="tooltip"][data-microtip-position|="bottom"]:after{margin-top:11px}[role="tooltip"][data-microtip-position|="bottom"]:before{transform:translate3d(-50%,-10px,0);bottom:auto;left:50%;top:100%}[role="tooltip"][data-microtip-position|="bottom"]:hover:before{transform:translate3d(-50%,0,0)}[role="tooltip"][data-microtip-position|="bottom"]:after{transform:translate3d(-50%,-10px,0);top:100%;left:50%}[role="tooltip"][data-microtip-position="bottom"]:hover:after{transform:translate3d(-50%,0,0)}[role="tooltip"][data-microtip-position="bottom-left"]:after{transform:translate3d(calc(-100% + 16px),-10px,0);top:100%}[role="tooltip"][data-microtip-position="bottom-left"]:hover:after{transform:translate3d(calc(-100% + 16px),0,0)}[role="tooltip"][data-microtip-position="bottom-right"]:after{transform:translate3d(calc(0% + -16px),-10px,0);top:100%}[role="tooltip"][data-microtip-position="bottom-right"]:hover:after{transform:translate3d(calc(0% + -16px),0,0)}[role="tooltip"][data-microtip-position="left"]:before,[role="tooltip"][data-microtip-position="left"]:after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px,-50%,0)}[role="tooltip"][data-microtip-position="left"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}[role="tooltip"][data-microtip-position="left"]:after{margin-right:11px}[role="tooltip"][data-microtip-position="left"]:hover:before,[role="tooltip"][data-microtip-position="left"]:hover:after{transform:translate3d(0,-50%,0)}[role="tooltip"][data-microtip-position="right"]:before,[role="tooltip"][data-microtip-position="right"]:after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px,-50%,0)}[role="tooltip"][data-microtip-position="right"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}[role="tooltip"][data-microtip-position="right"]:after{margin-left:11px}[role="tooltip"][data-microtip-position="right"]:hover:before,[role="tooltip"][data-microtip-position="right"]:hover:after{transform:translate3d(0,-50%,0)}[role="tooltip"][data-microtip-size="small"]:after{white-space:initial;width:80px}[role="tooltip"][data-microtip-size="medium"]:after{white-space:initial;width:150px}[role="tooltip"][data-microtip-size="large"]:after{white-space:initial;width:260px} \ No newline at end of file +[aria-label][role="tooltip"]{position:relative}[aria-label][role="tooltip"]:before,[aria-label][role="tooltip"]:after{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all var(--microtip-transition-duration,0.18s) var(--microtip-transition-easing,ease-in-out) var(--microtip-transition-delay,0s);position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}[aria-label][role="tooltip"]:before{background-size:100% auto!important;content:""}[aria-label][role="tooltip"]:after{background:rgba(17,17,17,0.9);border-radius:4px;color:#fff;content:attr(aria-label);font-size:var(--microtip-font-size,13px);font-weight:var(--microtip-font-weight,normal);text-transform:var(--microtip-text-transform,none);padding:.5em 1em;white-space:nowrap;box-sizing:content-box}[aria-label][role="tooltip"]:hover:before,[aria-label][role="tooltip"]:hover:after,[aria-label][role="tooltip"]:focus:before,[aria-label][role="tooltip"]:focus:after{opacity:1;pointer-events:auto}[role="tooltip"]{}[role="tooltip"][data-microtip-position|="top"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-bottom:5px}[role="tooltip"][data-microtip-position|="top"]:after{margin-bottom:11px}[role="tooltip"][data-microtip-position|="top"]:before{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role="tooltip"][data-microtip-position|="top"]:hover:before{transform:translate3d(-50%,-5px,0)}[role="tooltip"][data-microtip-position|="top"]:after{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role="tooltip"] [data-microtip-position="top"]:hover:after{transform:translate3d(-50%,-5px,0)}[role="tooltip"][data-microtip-position="top-left"]:after{transform:translate3d(calc(-100% + 16px),0,0);bottom:100%}[role="tooltip"][data-microtip-position="top-left"]:hover:after{transform:translate3d(calc(-100% + 16px),-5px,0)}[role="tooltip"][data-microtip-position="top-right"]:after{transform:translate3d(calc(0% + -16px),0,0);bottom:100%}[role="tooltip"][data-microtip-position="top-right"]:hover:after{transform:translate3d(calc(0% + -16px),-5px,0)}[role="tooltip"][data-microtip-position|="bottom"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0}[role="tooltip"][data-microtip-position|="bottom"]:after{margin-top:11px}[role="tooltip"][data-microtip-position|="bottom"]:before{transform:translate3d(-50%,-10px,0);bottom:auto;left:50%;top:100%}[role="tooltip"][data-microtip-position|="bottom"]:hover:before{transform:translate3d(-50%,0,0)}[role="tooltip"][data-microtip-position|="bottom"]:after{transform:translate3d(-50%,-10px,0);top:100%;left:50%}[role="tooltip"][data-microtip-position="bottom"]:hover:after{transform:translate3d(-50%,0,0)}[role="tooltip"][data-microtip-position="bottom-left"]:after{transform:translate3d(calc(-100% + 16px),-10px,0);top:100%}[role="tooltip"][data-microtip-position="bottom-left"]:hover:after{transform:translate3d(calc(-100% + 16px),0,0)}[role="tooltip"][data-microtip-position="bottom-right"]:after{transform:translate3d(calc(0% + -16px),-10px,0);top:100%}[role="tooltip"][data-microtip-position="bottom-right"]:hover:after{transform:translate3d(calc(0% + -16px),0,0)}[role="tooltip"][data-microtip-position="left"]:before,[role="tooltip"][data-microtip-position="left"]:after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px,-50%,0)}[role="tooltip"][data-microtip-position="left"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}[role="tooltip"][data-microtip-position="left"]:after{margin-right:11px}[role="tooltip"][data-microtip-position="left"]:hover:before,[role="tooltip"][data-microtip-position="left"]:hover:after{transform:translate3d(0,-50%,0)}[role="tooltip"][data-microtip-position="right"]:before,[role="tooltip"][data-microtip-position="right"]:after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px,-50%,0)}[role="tooltip"][data-microtip-position="right"]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}[role="tooltip"][data-microtip-position="right"]:after{margin-left:11px}[role="tooltip"][data-microtip-position="right"]:hover:before,[role="tooltip"][data-microtip-position="right"]:hover:after{transform:translate3d(0,-50%,0)}[role="tooltip"][data-microtip-size="small"]:after{white-space:initial;width:80px}[role="tooltip"][data-microtip-size="medium"]:after{white-space:initial;width:150px}[role="tooltip"][data-microtip-size="large"]:after{white-space:initial;width:260px} \ No newline at end of file diff --git a/microtip.scss b/microtip.scss new file mode 100644 index 0000000..fe8cc6c --- /dev/null +++ b/microtip.scss @@ -0,0 +1,306 @@ +/* ------------------------------------------------------------------- + Microtip + + Modern, lightweight css-only tooltips + Just 1kb minified and gzipped + + @author Ghosh + @package Microtip + +---------------------------------------------------------------------- + 1. Base Styles + 2. Direction Modifiers + 3. Position Modifiers +--------------------------------------------------------------------*/ + + +/* ------------------------------------------------ + [1] Base Styles +-------------------------------------------------*/ +[aria-label] { + + &[role="tooltip"] { + position: relative; + + &:before, + &:after { + transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform; + opacity: 0; + pointer-events: none; + transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s); + position: absolute; + box-sizing: border-box; + z-index: 10; + transform-origin: top; + } + + &:before { + background-size: 100% auto !important; + content: ""; + } + + &:after { + background: rgba(17, 17, 17, .9); + border-radius: 4px; + color: #ffffff; + content: attr(aria-label); + font-size: var(--microtip-font-size, 13px); + font-weight: var(--microtip-font-weight, normal); + text-transform: var(--microtip-text-transform, none); + padding: .5em 1em; + white-space: nowrap; + box-sizing: content-box; + } + + &:hover:before, + &:hover:after, + &:focus:before, + &:focus:after { + opacity: 1; + pointer-events: auto; + } + + } + +} + +[role="tooltip"] { + + /* ------------------------------------------------ + [2] Position Modifiers + -------------------------------------------------*/ + + &[data-microtip-position|="top"] { + + &:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 6px; + width: 18px; + margin-bottom: 5px; + } + + &:after { + margin-bottom: 11px; + } + + &:before { + transform: translate3d(-50%, 0, 0); + bottom: 100%; + left: 50%; + } + + &:hover:before { + transform: translate3d(-50%, -5px, 0); + } + + &:after { + transform: translate3d(-50%, 0, 0); + bottom: 100%; + left: 50%; + } + + } + + [data-microtip-position="top"]:hover:after { + transform: translate3d(-50%, -5px, 0); + } + + /* ------------------------------------------------ + [2.1] Top Left + -------------------------------------------------*/ + + &[data-microtip-position="top-left"] { + + &:after { + transform: translate3d(calc(-100% + 16px), 0, 0); + bottom: 100%; + } + + &:hover:after { + transform: translate3d(calc(-100% + 16px), -5px, 0); + } + + } + + /* ------------------------------------------------ + [2.2] Top Right + -------------------------------------------------*/ + + &[data-microtip-position="top-right"] { + + &:after { + transform: translate3d(calc(0% + -16px), 0, 0); + bottom: 100%; + } + + &:hover:after { + transform: translate3d(calc(0% + -16px), -5px, 0); + } + + } + + /* ------------------------------------------------ + [2.3] Bottom + -------------------------------------------------*/ + + &[data-microtip-position|="bottom"] { + + &:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 6px; + width: 18px; + margin-top: 5px; + margin-bottom: 0; + } + + &:after { + margin-top: 11px; + } + + &:before { + transform: translate3d(-50%, -10px, 0); + bottom: auto; + left: 50%; + top: 100%; + } + + &:hover:before { + transform: translate3d(-50%, 0, 0); + } + + &:after { + transform: translate3d(-50%, -10px, 0); + top: 100%; + left: 50%; + } + + } + + &[data-microtip-position="bottom"]:hover:after { + transform: translate3d(-50%, 0, 0); + } + + /* ------------------------------------------------ + [2.4] Bottom Left + -------------------------------------------------*/ + + &[data-microtip-position="bottom-left"] { + + &:after { + transform: translate3d(calc(-100% + 16px), -10px, 0); + top: 100%; + } + + &:hover:after { + transform: translate3d(calc(-100% + 16px), 0, 0); + } + + } + + /* ------------------------------------------------ + [2.5] Bottom Right + -------------------------------------------------*/ + + &[data-microtip-position="bottom-right"] { + + &:after { + transform: translate3d(calc(0% + -16px), -10px, 0); + top: 100%; + } + + &:hover:after { + transform: translate3d(calc(0% + -16px), 0, 0); + } + + } + + /* ------------------------------------------------ + [2.6] Left + -------------------------------------------------*/ + + &[data-microtip-position="left"] { + + &:before, + &:after { + bottom: auto; + left: auto; + right: 100%; + top: 50%; + transform: translate3d(10px, -50%, 0); + } + + &:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 18px; + width: 6px; + margin-right: 5px; + margin-bottom: 0; + } + + &:after { + margin-right: 11px; + } + + &:hover:before, + &:hover:after { + transform: translate3d(0, -50%, 0); + } + + } + + /* ------------------------------------------------ + [2.7] Right + -------------------------------------------------*/ + + &[data-microtip-position="right"] { + + &:before, + &:after { + bottom: auto; + left: 100%; + top: 50%; + transform: translate3d(-10px, -50%, 0); + } + + &:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat; + height: 18px; + width: 6px; + margin-bottom: 0; + margin-left: 5px; + } + + &:after { + margin-left: 11px; + } + + &:hover:before, + &:hover:after { + transform: translate3d(0, -50%, 0); + } + + } + + /* ------------------------------------------------ + [3] Size + -------------------------------------------------*/ + + &[data-microtip-size="small"]:after { + white-space: initial; + width: 80px; + } + + &[data-microtip-size="medium"]:after { + white-space: initial; + width: 150px; + } + + &[data-microtip-size="large"]:after { + white-space: initial; + width: 260px; + } + +} diff --git a/package.json b/package.json index 50457d6..c989831 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "1kb" ], "scripts": { + "sass": "sass microtip.scss:microtip.css", "minify": "minify microtip.css", "test": "stylelint microtip.css" },