Initial commit of akmon project
This commit is contained in:
140
uni_modules/lime-popup/components/l-popup/index-u.scss
Normal file
140
uni_modules/lime-popup/components/l-popup/index-u.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user