1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 04:40:09 +01:00

1140, add hint.css

This commit is contained in:
Ahmed Ejaz 2023-08-27 14:15:54 +05:00
parent 566792d3f6
commit 1fea611ed6
28 changed files with 6685 additions and 1 deletions

27
assets/vendor/hint.css/.bower.json vendored Normal file
View 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
View 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

View 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
View File

@ -0,0 +1,5 @@
.sass-cache
node_modules/
hint.sublime-project
hint.sublime-workspace
*.map

View 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
View 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
View File

@ -0,0 +1,123 @@
# Hint.css [![npm version](https://badge.fury.io/js/hint.css.svg)](https://badge.fury.io/js/hint.css) ![downloads/month](https://img.shields.io/npm/dm/hint.css.svg) [![Join the chat at https://gitter.im/chinchang/hint.css](https://badges.gitter.im/chinchang/hint.css.svg)](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![gzip size](http://img.badgesize.io/https://unpkg.com/hint.css/hint.min.css?compression=gzip&label=gzip%20size)
*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://user-images.githubusercontent.com/379918/134402085-15cf29bc-2266-4b2d-9354-1830adc4a240.png)](https://cssbattle.dev)

15
assets/vendor/hint.css/bower.json vendored Normal file
View 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
View 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
View 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); }

File diff suppressed because one or more lines are too long

655
assets/vendor/hint.css/hint.css vendored Normal file
View 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

File diff suppressed because one or more lines are too long

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
View 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"
}
}

View 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);
}
}

View 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)
}

View 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;
}
}

View 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;
}
}

View 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);
}
}
}

View 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);
}

View File

@ -0,0 +1,15 @@
/**
* source: hint-rounded.scss
*
* Defines rounded corner tooltips.
*
* Classes added:
* 1) hint--rounded
*
*/
.#{$hintPrefix}rounded {
&:after {
border-radius: 4px;
}
}

View 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;
}
}

View 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);
}
}

View 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;

View 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
View 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";

View File

@ -14,6 +14,7 @@
"selectivizr": "~1.0.2",
"qtip2": "~2.2.0",
"normalize-css": "~3.0.0",
"clipboard": "~1.4.3"
"clipboard": "~1.4.3",
"hint.css": "^2.7.0"
}
}