blob: 1f8e8c88f6da651f5854c43658a1f9d4e1ec1efe (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
// Name: Tooltip
// Description: Component to create tooltips
//
// Component: `uk-tooltip`
//
// Modifiers `uk-tooltip-top`
// `uk-tooltip-top-left`
// `uk-tooltip-top-right`
// `uk-tooltip-bottom`
// `uk-tooltip-bottom-left`
// `uk-tooltip-bottom-right`
// `uk-tooltip-left`
// `uk-tooltip-right`
//
// States: `uk-active`
//
// ========================================================================
// Variables
// ========================================================================
$tooltip-z-index: $global-z-index + 30 !default;
$tooltip-max-width: 200px !default;
$tooltip-padding-vertical: 3px !default;
$tooltip-padding-horizontal: 6px !default;
$tooltip-background: #666 !default;
$tooltip-border-radius: 2px !default;
$tooltip-color: $global-inverse-color !default;
$tooltip-font-size: 12px !default;
$tooltip-margin: 10px !default;
/* ========================================================================
Component: Tooltip
========================================================================== */
/*
* 1. Hide by default
* 2. Position
* 3. Dimensions
* 4. Style
*/
.uk-tooltip {
/* 1 */
display: none;
/* 2 */
position: absolute;
z-index: $tooltip-z-index;
/* 3 */
box-sizing: border-box;
max-width: $tooltip-max-width;
padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
/* 4 */
background: $tooltip-background;
border-radius: $tooltip-border-radius;
color: $tooltip-color;
font-size: $tooltip-font-size;
@if(mixin-exists(hook-tooltip)) {@include hook-tooltip();}
}
/* Show */
.uk-tooltip.uk-active { display: block; }
/* Direction / Alignment modifiers
========================================================================== */
/* Direction */
[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); }
[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; }
[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); }
[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; }
// Hooks
// ========================================================================
@if(mixin-exists(hook-tooltip-misc)) {@include hook-tooltip-misc();}
// @mixin hook-tooltip(){}
// @mixin hook-tooltip-misc(){}
|
