first commit
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
.selectableServiceItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selectableServiceItemActive {
|
||||
color: var(--white);
|
||||
animation: serviceItemActiveAnimation 0.2s ease forwards;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes serviceItemActiveAnimation {
|
||||
0% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 0%, var(--white-dark) 0%);
|
||||
}
|
||||
25% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 10%, var(--white-dark) 25%);
|
||||
}
|
||||
50% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 20%, var(--white-dark) 50%);
|
||||
}
|
||||
|
||||
75% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 50%, var(--white-dark) 75%);
|
||||
}
|
||||
90% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 80%, var(--white-dark) 90%);
|
||||
}
|
||||
100% {
|
||||
background: var(--wine-darkest);
|
||||
background: linear-gradient(180deg, var(--wine-darkest) 0%, var(--wine-dark) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes serviceItemInActiveAnimation {
|
||||
0% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--wine-darkest) 0%, var(--white-dark) 100%);
|
||||
}
|
||||
100% {
|
||||
background: var(--white-dark);
|
||||
background: radial-gradient(circle, var(--white-dark) 100%, var(--white-dark) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.selectableServiceItemInactive {
|
||||
color: var(--black);
|
||||
animation: serviceItemInActiveAnimation 0.2s ease forwards;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.selectableServiceItem h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selectableServiceItem p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-top: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selectableServiceItem span {
|
||||
padding-top: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user