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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
/**
* The backgound color for tooltips.
*
* @type color
* @group tooltip
*/
$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default;
/**
* The font color for tooltips.
*
* @type color
* @group tooltip
*/
$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;
/**
* The font size for tooltips.
*
* @type size
* @group tooltip
*/
$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;
/**
* The CSS box shadow for tooltips.
*
* @type list
* @group tooltip
*/
$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;
/**
* The vertical padding for tooltips.
*
* @type size
* @group tooltip
*/
$v-tooltip-padding-vertical: round($v-unit-size/8) !default;
/**
* The horizontal padding for tooltips.
*
* @type size
* @group tooltip
*/
$v-tooltip-padding-horizontal: round($v-unit-size/4) !default;
/**
* The backgound color for error tooltips.
*
* @type color
* @group tooltip
*/
$v-tooltip-error-message-background-color: #fff !default;
/**
* The font color for error tooltips.
*
* @type color
* @group tooltip
*/
$v-tooltip-error-message-font-color: $v-error-indicator-color !default;
/**
* The corner radius for tooltips.
*
* @type size
* @group tooltip
*/
$v-tooltip-border-radius: $v-border-radius - 1px !default;
/**
* Outputs the selectors and styles for tooltip elements.
*
* @group tooltip
*/
@mixin valo-tooltip {
.v-tooltip {
@include valo-tooltip-style;
div[style*="width"] {
width: auto !important;
}
.v-errormessage {
background-color: opacify($v-tooltip-error-message-background-color, 1);
background-color: $v-tooltip-error-message-background-color;
color: $v-tooltip-error-message-font-color;
margin: -$v-tooltip-padding-vertical #{-$v-tooltip-padding-horizontal};
padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal;
max-height: 10em;
overflow: auto;
font-weight: $v-font-weight + 100;
h2:only-child {
font: inherit;
line-height: inherit;
}
}
.v-tooltip-text {
max-height: 10em;
overflow: auto;
margin-top: $v-tooltip-padding-vertical * 2;
}
.v-errormessage[aria-hidden="true"] + .v-tooltip-text {
margin-top: 0;
}
h1,
h2,
h3,
h4 {
color: inherit;
}
}
}
/**
* Outputs the main styles for tooltip elements.
*
* @group tooltip
*/
@mixin valo-tooltip-style {
background-color: opacify($v-tooltip-background-color, 1); // For IE8
background-color: $v-tooltip-background-color;
@include box-shadow($v-tooltip-box-shadow);
color: $v-tooltip-font-color;
padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal;
border-radius: $v-tooltip-border-radius;
max-width: 35em;
overflow: hidden !important;
font-size: $v-tooltip-font-size;
}
|
