raise-common-lib 0.0.245 → 0.0.247

package/src/assets/style/reset/dropdown.scss

@@ -0,0 +1,730 @@
+// dropdownlist,multiselect，pagerdropdown,dropdowntree,daterangepicker
+.e-dropdownlist,
+.e-multiselect,
+.e-autocomplete,
+.e-pagerdropdown,
+.e-dropdowntree,
+.e-daterangepicker,
+.e-datepicker,
+.e-datetimepicker,
+.e-rowcell,
+.e-pivot-calculated-div {
+  display: block;
+  height: var(--rs-input-line-height);
+  font-family: var(--rs-font-family);
+  background-color: #fff;
+  > .e-input-group {
+    height: 100%;
+    min-height: 100%;
+    border-radius: var(--rs-input-border-radius);
+    border-color: var(--rs-input-border-color) !important;
+    overflow: hidden;
+    box-shadow: none !important;
+    .e-input-value {
+      .color-box {
+        height: var(--rs-input-line-height) !important;
+      }
+    }
+    .e-input,
+    .e-dropdownbase {
+      font-size: var(--rs-input-font-size) !important;
+      font-weight: normal !important;
+      color: var(--rs-input-color) !important;
+    }
+
+    .e-input {
+      height: var(--rs-input-line-height) !important;
+      line-height: var(--rs-input-line-height);
+    }
+
+    .e-dropdownbase {
+      height: calc(var(--rs-input-line-height) - 2px);
+      min-height: calc(var(--rs-input-line-height) - 2px);
+      line-height: calc(var(--rs-input-line-height) - 2px);
+    }
+
+    input.e-input {
+      height: 100% !important;
+      background-color: transparent !important;
+    }
+    .e-multi-select-wrapper {
+      height: 100% !important;
+      min-height: 100% !important;
+      cursor: pointer;
+      .e-delim-values {
+        line-height: calc(var(--rs-input-line-height) - 2px);
+        font-size: var(--rs-input-font-size);
+        color: var(--rs-input-color);
+        -webkit-text-fill-color: var(--rs-input-color);
+      }
+      .e-remain {
+        color: var(--rs-input-color) !important;
+        font-size: var(--rs-input-font-size) !important;
+      }
+    }
+    .e-input-group-icon {
+      height: 100% !important;
+      min-height: 100%;
+      line-height: 100%;
+      background-color: #fff !important;
+      border: 0;
+      &:hover {
+        background: transparent !important;
+        box-shadow: none !important;
+      }
+      &::before {
+        content: "" !important;
+        display: block;
+        width: 16px;
+        height: 16px;
+        background-image: url("/assets/img/dropdown-arrow.svg");
+        background-size: cover;
+        background-position: center;
+      }
+    }
+    .e-clear-icon::before {
+      font-size: 10px !important;
+      color: #6c7c90;
+    }
+    .e-chips-close {
+      height: 100% !important;
+      top: 0;
+      right: 20px;
+      margin: 0;
+      width: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &:before {
+        position: static;
+        color: #6c7c90;
+      }
+    }
+
+    &:focus-within,
+    &.e-icon-anim,
+    &.e-input-focus {
+      border-color: var(--rs-input-focus-border-color) !important;
+      box-shadow: none !important;
+    }
+
+    &.e-icon-anim {
+      .e-input-group-icon {
+        &::before {
+          transform: rotate(180deg);
+          transition: transform 300ms ease;
+        }
+      }
+    }
+  }
+
+  .e-disabled,
+  &.e-disabled {
+    &.e-input-group {
+      border-color: var(--rs-input-border-color) !important;
+      background-color: var(--rs-input-disabled-bg) !important;
+      .e-multi-select-wrapper {
+        cursor: not-allowed;
+        .e-delim-values {
+          -webkit-text-fill-color: var(--rs-input-disabled-color);
+        }
+        .e-remain {
+          color: var(--rs-input-color) !important;
+          font-size: var(--rs-input-font-size) !important;
+        }
+      }
+      .e-input-group-icon {
+        background-color: var(--rs-input-disabled-bg) !important;
+        &::before {
+          background-image: url("/assets/img/dropdown-arrow-disabled.svg");
+        }
+      }
+    }
+  }
+  &.error {
+    .e-input-group:not(:focus-within):not(.e-icon-anim):not(.e-input-focus) {
+      border-color: var(--rs-input-error-border-color) !important;
+    }
+  }
+  &:not(.error):not(.e-disabled):hover {
+    .e-input-group:not(.e-disabled) {
+      border-color: var(--rs-input-hover-border-color) !important;
+      box-shadow: 0px 0px 3px 0px rgba(31, 123, 255, 0.4) !important;
+    }
+  }
+}
+
+// 下拉弹窗
+.e-popup.e-ddl {
+  font-family: var(--rs-font-family);
+  overflow: hidden;
+  .e-filter-parent {
+    background: #fff;
+    padding-bottom: 8px;
+    border: 0;
+    .e-input-group {
+      height: var(--rs-input-line-height) !important;
+      line-height: var(--rs-input-line-height) !important;
+      box-shadow: none !important;
+      border-color: #eaedf0 !important;
+      background-color: #fff !important;
+      border-radius: 16px;
+      margin: 4px 8px 0 8px;
+      .e-input {
+        height: 100%;
+        padding: 0 0 0 12px !important;
+        font-size: var(--rs-input-font-size);
+        color: var(--rs-input-color);
+        &:hover {
+          box-shadow: none !important;
+        }
+      }
+      .e-clear-icon {
+        padding: 0 !important;
+        &:before {
+          font-size: 8px;
+        }
+      }
+    }
+  }
+  .e-selectall-parent {
+    text-indent: 17px;
+    .e-all-text {
+      font-family: Arial;
+      font-size: var(--rs-input-font-size);
+      min-height: var(--rs-input-line-height);
+      line-height: var(--rs-input-line-height);
+    }
+  }
+
+  .e-dropdownbase {
+    min-height: 28px;
+    padding: 4px;
+    .e-fixed-head {
+      color: #43566c;
+      font-weight: 700;
+    }
+    .e-list-parent {
+      border: 0 !important;
+    }
+    .e-list-group-item {
+      padding: 8px 12px 4px 12px;
+      color: #43566c;
+      font-family: Arial;
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 14px; /* 127.273% */
+    }
+
+    .e-list-group-item,
+    .e-list-item {
+      font-family: Arial;
+      font-size: var(--rs-input-font-size);
+      min-height: var(--rs-input-line-height);
+      line-height: 16px;
+      // 下拉选项超出正常显示，不显示缩略号
+      white-space: normal;
+      text-indent: 0;
+      padding: 6px 12px;
+      color: #44566c;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      &.e-item-focus {
+        background: transparent !important;
+        box-shadow: none !important;
+      }
+      &:hover {
+        background: rgba(31, 123, 255, 0.04) !important;
+        border-color: transparent !important;
+      }
+      &.e-active {
+        background: rgba(31, 123, 255, 0.1) !important;
+        border-color: transparent !important;
+        .e-checkbox-wrapper {
+          background-color: transparent !important;
+          &:hover {
+            background-color: transparent !important;
+          }
+          .e-check,
+          .e-stop {
+            background-color: #007bff !important;
+            border-color: #007bff !important;
+            color: #fff !important;
+            &:hover {
+              background-color: #007bff !important;
+              border-color: #007bff !important;
+              color: #fff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .e-nodata {
+    color: #929dab !important;
+    font-size: var(--rs-input-font-size) !important;
+  }
+
+  &.e-multi-select-list-wrapper {
+    .e-dropdownbase {
+      .e-list-item {
+        padding-left: 34px;
+        .e-checkbox-wrapper {
+          position: absolute;
+          top: 6px;
+          left: 12px;
+        }
+      }
+    }
+    &.e-multiselect-group {
+      .e-dropdownbase {
+        .e-list-item {
+          padding-left: 46px;
+        }
+      }
+    }
+  }
+}
+
+// dropdowntree 独有
+.e-dropdowntree {
+  .e-input-group {
+    height: var(--rs-input-line-height) !important;
+    .e-overflow {
+      color: var(--rs-input-color);
+      font-size: var(--rs-input-font-size);
+      line-height: calc(var(--rs-input-line-height) - 2px);
+      padding: 0 0 0 8px !important;
+      .e-remain {
+        color: var(--rs-input-color);
+        font-size: var(--rs-input-font-size);
+      }
+    }
+    .e-clear-icon {
+      width: 24px;
+      min-height: var(--rs-input-line-height) !important;
+      position: absolute;
+      bottom: -1px !important;
+      right: 23px;
+    }
+  }
+}
+//dropdowntree 下拉弹窗
+.e-popup.e-ddt {
+  .e-filter-wrap {
+    padding: 6px 6px 8px 6px;
+    background-color: #fff;
+
+    .e-input-group {
+      font-size: var(--rs-input-font-size) !important;
+      height: var(--rs-input-line-height) !important;
+      line-height: var(--rs-input-line-height) !important;
+      box-shadow: none !important;
+      border-color: #eaedf0 !important;
+      background-color: #fff !important;
+      border-radius: 16px;
+      margin: 4px 0 0;
+      .e-input {
+        height: 100%;
+        padding: 0 0 0 12px !important;
+        font-size: var(--rs-input-font-size);
+        color: var(--rs-input-color);
+        &:hover {
+          box-shadow: none !important;
+        }
+      }
+    }
+  }
+  .e-popup-content {
+    padding: 4px;
+    .e-ddt-nodata {
+      color: #929dab !important;
+      font-size: var(--rs-input-font-size) !important;
+    }
+  }
+  .e-list-item {
+    .e-fullrow {
+      height: var(--rs-input-line-height) !important;
+      background-color: transparent !important;
+      border-color: transparent !important;
+    }
+    &.e-hover {
+      background: rgba(31, 123, 255, 0.04) !important;
+    }
+    .e-text-content {
+      .e-list-text {
+        min-height: var(--rs-input-line-height) !important;
+        line-height: var(--rs-input-line-height) !important;
+        font-size: var(--rs-input-font-size) !important;
+        color: var(--rs-input-color) !important;
+      }
+      .e-icon-collapsible,
+      .e-icon-expandable {
+        color: var(--rs-input-color) !important;
+      }
+      .e-icons.e-check,
+      .e-icons.e-stop {
+        background-color: #007bff !important;
+        border-color: #007bff !important;
+        color: #fff !important;
+      }
+    }
+  }
+}
+
+// daterangepicker datepicker
+.e-daterangepicker,
+.e-datetimepicker,
+.e-datepicker {
+  .e-input-group {
+    height: var(--rs-input-line-height) !important;
+
+    .e-input-group-icon {
+      &::before {
+        content: "" !important;
+        display: block;
+        width: 16px;
+        height: 16px;
+        background-image: url("/assets/img/calendar-disabled.svg");
+        background-size: cover;
+        background-position: center;
+      }
+      &:hover {
+        &::before {
+          background-image: url("/assets/img/calendar.svg");
+        }
+      }
+    }
+    .e-time-icon {
+      &::before {
+        display: block;
+        width: 14px;
+        height: 14px;
+        background-image: url("/assets/img/time-disabled.svg");
+      }
+      &:hover {
+        &::before {
+          background-image: url("/assets/img/time.svg");
+        }
+      }
+    }
+
+    &.e-disabled {
+      .e-input-group-icon {
+        &::before {
+          background-image: url("/assets/img/calendar-disabled.svg");
+        }
+      }
+      .e-time-icon {
+        &::before {
+          background-image: url("/assets/img/time-disabled.svg");
+        }
+      }
+    }
+  }
+}
+
+.e-daterangepicker.e-popup,
+.e-datepicker.e-popup {
+  height: auto;
+  border-radius: 4px;
+  padding: 8px 16px 8px 16px;
+  background: #fff;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
+  .e-range-header {
+    padding: 0;
+    .e-start-end {
+      height: auto;
+      .e-start-label,
+      .e-end-label {
+        color: var(--rs-primary-color);
+        font-size: var(--rs-font-size);
+        line-height: 16px;
+      }
+      .e-change-icon.e-icons {
+        &::before {
+          content: "" !important;
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-image: url("/assets/img/arrow_right.svg");
+          background-size: cover;
+          background-position: center;
+        }
+      }
+    }
+
+    .e-day-span {
+      color: var(--rs-labels-color);
+      font-size: 10px;
+      line-height: 16px;
+      margin: 6px 0 8px 0;
+    }
+  }
+  .e-calendar-container,
+  .e-calendar {
+    .e-left-container {
+      .e-header {
+        padding: 4px 12px 6px 0 !important;
+      }
+      .e-content {
+        .e-calendar-content-table {
+          padding: 0 12px 0 0;
+        }
+      }
+    }
+    .e-right-container {
+      .e-header {
+        padding: 4px 0 6px 12px !important;
+      }
+      .e-content {
+        .e-calendar-content-table {
+          padding: 0 0 0 12px;
+        }
+      }
+    }
+    .e-header {
+      height: 34px;
+      &.e-year {
+        padding: 6px 0px !important;
+      }
+      &.e-decade {
+        padding: 6px 0px !important;
+      }
+      &.e-month {
+        padding: 6px 0;
+      }
+      .e-title {
+        color: #002c4f;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 16px;
+        padding-top: 6px;
+      }
+      .e-prev,
+      .e-next {
+        width: 24px;
+        height: 24px;
+        .e-icons {
+          padding: 0 !important;
+          &::before {
+            content: "" !important;
+            display: block;
+            width: 16px;
+            height: 16px;
+            background-image: url("/assets/img/calendar_arrow_up.svg");
+            background-size: cover;
+            background-position: center;
+          }
+        }
+      }
+      .e-next {
+        .e-icons {
+          &::before {
+            background-image: url("/assets/img/calendar_arrow_down.svg");
+          }
+        }
+      }
+    }
+    .e-content {
+      .e-calendar-content-table {
+        padding: 0;
+        border-spacing: 0 6px; /* 设置行间距为 8px */
+        position: relative;
+        top: -8px;
+        margin-bottom: -8px;
+        th {
+          color: var(--rs-grey-text-color);
+          font-size: var(--rs-small-font-size);
+        }
+      }
+
+      &.e-month {
+        .e-cell {
+          .e-day {
+            width: 28px;
+          }
+        }
+      }
+      .e-cell {
+        .e-day {
+          border-radius: 4px;
+          background-color: transparent !important;
+          font-size: var(--rs-font-size);
+          color: var(--rs-primary-2-color);
+          border: 1px solid transparent;
+        }
+        &:not(.e-today):not(.e-range-hover):not(.e-selected):hover {
+          .e-day {
+            background-color: rgba(31, 123, 255, 0.04) !important;
+            color: #1364b3;
+            font-weight: 700;
+          }
+        }
+      }
+      &.e-decade {
+        td {
+          height: 46px;
+        }
+        td > span.e-day {
+          height: 38px;
+          line-height: 38px;
+          width: 46px;
+        }
+        .e-cell.e-focused-date {
+          .e-day {
+            background-color: #1f7bff !important;
+            color: #fff !important;
+            font-weight: 700;
+            border-radius: 4px !important;
+          }
+        }
+        .e-cell.e-focused-date:not(.e-today):not(.e-range-hover):not(
+            .e-selected
+          ):hover {
+          .e-day {
+            background-color: #1f7bff !important;
+          }
+        }
+      }
+
+      &.e-year {
+        td {
+          height: 46px;
+        }
+        td > span.e-day {
+          height: 38px;
+          line-height: 38px;
+          width: 46px;
+        }
+        .e-cell.e-focused-date {
+          .e-day {
+            background-color: #1f7bff !important;
+            color: #fff !important;
+            font-weight: 700;
+            border-radius: 4px !important;
+          }
+        }
+      }
+      .e-today {
+        .e-day {
+          color: var(--rs-active-color) !important;
+          border: 1px solid var(--rs-active-color) !important;
+          box-shadow: none !important;
+        }
+      }
+      .e-range-hover {
+        background-color: rgba(31, 123, 255, 0.08) !important;
+      }
+      .e-selected {
+        .e-day {
+          border-radius: 4px;
+          background-color: var(--rs-active-color) !important;
+          color: #fff !important;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  .e-footer,
+  .e-footer-container {
+    height: auto;
+    padding: 0;
+    padding-top: 8px;
+    display: flex;
+    .e-btn {
+      height: 26px;
+      display: flex;
+      height: 26px;
+      min-width: 64px;
+      padding: 6px 12px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-radius: 4px;
+      background-color: #fff;
+      font-size: var(--rs-font-size);
+      color: var(--rs-cancel-btn-color);
+      cursor: pointer;
+      &.e-apply,
+      &.e-today {
+        border: 1px solid var(--rs-primary-btn-bg);
+        background-color: var(--rs-primary-btn-bg);
+        color: #fff;
+        margin: 0 0 0 8px;
+        &:hover {
+          border-color: var(--rs-primary-btn-hover-bg);
+          background: var(--rs-primary-btn-hover-bg);
+        }
+      }
+      &.e-cancel {
+        border: 1px solid #adb5bd;
+      }
+    }
+  }
+  .e-footer-container {
+    justify-content: center !important;
+    .e-btn.e-today {
+      border: 0 !important;
+      background-color: #fff !important;
+      color: #44566c !important;
+      font-weight: normal !important;
+      &:hover {
+        background-color: #fff !important;
+        color: #1f7bff !important;
+      }
+    }
+  }
+}
+
+.e-datetimepicker.e-popup {
+  height: auto;
+  border-radius: 4px;
+  .e-list-item {
+    font-family: Arial;
+    font-size: var(--rs-input-font-size) !important;
+    min-height: var(--rs-input-line-height) !important;
+    line-height: var(--rs-input-line-height) !important;
+    // 下拉选项超出正常显示，不显示缩略号
+    white-space: normal;
+    text-indent: 0;
+    color: #44566c !important;
+    border-radius: 4px;
+    &.e-item-focus {
+      background: transparent !important;
+      box-shadow: none !important;
+    }
+    &:hover {
+      background: rgba(31, 123, 255, 0.04) !important;
+      border-color: transparent !important;
+    }
+    &.e-active {
+      background: rgba(31, 123, 255, 0.1) !important;
+      border-color: transparent !important;
+      .e-checkbox-wrapper {
+        background-color: transparent !important;
+        &:hover {
+          background-color: transparent !important;
+        }
+        .e-check,
+        .e-stop {
+          background-color: #007bff !important;
+          border-color: #007bff !important;
+          color: #fff !important;
+          &:hover {
+            background-color: #007bff !important;
+            border-color: #007bff !important;
+            color: #fff !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.e-input-group.e-input-fucos {
+  box-shadow: none !important;
+}