amis2/scss/components/_modal.scss

245 lines
4.7 KiB
SCSS

.is-modalOpened {
overflow: hidden;
&.has-scrollbar {
padding-right: px2rem(15px);
}
.#{$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`
min-height: $Modal-content-minHeight;
pointer-events: auto;
background-color: $Modal-bg;
background-clip: padding-box;
outline: 0;
z-index: 2;
margin-left: auto;
margin-right: auto;
margin-top: $Modal-content-startMarginTop;
margin-bottom: $gap-md;
border: $Modal-content-borderWidth solid $Modal-content-borderColor;
border-radius: $Modal-content-borderRadius;
// transition: ease-out all 0.3s;
// transform: translateY(-300px) scale(0.2);
// opacity: 0;
&.in,
&.out {
// opacity: 1;
// transform: translateY(0) scale(1);
animation-duration: 0.35s;
animation-fill-mode: both;
}
&.in {
animation-name: modalIn;
}
&.out {
animation-name: modalOut;
}
}
&-overlay {
transition: ease-in-out opacity 0.5s;
// transition-delay: 0.2s;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background-color: $Modal-overlay-bg;
pointer-events: none; // 很重要,如果不设置,弹框虽然滚轮可滚,但是鼠标没办法操作滚动条。
opacity: 0;
&.in {
opacity: 1;
}
&.out {
opacity: 0;
}
}
&-header {
padding: $Modal-header-paddingY $Modal-header-paddingX;
background-color: $Modal-header-bg;
@include clearfix();
border-bottom: $Modal-body-borderTop;
@if $Modal-content-borderRadius {
border-top-left-radius: $Modal-content-borderRadius;
border-top-right-radius: $Modal-content-borderRadius;
}
}
&-title {
font-size: $Modal-title-fontSize;
color: $Modal-title-color;
}
&-close {
float: right;
color: $Modal-close-color;
line-height: inherit;
text-decoration: none;
vertical-align: middle;
svg {
width: $Modal-close-width;
height: $Modal-close-width;
fill: $Modal-close-color;
}
&:not(.is-disabled) {
cursor: pointer;
&:hover {
text-decoration: none;
color: $Model-close-onHover-color;
svg {
fill: $Model-close-onHover-color;
}
}
}
}
&-content > &-close {
position: absolute;
right: $gap-md;
top: $gap-sm;
z-index: 10;
}
&-body {
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
$Modal-body-paddingY;
flex-grow: 1;
}
&-header + &-body {
padding-top: $Modal-body-paddingY;
}
&-footer {
// @include clearfix();
display: flex;
align-items: center;
justify-content: flex-end;
padding: $Modal-footer-padding;
border-top: $Modal-body-borderBottom;
margin: $Modal-footer-marginY $Modal-footer-marginX;
@if $Modal-content-borderRadius {
border-bottom-left-radius: $Modal-content-borderRadius;
border-bottom-right-radius: $Modal-content-borderRadius;
}
.#{$ns}Button {
margin-left: $gap-sm;
}
}
}
@for $i from (2) through 10 {
.#{$ns}Modal--#{$i}th {
.#{$ns}Modal-content {
margin-top: $Modal-content-startMarginTop +
($i - 1) *
$Modal-content-stepMarginTop;
}
}
}
@include media-breakpoint-up(sm) {
.#{$ns}Modal-content {
max-width: $Modal-widthBase;
}
.#{$ns}Modal--sm .#{$ns}Modal-content {
max-width: $Modal-widthSm;
}
.#{$ns}Modal--base .#{$ns}Modal-content {
max-width: $Modal-widthBase;
}
.#{$ns}Modal--md .#{$ns}Modal-content {
max-width: $Modal-widthMd;
}
.#{$ns}Modal--lg .#{$ns}Modal-content {
max-width: $Modal-widthLg;
}
.#{$ns}Modal--xl .#{$ns}Modal-content {
max-width: $Modal-widthXl;
}
}
.#{$ns}Dialog-info {
flex-basis: 0;
flex-grow: 1;
text-align: left;
}
.#{$ns}Dialog-error {
color: $danger;
}
.#{$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;
}
}
}