Permalink
Oct 1, 2021
Jan 20, 2013
Jan 20, 2013
Jun 1, 2013
Jan 19, 2013
May 17, 2014
May 17, 2014
Jan 19, 2013
May 21, 2016
Jan 20, 2013
Jan 20, 2013
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Nov 22, 2015
Mar 26, 2016
Mar 26, 2016
Nov 22, 2015
Mar 7, 2016
Mar 7, 2016
Feb 28, 2015
Feb 28, 2015
Jan 20, 2013
Jan 20, 2013
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Nov 22, 2015
Feb 3, 2013
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Feb 3, 2013
Mar 26, 2016
Nov 22, 2015
Mar 26, 2016
Newer
100644
655 lines (532 sloc)
14.9 KB
1
/*! Hint.css - v2.7.0 - 2021-10-01
2
* https://kushagra.dev/lab/hint/
3
* Copyright (c) 2021 Kushagra Gour */
7
\*-------------------------------------*/
8
/**
9
* HINT.css is a tooltip library made in pure CSS.
10
*
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)
37
-webkit-transform: translate3d(0, 0, 0);
38
-moz-transform: translate3d(0, 0, 0);
39
transform: translate3d(0, 0, 0);
41
opacity: 0;
42
z-index: 1000000;
43
pointer-events: none;
44
-webkit-transition: 0.3s ease;
46
transition: 0.3s ease;
47
-webkit-transition-delay: 0ms;
48
-moz-transition-delay: 0ms;
49
transition-delay: 0ms; }
54
-webkit-transition-delay: 100ms;
55
-moz-transition-delay: 100ms;
56
transition-delay: 100ms; }
58
content: '';
59
position: absolute;
60
background: transparent;
61
border: 6px solid transparent;
62
z-index: 1000001; }
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 {
81
/**
82
* source: hint-position.scss
83
*
84
* Defines the positoning logic for the tooltips.
86
* Classes added:
87
* 1) hint--top
88
* 2) hint--bottom
89
* 3) hint--left
90
* 4) hint--right
91
*/
95
.hint--top-left:before {
96
border-top-color: #383838; }
97
98
.hint--top-right:before {
99
border-top-color: #383838; }
100
104
.hint--bottom-left:before {
105
border-bottom-color: #383838; }
106
107
.hint--bottom-right:before {
108
border-bottom-color: #383838; }
109
138
-webkit-transform: translateY(-8px);
139
-moz-transform: translateY(-8px);
140
transform: translateY(-8px); }
141
143
-webkit-transform: translateX(-50%) translateY(-8px);
144
-moz-transform: translateX(-50%) translateY(-8px);
145
transform: translateX(-50%) translateY(-8px); }
166
-webkit-transform: translateY(8px);
167
-moz-transform: translateY(8px);
168
transform: translateY(8px); }
169
171
-webkit-transform: translateX(-50%) translateY(8px);
172
-moz-transform: translateX(-50%) translateY(8px);
173
transform: translateX(-50%) translateY(8px); }
190
-webkit-transform: translateX(8px);
191
-moz-transform: translateX(8px);
192
transform: translateX(8px); }
193
214
-webkit-transform: translateX(-8px);
215
-moz-transform: translateX(-8px);
216
transform: translateX(-8px); }
217
228
229
.hint--top-left:before, .hint--top-left:after {
230
bottom: 100%;
231
left: 50%; }
232
233
.hint--top-left:before {
234
left: calc(50% - 6px); }
235
236
.hint--top-left:after {
245
-webkit-transform: translateY(-8px);
246
-moz-transform: translateY(-8px);
247
transform: translateY(-8px); }
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 {
259
260
.hint--top-right:before, .hint--top-right:after {
261
bottom: 100%;
262
left: 50%; }
263
264
.hint--top-right:before {
265
left: calc(50% - 6px); }
266
267
.hint--top-right:after {
276
-webkit-transform: translateY(-8px);
277
-moz-transform: translateY(-8px);
278
transform: translateY(-8px); }
279
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 {
290
291
.hint--bottom-left:before, .hint--bottom-left:after {
292
top: 100%;
293
left: 50%; }
294
295
.hint--bottom-left:before {
296
left: calc(50% - 6px); }
297
298
.hint--bottom-left:after {
307
-webkit-transform: translateY(8px);
308
-moz-transform: translateY(8px);
309
transform: translateY(8px); }
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 {
321
322
.hint--bottom-right:before, .hint--bottom-right:after {
323
top: 100%;
324
left: 50%; }
325
326
.hint--bottom-right:before {
327
left: calc(50% - 6px); }
328
329
.hint--bottom-right:after {
338
-webkit-transform: translateY(8px);
339
-moz-transform: translateY(8px);
340
transform: translateY(8px); }
343
-webkit-transform: translateY(8px);
344
-moz-transform: translateY(8px);
345
transform: translateY(8px); }
346
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;
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
*/
386
text-shadow: 0 -1px 0px black;
387
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
388
389
/**
390
* source: hint-color-types.scss
391
*
392
* Contains tooltips of various types based on color differences.
394
* Classes added:
395
* 1) hint--error
396
* 2) hint--warning
397
* 3) hint--info
398
* 4) hint--success
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
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
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
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
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
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
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
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
525
/**
526
* source: hint-always.scss
527
*
528
* Defines a persisted tooltip which shows always.
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 {
544
-webkit-transform: translateX(-50%) translateY(-8px);
545
-moz-transform: translateX(-50%) translateY(-8px);
546
transform: translateX(-50%) translateY(-8px); }
547
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 {
554
-webkit-transform: translateX(-100%) translateY(-8px);
555
-moz-transform: translateX(-100%) translateY(-8px);
556
transform: translateX(-100%) translateY(-8px); }
557
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 {
564
-webkit-transform: translateY(-8px);
565
-moz-transform: translateY(-8px);
566
transform: translateY(-8px); }
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 {
574
-webkit-transform: translateX(-50%) translateY(8px);
575
-moz-transform: translateX(-50%) translateY(8px);
576
transform: translateX(-50%) translateY(8px); }
577
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 {