1/*
2 * Copyright (c) 2013-2015 Mark C. Prins <mprins@users.sf.net>
3 *
4 * Permission to use, copy, modify, and distribute this software for any
5 * purpose with or without fee is hereby granted, provided that the above
6 * copyright notice and this permission notice appear in all copies.
7 *
8 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
9 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
10 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
11 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
12 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
13 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
14 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
15 */
16
17/** accesible tooltip, to add to a focusable element containing a span with the tooltip. */
18
19/* show a tooltip offset to above/left */
20.olHasTooltip, .olHasTooltip_TL {
21    & span {
22        position: absolute;
23        clip: rect(1px 1px 1px 1px); /* < IE8 */
24        clip: rect(1px, 1px, 1px, 1px);
25        padding: 0;
26        border: 0;
27        height: 1px;
28        width: 1px;
29        overflow: hidden;
30        opacity: 0;
31        will-change: opacity, clip;
32
33        @include animation-name(fadeIn);
34        @include animation-timing-function(ease);
35        @include animation-delay(.35s);
36        @include animation-duration(5s);
37        //@include animation-iteration-count(infinite);
38        @include animation-iteration-count(1);
39    }
40
41    // http://codepen.io/anon/pen/yyNmML?editors=110
42    // http://css-tricks.com/restart-css-animation/
43    // http://css-tricks.com/snippets/css/keyframe-animation-syntax/
44    &:hover span,
45    &:focus span {
46        clip: auto;
47        padding: 3px;
48        height: auto;
49        width: auto;
50        z-index: $tooltip-z-index;
51        max-height: 100px;
52        white-space: nowrap;
53        display: inline-block;
54        background-color: __background_alt__;
55        color: __text__;
56        border: 1px solid __border__;
57        @include border-radius(5px);
58        @include box-shadow(2px 2px 2px __border__);
59        bottom: 2em;
60        right: 0;
61        //opacity: 1;
62        //@include single-transition(opacity 0.5s ease-in 0.1s);
63        @include animation-name(fadeOut);
64    }
65}
66
67/* show a tooltip offset to below/right */
68.olHasTooltip_bttm_r {
69    @extend .olHasTooltip;
70
71    &:hover span,
72    &:focus span {
73        bottom: -2em;
74        left: 1em;
75        right: auto;
76    }
77}
78
79/* show a tooltip offset to below/left */
80.olHasTooltip_bttm_l {
81    @extend .olHasTooltip;
82
83    &:hover span,
84    &:focus span {
85        bottom: -2em;
86    }
87}
88
89@include keyframes(fadeIn) {
90    0% {
91        opacity: 0;
92    }
93    100% {
94        opacity: 0;
95    }
96}
97
98@include keyframes(fadeOut) {
99    from {
100        opacity: 1;
101    }
102    to {
103        opacity: 0;
104    }
105}
106