116 lines
3.3 KiB
Stylus
116 lines
3.3 KiB
Stylus
// 优化 Element Plus 组件库默认样式
|
||
|
||
:root {
|
||
--custom-radius: 9px;
|
||
// 系统主色
|
||
--main-color: #1C6EFF;
|
||
--el-color-white: white !important;
|
||
--el-color-black: white !important;
|
||
--el-color-primary: #1C6EFF !important;
|
||
--el-button-hover-bg-color: #458FFF !important;
|
||
--el-button-hover-border-color: #458FFF !important;
|
||
--el-color-primary-light-3: #458FFF !important;
|
||
--el-color-danger: #CF171D !important;
|
||
--el-menu-text-color: #29343D !important;
|
||
--el-menu-hover-text-color: #29343D !important;
|
||
--el-menu-bg-color: #FFFFFF !important;
|
||
--el-menu-hover-bg-color: rgb(204, 204, 204) !important;
|
||
--el-menu-level: 0;
|
||
// 输入框边框颜色
|
||
// --el-border-color: #E4E4E7 !important; // DCDFE6
|
||
// 按钮粗度
|
||
--el-font-weight-primary: 400 !important;
|
||
|
||
--el-component-custom-height: 32px !important;
|
||
|
||
--el-component-size: var(--el-component-custom-height) !important;
|
||
|
||
// 边框、按钮圆角...
|
||
--el-border-radius-base: calc(var(--custom-radius) / 3 + 2px) !important;
|
||
|
||
--el-border-radius-small: calc(var(--custom-radius) / 3 + 4px) !important;
|
||
--el-messagebox-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
|
||
--el-popover-border-radius: calc(var(--custom-radius) / 3 + 4px) !important;
|
||
|
||
.region .el-radio-button__original-radio:checked + .el-radio-button__inner {
|
||
color: var(--theme-color) !important;
|
||
}
|
||
}
|
||
|
||
|
||
// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
|
||
// 修改 el-button 高度
|
||
.el-button--default {
|
||
height: var(--el-component-custom-height) !important;
|
||
}
|
||
|
||
|
||
.el-button:focus-visible {
|
||
outline none !important
|
||
outline-offset unset !important
|
||
transition none !important
|
||
}
|
||
|
||
// circle 按钮宽度优化
|
||
.el-button--default.is-circle {
|
||
width: var(--el-component-custom-height) !important;
|
||
}
|
||
|
||
// 修改 el-select 高度
|
||
.el-select--default {
|
||
.el-select__wrapper {
|
||
min-height: var(--el-component-custom-height) !important;
|
||
}
|
||
}
|
||
|
||
// 修改 el-checkbox-button 高度
|
||
.el-checkbox-button--default .el-checkbox-button__inner,
|
||
// 修改 el-radio-button 高度
|
||
.el-radio-button--default .el-radio-button__inner {
|
||
padding: 10px 15px !important;
|
||
}
|
||
|
||
.el-scrollbar__bar.is-vertical {
|
||
width: 4px;
|
||
}
|
||
|
||
// -------------------------------- 修改 el-size=default 组件默认高度 end --------------------------------
|
||
|
||
.el-dialog__body {
|
||
padding: 25px 0 !important;
|
||
position: relative; // 为了兼容 el-pagination 样式，需要设置 relative，不然会影响 el-pagination 的样式，比如 el-pagination__jump--small 会被影响，导致 el-pagination__jump--small 按钮无法点击，详见 URL_ADDRESS.com/element-plus/element-plus/issues/5684#issuecomment-1176299275;
|
||
}
|
||
|
||
|
||
.el-modal-dialog {
|
||
height 100% !important
|
||
box-sizing border-box !important
|
||
|
||
.el-overlay-dialog {
|
||
height 100% !important
|
||
overflow: hidden !important
|
||
display: flex !important
|
||
justify-content: center !important
|
||
align-items: center !important
|
||
box-sizing border-box !important
|
||
}
|
||
|
||
.el-dialog {
|
||
height 90% !important
|
||
margin 0 !important
|
||
box-sizing border-box !important
|
||
}
|
||
|
||
.draggable-dialog > .el-dialog__header > .el-dialog__title {
|
||
cursor move !important
|
||
display block
|
||
width 100%
|
||
}
|
||
|
||
.el-dialog__body {
|
||
height calc(100% - 88px) !important
|
||
box-sizing border-box !important
|
||
}
|
||
}
|
||
|