141 lines
3.2 KiB
SCSS
141 lines
3.2 KiB
SCSS
@import '~@/uni_modules/lime-style/index.scss';
|
|
// $prefix: l !default;
|
|
$popup: #{$prefix}-popup;
|
|
|
|
$popup-bg-color: create-var(popup-bg-color, #fff);
|
|
$popup-close-icon-color: create-var(popup-close-icon-color, rgba(0,0,0,0.6));
|
|
$popup-border-radius: create-var(popup-border-radius, $border-radius-lg);
|
|
|
|
|
|
.#{$popup} {
|
|
position: fixed;
|
|
// z-index: 11500;
|
|
// max-height: 100vh;
|
|
// transition: translateY 1000ms ease;
|
|
transition-duration: 300ms;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
background-color: $popup-bg-color;
|
|
overflow: visible;
|
|
opacity: 1; // uniapp x ios 必须写
|
|
|
|
&__close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 20rpx;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
color: $popup-close-icon-color;
|
|
/* #endif */
|
|
&-icon {
|
|
color: $popup-close-icon-color;
|
|
}
|
|
}
|
|
|
|
&--top {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom-left-radius: $popup-border-radius;
|
|
border-bottom-right-radius: $popup-border-radius;
|
|
// transform: scale(1) translateY(0)
|
|
transform: scale(1) translate(0, 0)
|
|
}
|
|
|
|
&--bottom {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-top-left-radius: $popup-border-radius;
|
|
border-top-right-radius: $popup-border-radius;
|
|
// transform: scale(1) translateY(0);
|
|
transform: scale(1) translate(0, 0);
|
|
|
|
}
|
|
&--safe-top {
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
padding-top: constant(safe-area-inset-top);
|
|
padding-top: env(safe-area-inset-top);
|
|
/* #endif */
|
|
}
|
|
&--safe-bottom {
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
/* #endif */
|
|
}
|
|
&--left {
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
// transform: scale(1) translateX(0);
|
|
transform: scale(1) translate(0, 0);
|
|
// height: 100vh;
|
|
}
|
|
|
|
&--right {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
// transform: scale(1) translateX(0);
|
|
transform: scale(1) translate(0, 0);
|
|
// height: 100vh;
|
|
}
|
|
|
|
&--center {
|
|
top: 50%;
|
|
left: 50%;
|
|
/* #ifdef APP-IOS */
|
|
transform: translate(-50%, -50%);
|
|
/* #endif */
|
|
/* #ifndef APP-IOS */
|
|
transform: translate(-50%, -50%) scale(1);
|
|
/* #endif */
|
|
transform-origin: 50% 50%;
|
|
border-radius: $popup-border-radius;
|
|
}
|
|
|
|
&.#{$popup}-fade-enter,
|
|
&.#{$popup}-fade-leave-to {
|
|
opacity: 0;
|
|
&.#{$popup}--top {
|
|
// transform: translateY(-100%);
|
|
transform: scale(1) translate(0, -100%);
|
|
}
|
|
|
|
&.#{$popup}--bottom {
|
|
// transform: translateY(100%);
|
|
transform: scale(1) translate(0, 100%);
|
|
}
|
|
|
|
&.#{$popup}--left {
|
|
// transform: translateX(-100%);
|
|
transform: scale(1) translate(-100%, 0);
|
|
}
|
|
|
|
&.#{$popup}--right {
|
|
// transform: translateX(100%);
|
|
transform: scale(1) translate(100%, 0);
|
|
}
|
|
|
|
&.#{$popup}--center {
|
|
// transform: scale(0.6) translate(-50%, -50%);
|
|
/* #ifndef APP-IOS */
|
|
transform: translate(-50%, -50%) scale(0.6);
|
|
/* #endif */
|
|
/* #ifdef APP-IOS */
|
|
transform: translate(-50%, -50%);
|
|
/* #endif */
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&.#{$prefix}-dialog-enter,
|
|
&.#{$prefix}-dialog-leave-to {
|
|
&.#{$popup}--center {
|
|
transform: scale(0.6) translate(-50%, -50%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|