ZF/vue-vben-admin
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/vue/vue-vben-admin synced 2025-12-30 05:12:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(Modal): 修复BasicModal跟原生Modal样式冲突问题 (#3720)

Browse Source
This commit is contained in:
zhang
2024-04-09 10:39:05 +08:00
committed by GitHub
parent 0bbc2ef4ba
commit ade6d4c22d
1 changed files with 89 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/components/Modal/src/index.less
View File

@@ -1,3 +1,5 @@
@prefix-cls: ~'@{namespace}-basic-modal-wrap';
.fullscreen-modal { .fullscreen-modal {
overflow: hidden; overflow: hidden;
@@ -18,103 +20,105 @@
} }
} }
.ant-modal { .@{prefix-cls} {
width: 520px; .ant-modal {
padding-bottom: 0; width: 520px;
padding-bottom: 0;
.ant-modal-body > .scrollbar { .ant-modal-body > .scrollbar {
padding: 14px; padding: 14px;
}
&-title {
font-size: 16px;
font-weight: bold;
.base-title {
cursor: move !important;
} }
}
.ant-modal-body { &-title {
padding: 0; font-size: 16px;
font-weight: bold;
> .scrollbar > .scrollbar__bar.is-horizontal { .base-title {
display: none; cursor: move !important;
}
}
&-large {
top: 60px;
&--mini {
top: 16px;
}
}
&-header {
padding: 16px;
border-bottom: 1px solid @border-color-base;
}
&-content {
padding: 0 !important;
box-shadow:
0 4px 8px 0 rgb(0 0 0 / 20%),
0 6px 20px 0 rgb(0 0 0 / 19%);
}
&-footer {
padding: 10px 16px;
border-top: 1px solid @border-color-base;
button + button {
margin-left: 10px;
}
}
&-close {
top: 0 !important;
right: 0 !important;
width: auto !important;
outline: none;
background: transparent !important;
font-weight: normal;
}
&-close-x {
display: inline-block;
width: 96px;
height: 56px;
line-height: 56px !important;
}
&-confirm-body {
.ant-modal-confirm-content {
> * {
color: @text-color-help-dark;
} }
} }
}
&-confirm-confirm.error .ant-modal-confirm-body > .anticon { .ant-modal-body {
color: @error-color; padding: 0;
}
&-confirm-btns { > .scrollbar > .scrollbar__bar.is-horizontal {
.ant-btn:last-child { display: none;
margin-right: 0; }
} }
}
&-confirm-info { &-large {
.ant-modal-confirm-body > .anticon { top: 60px;
color: @warning-color;
&--mini {
top: 16px;
}
} }
}
&-confirm-confirm.success { &-header {
.ant-modal-confirm-body > .anticon { padding: 16px;
color: @success-color; border-bottom: 1px solid @border-color-base;
}
&-content {
padding: 0 !important;
box-shadow:
0 4px 8px 0 rgb(0 0 0 / 20%),
0 6px 20px 0 rgb(0 0 0 / 19%);
}
&-footer {
padding: 10px 16px;
border-top: 1px solid @border-color-base;
button + button {
margin-left: 10px;
}
}
&-close {
top: 0 !important;
right: 0 !important;
width: auto !important;
outline: none;
background: transparent !important;
font-weight: normal;
}
&-close-x {
display: inline-block;
width: 96px;
height: 56px;
line-height: 56px !important;
}
&-confirm-body {
.ant-modal-confirm-content {
> * {
color: @text-color-help-dark;
}
}
}
&-confirm-confirm.error .ant-modal-confirm-body > .anticon {
color: @error-color;
}
&-confirm-btns {
.ant-btn:last-child {
margin-right: 0;
}
}
&-confirm-info {
.ant-modal-confirm-body > .anticon {
color: @warning-color;
}
}
&-confirm-confirm.success {
.ant-modal-confirm-body > .anticon {
color: @success-color;
}
} }
} }
} }