mirror of https://github.com/IanLunn/Hover.git
76 lines
1.8 KiB
SCSS
76 lines
1.8 KiB
SCSS
/* Hover Shadow */
|
|
@include keyframes(hover) {
|
|
50% {
|
|
@include prefixed(transform, translateY(-3px));
|
|
}
|
|
|
|
100% {
|
|
@include prefixed(transform, translateY(-6px));
|
|
}
|
|
}
|
|
|
|
@include keyframes(hover-shadow) {
|
|
0% {
|
|
@include prefixed(transform, translateY(6px));
|
|
opacity: .4;
|
|
}
|
|
|
|
50% {
|
|
@include prefixed(transform, translateY(3px));
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
100% {
|
|
@include prefixed(transform, translateY(6px));
|
|
opacity: .4;
|
|
}
|
|
}
|
|
|
|
@mixin hover-shadow {
|
|
display: inline-block;
|
|
position: relative;
|
|
@include prefixed(transition-duration, $defaultDuration);
|
|
@include prefixed(transition-property, transform);
|
|
|
|
@include hacks();
|
|
|
|
&:before {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: -1;
|
|
content: '';
|
|
top: 100%;
|
|
left: 5%;
|
|
height: 10px;
|
|
width: 90%;
|
|
opacity: 0;
|
|
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
|
|
@include prefixed(transition-duration, $defaultDuration);
|
|
@include prefixed(transition-property, "transform, opacity");
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
@include prefixed(transform, translateY(-6px));
|
|
@include prefixed(animation-name, hover);
|
|
@include prefixed(animation-duration, 1.5s);
|
|
@include prefixed(animation-delay, $defaultDuration);
|
|
@include prefixed(animation-timing-function, linear);
|
|
@include prefixed(animation-iteration-count, infinite);
|
|
@include prefixed(animation-direction, alternate);
|
|
|
|
&:before {
|
|
opacity: .4;
|
|
@include prefixed(transform, translateY(6px));
|
|
@include prefixed(animation-name, hover-shadow);
|
|
@include prefixed(animation-duration, 1.5s);
|
|
@include prefixed(animation-delay, .3s);
|
|
@include prefixed(animation-timing-function, linear);
|
|
@include prefixed(animation-iteration-count, infinite);
|
|
@include prefixed(animation-direction, alternate);
|
|
}
|
|
}
|
|
}
|