60 lines
1.6 KiB
SCSS
Executable File
60 lines
1.6 KiB
SCSS
Executable File
/*--------------------------------------------------
|
|
[Back To Top Theme Button]
|
|
----------------------------------------------------*/
|
|
|
|
.back-to-top {
|
|
@include position(fixed, $bottom: 10px, $right: 10px);
|
|
display: inline-block;
|
|
z-index: 9;
|
|
@include size(40px);
|
|
@include font($size: 11px, $weight: 400);
|
|
color: $color-white;
|
|
text-align: center;
|
|
line-height: 3;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
background: $color-heading;
|
|
@include border-radius(3px);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
padding: 5px;
|
|
@include translate3d(0,50px,0);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
|
|
&:hover {
|
|
color: $color-white;
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
|
|
&:focus,
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/* The Button Becomes Visible */
|
|
.back-to-top {
|
|
&.back-to-top-is-visible {
|
|
visibility: visible;
|
|
opacity: .6;
|
|
@include translate3d(0,0,0);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
|
|
.back-to-top {
|
|
&.back-to-top-fade-out {
|
|
opacity: .4;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
} |