pkg-components
Version:
74 lines (67 loc) • 1.39 kB
CSS
.container {
align-content: space-between;
align-items: center;
background-color: #fff;
border-radius: 50px;
border: 2px solid var(--color-primary-disabled);
bottom: 0;
display: flex;
height: 45px;
justify-content: space-between;
left: 0;
min-height: 45px;
overflow: hidden;
padding: 2px;
position: sticky;
}
.tabs {
align-items: center;
border-radius: 50px;
cursor: pointer;
display: flex;
flex: 1;
height: 100%;
justify-content: center;
position: relative;
width: 95%;
}
.slider {
background: var(--color-primary-red);
border-radius: 50px;
height: 95%;
position: absolute;
z-index: -1;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.text {
-webkit-line-clamp: 2;
font-family: PFont-Regular;
font-size: 14px;
font-weight: 500;
justify-content: center;
line-height: 1.5rem;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
transition: .6s ease-in-out;
}
.tabs.active .text {
color: var(--color-neutral-white);
}
.tabs.active .slider {
background: var(--color-primary-dark);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.slider.active {
animation: bounce 0.5s;
}