2019-09-04 16:06:07 +08:00
|
|
|
@import './mixins/mixins.scss';
|
2019-09-17 19:21:07 +08:00
|
|
|
@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);
|
2019-12-20 16:59:37 +08:00
|
|
|
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;
|
2019-12-22 15:50:37 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|