|
|
@@ -1,322 +1,619 @@
|
|
|
-// el-input
|
|
|
-.el-input {
|
|
|
- // &.is-focus {
|
|
|
- // .el-input__inner {
|
|
|
- // border-color: $--color-primary !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- .el-input__inner {
|
|
|
- border-radius: 6px;
|
|
|
- border-color: #e8edf3;
|
|
|
- background-color: #f0f4f9;
|
|
|
+/*
|
|
|
+* element-ui不管是自行构建的主题还是动态设置的主题，
|
|
|
+* 产生的css文件中存在近乎1/3的冗余样式，过于累赘，不如直接覆盖样式简洁。
|
|
|
+*/
|
|
|
+// dialog
|
|
|
+.el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #c8c8ca;
|
|
|
+ box-shadow: 5px 5px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ &.is-fullscreen {
|
|
|
+ border-radius: 0;
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid $--color-border;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding-top: 90px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-.el-input-group--append {
|
|
|
- .el-input__inner {
|
|
|
- border-radius: 6px 0 0 6px;
|
|
|
+.el-dialog__header {
|
|
|
+ padding: 15px 20px;
|
|
|
+ .el-dialog__title {
|
|
|
+ color: $--color-text-dark;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ top: 15px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url(../images/icon-close.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-image: url(../images/icon-close-act.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__close {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-dialog__body {
|
|
|
+ padding: 30px 40px;
|
|
|
+ position: relative;
|
|
|
+ border-top: 1px solid $--color-border;
|
|
|
+ color: $--color-text-dark-1;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ padding-right: 2px;
|
|
|
+ }
|
|
|
+ .el-input-tips {
|
|
|
+ color: rgba(187, 187, 187, 1);
|
|
|
+ margin-left: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-dialog__footer {
|
|
|
+ overflow: hidden;
|
|
|
+ .el-button {
|
|
|
+ width: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ float: right;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .opacity-dialog
|
|
|
+.opacity-dialog {
|
|
|
+ .el-dialog {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .el-dialog__header,
|
|
|
+ .el-dialog__footer {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- .el-input-group__append {
|
|
|
- border-color: #e8edf3;
|
|
|
+ .el-dialog__body {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 0;
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
-.el-input-number {
|
|
|
- &.is-without-controls {
|
|
|
+
|
|
|
+// form
|
|
|
+.el-form {
|
|
|
+ &-item {
|
|
|
+ &__error {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(254, 108, 105, 1);
|
|
|
+ }
|
|
|
+ &__content {
|
|
|
+ .el-table {
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // form-info
|
|
|
+ &.form-info {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &--label-top {
|
|
|
+ .el-form-item__label {
|
|
|
+ line-height: 20px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// input
|
|
|
+.el-input {
|
|
|
+ &.is-focus {
|
|
|
+ .el-input__inner {
|
|
|
+ border-color: $--color-primary !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-disabled {
|
|
|
.el-input__inner {
|
|
|
- padding: 0 12px;
|
|
|
+ color: $--color-text-gray-2;
|
|
|
}
|
|
|
}
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 8px;
|
|
|
+ border-color: #ddd;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ // .el-input__suffix {
|
|
|
+ // right: 0;
|
|
|
+ // border-left: 1px solid #ddd;
|
|
|
+ // }
|
|
|
}
|
|
|
-// el-textarea
|
|
|
+// textarea
|
|
|
.el-textarea {
|
|
|
- .el-textarea__inner {
|
|
|
- border-color: #e8edf3;
|
|
|
- background-color: #f0f4f9;
|
|
|
+ &.is-disabled {
|
|
|
+ .el-textarea__inner {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-// datepicker
|
|
|
-.el-date-editor.el-input__inner {
|
|
|
- border-radius: 6px;
|
|
|
- border-color: #e8edf3;
|
|
|
- background-color: #f0f4f9;
|
|
|
-
|
|
|
- .el-range-input {
|
|
|
- background-color: #f0f4f9;
|
|
|
+.el-select {
|
|
|
+ .el-input__suffix {
|
|
|
+ right: 0;
|
|
|
+ border-left: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ .el-select__caret {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ .el-icon-arrow-up:before {
|
|
|
+ font-size: 12px;
|
|
|
+ content: "\e78f";
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-// .el-button
|
|
|
+.el-select-dropdown {
|
|
|
+ &.popper-filter {
|
|
|
+ .el-scrollbar {
|
|
|
+ display: block !important;
|
|
|
+ padding-top: 52px;
|
|
|
+ }
|
|
|
+ .el-select-filter {
|
|
|
+ padding: 0 10px;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ top: 10px;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// upload
|
|
|
+.el-upload,
|
|
|
+.el-upload-dragger {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+// radio
|
|
|
+.el-radio-button {
|
|
|
+ &:hover {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ color: $--color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
+ color: $--color-white;
|
|
|
+ border-color: $--color-primary;
|
|
|
+ background: $--color-primary;
|
|
|
+}
|
|
|
+// button
|
|
|
.el-button {
|
|
|
- border-radius: 6px;
|
|
|
+ border-radius: $--border-radius;
|
|
|
|
|
|
- .icon {
|
|
|
+ > .icon {
|
|
|
margin-right: 5px;
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
}
|
|
|
- .icon-view {
|
|
|
- height: 10px;
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
- .icon-upload {
|
|
|
- height: 12px;
|
|
|
+ &.is-disabled {
|
|
|
+ color: $--color-text-gray-3 !important;
|
|
|
+ background: $--color-background !important;
|
|
|
+ border: 1px solid $--color-border !important;
|
|
|
}
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.el-button + .popover-button,
|
|
|
+.popover-button + .el-button {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.el-button + .el-button {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.el-button--text + .el-button--text {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.el-button--small {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.el-button--text {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+
|
|
|
+ & + .el-button--text {
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
-.el-button--small,
|
|
|
-.el-button--small.is-round {
|
|
|
- padding: 8px 12px 9px;
|
|
|
+.el-button--info {
|
|
|
+ background-color: $--color-cyan;
|
|
|
+ border-color: $--color-cyan;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ background-color: $--color-cyan-light;
|
|
|
+ border-color: $--color-cyan-light;
|
|
|
+ }
|
|
|
}
|
|
|
+.el-button--primary {
|
|
|
+ background-color: $--color-primary;
|
|
|
+ border-color: $--color-primary;
|
|
|
|
|
|
-// .el-table
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ background-color: $--color-primary-light;
|
|
|
+ border-color: $--color-primary-light;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-button--success {
|
|
|
+ background-color: $--color-success;
|
|
|
+ border-color: $--color-success;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ background-color: $--color-success-light;
|
|
|
+ border-color: $--color-success-light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// table
|
|
|
.el-table {
|
|
|
- color: #626a82;
|
|
|
- font-weight: 400;
|
|
|
- background-color: #fff;
|
|
|
+ color: $--color-text-dark-1;
|
|
|
font-size: 14px;
|
|
|
- border-radius: 6px;
|
|
|
|
|
|
- &__header {
|
|
|
- th {
|
|
|
- color: #202b4b;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ thead th {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
}
|
|
|
+
|
|
|
+ thead.is-group th {
|
|
|
+ background-color: $--color-white;
|
|
|
+ }
|
|
|
+
|
|
|
tr.el-table__row {
|
|
|
- border-top: 1px solid #f0f4f9;
|
|
|
+ color: $--color-text-dark;
|
|
|
}
|
|
|
td,
|
|
|
th {
|
|
|
- padding-top: 16px;
|
|
|
- padding-bottom: 16px;
|
|
|
+ border-color: $--color-border !important;
|
|
|
+ padding: 14px 0;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
- // .el-table__row.row-danger {
|
|
|
- // color: $--color-danger;
|
|
|
- // }
|
|
|
-
|
|
|
- .cell {
|
|
|
- .el-checkbox {
|
|
|
- margin-bottom: 0;
|
|
|
+ .el-table__row.row-danger {
|
|
|
+ color: $--color-danger;
|
|
|
+ }
|
|
|
+ &.el-table--noback {
|
|
|
+ tr.el-table__row {
|
|
|
+ background-color: $--color-white;
|
|
|
}
|
|
|
- .btn-table-icon {
|
|
|
- padding: 5px 12px 6px;
|
|
|
- font-size: 14px;
|
|
|
- &.el-button--primary {
|
|
|
- background-color: #5fc9fa;
|
|
|
- border-color: #5fc9fa;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- background-color: mix(#fff, #5fc9fa, 10%);
|
|
|
- border-color: mix(#fff, #5fc9fa, 10%);
|
|
|
- }
|
|
|
+ .cell-head {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ // caret-wrapper
|
|
|
+ .caret-wrapper {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ top: -1px;
|
|
|
+ .sort-caret {
|
|
|
+ &.ascending {
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+ &.descending {
|
|
|
+ bottom: -1px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // action-column
|
|
|
+ td.action-column {
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 -5px;
|
|
|
+ }
|
|
|
+ .el-button--text {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 5px;
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-table--border {
|
|
|
+ border-radius: 10px;
|
|
|
+ th {
|
|
|
+ padding: 12px 0;
|
|
|
+ background-color: #fcfcfd;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+// el-checkbox
|
|
|
+.el-checkbox {
|
|
|
+ .el-checkbox__label {
|
|
|
+ color: $--color-text-gray-2 !important;
|
|
|
+ }
|
|
|
+ .el-checkbox__inner::after {
|
|
|
+ border-width: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-checkbox__input.is-checked .el-checkbox__inner {
|
|
|
+ background-color: $--color-white;
|
|
|
+ border-color: $--color-primary;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-color: $--color-primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: $--color-white;
|
|
|
+ border-color: $--color-primary;
|
|
|
+ &::before {
|
|
|
+ background-color: $--color-primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-radio {
|
|
|
+ .el-radio__label {
|
|
|
+ color: $--color-text-gray-2 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-radio__input.is-checked .el-radio__inner {
|
|
|
+ background-color: $--color-white;
|
|
|
+ border-color: $--color-primary;
|
|
|
+ &::after {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: $--color-primary;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// el-switch
|
|
|
+.el-switch {
|
|
|
+ &.is-checked {
|
|
|
+ .el-switch__core {
|
|
|
+ background-color: $--color-primary;
|
|
|
+ border-color: $--color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// el-pagination
|
|
|
.el-pagination-li {
|
|
|
- width: 32px;
|
|
|
+ min-width: 32px;
|
|
|
height: 32px;
|
|
|
- border-radius: 6px;
|
|
|
+ border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
+ background-color: $--color-white;
|
|
|
+ border: 1px solid #e1e3eb;
|
|
|
}
|
|
|
.el-pagination {
|
|
|
+ padding: 0;
|
|
|
+ .el-pagination__total {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ span:not([class*="suffix"]) {
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
&.is-background {
|
|
|
.btn-prev,
|
|
|
.btn-next {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ margin: 0 5px;
|
|
|
@extend .el-pagination-li;
|
|
|
}
|
|
|
+ .btn-prev:disabled,
|
|
|
+ .btn-next:disabled {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
|
|
|
.el-pager li {
|
|
|
- color: #8c94ac;
|
|
|
- margin: 0 4px;
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ margin: 0 5px;
|
|
|
+ padding: 0 8px;
|
|
|
line-height: 32px;
|
|
|
|
|
|
@extend .el-pagination-li;
|
|
|
&:not(.disabled).active {
|
|
|
color: #fff;
|
|
|
- background-color: #5fc9fa;
|
|
|
+ background-color: $--color-primary;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- span:not([class*="suffix"]) {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
+}
|
|
|
+// el-message-box
|
|
|
+.el-message-box {
|
|
|
+ width: 320px;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ border-radius: 10px;
|
|
|
+ &__title {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- &__total {
|
|
|
- color: #8c94ac;
|
|
|
- margin: 0 16px 0 6px;
|
|
|
+ &__headerbtn {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- &__sizes {
|
|
|
- color: #8c94ac;
|
|
|
- background-color: #fff;
|
|
|
- .el-input__inner {
|
|
|
- background-color: #fff;
|
|
|
- border-color: #fff;
|
|
|
+ &__content {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .el-message-box__status {
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
+ height: 48px;
|
|
|
+ width: 48px;
|
|
|
+ transform: none;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ &.el-icon-warning {
|
|
|
+ border-radius: 50%;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(../images/icon-doubt.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- &__jump {
|
|
|
- margin-left: 6px;
|
|
|
- color: #8c94ac;
|
|
|
- .el-input__inner {
|
|
|
- background-color: #fff;
|
|
|
- border-color: #fff;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
+ .el-message-box__message {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
}
|
|
|
- &__editor {
|
|
|
- height: 32px;
|
|
|
- &.el-input .el-input__inner {
|
|
|
- height: 32px;
|
|
|
+ &__btns {
|
|
|
+ height: 75px;
|
|
|
+ padding: 30px 20px 10px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ > .el-button {
|
|
|
+ width: 100px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// el-dialog
|
|
|
-.el-dialog {
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 10px;
|
|
|
- color: #202b4b;
|
|
|
- .el-dialog__header {
|
|
|
- padding: 16px 20px;
|
|
|
- border-bottom: 1px solid rgba(240, 244, 249, 1);
|
|
|
+.alert-message {
|
|
|
+ .el-message-box__btns {
|
|
|
+ text-align: center;
|
|
|
+ > .el-button {
|
|
|
+ position: relative;
|
|
|
+ left: auto;
|
|
|
+ top: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .el-dialog__body {
|
|
|
- padding: 30px;
|
|
|
+}
|
|
|
+// .el-message
|
|
|
+.el-message-loading {
|
|
|
+ border-color: mix($--color-white, $--color-success, 80%);
|
|
|
+ background-color: mix($--color-white, $--color-success, 90%);
|
|
|
+}
|
|
|
+// el-date-editor
|
|
|
+.el-date-editor {
|
|
|
+ border-radius: 8px;
|
|
|
+ .el-range-separator {
|
|
|
+ width: auto;
|
|
|
}
|
|
|
- .el-dialog__footer {
|
|
|
- .el-button {
|
|
|
- width: 83px;
|
|
|
- }
|
|
|
+ .el-range-input {
|
|
|
+ background-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
-.fullscreen-dialog {
|
|
|
- .el-dialog {
|
|
|
- border-radius: 0;
|
|
|
|
|
|
- .el-dialog__header {
|
|
|
- position: absolute;
|
|
|
- padding: 14px 20px;
|
|
|
- height: 60px;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- h3 {
|
|
|
- font-size: 18px;
|
|
|
- line-height: 30px;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
+// el-step
|
|
|
+.el-step {
|
|
|
+ &__title.is-success,
|
|
|
+ &__description.is-success,
|
|
|
+ &__title.is-process,
|
|
|
+ &__description.is-process {
|
|
|
+ color: $--color-success;
|
|
|
+ }
|
|
|
+ &__title.is-process {
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ &__head.is-success {
|
|
|
+ .el-step__line {
|
|
|
+ background-color: $--color-success;
|
|
|
}
|
|
|
- .el-dialog__body {
|
|
|
- position: absolute;
|
|
|
- top: 60px;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background-color: #e8edf3;
|
|
|
- padding: 20px;
|
|
|
- overflow: auto;
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ color: $--color-white;
|
|
|
+ border-color: $--color-success;
|
|
|
+ background-color: $--color-success;
|
|
|
}
|
|
|
- .el-dialog__footer {
|
|
|
- display: none;
|
|
|
+ }
|
|
|
+ &__head.is-process {
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ color: $--color-success;
|
|
|
+ border-color: $--color-success;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-// el-message-box
|
|
|
-.el-message-box {
|
|
|
- color: #202b4b;
|
|
|
- border-radius: 10px;
|
|
|
- .el-message-box__header {
|
|
|
- padding: 16px 20px;
|
|
|
- border-bottom: 1px solid rgba(240, 244, 249, 1);
|
|
|
- }
|
|
|
- .el-message-box__content {
|
|
|
- padding: 30px;
|
|
|
- min-height: 140px;
|
|
|
- }
|
|
|
- .el-message-box__btns {
|
|
|
- .el-button {
|
|
|
- width: 83px;
|
|
|
+ &__title.is-wait,
|
|
|
+ &__description.is-wait {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ }
|
|
|
+ &__head.is-wait {
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ border-color: #e1e3eb;
|
|
|
+ background-color: #e1e3eb;
|
|
|
}
|
|
|
}
|
|
|
- .el-message-box__message {
|
|
|
- padding-left: 50px;
|
|
|
- padding-top: 4px;
|
|
|
- font-size: 16px;
|
|
|
- color: #202b4b;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- .el-message-box__status {
|
|
|
- font-size: 32px !important;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- transform: none;
|
|
|
- }
|
|
|
}
|
|
|
-.el-message-box__error {
|
|
|
- width: 540px;
|
|
|
- .el-message-box__status {
|
|
|
- color: #fe5863;
|
|
|
- }
|
|
|
+// el-popover
|
|
|
+.el-popper-dark {
|
|
|
+ background-color: $--color-text-dark-1;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ padding: 16px;
|
|
|
+ border: none;
|
|
|
}
|
|
|
-.el-message-box__warning {
|
|
|
- .el-message-box__status {
|
|
|
- color: #5fc9fa;
|
|
|
- }
|
|
|
+.el-popper-dark {
|
|
|
+ box-shadow: 0px 10px 10px 0px rgba(54, 61, 89, 0.2);
|
|
|
}
|
|
|
+.el-popper-dark[x-placement^="right"] .popper__arrow {
|
|
|
+ border-right-color: $--color-text-dark-1;
|
|
|
|
|
|
-// el-tabs
|
|
|
-.el-tabs {
|
|
|
- .el-tabs__header {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .el-tabs__content {
|
|
|
- background-color: #fff;
|
|
|
- padding: 30px;
|
|
|
+ &::after {
|
|
|
+ border-right-color: $--color-text-dark-1;
|
|
|
}
|
|
|
+}
|
|
|
+.el-popper-dark[x-placement^="top"] .popper__arrow {
|
|
|
+ border-top-color: $--color-text-dark-1;
|
|
|
|
|
|
- .el-tabs__item {
|
|
|
- color: #626a82;
|
|
|
- border: none;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 6px 6px 0 0;
|
|
|
- margin-right: 12px;
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: $--color-primary;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ border-top-color: $--color-text-dark-1;
|
|
|
}
|
|
|
}
|
|
|
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
|
- border: none;
|
|
|
+.el-popper-dark[x-placement^="bottom"] .popper__arrow {
|
|
|
+ border-bottom-color: $--color-text-dark-1;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-bottom-color: $--color-text-dark-1;
|
|
|
+ }
|
|
|
}
|
|
|
+.el-popper-dark[x-placement^="left"] .popper__arrow {
|
|
|
+ border-left-color: $--color-text-dark-1;
|
|
|
|
|
|
-// .el-form
|
|
|
-.el-form {
|
|
|
- &-item__label {
|
|
|
- color: #202b4b;
|
|
|
+ &::after {
|
|
|
+ border-left-color: $--color-text-dark-1;
|
|
|
}
|
|
|
}
|
|
|
-.el-form--label-top {
|
|
|
- .el-form-item__label {
|
|
|
- line-height: 1;
|
|
|
+// popper-list
|
|
|
+.popper-list {
|
|
|
+ min-width: auto;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
zhangjie
