1
0
Fork 0
mirror of https://github.com/uhIgnacio/igna.rocks.git synced 2024-08-15 02:23:12 +00:00
igna.rocks/assets/js/less/effects/shadow-and-glow-transitions/_shadow-radial.less
2021-08-31 11:30:22 -04:00

41 lines
965 B
Text

/* Shadow Radial */
.shadow-radial() {
.hacks();
position: relative;
&:before,
&:after {
pointer-events: none;
position: absolute;
content: '';
left: 0;
width: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
height: 5px;
opacity: 0;
.prefixed(transition-duration, @mediumDuration);
.prefixed(transition-property, opacity);
}
&:before {
bottom: 100%;
background: -webkit-radial-gradient(50% 150%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at 50% 150%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
}
&:after {
top: 100%;
background: -webkit-radial-gradient(50% -50%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at 50% -50%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%);
}
&:hover:before,
&:focus:before,
&:active:before,
&:hover:after,
&:focus:after,
&:active:after {
opacity: 1;
}
}