mirror of
https://github.com/prymitive/karma
synced 2026-05-21 04:33:07 +00:00
50 lines
967 B
SCSS
50 lines
967 B
SCSS
// https://github.com/mladenplavsic/css-ripple-effect
|
|
.with-click {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
background-image: radial-gradient(
|
|
circle,
|
|
$with-click-default 10%,
|
|
transparent 10.01%
|
|
);
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
transform: scale(10, 10);
|
|
opacity: 0;
|
|
transition: transform 0.4s, opacity 0.4s;
|
|
}
|
|
|
|
&.with-click-dark:after {
|
|
background-image: radial-gradient(
|
|
circle,
|
|
$with-click-dark 10%,
|
|
transparent 10.01%
|
|
);
|
|
}
|
|
|
|
&.with-click-light:after {
|
|
background-image: radial-gradient(
|
|
circle,
|
|
$with-click-light 10%,
|
|
transparent 10.01%
|
|
);
|
|
}
|
|
|
|
&:active:after {
|
|
transform: scale(0, 0);
|
|
opacity: 0.2;
|
|
transition: 0s;
|
|
}
|
|
}
|