amis-rpc-design/libs/amis/packages/amis-ui/scss/components/_modal.scss
2023-10-07 19:42:30 +08:00

262 lines
5.4 KiB
SCSS

.is-modalOpened {
overflow: hidden;
.#{$ns}Modal {
overflow-x: hidden;
overflow-y: auto;
}
}
@keyframes modalIn {
from {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
@keyframes modalOut {
to {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
.#{$ns}Modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-modal;
overflow: hidden;
outline: 0;
&-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
pointer-events: auto;
background: var(--Modal-bg);
background-clip: padding-box;
outline: 0;
z-index: 2;
margin-left: auto;
margin-right: auto;
margin-top: var(--Modal-content-startMarginTop);
margin-bottom: var(--gap-md);
padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX);
border: var(--Modal-content-borderWidth) solid
var(--Modal-content-borderColor);
border-radius: var(--dialog-default-border-radius);
&.in,
&.out {
animation-duration: var(--animation-duration);
animation-fill-mode: both;
}
&.in {
animation-name: modalIn;
}
&.out {
animation-name: modalOut;
}
}
&-overlay {
transition: ease-in-out opacity var(--animation-duration);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: var(--Modal-overlay-bg);
pointer-events: none; // 很重要,如果不设置,弹框虽然滚轮可滚,但是鼠标没办法操作滚动条。
opacity: 0;
&.in {
opacity: 1;
}
&.out {
opacity: 0;
}
}
&-header {
padding: var(--Modal-header-paddingY) #{px2rem(24px)};
background: var(--Modal-header-bg);
@include clearfix();
border-bottom: var(--Modal-body-borderTop);
border-top-left-radius: var(--Modal-content-borderRadius);
border-top-right-radius: var(--Modal-content-borderRadius);
.Dialog-close {
content: var(--dialog-icon-icon);
}
}
&-title {
font-size: var(--dialog-header-fontSize);
color: var(--dialog-header-color);
font-weight: var(--dialog-header-fontWeight);
height: var(--dialog-header-height);
}
&-close {
float: right;
color: var(--Modal-close-color);
line-height: inherit;
text-decoration: none;
vertical-align: middle;
z-index: calc(#{$zindex-spinner-overlay} + 1);
svg {
width: var(--dialog-icon-size);
height: var(--dialog-icon-size);
fill: var(--Modal-close-color);
color: var(--dialog-icon-color);
}
&:not(.is-disabled) {
cursor: pointer;
&:hover {
text-decoration: none;
color: var(--Model-close-onHover-color);
svg {
fill: var(--Model-close-onHover-color);
}
}
}
}
&-content > &-close {
position: absolute;
right: var(--gap-md);
top: var(--gap-sm);
z-index: 10;
}
&-body {
margin: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
flex-grow: 1;
height: auto;
// overflow-y: auto;
padding: 0 #{px2rem(24px)};
font-size: var(--dialog-content-fontSize);
color: var(--dialog-content-color);
}
&-footer {
// @include clearfix();
height: var(--dialog-footer-height);
display: flex;
align-items: center;
justify-content: flex-end;
padding: var(--Modal-footer-padding) #{px2rem(24px)};
border-top: var(--Modal-body-borderBottom);
margin: var(--Modal-footer-marginY) var(--Modal-footer-marginX);
border-bottom-left-radius: var(--Modal-content-borderRadius);
border-bottom-right-radius: var(--Modal-content-borderRadius);
.#{$ns}Button {
min-width: var(--Modal-footer-button-width);
margin-left: var(--dialog-footer-margin-left);
}
}
}
@for $i from (2) through 10 {
.#{$ns}Modal--#{$i}th {
.#{$ns}Modal-content {
margin-top: calc(
var(--Modal-content-startMarginTop) +
#{($i - 1)} *
var(--Modal-content-stepMarginTop)
);
}
}
}
@include media-breakpoint-up(sm) {
.#{$ns}Modal-content:not(.#{$ns}Modal-content-custom) {
max-width: var(--dialog-size-normal-width);
border-width: var(--dialog-default-border-width);
}
.#{$ns}Modal--sm .#{$ns}Modal-content {
max-width: var(--dialog-size-sm-width);
}
.#{$ns}Modal--base .#{$ns}Modal-content {
max-width: var(--Modal-widthBase);
}
.#{$ns}Modal--md .#{$ns}Modal-content {
max-width: var(--Modal-widthMd);
}
.#{$ns}Modal--lg .#{$ns}Modal-content {
max-width: var(--dialog-size-lg-width);
}
.#{$ns}Modal--xl .#{$ns}Modal-content {
max-width: var(--dialog-size-xl-width);
}
}
.#{$ns}Dialog-info {
flex-basis: 0;
flex-grow: 1;
text-align: left;
}
.#{$ns}Dialog-error {
color: var(--danger);
white-space: pre-wrap;
}
.#{$ns}Modal--full {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> .#{$ns}Modal-content {
flex-basis: 0;
flex-grow: 1;
margin: 30px;
width: calc(100% - 60px);
max-width: unset;
> .#{$ns}Modal-body {
height: 0;
overflow: auto;
}
}
}
/* 移动端样式调整 */
@include media-breakpoint-down(sm) {
.#{$ns}Modal {
.#{$ns}Modal-footer {
display: flex;
> .#{$ns}Button {
flex: 1;
height: px2rem(44px);
&:first-child {
margin-left: 0;
}
}
}
}
}