cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.60

package/src/styles/element-ui.scss

@@ -0,0 +1,1076 @@
+// cover some element-ui styles
+@import "./variables.scss";
+@import "./mixin.scss";
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    min-width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+//xk
+form.el-form.disabled {
+  i.el-icon-delete, i.el-icon-search {
+    display: none;
+  }
+
+  form.el-form {
+    i.el-icon-delete, i.el-icon-search {
+      display: block;
+    }
+  }
+
+  form.el-form.disabled {
+    i.el-icon-delete, i.el-icon-search {
+      display: none;
+    }
+  }
+}
+
+.el-link {
+  font-size: $fontSizeBase;
+}
+
+.el-input--small .el-input__inner {
+  height: 30px;
+}
+
+.el-dialog__wrapper {
+  overflow: hidden !important;
+}
+
+.el-button--primary.is-plain {
+  background: #fff !important;
+  color: $baseColor !important;
+  &:hover,
+  &:focus {
+    color: $baseColor;
+  }
+}
+
+.el-tag--medium {
+  margin: 3px 10px 3px 0 !important;
+  + .el-tag {
+    margin: 3px 10px 3px 0 !important;
+  }
+  + .el-button {
+    margin-left: 0 !important;
+  }
+  > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+  }
+  > i {
+    vertical-align: middle;
+  }
+}
+
+.el-cascader__tags {
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.el-loading-parent--relative {
+  overflow: hidden;
+}
+
+// 从历史 style.scss 的 body 块迁入，保留 body 前缀以维持特异度。
+body {
+  .el-loading-spinner {
+    zoom: 2;
+    .path {
+      stroke-width: 5;
+    }
+    .el-loading-text {
+      zoom: 0.5;
+    }
+  }
+  .v-modal {
+    background: #fff;
+    opacity: 0.04;
+  }
+  .el-range-editor--medium {
+    .el-range__close-icon {
+      line-height: 28px;
+      height: 27px;
+    }
+    .el-range-separator {
+      line-height: 18px;
+    }
+  }
+  .el-table {
+    font-size: $fontSizeBase;
+    .el-input {
+      width: 100% !important;
+      .el-input__suffix {
+        top: 1px;
+        .el-input__icon {
+          line-height: 25px !important;
+        }
+      }
+    }
+    .drag-option {
+      cursor: pointer;
+    }
+  }
+  .el-tag--medium {
+    height: $control-height;
+    line-height: 26px;
+    &.purple {
+      background-color: #fbecff;
+      border-color: #ffe2ff;
+      color: #a423e6;
+    }
+    &.blue {
+      background-color: #ecf5ff;
+      border-color: #d9ecff;
+      color: #409eff;
+    }
+    &.yellow {
+      background-color: #f8ffe0;
+      border-color: #f5f1c0;
+      color: #d8d100;
+    }
+    + .el-tag {
+      margin-left: 10px;
+    }
+    + .el-button {
+      margin-left: 10px;
+      vertical-align: middle;
+    }
+    + .el-link {
+      margin-left: 10px;
+      vertical-align: middle;
+    }
+  }
+  .el-select__tags {
+    flex-wrap: nowrap;
+    > span {
+      white-space: nowrap;
+      display: block !important;
+      overflow: hidden;
+    }
+    > .el-select__input {
+      flex: 1;
+      width: inherit !important;
+      display: block;
+      height: 25px;
+      padding-left: 10px;
+      font-size: $fontSizeBase;
+      margin-left: 0;
+    }
+  }
+  .el-breadcrumb {
+    font-size: $fontSizeBase;
+    display: inline-block;
+    .el-breadcrumb__item {
+      float: none;
+      span {
+        cursor: pointer;
+      }
+    }
+  }
+  .el-radio {
+    .el-radio__inner {
+      vertical-align: middle;
+      margin-bottom: 2px;
+    }
+    &.radio-checkbox {
+      position: relative;
+      padding: 0;
+      height: $control-height;
+      min-width: 100px;
+      line-height: 28px;
+      border-radius: $control-radius;
+      cursor: pointer;
+      .el-radio__input {
+        display: none;
+      }
+      .el-radio__label {
+        font-size: $fontSizeBase;
+        padding-right: 10px;
+      }
+      .standard {
+        background: #d62b31;
+        color: #fff;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        border-radius: 1px;
+        padding: 2px;
+        font-style: inherit;
+        font-size: $fontSizeBase;
+        line-height: 1;
+      }
+      &.is-checked {
+        border-color: #d62b31;
+        background-color: #fad8d7;
+        .el-radio__label {
+          color: #d62b31;
+        }
+      }
+      &.is-disabled {
+        background-color: #ebebeb;
+        border-color: #ebebeb;
+      }
+    }
+    .el-radio__input.is-disabled {
+      + span.el-radio__label {
+        color: inherit;
+      }
+      &.is-checked + span.el-radio__label {
+        color: $baseColor;
+      }
+    }
+  }
+  .el-checkbox {
+    &.is-disabled:not(.is-checked) {
+      .el-checkbox__inner:after {
+        display: none;
+      }
+    }
+    &.is-disabled {
+      .el-checkbox__inner:after {
+        color: #c5c5c5;
+      }
+    }
+    &.radio-checkbox {
+      position: relative;
+      padding: 0 !important;
+      height: $control-height !important;
+      min-width: 100px;
+      line-height: 28px;
+      border-radius: $control-radius !important;
+      cursor: pointer;
+      padding: 0;
+      .el-checkbox__input {
+        display: none;
+      }
+      .el-checkbox__label {
+        font-size: $fontSizeBase;
+        padding-right: 10px;
+      }
+      .standard {
+        background: #d62b31;
+        color: #fff;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        border-radius: 1px;
+        padding: 2px;
+        font-style: inherit;
+        font-size: $fontSizeBase;
+        line-height: 1;
+      }
+      &.is-checked {
+        border-color: #d62b31;
+        background-color: #fad8d7;
+        .el-checkbox__label {
+          color: #d62b31;
+        }
+      }
+      &.is-disabled {
+        background-color: #ebebeb;
+        border-color: #ebebeb;
+      }
+    }
+    .el-checkbox__input.is-disabled {
+      + span.el-checkbox__label {
+        color: inherit;
+      }
+      &.is-checked + span.el-checkbox__label {
+        color: $baseColor;
+      }
+    }
+  }
+  .el-select-dropdown__wrap {
+    max-height: 474px;
+  }
+  .el-checkbox__inner:after {
+    height: auto;
+    border-width: 0;
+    width: auto;
+    zoom: 1;
+    top: inherit;
+    left: inherit;
+    content: "";
+    font-family: element-icons !important;
+    transform: none !important;
+    color: #fff;
+    font-size: $fontSizeBase;
+    top: 0.5px;
+  }
+  .el-dropdown-menu--medium .el-dropdown-menu__item {
+    font-size: $fontSizeBase;
+  }
+  .el-upload {
+    display: block;
+  }
+  .el-form-item {
+    margin-bottom: 0;
+    .el-form-item__label {
+      font-size: $fontSizeBase;
+      font-weight: 400;
+      line-height: 28px;
+      margin-top: 1px;
+      margin-bottom: 0;
+      vertical-align: middle;
+      &:after {
+        content: "：";
+      }
+    }
+    .el-form-item__content {
+      vertical-align: middle;
+    }
+    .el-form-item__error {
+      display: none;
+    }
+  }
+  .el-form-item--medium .el-form-item__content {
+    line-height: 28px;
+  }
+  .el-form.form-m2 {
+    height: 70vh;
+    overflow: auto;
+    .el-form-item {
+      width: calc(50% - 20px);
+      display: inline-block;
+      margin: 4px 10px;
+      .el-form-item__label {
+        padding-bottom: 2px;
+      }
+    }
+  }
+  .el-input {
+    width: 148px !important;
+    font-size: $fontSizeBase;
+    &.all-width {
+      width: 100% !important;
+    }
+    .el-input__inner {
+      width: 100%;
+      border-radius: $control-radius;
+      border-color: $border-color-soft;
+      padding: 0 24px 0 8px;
+      height: $control-height !important;
+      line-height: 28px;
+      &:focus {
+        border-color: $baseColor;
+      }
+    }
+    .el-input__suffix {
+      top: 1px;
+      .el-input__suffix-inner {
+        display: inline-block;
+      }
+    }
+    .el-input__suffix,
+    .el-input__prefix {
+      right: 0;
+      .el-input__iconview {
+        position: absolute;
+        right: -22px;
+        top: 0;
+        line-height: 27px;
+        font-size: 16px;
+        color: $text-color-dark;
+      }
+      .el-input__icon {
+        cursor: pointer;
+        line-height: 28px !important;
+        float: right;
+        &.el-icon-search {
+          font-size: 14px;
+          margin-top: -2px;
+        }
+        &.el-icon-date {
+          line-height: 28px;
+        }
+        &.el-icon-circle-close {
+          width: 26px;
+          height: 27px;
+          margin-top: 0;
+        }
+        &.el-icon-time {
+          font-size: 14px;
+          line-height: 32px !important;
+        }
+      }
+    }
+    &.is-disabled .el-input__inner {
+      background-color: $bg-color-disabled;
+      padding-right: 12px;
+      color: $text-color-disabled;
+      &::placeholder {
+        color: $text-color-disabled;
+      }
+    }
+    &.el-date-editor {
+      &.el-date-editor--datetime {
+        .el-input__prefix,
+        .el-input__suffix {
+          width: 26px;
+          .el-input__icon {
+            width: 100%;
+          }
+        }
+        .el-input__suffix {
+          top: 2px;
+        }
+      }
+      .el-icon-circle-close {
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        height: 26px !important ;
+        line-height: 27px !important;
+        font-size: 14px;
+        transition: none;
+        margin-top: -1px !important;
+        margin-right: -1px !important;
+        &:before {
+          background: #fff;
+        }
+      }
+      + span {
+        margin: 0 10px;
+        vertical-align: middle;
+      }
+    }
+    &.search-input {
+      // .el-input__inner{padding:0 52px 0 8px;}
+      &.is-disabled .el-input__suffix .el-input__suffix-inner {
+        pointer-events: none;
+      }
+      //.el-input__icon.el-icon-circle-close.el-input__clear{background:#FFF;height: 26px !important;margin-top: 1px;margin-right: -3px;zoom: 0.9;}
+      //.el-input__icon.el-icon-circle-close.el-input__clear{position: absolute;right: 25px;background: #FFF;bottom: 2px;top: 0;height: inherit !important;line-height: 16px;}
+      .el-input__icon.el-icon-circle-close.el-input__clear {
+        position: relative;
+        margin-top: 0;
+        top: 0;
+        &:before {
+          position: relative;
+          z-index: 1;
+        }
+        &:after {
+          content: "";
+          position: absolute;
+          top: 4px;
+          bottom: 4px;
+          background: #fff;
+          left: 0;
+          width: 100%;
+          z-index: 0;
+          height: auto;
+        }
+      }
+    }
+    &.moreInfo {
+      &:before {
+        content: "\e600";
+        font-family: "iconfont";
+        position: absolute;
+        right: 3px;
+        top: 0;
+        color: $baseColor;
+        z-index: 2;
+        line-height: 19px;
+        transform: scale(0.55);
+        font-size: 13px;
+      }
+      .el-input__inner {
+        cursor: pointer;
+      }
+      .el-input__suffix {
+        background: #fff;
+        z-index: 2;
+        right: 1px !important;
+        height: 93%;
+        border-radius: $control-radius;
+      }
+    }
+  }
+  .el-date-editor--datetimerange.el-input,
+  .el-date-editor--datetimerange.el-input__inner {
+    width: 100%;
+  }
+  .el-range-editor {
+    width: 100%;
+    border-radius: $control-radius;
+    border-color: $border-color-soft;
+    padding: 0 24px 0 8px;
+    height: $control-height !important;
+    line-height: 28px;
+    &:focus {
+      border-color: $baseColor;
+    }
+    .el-range-input {
+      font-size: $fontSizeBase;
+    }
+    .el-range__icon {
+      line-height: 19px;
+    }
+  }
+  .el-tag--mini {
+    line-height: 16px;
+  }
+  .el-select {
+    cursor: pointer;
+    .el-select__tags {
+      top: inherit;
+      transform: initial;
+      margin-top: 1px; //影响用户角色不对其
+      .el-tag {
+        margin-top: 3px;
+        display: inline-block;
+        &.el-tag--small {
+          height: 18px;
+          line-height: 18px;
+        }
+      }
+    }
+    .el-tag__close.el-icon-close {
+      right: -4px;
+      top: -0.5px;
+    }
+    &:hover .el-input__inner {
+      border-color: $border-color-soft;
+    }
+  }
+  .el-select-dropdown {
+    max-width: 80%;
+    .el-select-dropdown__item {
+      font-size: $fontSizeBase;
+      padding: 10px 12px;
+      line-height: 17px;
+      height: inherit;
+      white-space: normal;
+      span {
+        font-weight: 400;
+      }
+      &.selected {
+        font-weight: 400;
+      }
+    }
+  }
+  .el-input--prefix {
+    .el-input__inner {
+      padding-left: 8px;
+    }
+    .el-input__prefix {
+      left: initial;
+      right: 0;
+    }
+  }
+  .el-input-number {
+    &.el-input-number--small {
+      /*width: 148px*/
+      width: 100%;
+      line-height: 28px;
+      height: $control-height;
+    }
+    .el-input {
+      width: 100% !important;
+      border-radius: $control-radius;
+      .el-input__inner {
+        padding: 0 30px;
+      }
+    }
+    [role="button"] {
+      line-height: 26px;
+      height: 26px;
+      margin-top: 1px;
+    }
+    &.noButton {
+      line-height: 30px;
+      //&:after{content:"";width: 0;height: 0;border-top: 18px  solid transparentize($baseColor,0.6);border-left: 18px  solid transparent;position: absolute;right:-2px;top:0;transform: scale(0.7);}
+      &:before {
+        content: "N";
+        position: absolute;
+        right: 3px;
+        top: 0;
+        color: $baseColor;
+        z-index: 2;
+        line-height: 19px;
+        transform: scale(0.55);
+        font-size: 13px;
+      }
+      .el-input .el-input__inner {
+        padding: 0 8px;
+        text-align: left;
+      }
+      [role="button"] {
+        display: none;
+      }
+    }
+  }
+  .el-textarea {
+    .el-textarea__inner {
+      border-radius: $control-radius;
+      border-color: $border-color-soft;
+      padding: 4px 8px;
+      min-height: 32px;
+      font-size: $fontSizeBase;
+      line-height: 1.4;
+      &:focus {
+        border-color: $baseColor;
+      }
+    }
+    &.noborder .el-textarea__inner {
+      border: none;
+      padding: 12px 16px;
+    }
+    &.is-disabled .el-textarea__inner {
+      background: $bg-color-disabled;
+      color: $text-color-disabled;
+      &::placeholder {
+        color: $text-color-disabled;
+      }
+    }
+  }
+  .el-checkbox__label,
+  .el-radio__label {
+    font-size: $fontSizeBase;
+  }
+  .el-select-dropdown__empty,
+  .el-cascader-panel {
+    font-size: $fontSizeBase;
+  }
+  .el-checkbox-group {
+    .el-checkbox {
+      vertical-align: middle;
+    }
+  }
+  .el-checkbox,
+  .el-radio {
+    &.is-disabled {
+      .el-checkbox__inner {
+        background-color: $bg-color-disabled;
+        border-color: $border-color-disabled;
+      }
+    }
+  }
+
+  .custom-width {
+    .el-input {
+      width: 100% !important;
+    }
+  }
+  .vxe-select-option--wrapper {
+    border: solid 1px $border-color-disabled;
+    border-radius: 4px;
+    background-color: #ffffff;
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    margin: 4px 0;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 6px;
+      left: 20px;
+    }
+    &:before {
+      top: 2px;
+      border-top-width: 0;
+      border-bottom-color: #e6ebf5;
+    }
+    &::after {
+      top: 4px;
+      border-top-width: 0;
+      border-bottom-color: #ffffff;
+    }
+    .vxe-select-option {
+      font-size: $fontSizeBase;
+      color: $text-color-body;
+      height: 34px;
+      line-height: 34px;
+      &.is--selected {
+        font-weight: 400;
+        color: $baseColor;
+      }
+    }
+  }
+
+  .avatar-uploader {
+    border: dashed 1px #e2e2e2;
+    width: 102px;
+    height: 102px;
+    background-color: #fbfdff;
+    border-radius: $control-radius;
+    font-size: 0;
+    line-height: 104px;
+    color: $text-color-placeholder;
+    padding: 0;
+    cursor: pointer;
+    margin-bottom: 10px;
+    .avatar-uploader-icon {
+      width: inherit;
+      height: inherit;
+      font-size: 32px;
+      line-height: inherit;
+    }
+  }
+  .upload-finish {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    height: 180px;
+    width: 100%;
+    font-size: $fontSizeBase;
+    color: $text-color-muted;
+    text-align: center;
+    line-height: 1;
+    position: relative;
+    .ico {
+      width: 88px;
+      height: 88px;
+      display: block;
+      margin: 20px auto 0;
+    }
+    .name {
+      color: $text-color-body;
+      font-size: $fontSizeBase;
+      padding: 0 24px;
+      margin-top: 12px;
+    }
+    .progress {
+      position: absolute;
+      bottom: 4px;
+      left: 0;
+      right: 0;
+    }
+    .js-close {
+      position: absolute;
+      right: 6px;
+      font-size: 21px;
+      top: 5px;
+      cursor: pointer;
+      color: $red;
+    }
+  }
+  .el-upload-list {
+    vertical-align: middle;
+    max-height: 300px;
+    line-height: 0;
+    &.el-upload-list--picture .el-upload-list__item {
+      z-index: auto;
+    }
+    .el-upload-list__item {
+      display: inline-block;
+      width: 252px;
+      height: 102px;
+      margin-right: 14px;
+      border-radius: $control-radius;
+      padding: 0 8px 0 79px;
+      border-color: $border-color-soft;
+      margin-top: 0;
+      margin-bottom: 10px;
+      .el-checkbox {
+        position: absolute;
+        top: 4px;
+        left: 6px;
+        .el-checkbox__inner {
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          line-height: 19px;
+          padding-left: 3px;
+        }
+      }
+      .el-upload-list__item-thumbnail {
+        width: 98px;
+        height: 98px;
+        padding: 4px 6px;
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+        .show-video {
+          background-color: rgba(0, 0, 0, 0.29);
+          position: absolute;
+          left: 6px;
+          right: 6px;
+          top: 4px;
+          bottom: 4px;
+          color: #fff;
+          font-size: 28px;
+          line-height: 94px;
+          text-align: center;
+          display: none;
+          z-index: 2;
+          i {
+            margin: 0 10px;
+            &.icon-chakan {
+              font-family: "iconfont";
+              font-style: inherit;
+              font-size: 30px;
+            }
+          }
+        }
+        &:hover .show-video {
+          display: block;
+        }
+        p {
+          width: 90px;
+          height: 90px;
+          display: table-cell;
+          vertical-align: middle;
+          text-align: center;
+          line-height: 0;
+          img {
+            max-width: 90px;
+            max-height: 90px;
+          }
+        }
+        .el-image {
+          border: none;
+        }
+      }
+      .el-upload-list__item-name {
+        font-size: $fontSizeBase;
+        line-height: 1.5 !important;
+        margin-top: 1px;
+        margin-right: 16px;
+        p {
+          margin: 0;
+          line-height: 1.6;
+          color: $text-color-muted;
+          &:first-child {
+            // 文件名最多 2 行，超出打点；各 widgetSize 可用 -webkit-line-clamp 覆盖行数
+            @include clamp(2);
+            white-space: initial;
+            word-break: break-all;
+            color: #424242;
+            margin-top: 8px;
+            max-height: 30px;
+            line-height: 1.2;
+          }
+          &.f-red {
+            color: #ff2626;
+          }
+        }
+        i {
+          top: 2px;
+          left: 2px;
+        }
+      }
+      .el-progress {
+        margin: 23px 0 0;
+        padding: 0 4px;
+        .el-progress__text {
+          top: 6px !important;
+          font-size: $fontSizeBase !important;
+          right: 4px;
+        }
+      }
+      .el-upload-list__item-status-label {
+        i {
+          margin-top: 13px;
+          margin-left: 3px;
+        }
+        &.error {
+          background: $red;
+          i {
+            color: #fff;
+          }
+        }
+        &.load {
+          background: $baseColor;
+        }
+      }
+      .el-upload-input {
+        display: flex;
+        padding-left: 4px;
+        line-height: 28px;
+        margin-top: 7px;
+        > span {
+          flex: 1;
+          font-size: $fontSizeBase;
+          white-space: nowrap;
+        }
+        .button-sty {
+          padding: 0;
+        }
+      }
+      .el-upload-list__item-href {
+        font-size: $fontSizeBase;
+        padding-left: 4px;
+        color: $baseColor;
+        line-height: 15px;
+        overflow: hidden;
+        span {
+          border-bottom: solid 1px $baseColor;
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+      .el-icon-tagEdit {
+        position: absolute;
+        bottom: 6px;
+        right: 6px;
+        cursor: pointer;
+        color: $baseColor;
+        i {
+          font-size: 18px;
+          margin-left: 14px;
+          &.icon-tihuan3 {
+            font-size: 15px;
+          }
+        }
+      }
+      &.is-fail {
+        .el-upload-list__item-status-label {
+          display: block;
+        }
+        &:focus,
+        &:hover {
+          .el-upload-list__item-status-label {
+            display: none;
+          }
+        }
+      }
+    }
+    &.cur .el-upload-list__item {
+      border-color: $baseColor;
+    }
+  }
+
+  .el-drawer {
+    .el-drawer__header {
+      font-size: 13px;
+      padding: 0 16px;
+      height: 42px;
+      line-height: 42px;
+      margin-bottom: 0;
+      span {
+        font-family: element-icons !important;
+        &:before {
+          content: "";
+          color: $baseColor;
+          vertical-align: middle;
+          margin-right: 6px;
+          font-size: 14px;
+        }
+      }
+      .el-button span:before {
+        display: none;
+      }
+    }
+    .el-drawer__body {
+      padding: 0 16px;
+    }
+  }
+  .el-image {
+    border: dashed 1px #e2e2e2;
+    .el-image-viewer__close {
+      color: #fff;
+      background-color: $text-color-body;
+      .el-icon-circle-close {
+        font-size: 24px;
+        &:before {
+          content: "";
+        }
+      }
+    }
+  }
+  .el-image-viewer__wrapper .el-image-viewer__close {
+    color: #fff;
+    background-color: $text-color-body;
+    .el-icon-circle-close {
+      font-size: 24px;
+      &:before {
+        content: "";
+      }
+    }
+  }
+}
+
+.el-date-range-picker__editors-wrap .el-date-range-picker__editor.el-input {
+  width: 100% !important;
+}