naive-ui/styles/BackTop.scss

39 lines
1.1 KiB
SCSS
Raw Normal View History

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 once {
2020-02-21 16:48:45 +08:00
@include fade-in-scale-up-transition(back-top);
2019-10-16 11:33:49 +08:00
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;
2020-02-21 16:48:45 +08:00
@include m(transition-disabled) {
transition: none !important;
}
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;
}
}
2020-02-21 16:48:45 +08:00
fill: map-get($--back-top-button-fill, 'default');
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');
2020-02-21 16:48:45 +08:00
fill: map-get($--back-top-button-fill, 'hover');
2019-10-16 11:33:49 +08:00
}
2019-12-06 13:42:00 +08:00
&:active {
box-shadow: map-get($--back-top-box-shadow, 'active');
2020-02-21 16:48:45 +08:00
fill: map-get($--back-top-button-fill, 'active');
2019-10-16 11:33:49 +08:00
}
2019-08-08 16:02:27 +08:00
}
}
}