mirror of
https://github.com/github/choosealicense.com
synced 2024-12-22 12:50:24 +01:00
1140, add hint.css
This commit is contained in:
Ahmed Ejaz
parent
566792d3f6
commit
1fea611ed6
27
assets/vendor/hint.css/.bower.json
vendored
Normal file
27
assets/vendor/hint.css/.bower.json
vendored
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "hint.css",
|
||||||
|
"main": "hint.min.css",
|
||||||
|
"author": "Kushagra Gour",
|
||||||
|
"ignore": [
|
||||||
|
"CONTRIBUTING.md",
|
||||||
|
"Gruntfile.js"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"hint",
|
||||||
|
"tooltip",
|
||||||
|
"tooltips",
|
||||||
|
"ui"
|
||||||
|
],
|
||||||
|
"homepage": "https://github.com/chinchang/hint.css",
|
||||||
|
"version": "2.7.0",
|
||||||
|
"_release": "2.7.0",
|
||||||
|
"_resolution": {
|
||||||
|
"type": "version",
|
||||||
|
"tag": "v2.7.0",
|
||||||
|
"commit": "9fa90f8c94a23c61307b70ae5146a34f1d88ae46"
|
||||||
|
},
|
||||||
|
"_source": "https://github.com/chinchang/hint.css.git",
|
||||||
|
"_target": "^2.7.0",
|
||||||
|
"_originalSource": "hint.css",
|
||||||
|
"_direct": true
|
||||||
|
}
|
||||||
10
assets/vendor/hint.css/.editorconfig
vendored
Normal file
10
assets/vendor/hint.css/.editorconfig
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_style = tab
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
4
assets/vendor/hint.css/.github/FUNDING.yml
vendored
Normal file
4
assets/vendor/hint.css/.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# These are supported funding model platforms
|
||||||
|
|
||||||
|
patreon: kushagra
|
||||||
|
custom: https://paypal.me/kushagragour
|
||||||
5
assets/vendor/hint.css/.gitignore
vendored
Normal file
5
assets/vendor/hint.css/.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.sass-cache
|
||||||
|
node_modules/
|
||||||
|
hint.sublime-project
|
||||||
|
hint.sublime-workspace
|
||||||
|
*.map
|
||||||
4
assets/vendor/hint.css/.prettierignore
vendored
Normal file
4
assets/vendor/hint.css/.prettierignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
hint.css
|
||||||
|
hint.min.css
|
||||||
|
hint.base.css
|
||||||
|
hint.base.min.css
|
||||||
21
assets/vendor/hint.css/LICENSE
vendored
Normal file
21
assets/vendor/hint.css/LICENSE
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2021 Kushagra Gour
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
123
assets/vendor/hint.css/README.md
vendored
Normal file
123
assets/vendor/hint.css/README.md
vendored
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
# Hint.css [](https://badge.fury.io/js/hint.css)  [](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 
|
||||||
|
*A tooltip library in CSS for your lovely websites*
|
||||||
|
|
||||||
|
[Demo](https://kushagra.dev/lab/hint/) • [Get started](#get-started) • [Who's using this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#faqs) • [Contributing](#contributing) • [License](#license)
|
||||||
|
|
||||||
|
`hint.css` is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses **aria-label**/**data-* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Get Started
|
||||||
|
|
||||||
|
Get the library using one of the following ways:
|
||||||
|
|
||||||
|
1. **GitHub**
|
||||||
|
|
||||||
|
Full build
|
||||||
|
- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
|
||||||
|
- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
|
||||||
|
|
||||||
|
Base build *(Does not include color themes and fancy effects)*
|
||||||
|
- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css
|
||||||
|
- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css
|
||||||
|
|
||||||
|
2. **Bower** : `bower install hint.css`
|
||||||
|
|
||||||
|
3. **npm**: `npm install --save hint.css`
|
||||||
|
|
||||||
|
4. **CDN**: [https://www.jsdelivr.com/package/npm/hint.css](https://www.jsdelivr.com/package/npm/hint.css) or [https://cdnjs.com/libraries/hint.css](https://cdnjs.com/libraries/hint.css)
|
||||||
|
|
||||||
|
Now include the library in the ``HEAD`` tag of your page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="hint.css" />
|
||||||
|
```
|
||||||
|
or
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="hint.min.css" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, all you need to do is give your element any position class and tooltip text using the `aria-label` attribute.
|
||||||
|
Note, if you don't want to use `aria-label` attribute, you can also specify the tooltip text using the `data-hint` attribute, but its recommended to use `aria-label` in support of accessibility. [Read more about aria-label](https://webaccessibility.withgoogle.com/unit?unit=6&lesson=10).
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
Use it with other available modifiers in various combinations. Available modifiers:
|
||||||
|
- *Colors* - `hint--error`, `hint--info`, `hint--warning`, `hint--success`
|
||||||
|
- *Sizes* - `hint--small`, `hint--medium`, `hint--large`
|
||||||
|
- `hint--always`
|
||||||
|
- `hint--rounded`
|
||||||
|
- `hint--no-animate`
|
||||||
|
- `hint--bounce`
|
||||||
|
- `hint-no-arrow`
|
||||||
|
|
||||||
|
## Upgrading from v1.x
|
||||||
|
|
||||||
|
If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.
|
||||||
|
|
||||||
|
## Changing the prefix for class names
|
||||||
|
|
||||||
|
Don't like BEM naming (`hint--`) or want to use your own prefix for the class names?
|
||||||
|
|
||||||
|
Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable.
|
||||||
|
To generate the css file, please read the [contributing page](./CONTRIBUTING.md).
|
||||||
|
|
||||||
|
## Who's Using This?
|
||||||
|
- [Webflow Playground](http://playground.webflow.com/)
|
||||||
|
- [Panda chrome app](http://usepanda.com/)
|
||||||
|
- [Fiverr](https://www.fiverr.com/)
|
||||||
|
- [Stackshare](http://stackshare.io/)
|
||||||
|
- [Siftery](https://siftery.com/)
|
||||||
|
- [LessPass](https://lesspass.com/#/)
|
||||||
|
- [Tridiv](http://tridiv.com/)
|
||||||
|
- [Alm - TypeScript IDE](http://alm.tools/)
|
||||||
|
- [Prototyp](http://prototyp.in/)
|
||||||
|
- [Tradus](http://tradus.com/)
|
||||||
|
- [Web Maker](https://webmakerapp.com)
|
||||||
|
- [Tolks](https://tolks.io)
|
||||||
|
- [Formspree](http://formspree.io/)
|
||||||
|
- [codeMagic](http://codemagic.gr/)
|
||||||
|
|
||||||
|
Are you using **hint.css** in your awesome project too? Just tweet it out to [@hint_css](https://twitter.com/hint_css) or let us know on the [mailing list](mailto:hintcss@googlegroups.com).
|
||||||
|
|
||||||
|
## Browser Support
|
||||||
|
**hint.css** works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present.
|
||||||
|
|
||||||
|
- Chrome - basic + transition effects
|
||||||
|
- Firefox - basic + transition effects
|
||||||
|
- Opera - basic
|
||||||
|
- Safari - basic
|
||||||
|
- IE 10+ - basic + transition effects
|
||||||
|
- IE 8 & 9 - basic
|
||||||
|
|
||||||
|
### FAQs
|
||||||
|
|
||||||
|
Checkout the [FAQ Wiki](https://github.com/chinchang/hint.css/wiki/Frequently-Asked-Questions) for some common gotchas to be aware of while using **hint.css**.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
`hint.css` is developed in SASS and the source files can be found in the `src/` directory.
|
||||||
|
|
||||||
|
If you would like to create more types of tooltips/ fix bugs/ enhance the library etc. you are more than welcome to submit your pull requests.
|
||||||
|
|
||||||
|
[Read more on contributing](./CONTRIBUTING.md).
|
||||||
|
|
||||||
|
## Changelog & Updates
|
||||||
|
See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog).
|
||||||
|
|
||||||
|
To catch all updates and discussion, join the mailing list: [**hintcss@googlegroups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss).
|
||||||
|
|
||||||
|
Or follow on twitter: [**@hint_css**](https://twitter.com/hint_css)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Hint.css is free for personal and commercial use under the MIT License.
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardry](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) through whose work I came to know about it :)
|
||||||
|
|
||||||
|
# Sponsor
|
||||||
|
[](https://cssbattle.dev)
|
||||||
15
assets/vendor/hint.css/bower.json
vendored
Normal file
15
assets/vendor/hint.css/bower.json
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"name": "hint.css",
|
||||||
|
"main": "hint.min.css",
|
||||||
|
"author": "Kushagra Gour",
|
||||||
|
"ignore": [
|
||||||
|
"CONTRIBUTING.md",
|
||||||
|
"Gruntfile.js"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"hint",
|
||||||
|
"tooltip",
|
||||||
|
"tooltips",
|
||||||
|
"ui"
|
||||||
|
]
|
||||||
|
}
|
||||||
13
assets/vendor/hint.css/component.json
vendored
Normal file
13
assets/vendor/hint.css/component.json
vendored
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "hint.css",
|
||||||
|
"repo": "chinchang/hint.css",
|
||||||
|
"description": "A tooltip library in CSS for your lovely websites.",
|
||||||
|
"version": "2.6.0",
|
||||||
|
"keywords": ["tooltip", "css"],
|
||||||
|
"dependencies": {},
|
||||||
|
"development": {},
|
||||||
|
"styles": [
|
||||||
|
"hint.min.css"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
466
assets/vendor/hint.css/hint.base.css
vendored
Normal file
466
assets/vendor/hint.css/hint.base.css
vendored
Normal file
@ -0,0 +1,466 @@
|
|||||||
|
/*! Hint.css (base version) - v2.7.0 - 2021-10-01
|
||||||
|
* https://kushagra.dev/lab/hint/
|
||||||
|
* Copyright (c) 2021 Kushagra Gour */
|
||||||
|
|
||||||
|
/*-------------------------------------*\
|
||||||
|
HINT.css - A CSS tooltip library
|
||||||
|
\*-------------------------------------*/
|
||||||
|
/**
|
||||||
|
* HINT.css is a tooltip library made in pure CSS.
|
||||||
|
*
|
||||||
|
* Source: https://github.com/chinchang/hint.css
|
||||||
|
* Demo: http://kushagragour.in/lab/hint/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* source: hint-core.scss
|
||||||
|
*
|
||||||
|
* Defines the basic styling for the tooltip.
|
||||||
|
* Each tooltip is made of 2 parts:
|
||||||
|
* 1) body (:after)
|
||||||
|
* 2) arrow (:before)
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint
|
||||||
|
*/
|
||||||
|
[class*="hint--"] {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
/**
|
||||||
|
* tooltip arrow
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* tooltip body
|
||||||
|
*/ }
|
||||||
|
[class*="hint--"]:before, [class*="hint--"]:after {
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1000000;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-transition: 0.3s ease;
|
||||||
|
-moz-transition: 0.3s ease;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
-webkit-transition-delay: 0ms;
|
||||||
|
-moz-transition-delay: 0ms;
|
||||||
|
transition-delay: 0ms; }
|
||||||
|
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1; }
|
||||||
|
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||||
|
-webkit-transition-delay: 100ms;
|
||||||
|
-moz-transition-delay: 100ms;
|
||||||
|
transition-delay: 100ms; }
|
||||||
|
[class*="hint--"]:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: transparent;
|
||||||
|
border: 6px solid transparent;
|
||||||
|
z-index: 1000001; }
|
||||||
|
[class*="hint--"]:after {
|
||||||
|
background: #383838;
|
||||||
|
color: white;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 12px;
|
||||||
|
white-space: nowrap; }
|
||||||
|
[class*="hint--"][aria-label]:after {
|
||||||
|
content: attr(aria-label); }
|
||||||
|
[class*="hint--"][data-hint]:after {
|
||||||
|
content: attr(data-hint); }
|
||||||
|
|
||||||
|
[aria-label='']:before, [aria-label='']:after,
|
||||||
|
[data-hint='']:before,
|
||||||
|
[data-hint='']:after {
|
||||||
|
display: none !important; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-position.scss
|
||||||
|
*
|
||||||
|
* Defines the positoning logic for the tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--top
|
||||||
|
* 2) hint--bottom
|
||||||
|
* 3) hint--left
|
||||||
|
* 4) hint--right
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* set default color for tooltip arrows
|
||||||
|
*/
|
||||||
|
.hint--top-left:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--top-right:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--top:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--left:before {
|
||||||
|
border-left-color: #383838; }
|
||||||
|
|
||||||
|
.hint--right:before {
|
||||||
|
border-right-color: #383838; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top tooltip
|
||||||
|
*/
|
||||||
|
.hint--top:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top:before, .hint--top:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top:after {
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.hint--top:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top:hover:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(-8px);
|
||||||
|
transform: translateX(-50%) translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom:before, .hint--bottom:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom:after {
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.hint--bottom:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom:hover:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(8px);
|
||||||
|
transform: translateX(-50%) translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* right tooltip
|
||||||
|
*/
|
||||||
|
.hint--right:before {
|
||||||
|
margin-left: -11px;
|
||||||
|
margin-bottom: -6px; }
|
||||||
|
|
||||||
|
.hint--right:after {
|
||||||
|
margin-bottom: -14px; }
|
||||||
|
|
||||||
|
.hint--right:before, .hint--right:after {
|
||||||
|
left: 100%;
|
||||||
|
bottom: 50%; }
|
||||||
|
|
||||||
|
.hint--right:hover:before {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
.hint--right:hover:after {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* left tooltip
|
||||||
|
*/
|
||||||
|
.hint--left:before {
|
||||||
|
margin-right: -11px;
|
||||||
|
margin-bottom: -6px; }
|
||||||
|
|
||||||
|
.hint--left:after {
|
||||||
|
margin-bottom: -14px; }
|
||||||
|
|
||||||
|
.hint--left:before, .hint--left:after {
|
||||||
|
right: 100%;
|
||||||
|
bottom: 50%; }
|
||||||
|
|
||||||
|
.hint--left:hover:before {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--left:hover:after {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-left tooltip
|
||||||
|
*/
|
||||||
|
.hint--top-left:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top-left:before, .hint--top-left:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top-left:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top-left:after {
|
||||||
|
-webkit-transform: translateX(-100%);
|
||||||
|
-moz-transform: translateX(-100%);
|
||||||
|
transform: translateX(-100%); }
|
||||||
|
|
||||||
|
.hint--top-left:after {
|
||||||
|
margin-left: 12px; }
|
||||||
|
|
||||||
|
.hint--top-left:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top-left:hover:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(-8px);
|
||||||
|
transform: translateX(-100%) translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-right tooltip
|
||||||
|
*/
|
||||||
|
.hint--top-right:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top-right:before, .hint--top-right:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top-right:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top-right:after {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
transform: translateX(0); }
|
||||||
|
|
||||||
|
.hint--top-right:after {
|
||||||
|
margin-left: -12px; }
|
||||||
|
|
||||||
|
.hint--top-right:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top-right:hover:after {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-left tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before, .hint--bottom-left:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom-left:after {
|
||||||
|
-webkit-transform: translateX(-100%);
|
||||||
|
-moz-transform: translateX(-100%);
|
||||||
|
transform: translateX(-100%); }
|
||||||
|
|
||||||
|
.hint--bottom-left:after {
|
||||||
|
margin-left: 12px; }
|
||||||
|
|
||||||
|
.hint--bottom-left:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom-left:hover:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(8px);
|
||||||
|
transform: translateX(-100%) translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-right tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before, .hint--bottom-right:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom-right:after {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
transform: translateX(0); }
|
||||||
|
|
||||||
|
.hint--bottom-right:after {
|
||||||
|
margin-left: -12px; }
|
||||||
|
|
||||||
|
.hint--bottom-right:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom-right:hover:after {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-sizes.scss
|
||||||
|
*
|
||||||
|
* Defines width restricted tooltips that can span
|
||||||
|
* across multiple lines.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--small
|
||||||
|
* 2) hint--medium
|
||||||
|
* 3) hint--large
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--small:after,
|
||||||
|
.hint--medium:after,
|
||||||
|
.hint--large:after {
|
||||||
|
white-space: normal;
|
||||||
|
line-height: 1.4em;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.hint--small:after {
|
||||||
|
width: 80px; }
|
||||||
|
|
||||||
|
.hint--medium:after {
|
||||||
|
width: 150px; }
|
||||||
|
|
||||||
|
.hint--large:after {
|
||||||
|
width: 300px; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-always.scss
|
||||||
|
*
|
||||||
|
* Defines a persisted tooltip which shows always.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--always
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--always:after, .hint--always:before {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
|
.hint--always.hint--top:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(-8px);
|
||||||
|
transform: translateX(-50%) translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-left:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-left:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(-8px);
|
||||||
|
transform: translateX(-100%) translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-right:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-right:after {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(8px);
|
||||||
|
transform: translateX(-50%) translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-left:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-left:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(8px);
|
||||||
|
transform: translateX(-100%) translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-right:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-right:after {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--left:before {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--left:after {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--right:before {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--right:after {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
5
assets/vendor/hint.css/hint.base.min.css
vendored
Normal file
5
assets/vendor/hint.css/hint.base.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
655
assets/vendor/hint.css/hint.css
vendored
Normal file
655
assets/vendor/hint.css/hint.css
vendored
Normal file
@ -0,0 +1,655 @@
|
|||||||
|
/*! Hint.css - v2.7.0 - 2021-10-01
|
||||||
|
* https://kushagra.dev/lab/hint/
|
||||||
|
* Copyright (c) 2021 Kushagra Gour */
|
||||||
|
|
||||||
|
/*-------------------------------------*\
|
||||||
|
HINT.css - A CSS tooltip library
|
||||||
|
\*-------------------------------------*/
|
||||||
|
/**
|
||||||
|
* HINT.css is a tooltip library made in pure CSS.
|
||||||
|
*
|
||||||
|
* Source: https://github.com/chinchang/hint.css
|
||||||
|
* Demo: http://kushagragour.in/lab/hint/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* source: hint-core.scss
|
||||||
|
*
|
||||||
|
* Defines the basic styling for the tooltip.
|
||||||
|
* Each tooltip is made of 2 parts:
|
||||||
|
* 1) body (:after)
|
||||||
|
* 2) arrow (:before)
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint
|
||||||
|
*/
|
||||||
|
[class*="hint--"] {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
/**
|
||||||
|
* tooltip arrow
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* tooltip body
|
||||||
|
*/ }
|
||||||
|
[class*="hint--"]:before, [class*="hint--"]:after {
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0);
|
||||||
|
-moz-transform: translate3d(0, 0, 0);
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1000000;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-transition: 0.3s ease;
|
||||||
|
-moz-transition: 0.3s ease;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
-webkit-transition-delay: 0ms;
|
||||||
|
-moz-transition-delay: 0ms;
|
||||||
|
transition-delay: 0ms; }
|
||||||
|
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1; }
|
||||||
|
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
|
||||||
|
-webkit-transition-delay: 100ms;
|
||||||
|
-moz-transition-delay: 100ms;
|
||||||
|
transition-delay: 100ms; }
|
||||||
|
[class*="hint--"]:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: transparent;
|
||||||
|
border: 6px solid transparent;
|
||||||
|
z-index: 1000001; }
|
||||||
|
[class*="hint--"]:after {
|
||||||
|
background: #383838;
|
||||||
|
color: white;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 12px;
|
||||||
|
white-space: nowrap; }
|
||||||
|
[class*="hint--"][aria-label]:after {
|
||||||
|
content: attr(aria-label); }
|
||||||
|
[class*="hint--"][data-hint]:after {
|
||||||
|
content: attr(data-hint); }
|
||||||
|
|
||||||
|
[aria-label='']:before, [aria-label='']:after,
|
||||||
|
[data-hint='']:before,
|
||||||
|
[data-hint='']:after {
|
||||||
|
display: none !important; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-position.scss
|
||||||
|
*
|
||||||
|
* Defines the positoning logic for the tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--top
|
||||||
|
* 2) hint--bottom
|
||||||
|
* 3) hint--left
|
||||||
|
* 4) hint--right
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* set default color for tooltip arrows
|
||||||
|
*/
|
||||||
|
.hint--top-left:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--top-right:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--top:before {
|
||||||
|
border-top-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--bottom:before {
|
||||||
|
border-bottom-color: #383838; }
|
||||||
|
|
||||||
|
.hint--left:before {
|
||||||
|
border-left-color: #383838; }
|
||||||
|
|
||||||
|
.hint--right:before {
|
||||||
|
border-right-color: #383838; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top tooltip
|
||||||
|
*/
|
||||||
|
.hint--top:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top:before, .hint--top:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top:after {
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.hint--top:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top:hover:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(-8px);
|
||||||
|
transform: translateX(-50%) translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom:before, .hint--bottom:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom:after {
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
-moz-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.hint--bottom:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom:hover:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(8px);
|
||||||
|
transform: translateX(-50%) translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* right tooltip
|
||||||
|
*/
|
||||||
|
.hint--right:before {
|
||||||
|
margin-left: -11px;
|
||||||
|
margin-bottom: -6px; }
|
||||||
|
|
||||||
|
.hint--right:after {
|
||||||
|
margin-bottom: -14px; }
|
||||||
|
|
||||||
|
.hint--right:before, .hint--right:after {
|
||||||
|
left: 100%;
|
||||||
|
bottom: 50%; }
|
||||||
|
|
||||||
|
.hint--right:hover:before {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
.hint--right:hover:after {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* left tooltip
|
||||||
|
*/
|
||||||
|
.hint--left:before {
|
||||||
|
margin-right: -11px;
|
||||||
|
margin-bottom: -6px; }
|
||||||
|
|
||||||
|
.hint--left:after {
|
||||||
|
margin-bottom: -14px; }
|
||||||
|
|
||||||
|
.hint--left:before, .hint--left:after {
|
||||||
|
right: 100%;
|
||||||
|
bottom: 50%; }
|
||||||
|
|
||||||
|
.hint--left:hover:before {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--left:hover:after {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-left tooltip
|
||||||
|
*/
|
||||||
|
.hint--top-left:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top-left:before, .hint--top-left:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top-left:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top-left:after {
|
||||||
|
-webkit-transform: translateX(-100%);
|
||||||
|
-moz-transform: translateX(-100%);
|
||||||
|
transform: translateX(-100%); }
|
||||||
|
|
||||||
|
.hint--top-left:after {
|
||||||
|
margin-left: 12px; }
|
||||||
|
|
||||||
|
.hint--top-left:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top-left:hover:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(-8px);
|
||||||
|
transform: translateX(-100%) translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-right tooltip
|
||||||
|
*/
|
||||||
|
.hint--top-right:before {
|
||||||
|
margin-bottom: -11px; }
|
||||||
|
|
||||||
|
.hint--top-right:before, .hint--top-right:after {
|
||||||
|
bottom: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--top-right:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--top-right:after {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
transform: translateX(0); }
|
||||||
|
|
||||||
|
.hint--top-right:after {
|
||||||
|
margin-left: -12px; }
|
||||||
|
|
||||||
|
.hint--top-right:hover:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--top-right:hover:after {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-left tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before, .hint--bottom-left:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom-left:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom-left:after {
|
||||||
|
-webkit-transform: translateX(-100%);
|
||||||
|
-moz-transform: translateX(-100%);
|
||||||
|
transform: translateX(-100%); }
|
||||||
|
|
||||||
|
.hint--bottom-left:after {
|
||||||
|
margin-left: 12px; }
|
||||||
|
|
||||||
|
.hint--bottom-left:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom-left:hover:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(8px);
|
||||||
|
transform: translateX(-100%) translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-right tooltip
|
||||||
|
*/
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
margin-top: -11px; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before, .hint--bottom-right:after {
|
||||||
|
top: 100%;
|
||||||
|
left: 50%; }
|
||||||
|
|
||||||
|
.hint--bottom-right:before {
|
||||||
|
left: calc(50% - 6px); }
|
||||||
|
|
||||||
|
.hint--bottom-right:after {
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
-moz-transform: translateX(0);
|
||||||
|
transform: translateX(0); }
|
||||||
|
|
||||||
|
.hint--bottom-right:after {
|
||||||
|
margin-left: -12px; }
|
||||||
|
|
||||||
|
.hint--bottom-right:hover:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--bottom-right:hover:after {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-sizes.scss
|
||||||
|
*
|
||||||
|
* Defines width restricted tooltips that can span
|
||||||
|
* across multiple lines.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--small
|
||||||
|
* 2) hint--medium
|
||||||
|
* 3) hint--large
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--small:after,
|
||||||
|
.hint--medium:after,
|
||||||
|
.hint--large:after {
|
||||||
|
white-space: normal;
|
||||||
|
line-height: 1.4em;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.hint--small:after {
|
||||||
|
width: 80px; }
|
||||||
|
|
||||||
|
.hint--medium:after {
|
||||||
|
width: 150px; }
|
||||||
|
|
||||||
|
.hint--large:after {
|
||||||
|
width: 300px; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-theme.scss
|
||||||
|
*
|
||||||
|
* Defines basic theme for tooltips.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
[class*="hint--"] {
|
||||||
|
/**
|
||||||
|
* tooltip body
|
||||||
|
*/ }
|
||||||
|
[class*="hint--"]:after {
|
||||||
|
text-shadow: 0 -1px 0px black;
|
||||||
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-color-types.scss
|
||||||
|
*
|
||||||
|
* Contains tooltips of various types based on color differences.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--error
|
||||||
|
* 2) hint--warning
|
||||||
|
* 3) hint--info
|
||||||
|
* 4) hint--success
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Error
|
||||||
|
*/
|
||||||
|
.hint--error:after {
|
||||||
|
background-color: #b34e4d;
|
||||||
|
text-shadow: 0 -1px 0px #592726; }
|
||||||
|
|
||||||
|
.hint--error.hint--top-left:before {
|
||||||
|
border-top-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--top-right:before {
|
||||||
|
border-top-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--top:before {
|
||||||
|
border-top-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--bottom:before {
|
||||||
|
border-bottom-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--left:before {
|
||||||
|
border-left-color: #b34e4d; }
|
||||||
|
|
||||||
|
.hint--error.hint--right:before {
|
||||||
|
border-right-color: #b34e4d; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Warning
|
||||||
|
*/
|
||||||
|
.hint--warning:after {
|
||||||
|
background-color: #c09854;
|
||||||
|
text-shadow: 0 -1px 0px #6c5328; }
|
||||||
|
|
||||||
|
.hint--warning.hint--top-left:before {
|
||||||
|
border-top-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--top-right:before {
|
||||||
|
border-top-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--top:before {
|
||||||
|
border-top-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--bottom:before {
|
||||||
|
border-bottom-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--left:before {
|
||||||
|
border-left-color: #c09854; }
|
||||||
|
|
||||||
|
.hint--warning.hint--right:before {
|
||||||
|
border-right-color: #c09854; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Info
|
||||||
|
*/
|
||||||
|
.hint--info:after {
|
||||||
|
background-color: #3986ac;
|
||||||
|
text-shadow: 0 -1px 0px #1a3c4d; }
|
||||||
|
|
||||||
|
.hint--info.hint--top-left:before {
|
||||||
|
border-top-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--top-right:before {
|
||||||
|
border-top-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--top:before {
|
||||||
|
border-top-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--bottom:before {
|
||||||
|
border-bottom-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--left:before {
|
||||||
|
border-left-color: #3986ac; }
|
||||||
|
|
||||||
|
.hint--info.hint--right:before {
|
||||||
|
border-right-color: #3986ac; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Success
|
||||||
|
*/
|
||||||
|
.hint--success:after {
|
||||||
|
background-color: #458746;
|
||||||
|
text-shadow: 0 -1px 0px #1a321a; }
|
||||||
|
|
||||||
|
.hint--success.hint--top-left:before {
|
||||||
|
border-top-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--top-right:before {
|
||||||
|
border-top-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--top:before {
|
||||||
|
border-top-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--bottom-left:before {
|
||||||
|
border-bottom-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--bottom-right:before {
|
||||||
|
border-bottom-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--bottom:before {
|
||||||
|
border-bottom-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--left:before {
|
||||||
|
border-left-color: #458746; }
|
||||||
|
|
||||||
|
.hint--success.hint--right:before {
|
||||||
|
border-right-color: #458746; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-always.scss
|
||||||
|
*
|
||||||
|
* Defines a persisted tooltip which shows always.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--always
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--always:after, .hint--always:before {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
|
.hint--always.hint--top:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(-8px);
|
||||||
|
transform: translateX(-50%) translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-left:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-left:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(-8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(-8px);
|
||||||
|
transform: translateX(-100%) translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-right:before {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--top-right:after {
|
||||||
|
-webkit-transform: translateY(-8px);
|
||||||
|
-moz-transform: translateY(-8px);
|
||||||
|
transform: translateY(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom:after {
|
||||||
|
-webkit-transform: translateX(-50%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-50%) translateY(8px);
|
||||||
|
transform: translateX(-50%) translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-left:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-left:after {
|
||||||
|
-webkit-transform: translateX(-100%) translateY(8px);
|
||||||
|
-moz-transform: translateX(-100%) translateY(8px);
|
||||||
|
transform: translateX(-100%) translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-right:before {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--bottom-right:after {
|
||||||
|
-webkit-transform: translateY(8px);
|
||||||
|
-moz-transform: translateY(8px);
|
||||||
|
transform: translateY(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--left:before {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--left:after {
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
-moz-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--right:before {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
.hint--always.hint--right:after {
|
||||||
|
-webkit-transform: translateX(8px);
|
||||||
|
-moz-transform: translateX(8px);
|
||||||
|
transform: translateX(8px); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-rounded.scss
|
||||||
|
*
|
||||||
|
* Defines rounded corner tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--rounded
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--rounded:after {
|
||||||
|
border-radius: 4px; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* source: hint-effects.scss
|
||||||
|
*
|
||||||
|
* Defines various transition effects for the tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--no-animate
|
||||||
|
* 2) hint--bounce
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.hint--no-animate:before, .hint--no-animate:after {
|
||||||
|
-webkit-transition-duration: 0ms;
|
||||||
|
-moz-transition-duration: 0ms;
|
||||||
|
transition-duration: 0ms; }
|
||||||
|
|
||||||
|
.hint--bounce:before, .hint--bounce:after {
|
||||||
|
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||||
|
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||||
|
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
|
||||||
|
|
||||||
|
.hint--no-shadow:before, .hint--no-shadow:after {
|
||||||
|
text-shadow: initial;
|
||||||
|
box-shadow: initial; }
|
||||||
|
|
||||||
|
.hint--no-arrow:before {
|
||||||
|
display: none; }
|
||||||
5
assets/vendor/hint.css/hint.min.css
vendored
Normal file
5
assets/vendor/hint.css/hint.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4695
assets/vendor/hint.css/package-lock.json
generated
vendored
Normal file
4695
assets/vendor/hint.css/package-lock.json
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
38
assets/vendor/hint.css/package.json
vendored
Normal file
38
assets/vendor/hint.css/package.json
vendored
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "hint",
|
||||||
|
"title": "Hint.css",
|
||||||
|
"description": "A tooltip library in CSS for your lovely websites.",
|
||||||
|
"version": "2.7.0",
|
||||||
|
"style": "hint.css",
|
||||||
|
"main": "hint.css",
|
||||||
|
"homepage": "https://kushagra.dev/lab/hint/",
|
||||||
|
"author": {
|
||||||
|
"name": "Kushagra Gour",
|
||||||
|
"email": "chinchang457@gmail.com",
|
||||||
|
"url": "https://kushagra.dev"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/chinchang/hint.css.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/chinchang/hint.css/issues"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"css",
|
||||||
|
"tooltip",
|
||||||
|
"ui",
|
||||||
|
"sass",
|
||||||
|
"help",
|
||||||
|
"hint"
|
||||||
|
],
|
||||||
|
"devDependencies": {
|
||||||
|
"grunt": "~0.4.1",
|
||||||
|
"grunt-contrib-concat": "~0.3.0",
|
||||||
|
"grunt-contrib-cssmin": "~0.12.3",
|
||||||
|
"grunt-contrib-watch": "~0.5.3",
|
||||||
|
"grunt-sass": "^3.0.2",
|
||||||
|
"node-sass": "^4.13.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
46
assets/vendor/hint.css/src/hint-always.scss
vendored
Normal file
46
assets/vendor/hint.css/src/hint-always.scss
vendored
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-always.scss
|
||||||
|
*
|
||||||
|
* Defines a persisted tooltip which shows always.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--always
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
.#{$hintPrefix}always {
|
||||||
|
&:after, &:before {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.#{$hintPrefix}top {
|
||||||
|
@include set-margin('translateY', -1, -50%);
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
@include set-margin('translateY', -1, -100%);
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
@include set-margin('translateY', -1, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.#{$hintPrefix}bottom {
|
||||||
|
@include set-margin('translateY', 1, -50%);
|
||||||
|
&-left {
|
||||||
|
@include set-margin('translateY', 1, -100%);
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
@include set-margin('translateY', 1, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.#{$hintPrefix}left {
|
||||||
|
@include set-margin('translateX', -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.#{$hintPrefix}right {
|
||||||
|
@include set-margin('translateX', 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
52
assets/vendor/hint.css/src/hint-color-types.scss
vendored
Normal file
52
assets/vendor/hint.css/src/hint-color-types.scss
vendored
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-color-types.scss
|
||||||
|
*
|
||||||
|
* Contains tooltips of various types based on color differences.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--error
|
||||||
|
* 2) hint--warning
|
||||||
|
* 3) hint--info
|
||||||
|
* 4) hint--success
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// mixin to generate different color style tooltips
|
||||||
|
@mixin hint-type($color) {
|
||||||
|
&:after {
|
||||||
|
background-color: $color;
|
||||||
|
text-shadow: 0 -1px 0px darken($color, $hintTextShadowDarkenAmount);
|
||||||
|
}
|
||||||
|
|
||||||
|
// generate arrow color style
|
||||||
|
@include arrow-border-color($color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Error
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}error {
|
||||||
|
@include hint-type($hintErrorColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Warning
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}warning {
|
||||||
|
@include hint-type($hintWarningColor)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Info
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}info {
|
||||||
|
@include hint-type($hintInfoColor)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Success
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}success {
|
||||||
|
@include hint-type($hintSuccessColor)
|
||||||
|
}
|
||||||
88
assets/vendor/hint.css/src/hint-core.scss
vendored
Normal file
88
assets/vendor/hint.css/src/hint-core.scss
vendored
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-core.scss
|
||||||
|
*
|
||||||
|
* Defines the basic styling for the tooltip.
|
||||||
|
* Each tooltip is made of 2 parts:
|
||||||
|
* 1) body (:after)
|
||||||
|
* 2) arrow (:before)
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint
|
||||||
|
*/
|
||||||
|
|
||||||
|
[class*="#{$hintPrefix}"] {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
// HACK: Trigger hardware accelerated rendering, otherwise transform was not
|
||||||
|
// working on a hidden element
|
||||||
|
@include vendor('transform', translate3d(0, 0, 0));
|
||||||
|
|
||||||
|
// HACK: visibility is set to hidden because IE & Opera don't support
|
||||||
|
// pointer-events on HTML content yet because of which hovering a hidden tooltip
|
||||||
|
// shows the tooltip.
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: $hintZIndex;
|
||||||
|
// shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
@include vendor('transition', $hintTransitionDuration ease);
|
||||||
|
@include vendor('transition-delay', $hintHideDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:before, &:hover:after {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:before, &:hover:after {
|
||||||
|
// $hintShowDelay will apply as soon as element is hovered.
|
||||||
|
@include vendor('transition-delay', $hintShowDelay);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* tooltip arrow
|
||||||
|
*/
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: transparent;
|
||||||
|
border: $hintArrowBorderWidth solid transparent;
|
||||||
|
// move z-index 1 up than :after so that it shows over box-shadow
|
||||||
|
z-index: $hintZIndex + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* tooltip body
|
||||||
|
*/
|
||||||
|
&:after {
|
||||||
|
background: $hintDefaultColor;
|
||||||
|
color: white;
|
||||||
|
padding: $hintVerticalPadding $hintHorizontalPadding;
|
||||||
|
font-size: $hintFontSize;
|
||||||
|
font-family: $hintFontFamily;
|
||||||
|
line-height: $hintFontSize; // Vertical centering.
|
||||||
|
white-space: nowrap; // Prevent breaking to new line.
|
||||||
|
}
|
||||||
|
// Always get content from aria-label attribute.
|
||||||
|
&[aria-label]:after {
|
||||||
|
content: attr(aria-label); // The magic!
|
||||||
|
}
|
||||||
|
// If the `data-hint` attribute is present, use it.
|
||||||
|
// This might be deprecated in future in support of a11y.
|
||||||
|
&[data-hint]:after {
|
||||||
|
content: attr(data-hint); // The magic!
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide tooltips if any of the supported attributes is empty.
|
||||||
|
[aria-label=''],
|
||||||
|
[data-hint=''] {
|
||||||
|
&:before, &:after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
42
assets/vendor/hint.css/src/hint-effects.scss
vendored
Normal file
42
assets/vendor/hint.css/src/hint-effects.scss
vendored
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-effects.scss
|
||||||
|
*
|
||||||
|
* Defines various transition effects for the tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--no-animate
|
||||||
|
* 2) hint--bounce
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Remove animation from tooltips.
|
||||||
|
.#{$hintPrefix}no-animate {
|
||||||
|
&:before, &:after {
|
||||||
|
@include vendor('transition-duration', 0ms);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bounce effect in tooltips.
|
||||||
|
.#{$hintPrefix}bounce {
|
||||||
|
&:before, &:after {
|
||||||
|
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||||
|
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||||
|
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove shadows from tooltips.
|
||||||
|
.#{$hintPrefix}no-shadow {
|
||||||
|
&:before, &:after {
|
||||||
|
text-shadow: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove shadows from tooltips.
|
||||||
|
.#{$hintPrefix}no-arrow {
|
||||||
|
&:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
46
assets/vendor/hint.css/src/hint-mixins.scss
vendored
Normal file
46
assets/vendor/hint.css/src/hint-mixins.scss
vendored
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
// hint-mixins.scss
|
||||||
|
//
|
||||||
|
// Place to store common mixins.
|
||||||
|
|
||||||
|
// Vendor prefixer mixin.
|
||||||
|
@mixin vendor($property, $value) {
|
||||||
|
-webkit-#{$property}: $value;
|
||||||
|
-moz-#{$property}: $value;
|
||||||
|
#{$property}: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generates border-color rules for all possible positions
|
||||||
|
@mixin arrow-border-color($color) {
|
||||||
|
@each $position in top, bottom, left, right {
|
||||||
|
@if $position == top or $position == bottom {
|
||||||
|
// Loop further for classes like .top-left, bottom-right etc
|
||||||
|
@each $xDir in left, right {
|
||||||
|
#{if(&, "&", "")}.#{$hintPrefix}#{$position}-#{$xDir}:before {
|
||||||
|
border-#{$position}-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#{if(&, "&", "")}.#{$hintPrefix}#{$position}:before {
|
||||||
|
border-#{$position}-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mixin to set margin on tooltip using translate transform
|
||||||
|
// $property
|
||||||
|
@mixin set-margin($property, $transitionDirection, $translateX: 0) {
|
||||||
|
$value: unquote("#{$property}(#{$hintTransitionDistance * $transitionDirection})");
|
||||||
|
&:before {
|
||||||
|
@include vendor('transform', $value);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
@if $translateX != 0 {
|
||||||
|
// For vertical tooltips, we need to animate in y-direction
|
||||||
|
// retaining its x-transform.
|
||||||
|
@include vendor('transform', translateX($translateX) $value);
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@include vendor('transform', $value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
138
assets/vendor/hint.css/src/hint-position.scss
vendored
Normal file
138
assets/vendor/hint.css/src/hint-position.scss
vendored
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-position.scss
|
||||||
|
*
|
||||||
|
* Defines the positoning logic for the tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--top
|
||||||
|
* 2) hint--bottom
|
||||||
|
* 3) hint--left
|
||||||
|
* 4) hint--right
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0) {
|
||||||
|
&:before {
|
||||||
|
// bring arrow inside so that it animates to normal position when shown.
|
||||||
|
// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
|
||||||
|
margin-#{$propertyY}: -2 * $hintArrowBorderWidth + 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
#{$propertyY}: 100%;
|
||||||
|
left: 50%; // get top-left corner in center
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
left: calc(50% - #{$hintArrowBorderWidth}); // get arrow center aligned with content
|
||||||
|
}
|
||||||
|
|
||||||
|
$translateX: -50%;
|
||||||
|
@if $xDirection == -1 {
|
||||||
|
$translateX: -100%;
|
||||||
|
} @else if $xDirection == 1 {
|
||||||
|
$translateX: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
@include vendor('transform', translateX($translateX));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
@if $xDirection != 0 {
|
||||||
|
// bring back the tooltip by some offset so that arrow doesn't stick at end
|
||||||
|
margin-left: -$xDirection * $hintArrowOffsetX;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include set-margin('translateY', $transitionDirection, $translateX);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) {
|
||||||
|
&:before {
|
||||||
|
// bring arrow inside so that it animates to normal position when shown
|
||||||
|
// HACK: +1px to avoid the 1 px white space between arrow and body during transition.
|
||||||
|
margin-#{$propertyX}: -2 * $hintArrowBorderWidth + 1px;
|
||||||
|
// bring back to center vertically
|
||||||
|
margin-bottom: -1 * $hintArrowBorderWidth;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
// bring back to center
|
||||||
|
margin-bottom: -1 * floor($hintTooltipHeight / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
#{$propertyX}: 100%;
|
||||||
|
bottom: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@include set-margin('translateX', $transitionDirection);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* set default color for tooltip arrows
|
||||||
|
*/
|
||||||
|
@include arrow-border-color($hintDefaultColor);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}top {
|
||||||
|
@include vertical-positioned-tooltip('bottom', -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}bottom {
|
||||||
|
@include vertical-positioned-tooltip('top', 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* right tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}right {
|
||||||
|
@include horizontal-positioned-tooltip('left', 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* left tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}left {
|
||||||
|
@include horizontal-positioned-tooltip('right', -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-left tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}top-left {
|
||||||
|
@include vertical-positioned-tooltip('bottom', -1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* top-right tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}top-right {
|
||||||
|
@include vertical-positioned-tooltip('bottom', -1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-left tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}bottom-left {
|
||||||
|
@include vertical-positioned-tooltip('top', 1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* bottom-right tooltip
|
||||||
|
*/
|
||||||
|
.#{$hintPrefix}bottom-right {
|
||||||
|
@include vertical-positioned-tooltip('top', 1, 1);
|
||||||
|
}
|
||||||
15
assets/vendor/hint.css/src/hint-rounded.scss
vendored
Normal file
15
assets/vendor/hint.css/src/hint-rounded.scss
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-rounded.scss
|
||||||
|
*
|
||||||
|
* Defines rounded corner tooltips.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--rounded
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
.#{$hintPrefix}rounded {
|
||||||
|
&:after {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
39
assets/vendor/hint.css/src/hint-sizes.scss
vendored
Normal file
39
assets/vendor/hint.css/src/hint-sizes.scss
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-sizes.scss
|
||||||
|
*
|
||||||
|
* Defines width restricted tooltips that can span
|
||||||
|
* across multiple lines.
|
||||||
|
*
|
||||||
|
* Classes added:
|
||||||
|
* 1) hint--small
|
||||||
|
* 2) hint--medium
|
||||||
|
* 3) hint--large
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
.#{$hintPrefix}small,
|
||||||
|
.#{$hintPrefix}medium,
|
||||||
|
.#{$hintPrefix}large {
|
||||||
|
&:after {
|
||||||
|
white-space: normal;
|
||||||
|
line-height: 1.4em;
|
||||||
|
word-wrap: break-word; // Ensure long words do not overflow.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.#{$hintPrefix}small {
|
||||||
|
&:after {
|
||||||
|
width: $hintSizeSmall;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.#{$hintPrefix}medium {
|
||||||
|
&:after {
|
||||||
|
width: $hintSizeMedium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.#{$hintPrefix}large {
|
||||||
|
&:after {
|
||||||
|
width: $hintSizeLarge;
|
||||||
|
}
|
||||||
|
}
|
||||||
16
assets/vendor/hint.css/src/hint-theme.scss
vendored
Normal file
16
assets/vendor/hint.css/src/hint-theme.scss
vendored
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* source: hint-theme.scss
|
||||||
|
*
|
||||||
|
* Defines basic theme for tooltips.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
[class*="#{$hintPrefix}"] {
|
||||||
|
/**
|
||||||
|
* tooltip body
|
||||||
|
*/
|
||||||
|
&:after {
|
||||||
|
text-shadow: 0 -1px 0px darken($hintDefaultColor, $hintTextShadowDarkenAmount);
|
||||||
|
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
64
assets/vendor/hint.css/src/hint-variables.scss
vendored
Normal file
64
assets/vendor/hint.css/src/hint-variables.scss
vendored
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
// hint-variables.scss
|
||||||
|
//
|
||||||
|
// Declares some variables used within the library.
|
||||||
|
|
||||||
|
// Prefix for all classes. By default, BEM naming convention is used
|
||||||
|
$hintPrefix: 'hint--' !default;
|
||||||
|
|
||||||
|
// font size
|
||||||
|
$hintFontSize: 12px !default;
|
||||||
|
|
||||||
|
// default font family
|
||||||
|
$hintFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
|
||||||
|
|
||||||
|
// paddings
|
||||||
|
$hintVerticalPadding: 8px !default;
|
||||||
|
$hintHorizontalPadding: 10px !default;
|
||||||
|
|
||||||
|
// default tooltip height
|
||||||
|
$hintTooltipHeight: $hintFontSize + 2 * $hintVerticalPadding !default;
|
||||||
|
|
||||||
|
// border-width for tooltip arrow
|
||||||
|
$hintArrowBorderWidth: 6px !default;
|
||||||
|
|
||||||
|
// horizontal arrow offset
|
||||||
|
$hintArrowOffsetX: 2 * $hintArrowBorderWidth !default;
|
||||||
|
|
||||||
|
// text-shadow darken percentage
|
||||||
|
$hintTextShadowDarkenAmount: 25% !default;
|
||||||
|
|
||||||
|
// transition distance
|
||||||
|
$hintTransitionDistance: 8px !default;
|
||||||
|
|
||||||
|
// Transition Duration
|
||||||
|
$hintTransitionDuration: 0.3s !default;
|
||||||
|
|
||||||
|
// Delay in showing the tooltips.
|
||||||
|
$hintShowDelay: 100ms !default;
|
||||||
|
|
||||||
|
// Delay in hiding the tooltips.
|
||||||
|
$hintHideDelay: 0ms !default;
|
||||||
|
|
||||||
|
// z-index for tooltips
|
||||||
|
$hintZIndex: 1000000 !default;
|
||||||
|
|
||||||
|
// Size options
|
||||||
|
$hintSizeSmall: 80px !default;
|
||||||
|
$hintSizeMedium: 150px !default;
|
||||||
|
$hintSizeLarge: 300px !default;
|
||||||
|
|
||||||
|
// Various colors
|
||||||
|
// Default color is blackish
|
||||||
|
$hintDefaultColor: hsl(0, 0%, 22%) !default;
|
||||||
|
|
||||||
|
// Error color
|
||||||
|
$hintErrorColor: hsl(1, 40%, 50%) !default;
|
||||||
|
|
||||||
|
// Warning color
|
||||||
|
$hintWarningColor: hsl(38, 46%, 54%) !default;
|
||||||
|
|
||||||
|
// Info Color
|
||||||
|
$hintInfoColor: hsl(200, 50%, 45%) !default;
|
||||||
|
|
||||||
|
// Success Color
|
||||||
|
$hintSuccessColor: hsl(121, 32%, 40%) !default;
|
||||||
24
assets/vendor/hint.css/src/hint.base.scss
vendored
Normal file
24
assets/vendor/hint.css/src/hint.base.scss
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// hint.base.scss
|
||||||
|
//
|
||||||
|
// Aggregates all other sass files to create a basic functional tooltip.
|
||||||
|
// This doesn't have any of the cosmetic features of the library.
|
||||||
|
|
||||||
|
/*-------------------------------------*\
|
||||||
|
HINT.css - A CSS tooltip library
|
||||||
|
\*-------------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HINT.css is a tooltip library made in pure CSS.
|
||||||
|
*
|
||||||
|
* Source: https://github.com/chinchang/hint.css
|
||||||
|
* Demo: http://kushagragour.in/lab/hint/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "hint-variables";
|
||||||
|
@import "hint-mixins";
|
||||||
|
@import "hint-core";
|
||||||
|
@import "hint-position";
|
||||||
|
@import "hint-sizes";
|
||||||
|
@import "hint-always";
|
||||||
27
assets/vendor/hint.css/src/hint.scss
vendored
Normal file
27
assets/vendor/hint.css/src/hint.scss
vendored
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// hint.scss
|
||||||
|
//
|
||||||
|
// Aggregates all other sass files.
|
||||||
|
|
||||||
|
/*-------------------------------------*\
|
||||||
|
HINT.css - A CSS tooltip library
|
||||||
|
\*-------------------------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HINT.css is a tooltip library made in pure CSS.
|
||||||
|
*
|
||||||
|
* Source: https://github.com/chinchang/hint.css
|
||||||
|
* Demo: http://kushagragour.in/lab/hint/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "hint-variables";
|
||||||
|
@import "hint-mixins";
|
||||||
|
@import "hint-core";
|
||||||
|
@import "hint-position";
|
||||||
|
@import "hint-sizes";
|
||||||
|
@import "hint-theme";
|
||||||
|
@import "hint-color-types";
|
||||||
|
@import "hint-always";
|
||||||
|
@import "hint-rounded";
|
||||||
|
@import "hint-effects";
|
||||||
@ -14,6 +14,7 @@
|
|||||||
"selectivizr": "~1.0.2",
|
"selectivizr": "~1.0.2",
|
||||||
"qtip2": "~2.2.0",
|
"qtip2": "~2.2.0",
|
||||||
"normalize-css": "~3.0.0",
|
"normalize-css": "~3.0.0",
|
||||||
"clipboard": "~1.4.3"
|
"clipboard": "~1.4.3",
|
||||||
|
"hint.css": "^2.7.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user