Indique a Umbler para seus amigos e ganhe R$ 100 em créditos!
Indique a Umbler!
Saiba mais
.hellobar-visible {
padding-top: 7rem !important;
}
.hellobar-visible .hellobar ~ .navbar {
transform: translateY(3.5rem);
}
.hellobar {
background-color: #f26b7a;
display: flex;
align-items: center;
justify-content: center;
height: 3.5rem; /* height */
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
color: #fff;
z-index: 900;
}
.hellobar-close, .hellobar-close:hover {
color: #000;
font-size: 1.4rem;
opacity: .6;
position: absolute;
padding: .5rem 1.5rem;
right: 0;
transition: opacity .3s;
}
.hellobar-close .icon-close {
vertical-align: baseline;
}
.hellobar-close:hover {
opacity: 1;
}
/* animated svg */
.umblerito-coin-img {
transform: translate(-12px, 16px);
transition: transform .4s;
will-change: transform;
}
.umblerito-coin-eye-left-img, .umblerito-coin-eye-right-img {
animation: umblerito-blink-eye 4s infinite;
transform-origin: 42px 67px;
will-change: transform;
}
.umblerito-coin-eye-right-img {
transform-origin: 112px 67px;
}
/* hover */
.hellobar.hover .umblerito-coin-img {
transform: translate(-12px, 2px);
}
.hellobar.hover .umblerito-coin-eye-left-img,
.hellobar.hover .umblerito-coin-eye-right-img {
animation: none;
transform-origin: 42px 67px;
transform: translate(3px, -2px);
}
.hellobar.hover .umblerito-coin-eye-right-img {
transform-origin: 112px 67px;
}
@@keyframes umblerito-blink-eye {
0% { transform: scale(1); }
60% { transform: scale(1); }
61% { transform: scale(1.3, .3); }
64% { transform: scale(1); }
100% { transform: scale(1); }
}
