52 lines
1.0 KiB
CSS
52 lines
1.0 KiB
CSS
.iconWrapper {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
border-top-left-radius: 30px;
|
|
border-bottom-right-radius: 25px;
|
|
padding: 10px 10px 0 10px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.iconWrapper::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -20px;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: radial-gradient(circle at 0 0, transparent 20px, #ffffff 20.5px);
|
|
}
|
|
|
|
.iconWrapper::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: -20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: radial-gradient(circle at 0 0, transparent 20px, #ffffff 20.5px);
|
|
}
|
|
|
|
.iconSlideAslant {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.iconSlideAslantInner {
|
|
display: inline-flex;
|
|
transform: translate3d(-12px, 12px, 0);
|
|
transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
|
|
will-change: transform;
|
|
}
|
|
|
|
.iconSlideAslantInner svg {
|
|
flex: 0 0 auto;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.iconSlideAslant:hover .iconSlideAslantInner,
|
|
:global(.tenext-card:hover) .iconSlideAslantInner {
|
|
transform: translate3d(12px, -12px, 0);
|
|
}
|