| 1 |
.jBox-wrapper { box-sizing: border-box; text-align: left; } |
| 2 |
.jBox-title, .jBox-content, .jBox-container { box-sizing: border-box; position: relative; word-break: break-word; } |
| 3 |
.jBox-container { font-size: 12px; color: #3c505e; background-color: #e8e9ea; } |
| 4 |
.jBox-content { overflow: hidden; padding: 0 15px 15px 15px; transition: opacity 0.1s; } |
| 5 |
|
| 6 |
.jBox-Tooltip .jBox-container { border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.3); } |
| 7 |
.jBox-Tooltip .jBox-title { padding: 15px 15px 5px 15px; font-weight: bold; } |
| 8 |
|
| 9 |
.jBox-pointer { position: absolute; overflow: hidden; } |
| 10 |
.jBox-pointer:after { content: ''; width: 20px; height: 20px; position: absolute; transform: rotate(45deg); background-color: #e8e9ea; } |
| 11 |
|
| 12 |
.jBox-pointer-bottom { bottom: 0; width: 30px; height: 12px; } |
| 13 |
.jBox-pointer-bottom:after { left: 5px; bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.15); } |
| 14 |
|
| 15 |
.jBox-animated-slideUp { animation: jBox-slideUp 0.1s; } |
| 16 |
.jBox-animated-slideDown { animation: jBox-slideDown 0.1s; } |
| 17 |
|
| 18 |
[class^="jBox-animated-"], [class*=" jBox-animated-"] { animation-fill-mode: both; } |
| 19 |
|
| 20 |
@keyframes jBox-slideUp { |
| 21 |
0% { transform: translateY(0); } |
| 22 |
100% { transform: translateY(-300px); opacity: 0; } |
| 23 |
} |
| 24 |
@keyframes jBox-slideDown { |
| 25 |
0% { transform: translateY(0); } |
| 26 |
100% { transform: translateY(300px); opacity: 0; } |
| 27 |
} |
