Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
hint.css/hint.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
262 lines (247 sloc)
6.09 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! Hint.css - v1.2.0 - 2013-03-04 | |
| * http://kushagragour.in/lab/hint/ | |
| * Copyright (c) 2013 Kushagra Gour; Licensed MIT */ | |
| /*-------------------------------------*\ | |
| 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/labs/hint/ | |
| * | |
| * Release under The MIT License | |
| * | |
| */ | |
| /** | |
| * 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 | |
| */ | |
| .hint, [data-hint] { | |
| position: relative; | |
| display: inline-block; | |
| /** | |
| * tooltip arrow | |
| */ | |
| /** | |
| * tooltip body | |
| */ } | |
| .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { | |
| position: absolute; | |
| opacity: 0; | |
| z-index: 1000000; | |
| pointer-events: none; | |
| -webkit-transition: 0.3s ease; | |
| -moz-transition: 0.3s ease; | |
| transition: 0.3s ease; } | |
| .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after { | |
| opacity: 1; } | |
| .hint:before, [data-hint]:before { | |
| content: ''; | |
| position: absolute; | |
| background: transparent; | |
| border: 6px solid transparent; | |
| z-index: 1000001; } | |
| .hint:after, [data-hint]:after { | |
| content: attr(data-hint); | |
| background: #383838; | |
| color: white; | |
| text-shadow: 0 -1px 0px black; | |
| padding: 8px 10px; | |
| font-size: 12px; | |
| line-height: 12px; | |
| white-space: nowrap; | |
| box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } | |
| /** | |
| * 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:before { | |
| border-top-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: -12px; } | |
| .hint--top:after { | |
| margin-left: -18px; } | |
| .hint--top:before, .hint--top:after { | |
| bottom: 100%; | |
| left: 50%; } | |
| .hint--top:hover:before, .hint--top:hover:after { | |
| -webkit-transform: translateY(-8px); | |
| -moz-transform: translateY(-8px); | |
| transform: translateY(-8px); } | |
| /** | |
| * bottom tooltip | |
| */ | |
| .hint--bottom:before { | |
| margin-top: -12px; } | |
| .hint--bottom:after { | |
| margin-left: -18px; } | |
| .hint--bottom:before, .hint--bottom:after { | |
| top: 100%; | |
| left: 50%; } | |
| .hint--bottom:hover:before, .hint--bottom:hover:after { | |
| -webkit-transform: translateY(8px); | |
| -moz-transform: translateY(8px); | |
| transform: translateY(8px); } | |
| /** | |
| * right tooltip | |
| */ | |
| .hint--right:before { | |
| margin-left: -12px; | |
| margin-bottom: -6px; } | |
| .hint--right:after { | |
| margin-bottom: -14px; } | |
| .hint--right:before, .hint--right:after { | |
| left: 100%; | |
| bottom: 50%; } | |
| .hint--right:hover:before, .hint--right:hover:after { | |
| -webkit-transform: translateX(8px); | |
| -moz-transform: translateX(8px); | |
| transform: translateX(8px); } | |
| /** | |
| * left tooltip | |
| */ | |
| .hint--left:before { | |
| margin-right: -12px; | |
| margin-bottom: -6px; } | |
| .hint--left:after { | |
| margin-bottom: -14px; } | |
| .hint--left:before, .hint--left:after { | |
| right: 100%; | |
| bottom: 50%; } | |
| .hint--left:hover:before, .hint--left:hover:after { | |
| -webkit-transform: translateX(-8px); | |
| -moz-transform: translateX(-8px); | |
| transform: translateX(-8px); } | |
| /** | |
| * 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 #5a2626; } | |
| .hint--error.hint--top:before { | |
| border-top-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 #6d5228; } | |
| .hint--warning.hint--top:before { | |
| border-top-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 #193c4c; } | |
| .hint--info.hint--top:before { | |
| border-top-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 #1a331a; } | |
| .hint--success.hint--top:before { | |
| border-top-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; } | |
| .hint--always.hint--top:after, .hint--always.hint--top:before { | |
| -webkit-transform: translateY(-8px); | |
| -moz-transform: translateY(-8px); | |
| transform: translateY(-8px); } | |
| .hint--always.hint--bottom:after, .hint--always.hint--bottom:before { | |
| -webkit-transform: translateY(8px); | |
| -moz-transform: translateY(8px); | |
| transform: translateY(8px); } | |
| .hint--always.hint--left:after, .hint--always.hint--left:before { | |
| -webkit-transform: translateX(-8px); | |
| -moz-transform: translateX(-8px); | |
| transform: translateX(-8px); } | |
| .hint--always.hint--right:after, .hint--always.hint--right:before { | |
| -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; } |