Skip to content
Permalink
Newer
Older
100644 655 lines (532 sloc) 14.9 KB
Oct 1, 2021
1
/*! Hint.css - v2.7.0 - 2021-10-01
2
* https://kushagra.dev/lab/hint/
3
* Copyright (c) 2021 Kushagra Gour */
Jan 25, 2016
4
Nov 16, 2018
5
/*-------------------------------------*\
6
HINT.css - A CSS tooltip library
Jan 20, 2013
7
\*-------------------------------------*/
8
/**
9
* HINT.css is a tooltip library made in pure CSS.
10
*
Feb 3, 2013
11
* Source: https://github.com/chinchang/hint.css
12
* Demo: http://kushagragour.in/lab/hint/
Feb 3, 2013
13
*
Jan 20, 2013
14
*/
15
/**
16
* source: hint-core.scss
17
*
18
* Defines the basic styling for the tooltip.
19
* Each tooltip is made of 2 parts:
20
* 1) body (:after)
21
* 2) arrow (:before)
Jan 20, 2013
23
* Classes added:
24
* 1) hint
25
*/
May 21, 2016
26
[class*="hint--"] {
Feb 3, 2013
28
display: inline-block;
29
/**
Nov 22, 2015
30
* tooltip arrow
31
*/
Feb 3, 2013
32
/**
Nov 22, 2015
33
* tooltip body
34
*/ }
May 21, 2016
35
[class*="hint--"]:before, [class*="hint--"]:after {
Jan 19, 2013
36
position: absolute;
37
-webkit-transform: translate3d(0, 0, 0);
38
-moz-transform: translate3d(0, 0, 0);
39
transform: translate3d(0, 0, 0);
40
visibility: hidden;
Jan 19, 2013
41
opacity: 0;
42
z-index: 1000000;
43
pointer-events: none;
44
-webkit-transition: 0.3s ease;
Feb 23, 2013
45
-moz-transition: 0.3s ease;
46
transition: 0.3s ease;
47
-webkit-transition-delay: 0ms;
48
-moz-transition-delay: 0ms;
49
transition-delay: 0ms; }
May 21, 2016
50
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
51
visibility: visible;
Jan 19, 2013
52
opacity: 1; }
May 21, 2016
53
[class*="hint--"]:hover:before, [class*="hint--"]:hover:after {
54
-webkit-transition-delay: 100ms;
55
-moz-transition-delay: 100ms;
56
transition-delay: 100ms; }
May 21, 2016
57
[class*="hint--"]:before {
Jan 19, 2013
58
content: '';
59
position: absolute;
60
background: transparent;
61
border: 6px solid transparent;
62
z-index: 1000001; }
May 21, 2016
63
[class*="hint--"]:after {
Jan 19, 2013
64
background: #383838;
65
color: white;
66
padding: 8px 10px;
67
font-size: 12px;
Feb 14, 2016
68
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Jan 19, 2013
69
line-height: 12px;
70
white-space: nowrap; }
May 21, 2016
71
[class*="hint--"][aria-label]:after {
72
content: attr(aria-label); }
73
[class*="hint--"][data-hint]:after {
74
content: attr(data-hint); }
75
76
[aria-label='']:before, [aria-label='']:after,
77
[data-hint='']:before,
78
[data-hint='']:after {
79
display: none !important; }
80
Jan 20, 2013
81
/**
82
* source: hint-position.scss
83
*
84
* Defines the positoning logic for the tooltips.
Jan 20, 2013
86
* Classes added:
87
* 1) hint--top
88
* 2) hint--bottom
89
* 3) hint--left
90
* 4) hint--right
91
*/
Feb 3, 2013
92
/**
93
* set default color for tooltip arrows
94
*/
Nov 22, 2015
95
.hint--top-left:before {
96
border-top-color: #383838; }
97
98
.hint--top-right:before {
99
border-top-color: #383838; }
100
Jan 19, 2013
101
.hint--top:before {
102
border-top-color: #383838; }
Nov 22, 2015
104
.hint--bottom-left:before {
105
border-bottom-color: #383838; }
106
107
.hint--bottom-right:before {
108
border-bottom-color: #383838; }
109
Jan 19, 2013
110
.hint--bottom:before {
111
border-bottom-color: #383838; }
Jan 19, 2013
113
.hint--left:before {
114
border-left-color: #383838; }
Jan 19, 2013
116
.hint--right:before {
117
border-right-color: #383838; }
Feb 3, 2013
119
/**
Feb 19, 2013
120
* top tooltip
Feb 3, 2013
121
*/
122
.hint--top:before {
Mar 26, 2016
123
margin-bottom: -11px; }
Nov 22, 2015
124
Jan 19, 2013
125
.hint--top:before, .hint--top:after {
Jan 19, 2013
127
left: 50%; }
Nov 22, 2015
128
Mar 26, 2016
129
.hint--top:before {
130
left: calc(50% - 6px); }
131
132
.hint--top:after {
Jan 25, 2016
133
-webkit-transform: translateX(-50%);
134
-moz-transform: translateX(-50%);
Nov 22, 2015
135
transform: translateX(-50%); }
136
Jun 5, 2016
137
.hint--top:hover:before {
Mar 26, 2016
138
-webkit-transform: translateY(-8px);
139
-moz-transform: translateY(-8px);
140
transform: translateY(-8px); }
141
Jun 5, 2016
142
.hint--top:hover:after {
Nov 22, 2015
143
-webkit-transform: translateX(-50%) translateY(-8px);
144
-moz-transform: translateX(-50%) translateY(-8px);
145
transform: translateX(-50%) translateY(-8px); }
Feb 3, 2013
147
/**
Feb 19, 2013
148
* bottom tooltip
Feb 3, 2013
149
*/
150
.hint--bottom:before {
Mar 26, 2016
151
margin-top: -11px; }
Nov 22, 2015
152
Jan 19, 2013
153
.hint--bottom:before, .hint--bottom:after {
Jan 19, 2013
155
left: 50%; }
Nov 22, 2015
156
Mar 26, 2016
157
.hint--bottom:before {
158
left: calc(50% - 6px); }
159
160
.hint--bottom:after {
Jan 25, 2016
161
-webkit-transform: translateX(-50%);
162
-moz-transform: translateX(-50%);
Nov 22, 2015
163
transform: translateX(-50%); }
164
Jun 5, 2016
165
.hint--bottom:hover:before {
Mar 26, 2016
166
-webkit-transform: translateY(8px);
167
-moz-transform: translateY(8px);
168
transform: translateY(8px); }
169
Jun 5, 2016
170
.hint--bottom:hover:after {
Nov 22, 2015
171
-webkit-transform: translateX(-50%) translateY(8px);
172
-moz-transform: translateX(-50%) translateY(8px);
173
transform: translateX(-50%) translateY(8px); }
Feb 3, 2013
175
/**
Feb 19, 2013
176
* right tooltip
Feb 3, 2013
177
*/
178
.hint--right:before {
Mar 26, 2016
179
margin-left: -11px;
Jan 19, 2013
180
margin-bottom: -6px; }
Nov 22, 2015
181
182
.hint--right:after {
Jan 19, 2013
183
margin-bottom: -14px; }
Nov 22, 2015
184
Jan 19, 2013
185
.hint--right:before, .hint--right:after {
Jan 19, 2013
187
bottom: 50%; }
Nov 22, 2015
188
Jun 5, 2016
189
.hint--right:hover:before {
Mar 26, 2016
190
-webkit-transform: translateX(8px);
191
-moz-transform: translateX(8px);
192
transform: translateX(8px); }
193
Jun 5, 2016
194
.hint--right:hover:after {
Jan 19, 2013
195
-webkit-transform: translateX(8px);
Feb 3, 2013
196
-moz-transform: translateX(8px);
197
transform: translateX(8px); }
Feb 3, 2013
199
/**
Feb 19, 2013
200
* left tooltip
Feb 3, 2013
201
*/
202
.hint--left:before {
Mar 26, 2016
203
margin-right: -11px;
Jan 19, 2013
204
margin-bottom: -6px; }
Nov 22, 2015
205
206
.hint--left:after {
Jan 19, 2013
207
margin-bottom: -14px; }
Nov 22, 2015
208
Jan 19, 2013
209
.hint--left:before, .hint--left:after {
Jan 19, 2013
211
bottom: 50%; }
Nov 22, 2015
212
Jun 5, 2016
213
.hint--left:hover:before {
Mar 26, 2016
214
-webkit-transform: translateX(-8px);
215
-moz-transform: translateX(-8px);
216
transform: translateX(-8px); }
217
Jun 5, 2016
218
.hint--left:hover:after {
Jan 19, 2013
219
-webkit-transform: translateX(-8px);
Feb 3, 2013
220
-moz-transform: translateX(-8px);
221
transform: translateX(-8px); }
Nov 22, 2015
223
/**
224
* top-left tooltip
225
*/
226
.hint--top-left:before {
Mar 26, 2016
227
margin-bottom: -11px; }
Nov 22, 2015
228
229
.hint--top-left:before, .hint--top-left:after {
230
bottom: 100%;
231
left: 50%; }
232
Mar 26, 2016
233
.hint--top-left:before {
234
left: calc(50% - 6px); }
235
236
.hint--top-left:after {
Jan 25, 2016
237
-webkit-transform: translateX(-100%);
238
-moz-transform: translateX(-100%);
Nov 22, 2015
239
transform: translateX(-100%); }
240
241
.hint--top-left:after {
Mar 26, 2016
242
margin-left: 12px; }
243
Jun 5, 2016
244
.hint--top-left:hover:before {
Mar 26, 2016
245
-webkit-transform: translateY(-8px);
246
-moz-transform: translateY(-8px);
247
transform: translateY(-8px); }
Nov 22, 2015
248
Jun 5, 2016
249
.hint--top-left:hover:after {
Nov 22, 2015
250
-webkit-transform: translateX(-100%) translateY(-8px);
251
-moz-transform: translateX(-100%) translateY(-8px);
252
transform: translateX(-100%) translateY(-8px); }
253
254
/**
255
* top-right tooltip
256
*/
257
.hint--top-right:before {
Mar 26, 2016
258
margin-bottom: -11px; }
Nov 22, 2015
259
260
.hint--top-right:before, .hint--top-right:after {
261
bottom: 100%;
262
left: 50%; }
263
Mar 26, 2016
264
.hint--top-right:before {
265
left: calc(50% - 6px); }
266
267
.hint--top-right:after {
Jan 25, 2016
268
-webkit-transform: translateX(0);
269
-moz-transform: translateX(0);
Nov 22, 2015
270
transform: translateX(0); }
271
272
.hint--top-right:after {
Mar 26, 2016
273
margin-left: -12px; }
Nov 22, 2015
274
Jun 5, 2016
275
.hint--top-right:hover:before {
Mar 26, 2016
276
-webkit-transform: translateY(-8px);
277
-moz-transform: translateY(-8px);
278
transform: translateY(-8px); }
279
Jun 5, 2016
280
.hint--top-right:hover:after {
Nov 22, 2015
281
-webkit-transform: translateY(-8px);
282
-moz-transform: translateY(-8px);
283
transform: translateY(-8px); }
284
285
/**
286
* bottom-left tooltip
287
*/
288
.hint--bottom-left:before {
Mar 26, 2016
289
margin-top: -11px; }
Nov 22, 2015
290
291
.hint--bottom-left:before, .hint--bottom-left:after {
292
top: 100%;
293
left: 50%; }
294
Mar 26, 2016
295
.hint--bottom-left:before {
296
left: calc(50% - 6px); }
297
298
.hint--bottom-left:after {
Jan 25, 2016
299
-webkit-transform: translateX(-100%);
300
-moz-transform: translateX(-100%);
Nov 22, 2015
301
transform: translateX(-100%); }
302
303
.hint--bottom-left:after {
Mar 26, 2016
304
margin-left: 12px; }
305
Jun 5, 2016
306
.hint--bottom-left:hover:before {
Mar 26, 2016
307
-webkit-transform: translateY(8px);
308
-moz-transform: translateY(8px);
309
transform: translateY(8px); }
Nov 22, 2015
310
Jun 5, 2016
311
.hint--bottom-left:hover:after {
Nov 22, 2015
312
-webkit-transform: translateX(-100%) translateY(8px);
313
-moz-transform: translateX(-100%) translateY(8px);
314
transform: translateX(-100%) translateY(8px); }
315
316
/**
317
* bottom-right tooltip
318
*/
319
.hint--bottom-right:before {
Mar 26, 2016
320
margin-top: -11px; }
Nov 22, 2015
321
322
.hint--bottom-right:before, .hint--bottom-right:after {
323
top: 100%;
324
left: 50%; }
325
Mar 26, 2016
326
.hint--bottom-right:before {
327
left: calc(50% - 6px); }
328
329
.hint--bottom-right:after {
Jan 25, 2016
330
-webkit-transform: translateX(0);
331
-moz-transform: translateX(0);
Nov 22, 2015
332
transform: translateX(0); }
333
334
.hint--bottom-right:after {
Mar 26, 2016
335
margin-left: -12px; }
336
Jun 5, 2016
337
.hint--bottom-right:hover:before {
Mar 26, 2016
338
-webkit-transform: translateY(8px);
339
-moz-transform: translateY(8px);
340
transform: translateY(8px); }
Nov 22, 2015
341
Jun 5, 2016
342
.hint--bottom-right:hover:after {
Nov 22, 2015
343
-webkit-transform: translateY(8px);
344
-moz-transform: translateY(8px);
345
transform: translateY(8px); }
346
Mar 7, 2016
347
/**
348
* source: hint-sizes.scss
349
*
350
* Defines width restricted tooltips that can span
351
* across multiple lines.
352
*
353
* Classes added:
354
* 1) hint--small
355
* 2) hint--medium
356
* 3) hint--large
357
*
358
*/
359
.hint--small:after,
360
.hint--medium:after,
361
.hint--large:after {
362
white-space: normal;
Jul 28, 2016
363
line-height: 1.4em;
364
word-wrap: break-word; }
Mar 7, 2016
365
366
.hint--small:after {
367
width: 80px; }
368
369
.hint--medium:after {
370
width: 150px; }
371
372
.hint--large:after {
373
width: 300px; }
374
375
/**
376
* source: hint-theme.scss
377
*
378
* Defines basic theme for tooltips.
379
*
380
*/
May 21, 2016
381
[class*="hint--"] {
382
/**
Nov 22, 2015
383
* tooltip body
384
*/ }
May 21, 2016
385
[class*="hint--"]:after {
386
text-shadow: 0 -1px 0px black;
387
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
388
Jan 20, 2013
389
/**
390
* source: hint-color-types.scss
391
*
392
* Contains tooltips of various types based on color differences.
Jan 20, 2013
394
* Classes added:
395
* 1) hint--error
396
* 2) hint--warning
397
* 3) hint--info
398
* 4) hint--success
Jan 20, 2013
400
*/
401
/**
402
* Error
403
*/
404
.hint--error:after {
405
background-color: #b34e4d;
406
text-shadow: 0 -1px 0px #592726; }
Nov 22, 2015
407
408
.hint--error.hint--top-left:before {
409
border-top-color: #b34e4d; }
410
411
.hint--error.hint--top-right:before {
412
border-top-color: #b34e4d; }
413
414
.hint--error.hint--top:before {
415
border-top-color: #b34e4d; }
Nov 22, 2015
416
417
.hint--error.hint--bottom-left:before {
418
border-bottom-color: #b34e4d; }
419
420
.hint--error.hint--bottom-right:before {
421
border-bottom-color: #b34e4d; }
422
423
.hint--error.hint--bottom:before {
424
border-bottom-color: #b34e4d; }
Nov 22, 2015
425
426
.hint--error.hint--left:before {
427
border-left-color: #b34e4d; }
Nov 22, 2015
428
429
.hint--error.hint--right:before {
430
border-right-color: #b34e4d; }
431
Jan 20, 2013
432
/**
433
* Warning
434
*/
435
.hint--warning:after {
436
background-color: #c09854;
437
text-shadow: 0 -1px 0px #6c5328; }
Nov 22, 2015
438
439
.hint--warning.hint--top-left:before {
440
border-top-color: #c09854; }
441
442
.hint--warning.hint--top-right:before {
443
border-top-color: #c09854; }
444
445
.hint--warning.hint--top:before {
446
border-top-color: #c09854; }
Nov 22, 2015
447
448
.hint--warning.hint--bottom-left:before {
449
border-bottom-color: #c09854; }
450
451
.hint--warning.hint--bottom-right:before {
452
border-bottom-color: #c09854; }
453
454
.hint--warning.hint--bottom:before {
455
border-bottom-color: #c09854; }
Nov 22, 2015
456
457
.hint--warning.hint--left:before {
458
border-left-color: #c09854; }
Nov 22, 2015
459
460
.hint--warning.hint--right:before {
461
border-right-color: #c09854; }
462
Jan 20, 2013
463
/**
464
* Info
465
*/
466
.hint--info:after {
467
background-color: #3986ac;
Nov 22, 2015
468
text-shadow: 0 -1px 0px #1a3c4d; }
469
470
.hint--info.hint--top-left:before {
471
border-top-color: #3986ac; }
472
473
.hint--info.hint--top-right:before {
474
border-top-color: #3986ac; }
475
476
.hint--info.hint--top:before {
477
border-top-color: #3986ac; }
Nov 22, 2015
478
479
.hint--info.hint--bottom-left:before {
480
border-bottom-color: #3986ac; }
481
482
.hint--info.hint--bottom-right:before {
483
border-bottom-color: #3986ac; }
484
485
.hint--info.hint--bottom:before {
486
border-bottom-color: #3986ac; }
Nov 22, 2015
487
488
.hint--info.hint--left:before {
489
border-left-color: #3986ac; }
Nov 22, 2015
490
491
.hint--info.hint--right:before {
492
border-right-color: #3986ac; }
493
Jan 20, 2013
494
/**
495
* Success
496
*/
497
.hint--success:after {
498
background-color: #458746;
499
text-shadow: 0 -1px 0px #1a321a; }
Nov 22, 2015
500
501
.hint--success.hint--top-left:before {
502
border-top-color: #458746; }
503
504
.hint--success.hint--top-right:before {
505
border-top-color: #458746; }
506
507
.hint--success.hint--top:before {
508
border-top-color: #458746; }
Nov 22, 2015
509
510
.hint--success.hint--bottom-left:before {
511
border-bottom-color: #458746; }
512
513
.hint--success.hint--bottom-right:before {
514
border-bottom-color: #458746; }
515
516
.hint--success.hint--bottom:before {
517
border-bottom-color: #458746; }
Nov 22, 2015
518
519
.hint--success.hint--left:before {
520
border-left-color: #458746; }
Nov 22, 2015
521
522
.hint--success.hint--right:before {
523
border-right-color: #458746; }
Jan 19, 2013
524
Feb 3, 2013
525
/**
526
* source: hint-always.scss
527
*
528
* Defines a persisted tooltip which shows always.
Feb 3, 2013
530
* Classes added:
531
* 1) hint--always
Feb 3, 2013
533
*/
Jan 19, 2013
534
.hint--always:after, .hint--always:before {
535
opacity: 1;
536
visibility: visible; }
Nov 22, 2015
537
Mar 26, 2016
538
.hint--always.hint--top:before {
539
-webkit-transform: translateY(-8px);
540
-moz-transform: translateY(-8px);
541
transform: translateY(-8px); }
542
543
.hint--always.hint--top:after {
Nov 22, 2015
544
-webkit-transform: translateX(-50%) translateY(-8px);
545
-moz-transform: translateX(-50%) translateY(-8px);
546
transform: translateX(-50%) translateY(-8px); }
547
Mar 26, 2016
548
.hint--always.hint--top-left:before {
549
-webkit-transform: translateY(-8px);
550
-moz-transform: translateY(-8px);
551
transform: translateY(-8px); }
552
553
.hint--always.hint--top-left:after {
Nov 22, 2015
554
-webkit-transform: translateX(-100%) translateY(-8px);
555
-moz-transform: translateX(-100%) translateY(-8px);
556
transform: translateX(-100%) translateY(-8px); }
557
Mar 26, 2016
558
.hint--always.hint--top-right:before {
559
-webkit-transform: translateY(-8px);
560
-moz-transform: translateY(-8px);
561
transform: translateY(-8px); }
562
563
.hint--always.hint--top-right:after {
Feb 3, 2013
564
-webkit-transform: translateY(-8px);
565
-moz-transform: translateY(-8px);
566
transform: translateY(-8px); }
Nov 22, 2015
567
Mar 26, 2016
568
.hint--always.hint--bottom:before {
569
-webkit-transform: translateY(8px);
570
-moz-transform: translateY(8px);
571
transform: translateY(8px); }
572
573
.hint--always.hint--bottom:after {
Nov 22, 2015
574
-webkit-transform: translateX(-50%) translateY(8px);
575
-moz-transform: translateX(-50%) translateY(8px);
576
transform: translateX(-50%) translateY(8px); }
577
Mar 26, 2016
578
.hint--always.hint--bottom-left:before {
579
-webkit-transform: translateY(8px);
580
-moz-transform: translateY(8px);
581
transform: translateY(8px); }
582
583
.hint--always.hint--bottom-left:after {
Nov 22, 2015