初始化
This commit is contained in:
486
src/styles/scss/element-plus.scss
Normal file
486
src/styles/scss/element-plus.scss
Normal file
@@ -0,0 +1,486 @@
|
||||
$radius: 6px;
|
||||
|
||||
html:root,
|
||||
html.dark:root {
|
||||
@each $color in (primary, success, warning, info) {
|
||||
--el-color-#{$color}: rgb(var(--#{$color}-color));
|
||||
--el-color-#{$color}-dark-2: rgb(var(--#{$color}-600-color));
|
||||
--el-color-#{$color}-light-3: rgb(var(--#{$color}-400-color));
|
||||
--el-color-#{$color}-light-5: rgb(var(--#{$color}-300-color));
|
||||
--el-color-#{$color}-light-7: rgb(var(--#{$color}-200-color));
|
||||
--el-color-#{$color}-light-9: rgb(var(--#{$color}-color) / 0.1);
|
||||
}
|
||||
|
||||
--el-color-danger: rgb(var(--error-color));
|
||||
--el-color-danger-dark-2: rgb(var(--error-600-color));
|
||||
--el-color-danger-light-3: rgb(var(--error-400-color));
|
||||
--el-color-danger-light-5: rgb(var(--error-300-color));
|
||||
--el-color-danger-light-7: rgb(var(--error-200-color));
|
||||
--el-color-danger-light-9: rgb(var(--error-color) / 0.1);
|
||||
|
||||
--el-menu-item-hover-fill: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--el-menu-item-height: 42px;
|
||||
--business-form-shell-bg: var(--el-color-primary-light-9);
|
||||
--business-form-shell-border: var(--el-color-primary-light-7);
|
||||
--business-form-shell-title-color: var(--el-color-primary-dark-2);
|
||||
--business-form-shell-action-color: var(--el-color-primary);
|
||||
--business-form-shell-radius: 12px;
|
||||
}
|
||||
html.dark:root,
|
||||
.bg-inverted {
|
||||
--el-menu-item-hover-fill: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bg-inverted {
|
||||
.el-menu {
|
||||
// --el-menu-bg-color: var(--el-fill-color-blank);
|
||||
// --el-menu-text-color: var(--el-text-color-primary);
|
||||
--el-menu-bg-color: transparent;
|
||||
--el-menu-text-color: #e5eaf3;
|
||||
}
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.el-menu--popup {
|
||||
min-width: unset;
|
||||
}
|
||||
.el-popper {
|
||||
border: none;
|
||||
border-radius: $radius;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
&.el-menu--horizontal {
|
||||
border: none;
|
||||
}
|
||||
.el-sub-menu.is-active {
|
||||
> .el-sub-menu__title {
|
||||
color: var(--el-menu-active-color);
|
||||
}
|
||||
}
|
||||
.el-sub-menu__title:hover,
|
||||
li.el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu-item.is-active {
|
||||
background-color: unset;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: auto;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
background-color: var(--el-menu-item-hover-fill);
|
||||
}
|
||||
}
|
||||
li.el-menu-item {
|
||||
margin-top: 6px;
|
||||
&.is-active,
|
||||
&.is-active:hover {
|
||||
&::before {
|
||||
background-color: var(--el-menu-hover-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
li.el-sub-menu {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
html .el-collapse {
|
||||
--el-collapse-header-font-size: 16px;
|
||||
border: none;
|
||||
.el-collapse-item__header {
|
||||
border: none;
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
border: none;
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
--el-card-padding: 16px;
|
||||
.el-card__header {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-statistic {
|
||||
.el-statistic__content {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
.el-form-item__label {
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__footer {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-dialog.el-dialog {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: var(--business-form-shell-radius);
|
||||
}
|
||||
|
||||
.business-form-drawer.el-drawer {
|
||||
overflow: hidden;
|
||||
|
||||
&.rtl {
|
||||
border-radius: var(--business-form-shell-radius) 0 0 var(--business-form-shell-radius);
|
||||
}
|
||||
|
||||
&.ltr {
|
||||
border-radius: 0 var(--business-form-shell-radius) var(--business-form-shell-radius) 0;
|
||||
}
|
||||
|
||||
&.ttb {
|
||||
border-radius: 0 0 var(--business-form-shell-radius) var(--business-form-shell-radius);
|
||||
}
|
||||
|
||||
&.btt {
|
||||
border-radius: var(--business-form-shell-radius) var(--business-form-shell-radius) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-dialog__header,
|
||||
.business-form-drawer__header {
|
||||
padding: 16px 24px 14px !important;
|
||||
background-color: var(--business-form-shell-bg);
|
||||
border-bottom: 1px solid var(--business-form-shell-border);
|
||||
box-sizing: border-box;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.business-form-dialog__body,
|
||||
.business-form-drawer__body {
|
||||
padding: 20px 24px 24px !important;
|
||||
}
|
||||
|
||||
.business-form-dialog__footer,
|
||||
.business-form-drawer__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--business-form-shell-bg);
|
||||
border-top: 1px solid var(--business-form-shell-border);
|
||||
box-sizing: border-box;
|
||||
padding: 12px 24px 20px !important;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.business-form-dialog__header,
|
||||
.business-form-drawer__header {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.business-form-dialog__footer,
|
||||
.business-form-drawer__footer {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.business-form-dialog__header {
|
||||
.el-dialog__title {
|
||||
color: var(--business-form-shell-title-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
color: var(--business-form-shell-action-color);
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
|
||||
.el-dialog__close {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
color: var(--business-form-shell-title-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-drawer__header {
|
||||
.el-drawer__title {
|
||||
color: var(--business-form-shell-title-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-drawer__close-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
color: var(--business-form-shell-action-color);
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
color: var(--business-form-shell-title-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-dialog__scrollbar,
|
||||
.business-form-drawer__scrollbar {
|
||||
width: 100%;
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-dialog__scrollbar-view,
|
||||
.business-form-drawer__scrollbar-view,
|
||||
.business-form-dialog__content,
|
||||
.business-form-drawer__content {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.business-form-drawer__body {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.business-form-drawer__scrollbar {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.business-form-dialog__body {
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-drawer__body {
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-section + .business-form-section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.business-form-section__title {
|
||||
margin-bottom: 12px;
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.business-form-label-with-tip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.business-form-label-tip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--el-color-primary);
|
||||
font-size: 14px;
|
||||
cursor: help;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
.business-form-label-tooltip {
|
||||
max-width: 320px;
|
||||
line-height: 1.6;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.business-form-label-popover {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.business-form-label-popover__title {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.business-form-label-popover__summary {
|
||||
margin-top: 6px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.business-form-label-popover__list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.business-form-label-popover__item + .business-form-label-popover__item {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.business-form-label-popover__item-title {
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.business-form-label-popover__item-desc {
|
||||
margin-top: 2px;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.business-form-radio-group {
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.business-form-switch-field {
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.business-table-action-cell {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.business-table-action-button {
|
||||
min-width: 64px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.business-table-action-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.business-table-action-menu__button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-card__header {
|
||||
border: none;
|
||||
}
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.header {
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.cell {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs {
|
||||
&.segment {
|
||||
border-radius: $radius;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
--el-tabs-header-height: 30px;
|
||||
.el-tabs__content {
|
||||
display: none;
|
||||
}
|
||||
.el-tabs__header {
|
||||
border: none;
|
||||
.el-tabs__item {
|
||||
border: none;
|
||||
padding: 0 24px;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider__text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.el-segmented {
|
||||
padding: 5px;
|
||||
border-radius: $radius;
|
||||
.el-segmented__item {
|
||||
border-radius: $radius;
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.el-segmented__item-selected {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
2
src/styles/scss/global.scss
Normal file
2
src/styles/scss/global.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@forward 'element-plus';
|
||||
@forward 'scrollbar';
|
||||
21
src/styles/scss/scrollbar.scss
Normal file
21
src/styles/scss/scrollbar.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
@mixin scrollbar($size: 7px, $color: rgba(0, 0, 0, 0.5)) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $color transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color;
|
||||
border-radius: $size;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $color;
|
||||
border-radius: $size;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user