63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
@use '../mixins/mixins.scss' as *;
|
|
|
|
@include b(notify) {
|
|
position: fixed;
|
|
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
|
|
/* 顶部弹出 start */
|
|
@include m(top) {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 10rpx 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateY(-100%);
|
|
|
|
@include when(active) {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
/* 顶部弹出 end */
|
|
|
|
/* 居中弹出 start */
|
|
@include m(center) {
|
|
left: 50%;
|
|
top: 50%;
|
|
padding: 15rpx;
|
|
border-radius: 8rpx;
|
|
transform-origin: center center;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
|
|
@include when(active) {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
/* 居中弹出 end */
|
|
|
|
/* 底部弹出 start */
|
|
@include m(bottom) {
|
|
left: 50%;
|
|
bottom: 13%;
|
|
padding: 15rpx;
|
|
border-radius: 8rpx;
|
|
transform-origin: center center;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
|
|
@include when(active) {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
/* 底部弹出 end */
|
|
|
|
/* 弹出激活 状态 start */
|
|
@include when(active) {
|
|
opacity: 1;
|
|
}
|
|
/* 弹出激活 状态 end */
|
|
}
|