|
@@ -1,644 +1,653 @@
|
|
|
-/*
|
|
|
-* 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-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;
|
|
|
- }
|
|
|
-}
|
|
|
-//
|
|
|
-.page-dialog {
|
|
|
- .el-dialog.is-fullscreen {
|
|
|
- background: $--color-background;
|
|
|
- .el-dialog__body {
|
|
|
- padding: 70px 20px 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// .opacity-dialog
|
|
|
-.opacity-dialog {
|
|
|
- .el-dialog {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- .el-dialog__header,
|
|
|
- .el-dialog__footer {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-dialog__body {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- padding: 0;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 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;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// input
|
|
|
-.el-input {
|
|
|
- &.is-focus {
|
|
|
- .el-input__inner {
|
|
|
- border-color: $--color-primary !important;
|
|
|
- }
|
|
|
- }
|
|
|
- &.is-disabled {
|
|
|
- .el-input__inner {
|
|
|
- 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;
|
|
|
- // }
|
|
|
-}
|
|
|
-// textarea
|
|
|
-.el-textarea {
|
|
|
- &.is-disabled {
|
|
|
- .el-textarea__inner {
|
|
|
- color: $--color-text-gray-2;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.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-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 {
|
|
|
- &:not(.is-disabled):hover {
|
|
|
- .el-radio-button__inner {
|
|
|
- color: $--color-primary;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- .el-radio-button__inner {
|
|
|
- color: $--color-white !important;
|
|
|
- border-color: $--color-primary !important;
|
|
|
- background: $--color-primary !important;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// button
|
|
|
-.el-button {
|
|
|
- border-radius: $--border-radius;
|
|
|
-
|
|
|
- > .icon {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- > span {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- &.is-disabled:not(.el-button--text) {
|
|
|
- color: $--color-text-gray-3 !important;
|
|
|
- background: $--color-background !important;
|
|
|
- border: 1px solid $--color-border !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.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--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;
|
|
|
-
|
|
|
- &: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: $--color-text-dark-1;
|
|
|
-
|
|
|
- thead th {
|
|
|
- color: $--color-text-gray-2;
|
|
|
- }
|
|
|
-
|
|
|
- thead.is-group th {
|
|
|
- background-color: $--color-white;
|
|
|
- }
|
|
|
-
|
|
|
- tr.el-table__row {
|
|
|
- color: $--color-text-dark;
|
|
|
- }
|
|
|
- td,
|
|
|
- th {
|
|
|
- border-color: $--color-border !important;
|
|
|
- padding: 14px 0;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- .el-table__row.row-danger {
|
|
|
- color: $--color-danger;
|
|
|
- }
|
|
|
- &.el-table--noback {
|
|
|
- tr.el-table__row {
|
|
|
- background-color: $--color-white;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- &:not(.is-disabled):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 {
|
|
|
- min-width: 32px;
|
|
|
- height: 32px;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- 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: $--color-text-gray-2;
|
|
|
- margin: 0 5px;
|
|
|
- padding: 0 8px;
|
|
|
- line-height: 32px;
|
|
|
-
|
|
|
- @extend .el-pagination-li;
|
|
|
- &:not(.disabled).active {
|
|
|
- color: #fff;
|
|
|
- background-color: $--color-primary;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// el-message-box
|
|
|
-.el-message-box {
|
|
|
- width: 320px;
|
|
|
- background-color: #f6f6f6;
|
|
|
- border-radius: 10px;
|
|
|
- &__title {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- &__headerbtn {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- &__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%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-message-box__message {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- &__btns {
|
|
|
- height: 75px;
|
|
|
- padding: 30px 20px 10px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- > .el-button {
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.alert-message {
|
|
|
- .el-message-box__btns {
|
|
|
- text-align: center;
|
|
|
- > .el-button {
|
|
|
- position: relative;
|
|
|
- left: auto;
|
|
|
- top: 0;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// .el-message
|
|
|
-.el-message {
|
|
|
- .el-message__content {
|
|
|
- word-wrap: break-word;
|
|
|
- max-width: 600px;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
-}
|
|
|
-.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-range-input {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 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-step__icon.is-text {
|
|
|
- color: $--color-white;
|
|
|
- border-color: $--color-success;
|
|
|
- background-color: $--color-success;
|
|
|
- }
|
|
|
- }
|
|
|
- &__head.is-process {
|
|
|
- .el-step__icon.is-text {
|
|
|
- color: $--color-success;
|
|
|
- border-color: $--color-success;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__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-popover
|
|
|
-.el-popper-dark {
|
|
|
- background-color: $--color-text-dark-1;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 18px;
|
|
|
- padding: 16px;
|
|
|
- border: none;
|
|
|
-}
|
|
|
-.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;
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-right-color: $--color-text-dark-1;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-popper-dark[x-placement^="top"] .popper__arrow {
|
|
|
- border-top-color: $--color-text-dark-1;
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-top-color: $--color-text-dark-1;
|
|
|
- }
|
|
|
-}
|
|
|
-.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;
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-left-color: $--color-text-dark-1;
|
|
|
- }
|
|
|
-}
|
|
|
-// popper-list
|
|
|
-.popper-list {
|
|
|
- min-width: auto;
|
|
|
-
|
|
|
- .el-button {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- margin: 0;
|
|
|
- &:not(:last-child) {
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-// .el-tag
|
|
|
-.el-tag {
|
|
|
- &.tag-spin {
|
|
|
- margin: 3px;
|
|
|
- }
|
|
|
-}
|
|
|
+/*
|
|
|
+* 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-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;
|
|
|
+ }
|
|
|
+}
|
|
|
+//
|
|
|
+.page-dialog {
|
|
|
+ .el-dialog.is-fullscreen {
|
|
|
+ background: $--color-background;
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 70px 20px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog {
|
|
|
+ background: $--color-background;
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .el-dialog__header {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .opacity-dialog
|
|
|
+.opacity-dialog {
|
|
|
+ .el-dialog {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .el-dialog__header,
|
|
|
+ .el-dialog__footer {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 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;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// input
|
|
|
+.el-input {
|
|
|
+ &.is-focus {
|
|
|
+ .el-input__inner {
|
|
|
+ border-color: $--color-primary !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-disabled {
|
|
|
+ .el-input__inner {
|
|
|
+ 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;
|
|
|
+ // }
|
|
|
+}
|
|
|
+// textarea
|
|
|
+.el-textarea {
|
|
|
+ &.is-disabled {
|
|
|
+ .el-textarea__inner {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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-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 {
|
|
|
+ &:not(.is-disabled):hover {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ color: $--color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-active {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ color: $--color-white !important;
|
|
|
+ border-color: $--color-primary !important;
|
|
|
+ background: $--color-primary !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// button
|
|
|
+.el-button {
|
|
|
+ border-radius: $--border-radius;
|
|
|
+
|
|
|
+ > .icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ &.is-disabled:not(.el-button--text) {
|
|
|
+ color: $--color-text-gray-3 !important;
|
|
|
+ background: $--color-background !important;
|
|
|
+ border: 1px solid $--color-border !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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--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;
|
|
|
+
|
|
|
+ &: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: $--color-text-dark-1;
|
|
|
+
|
|
|
+ thead th {
|
|
|
+ color: $--color-text-gray-2;
|
|
|
+ }
|
|
|
+
|
|
|
+ thead.is-group th {
|
|
|
+ background-color: $--color-white;
|
|
|
+ }
|
|
|
+
|
|
|
+ tr.el-table__row {
|
|
|
+ color: $--color-text-dark;
|
|
|
+ }
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ border-color: $--color-border !important;
|
|
|
+ padding: 14px 0;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .el-table__row.row-danger {
|
|
|
+ color: $--color-danger;
|
|
|
+ }
|
|
|
+ &.el-table--noback {
|
|
|
+ tr.el-table__row {
|
|
|
+ background-color: $--color-white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ &:not(.is-disabled):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 {
|
|
|
+ min-width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ 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: $--color-text-gray-2;
|
|
|
+ margin: 0 5px;
|
|
|
+ padding: 0 8px;
|
|
|
+ line-height: 32px;
|
|
|
+
|
|
|
+ @extend .el-pagination-li;
|
|
|
+ &:not(.disabled).active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: $--color-primary;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// el-message-box
|
|
|
+.el-message-box {
|
|
|
+ width: 320px;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ border-radius: 10px;
|
|
|
+ &__title {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &__headerbtn {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &__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%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-message-box__message {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__btns {
|
|
|
+ height: 75px;
|
|
|
+ padding: 30px 20px 10px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ > .el-button {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.alert-message {
|
|
|
+ .el-message-box__btns {
|
|
|
+ text-align: center;
|
|
|
+ > .el-button {
|
|
|
+ position: relative;
|
|
|
+ left: auto;
|
|
|
+ top: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// .el-message
|
|
|
+.el-message {
|
|
|
+ .el-message__content {
|
|
|
+ word-wrap: break-word;
|
|
|
+ max-width: 600px;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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-range-input {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 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-step__icon.is-text {
|
|
|
+ color: $--color-white;
|
|
|
+ border-color: $--color-success;
|
|
|
+ background-color: $--color-success;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &__head.is-process {
|
|
|
+ .el-step__icon.is-text {
|
|
|
+ color: $--color-success;
|
|
|
+ border-color: $--color-success;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__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-popover
|
|
|
+.el-popper-dark {
|
|
|
+ background-color: $--color-text-dark-1;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ padding: 16px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.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;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-right-color: $--color-text-dark-1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-popper-dark[x-placement^="top"] .popper__arrow {
|
|
|
+ border-top-color: $--color-text-dark-1;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-top-color: $--color-text-dark-1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ border-left-color: $--color-text-dark-1;
|
|
|
+ }
|
|
|
+}
|
|
|
+// popper-list
|
|
|
+.popper-list {
|
|
|
+ min-width: auto;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// .el-tag
|
|
|
+.el-tag {
|
|
|
+ &.tag-spin {
|
|
|
+ margin: 3px;
|
|
|
+ }
|
|
|
+}
|