naive-ui/styles/Drawer.scss

38 lines
803 B
SCSS
Raw Normal View History

2019-09-04 16:06:07 +08:00
@import './mixins/mixins.scss';
@import './themes/vars.scss';
2019-09-04 16:06:07 +08:00
2019-10-22 13:19:12 +08:00
@include themes-mixin {
@include b(drawer) {
2019-12-20 17:16:17 +08:00
@include slide-in-from-right-transition($duration: .3s);
padding: 16px 24px;
2019-10-22 13:19:12 +08:00
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: $--n-card-color;
color: $--n-secondary-text-color;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
2019-10-22 13:19:12 +08:00
}
2019-09-04 16:06:07 +08:00
}
@include b(drawer-overlay) {
@include fade-in-transition(fade-in);
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
@include b(drawer-container) {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
visibility: hidden;
@include m(active) {
visibility: visible;
}
}