2019-08-08 16:02:27 +08:00
|
|
|
@import './mixins/mixins.scss';
|
|
|
|
|
2019-10-16 11:33:49 +08:00
|
|
|
@include themes-mixin {
|
|
|
|
@include b(back-top) {
|
|
|
|
@include fade-in-transition(back-top);
|
|
|
|
@include once {
|
|
|
|
position: fixed;
|
|
|
|
right: 40px;
|
|
|
|
bottom: 40px;
|
2019-12-06 13:42:00 +08:00
|
|
|
min-width: 40px;
|
2019-10-16 11:33:49 +08:00
|
|
|
height: 40px;
|
|
|
|
cursor: pointer;
|
2019-08-08 16:02:27 +08:00
|
|
|
}
|
2019-12-06 13:42:00 +08:00
|
|
|
@include e(default-button) {
|
|
|
|
@include once {
|
2019-12-23 21:40:45 +08:00
|
|
|
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, fill .3s $--n-ease-in-out-cubic-bezier;
|
2019-12-06 13:42:00 +08:00
|
|
|
border-radius: 20px;
|
|
|
|
height: 40px;
|
|
|
|
width: 40px;
|
|
|
|
svg {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
2019-10-16 11:33:49 +08:00
|
|
|
fill: $--back-top-button-fill;
|
2019-12-06 13:42:00 +08:00
|
|
|
box-shadow: map-get($--back-top-box-shadow, 'default');
|
|
|
|
&:hover {
|
|
|
|
box-shadow: map-get($--back-top-box-shadow, 'hover');
|
2019-10-16 11:33:49 +08:00
|
|
|
fill: $--back-top-button-fill-hover;
|
|
|
|
}
|
2019-12-06 13:42:00 +08:00
|
|
|
&:active {
|
|
|
|
box-shadow: map-get($--back-top-box-shadow, 'active');
|
2019-10-25 17:53:41 +08:00
|
|
|
fill: $--back-top-button-fill-active;
|
2019-10-16 11:33:49 +08:00
|
|
|
}
|
2019-08-08 16:02:27 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|