pure-admin-thin/src/style/element-plus.scss
2022-12-03 15:27:44 +08:00

132 lines
2.8 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
.el-dropdown-menu {
padding: 0 !important;
}
.el-range-separator {
box-sizing: content-box;
}
.is-dark {
z-index: 9999 !important;
}
/* 重置 el-button 中 icon 的 margin */
.reset-margin [class*="el-icon"] + span {
margin-left: 2px !important;
}
/* 自定义 popover 的类名 */
.pure-popper {
padding: 0 !important;
}
/* 自定义 tooltip 的类名 */
.pure-tooltip {
// 右侧操作面板right-panel类名的z-index为40000tooltip需要大于它才能显示
z-index: 41000 !important;
}
/* nprogress 适配 element-plus 的主题色 */
#nprogress {
& .bar {
background-color: var(--el-color-primary) !important;
}
& .peg {
box-shadow: 0 0 10px var(--el-color-primary),
0 0 5px var(--el-color-primary) !important;
}
& .spinner-icon {
border-top-color: var(--el-color-primary);
border-left-color: var(--el-color-primary);
}
}
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式表现更鲜明 */
.el-dialog__headerbtn,
.el-message-box__headerbtn {
&:hover {
.el-dialog__close {
color: var(--el-color-info) !important;
}
}
}
.el-icon {
&.el-dialog__close,
&.el-drawer__close,
&.el-message-box__close,
&.el-notification__closeBtn {
width: 24px;
height: 24px;
outline: none;
border-radius: 4px;
transition: background-color 0.2s, color 0.2s;
&:hover {
color: rgba(0, 0, 0, 0.88) !important;
background-color: rgba(0, 0, 0, 0.06);
text-decoration: none;
}
}
}
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,暗黑模式在 src/style/dark.scss 文件进行了适配 */
.pure-message {
border-width: 0 !important;
background: #fff !important;
padding: 10px 13px !important;
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
0 9px 28px 8px #0000000d !important;
&.el-message.is-closable .el-message__content {
padding-right: 17px !important;
}
& .el-message__content {
color: #000000d9 !important;
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__icon {
margin-right: 8px !important;
}
& .el-message__closeBtn {
outline: none;
border-radius: 4px;
right: 9px !important;
transition: background-color 0.2s, color 0.2s;
&:hover {
background-color: rgba(0, 0, 0, 0.06);
}
}
}