72 lines
853 B
SCSS
72 lines
853 B
SCSS
//animations
|
|
|
|
.icon-property {
|
|
@include transition($slow-transition-time, $transition-bezier);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
#animated-buttons {
|
|
.btn {
|
|
i {
|
|
position: relative;
|
|
top: 3px;
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-rotate {
|
|
i {
|
|
@extend .icon-property;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
i {
|
|
@include rotate-53();
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-magnify {
|
|
i {
|
|
@extend .icon-property;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
i {
|
|
@include transform-scale(1.22);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-move-left {
|
|
i {
|
|
@extend .icon-property;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
i {
|
|
@include transform-translate-x(-5px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-move-right {
|
|
i {
|
|
@extend .icon-property;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
i {
|
|
@include transform-translate-x(5px);
|
|
}
|
|
}
|
|
}
|