[
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\ncharset = utf-8\nindent_style = space\nindent_size = 2\n"
  },
  {
    "path": ".gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\n# Mac stuff\n*~\n.DS_Store\n\n# IDE\n.idea\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\nnode_js:\n  - stable\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n=====================\n\nCopyright © 2018 Tiaan du Plessis <tiaanduplessis@hotmail.com>\n\nPermission is hereby granted, free of charge, to any person\nobtaining a copy of this software and associated documentation\nfiles (the “Software”), to deal in the Software without\nrestriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following\nconditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<div align=\"center\">\n\t<img src=\"media/banner.png\" alt=\"wenk\">\n</div>\n<br>\n<div align=\"center\">\n\tLightweight pure CSS tooltip for the greater good\n</div>\n<br>\n<div align=\"center\">\n  <a href=\"https://npmjs.org/package/wenk\">\n    <img src=\"https://img.shields.io/npm/v/wenk.svg?style=flat-square\" alt=\"Package version\" />\n  </a>\n  <a href=\"https://npmjs.org/package/wenk\">\n  <img src=\"https://img.shields.io/npm/dm/wenk.svg?style=flat-square\" alt=\"Downloads\" />\n  </a>\n  <a href=\"https://github.com/feross/standard\">\n    <img src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\" alt=\"Standard\" />\n  </a>\n  <a href=\"https://travis-ci.org/tiaanduplessis/wenk\">\n    <img src=\"https://img.shields.io/travis/tiaanduplessis/wenk.svg?style=flat-square\" alt=\"Travis Build\" />\n  </a>\n  <a href=\"https://badge.fury.io/gh/tiaanduplessis%2Fwenk\">\n    <img src=\"https://badge.fury.io/gh/tiaanduplessis%2Fwenk.svg?style=flat-square\" alt=\"GitHub version\" />\n  </a>\n  <a href=\"https://github.com/tiaanduplessis/wenk/blob/master/other/LICENSE\">\n    <img src=\"https://img.shields.io/npm/l/wenk.svg?style=flat-square\" alt=\"License\" />\n  </a>\n  <a href=\"http://makeapullrequest.com\">\n    <img src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" alt=\"PRs\" />\n  </a>\n  <a href=\"https://greenkeeper.io/\">\n    <img src=\"https://badges.greenkeeper.io/tiaanduplessis/wenk.svg\" alt=\"Greenkeeper\" />\n  </a>\n</div>\n<br>\n<div align=\"center\">\n  <a href=\"https://github.com/tiaanduplessis/wenk/watchers\">\n    <img src=\"https://img.shields.io/github/watchers/tiaanduplessis/wenk.svg?style=social\" alt=\"Github Watch Badge\" />\n  </a>\n  <a href=\"https://github.com/tiaanduplessis/wenk/stargazers\">\n    <img src=\"https://img.shields.io/github/stars/tiaanduplessis/wenk.svg?style=social\" alt=\"Github Star Badge\" />\n  </a>\n  <a href=\"https://twitter.com/intent/tweet?text=Check%20out%20wenk!%20https://github.com/tiaanduplessis/wenk%20%F0%9F%91%8D\">\n    <img src=\"https://img.shields.io/twitter/url/https/github.com/tiaanduplessis/wenk.svg?style=social\" alt=\"Tweet\" />\n  </a>\n</div>\n\n## Table of Contents\n\n- [About](#about)\n- [As Seen in](#as-seen-in)\n- [Why](#why)\n- [Install](#install)\n- [Usage](#usage)\n- [Demo](#demo)\n- [Support](#support)\n- [Contributing](#contributing)\n- [License](#license)\n\n\n## About\n\n**Wenk** is a Lightweight tooltip available in pure CSS, [cssnext](http://cssnext.io/) using [PostCSS](http://postcss.org/), [Less](https://raw.githubusercontent.com/tiaanduplessis/wenk/master/src/wenk.less) or [SCSS](https://raw.githubusercontent.com/tiaanduplesssis/wenk/master/src/wenk.scss).\n\n## As Seen in\n\n- [20 Awesome Javascript & CSS Tooltip Libraries](https://bashooka.com/coding/javascript-css-tooltip-libraries/)\n- [Create Minified Tooltips in Pure CSS with Wenk](https://www.hongkiat.com/blog/pure-css-lightweight-tooltip-wenk/)\n\n## Why\n\n- It's Lightweight with the **minified version being only 733 bytes when gzipped** :scream:\n- It's easy to use\n- It's easy to customize\n- It's pure CSS\n- You're already here\n\n## Install\n\n**Install with cdn**\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/wenk/dist/wenk.css\">\n<!-- Or -->\n<link rel=\"stylesheet\" href=\"https://cdn.rawgit.com/tiaanduplessis/wenk/master/dist/wenk.css\">\n```\n\n**Install with npm**\n\n```sh\n$ npm install wenk\n```\n\n**Install with yarn**\n\n```sh\n$ yarn add wenk\n```\n\n## Usage\n\n<div align=\"center\">\n\t<img width=\"90%\" src=\"media/wenk.gif\" alt=\"wenk\">\n</div>\n\nSimply add the `data-wenk` attribute to your HTML with the text you want to display.\n```html\n<span data-wenk=\"This is a tooltip!\"></span>\n```\n\nYou can display the tooltip at different positions using the `data-wenk-pos` attribute or the `.wenk--*` class. The default position is at the top.\n```html\n<span data-wenk=\"I'm to the right!\" data-wenk-pos=\"right\">Wenk to the right!</span>\n<span data-wenk=\"I'm to the left!\" data-wenk-pos=\"left\">Wenk to the left!</span>\n<span data-wenk=\"I'm at the bottom!\" data-wenk-pos=\"bottom\">Wenk to the button!</span>\n<!-- Or -->\n<span class=\"wenk--right\" data-wenk=\"I'm to the right!\">Wenk to the right!</span>\n<span class=\"wenk--left\" data-wenk=\"I'm to the left!\">Wenk to the left!</span>\n<span class=\"wenk--bottom\" data-wenk=\"I'm at the bottom!\">Wenk to the button!</span>\n```\n\nThe width of the tooltip can also easily be changed.\n```html\n<span data-wenk=\"I'm small!\" data-wenk-length=\"small\">Small wenk!</span>\n<span data-wenk=\"I'm medium!\" data-wenk-length=\"medium\">Medium wenk!</span>\n<span data-wenk=\"I'm large!\" data-wenk-length=\"large\">Large wenk!</span>\n<span data-wenk=\"I fit!\" data-wenk-length=\"fit\">I fit just right!</span>\n<!-- Or -->\n<span data-wenk=\"I'm small!\" class=\"wenk-length--small\">Small wenk!</span>\n<span data-wenk=\"I'm medium!\" class=\"wenk-length--large\">Medium wenk!</span>\n<span data-wenk=\"I'm large!\" class=\"wenk-length--large\">Large wenk!</span>\n<span data-wenk=\"I fit!\" class=\"wenk-length--fit\">I fit just right!</span>\n```\n\nYou can also align your text within the container\n```html\n<p><span data-wenk=\"I'm right!\" class=\"wenk-align--right\">Wenk to the right!</span></p>\n<p><span data-wenk=\"I'm center!\" class=\"wenk-align--center\">Wenk in the center!</span></p>\n```\n\n## Demo\n\nCheck out the demo [here](https://tiaanduplessis.github.io/wenk/).\n\n## Support\n\nAccording to [doiuse.com](http://www.doiuse.com/) the following browsers are currently missing support:\n- IE (8,10)\n- Opera (12.1)\n- Opera Mini (5.0-8.0)\n- IE Mobile (10)\n\n## Contributing\n\nAll Contributions are welcome! Please open up an issue if you would like to help out. :smile:\n\n## License\n\nLicensed under the MIT License.\n"
  },
  {
    "path": "demo/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\t<title>Wenk - Lightweight pure CSS tooltip for the greater good</title>\n\n\t<link rel=\"icon\" type=\"image/png\" href=\"/favicon-32x32.png\" sizes=\"32x32\">\n\t<link rel=\"icon\" type=\"image/png\" href=\"/favicon-16x16.png\" sizes=\"16x16\">\n\n\t<!-- https://github.com/tiaanduplessis/barebones-css -->\n\t<link rel=\"stylesheet\" href=\"https://cdn.rawgit.com/tiaanduplessis/barebones-css/master/dist/barebones.min.css\">\n\n\t<link rel=\"stylesheet\" href=\"wenk.min.css\">\n\n\t<style>\n\t\tmain {\n\t\t\tmargin-top: 60px;\n\t\t}\n\n\t\tsection {\n\t\t\tmargin-bottom: 30px;\n\t\t\twidth: 80%;\n\t\t}\n\n\t\t.heart:after {\n\t\t\tcontent: \"\\2764\";\n\t\t\tcolor: #f45660;\n\t\t}\n\n\t\tfooter {\n\t\t\tmargin-top: 50px;\n\t\t}\n\n\t\t.button,\n\t\t.button--outline {\n\t\t\twidth: 170px;\n\t\t}\n\t</style>\n</head>\n\n<script>\n  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){\n  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),\n  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)\n  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');\n  ga('create', 'UA-87263048-1', 'auto');\n  ga('send', 'pageview');\n</script>\n\n<body>\n\t<!-- This HTML is ugly cuz I'm lazy -->\n\t<a href=\"https://github.com/tiaanduplessis/wenk\" class=\"github-corner\"><svg width=\"80\" height=\"80\" viewBox=\"0 0 250 250\" style=\"fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;\"><path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path><path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path><path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path></svg></a>\n\t<style>\n\t\t.github-corner:hover .octo-arm {\n\t\t\tanimation: octocat-wave 560ms ease-in-out\n\t\t}\n\n\t\t@keyframes octocat-wave {\n\t\t\t0%,\n\t\t\t100% {\n\t\t\t\ttransform: rotate(0)\n\t\t\t}\n\t\t\t20%,\n\t\t\t60% {\n\t\t\t\ttransform: rotate(-25deg)\n\t\t\t}\n\t\t\t40%,\n\t\t\t80% {\n\t\t\t\ttransform: rotate(10deg)\n\t\t\t}\n\t\t}\n\n\t\t@media (max-width:500px) {\n\t\t\t.github-corner:hover .octo-arm {\n\t\t\t\tanimation: none\n\t\t\t}\n\t\t\t.github-corner .octo-arm {\n\t\t\t\tanimation: octocat-wave 560ms ease-in-out\n\t\t\t}\n\t\t}\n\t</style>\n\t<main class=\"row center-xs container-fluid\">\n\t\t<section class=\"center-xs\">\n\t\t\t<h1>Wenk 😉</h1>\n\t\t\t<p>\n\t\t\t\tWenk is a Lightweight tooltip available in pure CSS, <a href=\"http://cssnext.io/\">cssnext</a> using <a href=\"http://postcss.org/\">PostCSS</a>, <a\n        href=\"http://lesscss.org/\">Less</a> or <a href=\"http://sass-lang.com/\">SCSS</a>. The <strong>minified version is just 733 bytes when gzipped</strong>.\n\t\t\t\tIt can easily be styled using <code>data-*</code> attributes or classes. By default the tooltip will adjust to fit the content.\n\t\t\t</p>\n\t\t</section>\n\t\t<section class=\"center-xs\">\n\t\t\t<h3>Display at different positions!</h3>\n\t\t\t<p><span data-wenk=\"👇 I'm at the top!\">Wenk to the top!</span></p>\n\t\t\t<p><span data-wenk=\"👉 I'm to the right!\" data-wenk-pos=\"right\">Wenk to the right!</span></p>\n\t\t\t<p><span data-wenk=\"I'm to the left! 👈\" data-wenk-pos=\"left\">Wenk to the left!</span></p>\n\t\t\t<p><span data-wenk=\"👆 I'm at the bottom!\" data-wenk-pos=\"bottom\">Wenk to the bottom!</span></p>\n\t\t</section>\n\t\t<section class=\"center-xs\">\n\t\t\t<h3>Display at different widths!</h3>\n\t\t\t<!--\n\t\t\t<p><span data-wenk=\"I'm small!\" data-wenk-length=\"small\">Small wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I'm medium!\" data-wenk-length=\"medium\">Medium wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I'm large!\" data-wenk-length=\"large\">Large wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I fit!\" data-wenk-length=\"fit\">I fit just right!</span></p>\n\t\t\t-->\n\t\t\t<p><span data-wenk=\"I'm small!\" class=\"wenk-length--small\">Small wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I'm medium!\" class=\"wenk-length--medium\">Medium wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I'm large!\" class=\"wenk-length--large\">Large wenk!</span></p>\n\t\t\t<p><span data-wenk=\"I fit!\" class=\"wenk-length--fit\">I fit just right!</span></p>\n\t\t</section>\n\t\t<section class=\"center-xs\">\n\t\t\t<h3>Display at different alignments!</h3>\n\t\t\t<p><span data-wenk=\"👉 I'm right!\" class=\"wenk-align--right wenk-length--large\">Right wenk!</span></p>\n\t\t\t<p><span data-wenk=\"👉 I'm center! 👈\" class=\"wenk-align--center wenk-length--large\">center wenk!</span></p>\n\t\t</section>\n\t\t<section>\n\t\t\t<a class=\"button\" href=\"https://github.com/tiaanduplessis/wenk/archive/v1.0.6.zip\" target=\"_blank\">DOWNLOAD</a>\n\t\t\t<a class=\"button--outline\" href=\"https://github.com/tiaanduplessis/wenk\" target=\"_blank\">View on GitHub</a>\n\t\t</section>\n\t</main>\n\t<footer class=\"row center-xs\" style=\"padding-bottom: 10rem\">\n\t\t<p>\n\t\t\tCreated with <span class=\"heart\"></span> by <a href=\"https://github.com/tiaanduplessis\" target=\"_blank\">Tiaan du Plessis</a> using <a href=\"https://tiaanduplessis.github.io/barebones-css/\">Barebones</a>.<br>\n\t\t</p>\n\t</footer>\n</body>\n\n</html>\n"
  },
  {
    "path": "dist/themes/material.css",
    "content": "/**\n * wenk - Lightweight tooltip for the greater good\n * @version v1.0.5\n * (c) 2017 Tiaan du Plessis @tiaanduplessis |\n * @link https://tiaanduplessis.github.io/wenk/\n * @license MIT\n */\n [data-wenk] {\n    position: relative\n}\n\n[data-wenk]:after {\n    position: absolute;\n    font-size: 13px;\n    content: attr(data-wenk);\n    padding: 12.8px;\n    padding: .4rem .85rem;\n\tborder-radius: 4px;\n    background-color: #607d8b;\n\tfont-family: 'Rubik', sans-serif;\n    color: #fff;\n    line-height: 20px;\n    line-height: 1.25rem;\n    text-align: left;\n    z-index: 999;\n    pointer-events: none;\n    display: block;\n    opacity: 0;\n    visibility: hidden;\n    -webkit-transition: all .25s ease-out;\n    transition: all .25s ease-out;\n    bottom: 100%;\n    left: 50%;\n    -webkit-transform: translate(-50%, 0);\n            transform: translate(-50%, 0);\n    white-space: pre;\n    width: auto\n}\n\n[data-wenk]:before {\n\tposition: absolute;\n    content: '';\n\topacity: 0;\n    width: .71428571em;\n    height: .71428571em;\n    background: #607d8b;\n\tleft: 50%;\n\ttop: -1.08em;\n    -webkit-transform: translateY(-5px) translateX(-50%) rotate(45deg);\n    transform: translateY(-5px) translateX(-50%) rotate(45deg);\n\t-webkit-transition: all .25s ease-out, opacity .05s;\n    transition: all .25s ease-out, opacity .05s;\n    z-index: 1000;\n}\n\n[data-wenk]:after {\n    opacity: 0\n}\n\n[data-wenk]:hover {\n    overflow: visible\n}\n\n[data-wenk]:hover:after {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n    -webkit-transform: translate(-50%, -10px);\n            transform: translate(-50%, -10px)\n}\n\n[data-wenk]:hover:before {\n\tdisplay: block;\n\topacity: 1;\n\tvisibility: visible;\n  top: -1.08em;\n\t-webkit-transform: translateX(-50%) rotate(45deg);\n            transform: translateX(-50%) rotate(45deg);\n\t-webkit-transition: all .25s ease-out, opacity .25s linear .15s;\n    transition: all .25s ease-out, opacity .25s linear .15s;\n}\n\n[data-wenk].wenk--bottom, [data-wenk][data-wenk-pos=\"bottom\"] {}\n\n[data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos=\"bottom\"]:after {\n    bottom: auto;\n    top: 100%;\n    left: 50%;\n    -webkit-transform: translate(-50%, 0);\n            transform: translate(-50%, 0);\n}\n\n[data-wenk].wenk--bottom:before, [data-wenk][data-wenk-pos=\"bottom\"]:before {\n\tz-index: 998;\n\ttop: auto;\n    bottom: -1.08em;\n\ttransform: translateX(-50%) rotate(45deg);\n}\n\n[data-wenk].wenk--bottom:hover, [data-wenk][data-wenk-pos=\"bottom\"]:hover {}\n\n[data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos=\"bottom\"]:hover:after {\n    -webkit-transform: translate(-50%, 10px);\n            transform: translate(-50%, 10px)\n}\n\n[data-wenk].wenk--left, [data-wenk][data-wenk-pos=\"left\"] {}\n\n[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos=\"left\"]:after {\n    bottom: auto;\n    left: auto;\n    top: 50%;\n    right: 100%;\n    -webkit-transform: translate(10px, -50%);\n            transform: translate(10px, -50%)\n}\n\n[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos=\"left\"]:before {\n\tz-index: 999;\n\ttop: 50%;\n\tleft: -1.08em;\n\ttransform: translateY(-50%) rotate(45deg);\n  box-shadow: 0 1px 0px 0px rgba(57, 57, 57, 0.26)\n}\n\n[data-wenk].wenk--left:hover, [data-wenk][data-wenk-pos=\"left\"]:hover {}\n\n[data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos=\"left\"]:hover:after {\n    -webkit-transform: translate(-10px, -50%);\n            transform: translate(-10px, -50%)\n}\n\n[data-wenk].wenk--right, [data-wenk][data-wenk-pos=\"right\"] {}\n\n[data-wenk].wenk--right:after, [data-wenk][data-wenk-pos=\"right\"]:after {\n    bottom: auto;\n    top: 50%;\n    left: 100%;\n    -webkit-transform: translate(-10px, -50%);\n            transform: translate(-10px, -50%);\n}\n\n[data-wenk].wenk--right:before, [data-wenk][data-wenk-pos=\"right\"]:before {\n\tz-index: 998;\n    top: 50%;\n    right: -1.08em;\n    left: auto;\n    transform: translateY(-50%) rotate(45deg);\n}\n\n[data-wenk].wenk--right:hover, [data-wenk][data-wenk-pos=\"right\"]:hover {}\n\n[data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos=\"right\"]:hover:after {\n    -webkit-transform: translate(10px, -50%);\n            transform: translate(10px, -50%)\n}\n\n[data-wenk][data-wenk-length=\"small\"]:after, [data-wenk].wenk-length--small:after {\n    white-space: normal;\n    width: 80px\n}\n\n[data-wenk][data-wenk-length=\"medium\"]:after, [data-wenk].wenk-length--medium:after {\n    white-space: normal;\n    width: 150px\n}\n\n[data-wenk][data-wenk-length=\"large\"]:after, [data-wenk].wenk-length--large:after {\n    white-space: normal;\n    width: 260px\n}\n\n[data-wenk][data-wenk-length=\"fit\"]:after, [data-wenk].wenk-length--fit:after {\n    white-space: normal;\n    width: 100%\n}\n\n[data-wenk][data-wenk-align=\"right\"]:after, [data-wenk].wenk-align--right:after {\n    text-align: right\n}\n\n[data-wenk][data-wenk-align=\"center\"]:after, [data-wenk].wenk-align--center:after {\n    text-align: center\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  },
  {
    "path": "dist/wenk.css",
    "content": "/**\n * wenk - Lightweight tooltip for the greater good\n * @version v1.0.6\n * (c) 2018 Tiaan du Plessis @tiaanduplessis |\n * @link https://tiaanduplessis.github.io/wenk/\n * @license MIT\n */\n [data-wenk] {\n    position: relative\n}\n\n[data-wenk]:after {\n    position: absolute;\n    font-size: 13px;\n    border-radius: .4rem;\n    content: attr(data-wenk);\n    padding: 12.8px;\n    padding: .8rem;\n    background-color: rgba(17, 17, 17, .8);\n    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .1);\n            box-shadow: 0 0 14px rgba(0, 0, 0, .1);\n    color: #fff;\n    line-height: 20px;\n    line-height: 1.25rem;\n    text-align: left;\n    z-index: 1;\n    pointer-events: none;\n    display: block;\n    opacity: 0;\n    visibility: hidden;\n    -webkit-transition: all .3s;\n    transition: all .3s;\n    bottom: 100%;\n    left: 50%;\n    -webkit-transform: translate(-50%, 10px);\n            transform: translate(-50%, 10px);\n    white-space: pre;\n    width: auto;\n}\n\n[data-wenk]:after {\n    opacity: 0;\n}\n\n[data-wenk]:hover {\n    overflow: visible\n}\n\n[data-wenk]:hover:after {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n    -webkit-transform: translate(-50%, -10px);\n            transform: translate(-50%, -10px);\n}\n\n[data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos=\"bottom\"]:after {\n    bottom: auto;\n    top: 100%;\n    left: 50%;\n    -webkit-transform: translate(-50%, -10px);\n            transform: translate(-50%, -10px);\n}\n\n[data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos=\"bottom\"]:hover:after {\n    -webkit-transform: translate(-50%, 10px);\n            transform: translate(-50%, 10px);\n}\n\n[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos=\"left\"]:after {\n    bottom: auto;\n    left: auto;\n    top: 50%;\n    right: 100%;\n    -webkit-transform: translate(10px, -50%);\n            transform: translate(10px, -50%);\n}\n\n[data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos=\"left\"]:hover:after {\n    -webkit-transform: translate(-10px, -50%);\n            transform: translate(-10px, -50%);\n}\n\n[data-wenk].wenk--right:after, [data-wenk][data-wenk-pos=\"right\"]:after {\n    bottom: auto;\n    top: 50%;\n    left: 100%;\n    -webkit-transform: translate(-10px, -50%);\n            transform: translate(-10px, -50%);\n}\n\n[data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos=\"right\"]:hover:after {\n    -webkit-transform: translate(10px, -50%);\n            transform: translate(10px, -50%);\n}\n\n[data-wenk][data-wenk-length=\"small\"]:after, [data-wenk].wenk-length--small:after {\n    white-space: normal;\n    width: 80px;\n}\n\n[data-wenk][data-wenk-length=\"medium\"]:after, [data-wenk].wenk-length--medium:after {\n    white-space: normal;\n    width: 150px;\n}\n\n[data-wenk][data-wenk-length=\"large\"]:after, [data-wenk].wenk-length--large:after {\n    white-space: normal;\n    width: 260px;\n}\n\n[data-wenk][data-wenk-length=\"fit\"]:after, [data-wenk].wenk-length--fit:after {\n    white-space: normal;\n    width: 100%;\n}\n\n[data-wenk][data-wenk-align=\"right\"]:after, [data-wenk].wenk-align--right:after {\n    text-align: right;\n}\n\n[data-wenk][data-wenk-align=\"center\"]:after, [data-wenk].wenk-align--center:after {\n    text-align: center;\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  },
  {
    "path": "dist/wenk.cssnext.css",
    "content": "/**\n * wenk - Lightweight tooltip for the greater good\n * @version v1.0.6\n * (c) 2018 Tiaan du Plessis @tiaanduplessis |\n * @link https://tiaanduplessis.github.io/wenk/\n * @license MIT\n */\n :root {\n    --font-size: 13px;\n    --font-color: #fff;\n    --bg-color: rgba(17, 17, 17, .8);\n    --length-small: 80px;\n    --length-medium: 150px;\n    --length-large: 260px;\n}\n\n[data-wenk] {\n    position: relative;\n    &:after {\n        position: absolute;\n        font-size: var(--font-size);\n        border-radius: .4rem;\n        content: attr(data-wenk);\n        padding: .8rem;\n        background-color: var(--bg-color);\n        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n        color: var(--font-color);\n        line-height: 1.25rem;\n        text-align: left;\n        z-index: 1;\n        pointer-events: none;\n        display: block;\n        opacity: 0;\n        visibility: hidden;\n        transition: all .3s;\n        bottom: 100%;\n        left: 50%;\n        transform: translate(-50%, 10px);\n        white-space: pre;\n        width: auto;\n    }\n    &:after {\n        opacity: 0;\n    }\n    &:hover {\n        overflow: visible;\n        &:after {\n            display: block;\n            opacity: 1;\n            visibility: visible;\n            transform: translate(-50%, -10px);\n        }\n    }\n\n    &.wenk--bottom, &[data-wenk-pos=\"bottom\"] {\n        &:after {\n            bottom: auto;\n            top: 100%;\n            left: 50%;\n            transform: translate(-50%, -10px);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-50%, 10px);\n            }\n        }\n    }\n\n    &.wenk--left, &[data-wenk-pos=\"left\"] {\n        &:after {\n            bottom: auto;\n            left: auto;\n            top: 50%;\n            right: 100%;\n            transform: translate(10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-10px, -50%);\n            }\n        }\n    }\n\n    &.wenk--right, &[data-wenk-pos=\"right\"] {\n        &:after {\n            bottom: auto;\n            top: 50%;\n            left: 100%;\n            transform: translate(-10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(10px, -50%);\n            }\n        }\n    }\n\n    &[data-wenk-length=\"small\"]:after, &.wenk-length--small:after {\n        white-space: normal;\n        width: var(--length-small);\n    }\n    &[data-wenk-length=\"medium\"]:after, &.wenk-length--medium:after {\n        white-space: normal;\n        width: var(--length-medium);\n    }\n    &[data-wenk-length=\"large\"]:after, &.wenk-length--large:after {\n        white-space: normal;\n        width: var(--length-large);\n    }\n    &[data-wenk-length=\"fit\"]:after, &.wenk-length--fit:after {\n        white-space: normal;\n        width: 100%;\n    }\n\n    &[data-wenk-align=\"right\"]:after, &.wenk-align--right:after {\n        text-align: right;\n    }\n    &[data-wenk-align=\"center\"]:after, &.wenk-align--center:after {\n        text-align: center;\n    }\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  },
  {
    "path": "dist/wenk.less",
    "content": "/**\n * wenk - Lightweight tooltip for the greater good\n * @version v1.0.6\n * (c) 2018 Tiaan du Plessis @tiaanduplessis |\n * @link https://tiaanduplessis.github.io/wenk/\n * @license MIT\n */\n @wenk-font-size: 13px;\n@wenk-font-color: #fff;\n@wenk-bg-color: rgba(17, 17, 17, .8);\n@wenk-length-small: 80px;\n@wenk-length-medium: 150px;\n@wenk-length-large: 260px;\n[data-wenk] {\n\tposition: relative;\n\t&:after {\n\t\tposition: absolute;\n\t\tfont-size: @wenk-font-size;\n\t\tborder-radius: .4rem;\n\t\tcontent: attr(data-wenk);\n\t\tpadding: .8rem;\n\t\tbackground-color: @wenk-bg-color;\n\t\tbox-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n\t\tcolor: @wenk-font-color;\n\t\tline-height: 1.25rem;\n\t\ttext-align: left;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all .3s;\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 10px);\n\t\twhite-space: pre;\n\t\twidth: auto;\n\t}\n\t&:after {\n\t\topacity: 0;\n\t}\n\t&:hover {\n\t\toverflow: visible;\n\t\t&:after {\n\t\t\tdisplay: block;\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t\ttransform: translate(-50%, -10px);\n\t\t}\n\t}\n\t/* ===[Tooltip Down]=== */\n\t&.wenk--bottom,\n\t&[data-wenk-pos=\"bottom\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -10px);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(-50%, 10px);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Tooltip Left]=== */\n\t&.wenk--left,\n\t&[data-wenk-pos=\"left\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\ttop: 50%;\n\t\t\tright: 100%;\n\t\t\ttransform: translate(10px, -50%);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(-10px, -50%);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Tooltip Right]=== */\n\t&.wenk--right,\n\t&[data-wenk-pos=\"right\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\ttop: 50%;\n\t\t\tleft: 100%;\n\t\t\ttransform: translate(-10px, -50%);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(10px, -50%);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Length of tooltip]=== */\n\t&[data-wenk-length=\"small\"]:after,\n\t&.wenk-length--small:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-small;\n\t}\n\t&[data-wenk-length=\"medium\"]:after,\n\t&.wenk-length--medium:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-medium;\n\t}\n\t&[data-wenk-length=\"large\"]:after,\n\t&.wenk-length--large:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-large;\n\t}\n\t&[data-wenk-length=\"fit\"]:after,\n\t&.wenk-length--fit:after {\n\t\twhite-space: normal;\n\t\twidth: 100%;\n\t}\n\t/* ===[Alignment of tooltip]=== */\n\t&[data-wenk-align=\"right\"]:after,\n\t&.wenk-align--right:after {\n\t\ttext-align: right;\n\t}\n\t&[data-wenk-align=\"center\"]:after,\n\t&.wenk-align--center:after {\n\t\ttext-align: center;\n\t}\n}\n\n[data-wenk=\"\"]:after {\n\tvisibility: hidden !important;\n}\n"
  },
  {
    "path": "dist/wenk.scss",
    "content": "/**\n * wenk - Lightweight tooltip for the greater good\n * @version v1.0.6\n * (c) 2018 Tiaan du Plessis @tiaanduplessis |\n * @link https://tiaanduplessis.github.io/wenk/\n * @license MIT\n */\n $wenk-font-size: 13px !default;\n$wenk-font-color: #fff !default;\n$wenk-bg-color: rgba(17, 17, 17, .8) !default;\n$wenk-length-small: 80px !default;\n$wenk-length-medium: 150px !default;\n$wenk-length-large: 260px !default;\n\n[data-wenk] {\n    position: relative;\n    &:after {\n        position: absolute;\n        font-size: $wenk-font-size;\n        border-radius: .4rem;\n        content: attr(data-wenk);\n        padding: .8rem;\n        background-color: $wenk-bg-color;\n        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n        color: $wenk-font-color;\n        line-height: 1.25rem;\n        text-align: left;\n        z-index: 1;\n        pointer-events: none;\n        display: block;\n        opacity: 0;\n        visibility: hidden;\n        transition: all .3s;\n        bottom: 100%;\n        left: 50%;\n        transform: translate(-50%, 10px);\n        white-space: pre;\n        width: auto;\n    }\n    &:after {\n        opacity: 0;\n    }\n    &:hover {\n        overflow: visible;\n        &:after {\n            display: block;\n            opacity: 1;\n            visibility: visible;\n            transform: translate(-50%, -10px);\n        }\n    }\n\n    /* ===[Tooltip Down]=== */\n    &.wenk--bottom, &[data-wenk-pos=\"bottom\"] {\n        &:after {\n            bottom: auto;\n            top: 100%;\n            left: 50%;\n            transform: translate(-50%, -10px);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-50%, 10px);\n            }\n        }\n    }\n\n    /* ===[Tooltip Left]=== */\n    &.wenk--left, &[data-wenk-pos=\"left\"] {\n        &:after {\n            bottom: auto;\n            left: auto;\n            top: 50%;\n            right: 100%;\n            transform: translate(10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-10px, -50%);\n            }\n        }\n    }\n\n    /* ===[Tooltip Right]=== */\n    &.wenk--right, &[data-wenk-pos=\"right\"] {\n        &:after {\n            bottom: auto;\n            top: 50%;\n            left: 100%;\n            transform: translate(-10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(10px, -50%);\n            }\n        }\n    }\n\n    /* ===[Length of tooltip]=== */\n    &[data-wenk-length=\"small\"]:after, &.wenk-length--small:after {\n        white-space: normal;\n        width: $wenk-length-small;\n    }\n    &[data-wenk-length=\"medium\"]:after, &.wenk-length--medium:after {\n        white-space: normal;\n        width: $wenk-length-medium;\n    }\n    &[data-wenk-length=\"large\"]:after, &.wenk-length--large:after {\n        white-space: normal;\n        width: $wenk-length-large;\n    }\n    &[data-wenk-length=\"fit\"]:after, &.wenk-length--fit:after {\n        white-space: normal;\n        width: 100%;\n    }\n\n    /* ===[Alignment of tooltip]=== */\n    &[data-wenk-align=\"right\"]:after, &.wenk-align--right:after {\n        text-align: right;\n    }\n    &[data-wenk-align=\"center\"]:after, &.wenk-align--center:after {\n        text-align: center;\n    }\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  },
  {
    "path": "gulpfile.js",
    "content": "const gulp = require('gulp');\nconst gulpLoadPlugins = require('gulp-load-plugins');\nconst browserSync = require('browser-sync');\nconst del = require('del');\nconst $ = gulpLoadPlugins();\nconst pkg = require('./package.json');\nconst reload = browserSync.reload;\n\n// Pretty banner\nconst banner = ['/**',\n    ' * <%= pkg.name %> - <%= pkg.description %>',\n    ' * @version v<%= pkg.version %>',\n    ' * (c) ' + new Date().getFullYear() + ' <%= pkg.author %> |',\n    ' * @link <%= pkg.homepage %>',\n    ' * @license <%= pkg.license %>',\n    ' */',\n    ' '\n].join('\\n');\n\n// Default paths\nconst paths = {\n    output: 'dist/',\n    input: {\n      css: 'src/wenk.css',\n      less: 'src/wenk.less',\n      scss: 'src/wenk.scss'\n    }\n};\n\n// Default postcss plugins\nconst defaultPlugins = [\n    require('postcss-cssnext')()\n];\n\n// Get size of all files in output dir\ngulp.task('size', () => {\n    return gulp.src(`${paths.output}**/*`)\n        .pipe($.size({\n            gzip: true,\n            showFiles: true\n        }));\n});\n\n// Clean output dir\ngulp.task('clean', () => {\n    return del(`${paths.output}**/*`);\n});\n\n// Build minified CSS\ngulp.task('styles:minified', () => {\n    return gulp.src(paths.input.css)\n        .pipe($.plumber())\n        .pipe($.postcss(defaultPlugins.concat([\n            require('cssnano')()\n        ])))\n        .pipe($.rename({\n            extname: '.min.css'\n        }))\n        .pipe($.header(banner, {\n            pkg\n        }))\n        .pipe(gulp.dest(paths.output))\n        .pipe(gulp.dest('./demo'))\n});\n\n// Build CSS\ngulp.task('styles', () => {\n    return gulp.src(paths.input.css)\n        .pipe($.plumber())\n        .pipe($.postcss(defaultPlugins))\n        .pipe($.header(banner, {\n            pkg\n        }))\n        .pipe(gulp.dest(paths.output))\n});\n\n// Less\ngulp.task('styles:less', () => {\n  return gulp.src(paths.input.less)\n    .pipe($.header(banner, {\n        pkg\n    }))\n    .pipe(gulp.dest(paths.output))\n})\n\n// SCSS\ngulp.task('styles:scss', () => {\n  return gulp.src(paths.input.scss)\n    .pipe($.header(banner, {\n        pkg\n    }))\n    .pipe(gulp.dest(paths.output))\n})\n\n// cssnext\ngulp.task('styles:cssnext', () => {\n  return gulp.src(paths.input.css)\n    .pipe($.header(banner, {\n        pkg\n    }))\n    .pipe($.rename({\n        extname: '.cssnext.css'\n    }))\n    .pipe(gulp.dest(paths.output))\n})\n\ngulp.task('build', ['styles', 'styles:minified', 'styles:less', 'styles:scss', 'styles:cssnext']);\n\ngulp.task('watch', () => {\n    gulp.watch([paths.input.css, paths.input.less, paths.input.scss], ['clean', 'build'])\n});\n\ngulp.task('demo', ['clean', 'build'], () => {\n  browserSync({\n    server: './demo'\n  });\n\n  gulp.watch([paths.input.css, paths.input.less, paths.input.scss], ['build']);\n  gulp.watch('./demo/**/*').on('change', reload);\n});\n\ngulp.task('default', ['build', 'watch']);\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"wenk\",\n  \"version\": \"1.0.8\",\n  \"description\": \"Lightweight tooltip for the greater good\",\n  \"main\": \"dist/wenk.css\",\n  \"style\": \"dist/wenk.css\",\n  \"scripts\": {\n    \"test\": \"echo nope\",\n    \"build\": \"gulp build\",\n    \"start\": \"gulp demo\",\n    \"dev\": \"gulp\",\n    \"size\": \"gulp size\",\n    \"deploy\": \"gulp build && gh-pages -d demo\"\n  },\n  \"keywords\": [\n    \"wenk\",\n    \"pure CSS\",\n    \"tooltip\",\n    \"lightweight\",\n    \"hint\"\n  ],\n  \"files\": [\n    \"dist\"\n  ],\n  \"homepage\": \"https://tiaanduplessis.github.io/wenk/\",\n  \"author\": \"Tiaan du Plessis @tiaanduplessis\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"browser-sync\": \"^2.23.6\",\n    \"cssnano\": \"^4.0.0\",\n    \"del\": \"^3.0.0\",\n    \"gh-pages\": \"^2.0.0\",\n    \"gulp\": \"^4.0.0\",\n    \"gulp-header\": \"^2.0.1\",\n    \"gulp-load-plugins\": \"^1.5.0\",\n    \"gulp-plumber\": \"^1.2.0\",\n    \"gulp-postcss\": \"^8.0.0\",\n    \"gulp-rename\": \"^1.2.2\",\n    \"gulp-size\": \"^3.0.0\",\n    \"postcss-cssnext\": \"^3.1.0\"\n  }\n}\n"
  },
  {
    "path": "src/wenk.css",
    "content": ":root {\n    --font-size: 13px;\n    --font-color: #fff;\n    --bg-color: rgba(17, 17, 17, .8);\n    --length-small: 80px;\n    --length-medium: 150px;\n    --length-large: 260px;\n}\n\n[data-wenk] {\n    position: relative;\n    &:after {\n        position: absolute;\n        font-size: var(--font-size);\n        border-radius: .4rem;\n        content: attr(data-wenk);\n        padding: .8rem;\n        background-color: var(--bg-color);\n        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n        color: var(--font-color);\n        line-height: 1.25rem;\n        text-align: left;\n        z-index: 1;\n        pointer-events: none;\n        display: block;\n        opacity: 0;\n        visibility: hidden;\n        transition: all .3s;\n        bottom: 100%;\n        left: 50%;\n        transform: translate(-50%, 10px);\n        white-space: pre;\n        width: auto;\n    }\n    &:after {\n        opacity: 0;\n    }\n    &:hover {\n        overflow: visible;\n        &:after {\n            display: block;\n            opacity: 1;\n            visibility: visible;\n            transform: translate(-50%, -10px);\n        }\n    }\n\n    &.wenk--bottom, &[data-wenk-pos=\"bottom\"] {\n        &:after {\n            bottom: auto;\n            top: 100%;\n            left: 50%;\n            transform: translate(-50%, -10px);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-50%, 10px);\n            }\n        }\n    }\n\n    &.wenk--left, &[data-wenk-pos=\"left\"] {\n        &:after {\n            bottom: auto;\n            left: auto;\n            top: 50%;\n            right: 100%;\n            transform: translate(10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-10px, -50%);\n            }\n        }\n    }\n\n    &.wenk--right, &[data-wenk-pos=\"right\"] {\n        &:after {\n            bottom: auto;\n            top: 50%;\n            left: 100%;\n            transform: translate(-10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(10px, -50%);\n            }\n        }\n    }\n\n    &[data-wenk-length=\"small\"]:after, &.wenk-length--small:after {\n        white-space: normal;\n        width: var(--length-small);\n    }\n    &[data-wenk-length=\"medium\"]:after, &.wenk-length--medium:after {\n        white-space: normal;\n        width: var(--length-medium);\n    }\n    &[data-wenk-length=\"large\"]:after, &.wenk-length--large:after {\n        white-space: normal;\n        width: var(--length-large);\n    }\n    &[data-wenk-length=\"fit\"]:after, &.wenk-length--fit:after {\n        white-space: normal;\n        width: 100%;\n    }\n\n    &[data-wenk-align=\"right\"]:after, &.wenk-align--right:after {\n        text-align: right;\n    }\n    &[data-wenk-align=\"center\"]:after, &.wenk-align--center:after {\n        text-align: center;\n    }\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  },
  {
    "path": "src/wenk.less",
    "content": "@wenk-font-size: 13px;\n@wenk-font-color: #fff;\n@wenk-bg-color: rgba(17, 17, 17, .8);\n@wenk-length-small: 80px;\n@wenk-length-medium: 150px;\n@wenk-length-large: 260px;\n[data-wenk] {\n\tposition: relative;\n\t&:after {\n\t\tposition: absolute;\n\t\tfont-size: @wenk-font-size;\n\t\tborder-radius: .4rem;\n\t\tcontent: attr(data-wenk);\n\t\tpadding: .8rem;\n\t\tbackground-color: @wenk-bg-color;\n\t\tbox-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n\t\tcolor: @wenk-font-color;\n\t\tline-height: 1.25rem;\n\t\ttext-align: left;\n\t\tz-index: 1;\n\t\tpointer-events: none;\n\t\tdisplay: block;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: all .3s;\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 10px);\n\t\twhite-space: pre;\n\t\twidth: auto;\n\t}\n\t&:after {\n\t\topacity: 0;\n\t}\n\t&:hover {\n\t\toverflow: visible;\n\t\t&:after {\n\t\t\tdisplay: block;\n\t\t\topacity: 1;\n\t\t\tvisibility: visible;\n\t\t\ttransform: translate(-50%, -10px);\n\t\t}\n\t}\n\t/* ===[Tooltip Down]=== */\n\t&.wenk--bottom,\n\t&[data-wenk-pos=\"bottom\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\ttransform: translate(-50%, -10px);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(-50%, 10px);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Tooltip Left]=== */\n\t&.wenk--left,\n\t&[data-wenk-pos=\"left\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\ttop: 50%;\n\t\t\tright: 100%;\n\t\t\ttransform: translate(10px, -50%);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(-10px, -50%);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Tooltip Right]=== */\n\t&.wenk--right,\n\t&[data-wenk-pos=\"right\"] {\n\t\t&:after {\n\t\t\tbottom: auto;\n\t\t\ttop: 50%;\n\t\t\tleft: 100%;\n\t\t\ttransform: translate(-10px, -50%);\n\t\t}\n\t\t&:hover {\n\t\t\t&:after {\n\t\t\t\ttransform: translate(10px, -50%);\n\t\t\t}\n\t\t}\n\t}\n\t/* ===[Length of tooltip]=== */\n\t&[data-wenk-length=\"small\"]:after,\n\t&.wenk-length--small:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-small;\n\t}\n\t&[data-wenk-length=\"medium\"]:after,\n\t&.wenk-length--medium:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-medium;\n\t}\n\t&[data-wenk-length=\"large\"]:after,\n\t&.wenk-length--large:after {\n\t\twhite-space: normal;\n\t\twidth: @wenk-length-large;\n\t}\n\t&[data-wenk-length=\"fit\"]:after,\n\t&.wenk-length--fit:after {\n\t\twhite-space: normal;\n\t\twidth: 100%;\n\t}\n\t/* ===[Alignment of tooltip]=== */\n\t&[data-wenk-align=\"right\"]:after,\n\t&.wenk-align--right:after {\n\t\ttext-align: right;\n\t}\n\t&[data-wenk-align=\"center\"]:after,\n\t&.wenk-align--center:after {\n\t\ttext-align: center;\n\t}\n}\n\n[data-wenk=\"\"]:after {\n\tvisibility: hidden !important;\n}\n"
  },
  {
    "path": "src/wenk.scss",
    "content": "$wenk-font-size: 13px !default;\n$wenk-font-color: #fff !default;\n$wenk-bg-color: rgba(17, 17, 17, .8) !default;\n$wenk-length-small: 80px !default;\n$wenk-length-medium: 150px !default;\n$wenk-length-large: 260px !default;\n\n[data-wenk] {\n    position: relative;\n    &:after {\n        position: absolute;\n        font-size: $wenk-font-size;\n        border-radius: .4rem;\n        content: attr(data-wenk);\n        padding: .8rem;\n        background-color: $wenk-bg-color;\n        box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);\n        color: $wenk-font-color;\n        line-height: 1.25rem;\n        text-align: left;\n        z-index: 1;\n        pointer-events: none;\n        display: block;\n        opacity: 0;\n        visibility: hidden;\n        transition: all .3s;\n        bottom: 100%;\n        left: 50%;\n        transform: translate(-50%, 10px);\n        white-space: pre;\n        width: auto;\n    }\n    &:after {\n        opacity: 0;\n    }\n    &:hover {\n        overflow: visible;\n        &:after {\n            display: block;\n            opacity: 1;\n            visibility: visible;\n            transform: translate(-50%, -10px);\n        }\n    }\n\n    /* ===[Tooltip Down]=== */\n    &.wenk--bottom, &[data-wenk-pos=\"bottom\"] {\n        &:after {\n            bottom: auto;\n            top: 100%;\n            left: 50%;\n            transform: translate(-50%, -10px);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-50%, 10px);\n            }\n        }\n    }\n\n    /* ===[Tooltip Left]=== */\n    &.wenk--left, &[data-wenk-pos=\"left\"] {\n        &:after {\n            bottom: auto;\n            left: auto;\n            top: 50%;\n            right: 100%;\n            transform: translate(10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(-10px, -50%);\n            }\n        }\n    }\n\n    /* ===[Tooltip Right]=== */\n    &.wenk--right, &[data-wenk-pos=\"right\"] {\n        &:after {\n            bottom: auto;\n            top: 50%;\n            left: 100%;\n            transform: translate(-10px, -50%);\n        }\n        &:hover {\n            &:after {\n                transform: translate(10px, -50%);\n            }\n        }\n    }\n\n    /* ===[Length of tooltip]=== */\n    &[data-wenk-length=\"small\"]:after, &.wenk-length--small:after {\n        white-space: normal;\n        width: $wenk-length-small;\n    }\n    &[data-wenk-length=\"medium\"]:after, &.wenk-length--medium:after {\n        white-space: normal;\n        width: $wenk-length-medium;\n    }\n    &[data-wenk-length=\"large\"]:after, &.wenk-length--large:after {\n        white-space: normal;\n        width: $wenk-length-large;\n    }\n    &[data-wenk-length=\"fit\"]:after, &.wenk-length--fit:after {\n        white-space: normal;\n        width: 100%;\n    }\n\n    /* ===[Alignment of tooltip]=== */\n    &[data-wenk-align=\"right\"]:after, &.wenk-align--right:after {\n        text-align: right;\n    }\n    &[data-wenk-align=\"center\"]:after, &.wenk-align--center:after {\n        text-align: center;\n    }\n}\n\n[data-wenk=\"\"]:after {\n    visibility: hidden !important;\n}\n"
  }
]