/*————————————
Effect v1
————————————*/ @import “icon-hover-extend”;
.u-icon-effect-v1-1–hover, .u-icon-effect-v1-2–hover {
position: relative; overflow: inherit;
}
.u-icon-effect-v1-1–hover::after, .u-icon-effect-v1-2–hover::after {
@extend %u-icon-hover-effect-after; @include px-to-rem(top, -7px); @include px-to-rem(left, -7px); @include px-to-rem(padding, 7px); box-shadow: 0 0 0 1px $g-color-primary; transition: all .2s ease-in-out; opacity: 0;
}
.u-icon-effect-v1-1–hover:hover, .u-icon-effect-v1-2–hover:hover, .u-icon-v4.u-icon-effect-v1-1–hover:hover .u-icon-v4-inner, .u-icon-v4.u-icon-effect-v1-2–hover:hover .u-icon-v4-inner, .u-icon-block–hover:hover .u-icon-effect-v1-1–hover, .u-icon-block–hover:hover .u-icon-effect-v1-2–hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-1–hover .u-icon-v4-inner, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover .u-icon-v4-inner {
color: $g-color-white; border-color: $g-color-primary; background: $g-color-primary !important;
}
.u-icon-v4.u-icon-effect-v1-1–hover:hover, .u-icon-v4.u-icon-effect-v1-2–hover:hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-1–hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover {
border-color: transparent;
}
// Effect v1-1 .u-icon-effect-v1-1–hover::after {
transform: scale(.8);
}
.u-icon-effect-v1-1–hover:hover::after, .u-icon-block–hover:hover .u-icon-effect-v1-1–hover::after {
transform: scale(1); opacity: 1;
}
// Effect v1-2 .u-icon-effect-v1-2–hover::after {
transform: scale(1.2);
}
.u-icon-effect-v1-2–hover:hover::after, .u-icon-block–hover:hover .u-icon-effect-v1-2–hover::after {
transform: scale(1); opacity: 1;
}
.u-icon-v4.u-icon-effect-v1-2–hover:hover::after, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover::after {
transform: scale(.8);
}