raise-common-lib-new 0.0.3

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

@@ -0,0 +1,514 @@
+// dropdownlist,multiselect，pagerdropdown,dropdowntree,daterangepicker
+.e-dropdownlist,
+.e-multiselect,
+.e-pagerdropdown,
+.e-dropdowntree,
+.e-daterangepicker {
+  height: var(--rs-input-line-height);
+  font-family: var(--rs-font-family);
+  .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;
+      -webkit-text-fill-color: var(--rs-input-disabled-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;
+      }
+    }
+
+    &.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 {
+      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);
+      }
+      .e-clear-icon {
+        padding: 0 !important;
+        &:before {
+          font-size: 8px;
+        }
+      }
+    }
+  }
+
+  .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-item {
+      font-family: Arial;
+      font-size: var(--rs-input-font-size);
+      min-height: var(--rs-input-line-height);
+      line-height: var(--rs-input-line-height);
+      // 下拉选项超出正常显示，不显示缩略号
+      white-space: normal;
+      text-indent: 0;
+      padding: 0 12px;
+      color: #44566c;
+      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 {
+            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;
+  }
+}
+
+// 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-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
+.e-daterangepicker {
+  .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.svg");
+        background-size: cover;
+        background-position: center;
+      }
+    }
+  }
+}
+
+.e-daterangepicker.e-popup {
+  height: auto;
+  border-radius: 4px;
+  padding: 16px 16px 12px 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-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-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_left.svg");
+            background-size: cover;
+            background-position: center;
+          }
+        }
+      }
+      .e-next {
+        .e-icons {
+          &::before {
+            background-image: url("/assets/img/calendar_arrow_right.svg");
+          }
+        }
+      }
+    }
+    .e-content {
+      .e-calendar-content-table {
+        border-spacing: 0 8px; /* 设置行间距为 8px */
+        th {
+          color: var(--rs-primary-2-color);
+          font-size: var(--rs-font-size);
+        }
+      }
+      &.e-month {
+        .e-cell {
+          .e-day {
+            width: 28px;
+          }
+        }
+      }
+      .e-cell {
+        .e-day {
+          border-radius: 7px;
+          background-color: transparent !important;
+          font-size: var(--rs-font-size);
+          color: var(--rs-primary-2-color);
+          font-weight: 700;
+          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;
+          }
+        }
+      }
+      .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: 7px;
+          background-color: var(--rs-active-color) !important;
+          color: #fff !important;
+        }
+      }
+    }
+  }
+  .e-footer {
+    height: auto;
+    padding-top: 12px;
+    .e-btn {
+      height: 26px;
+      display: flex;
+      width: 64px;
+      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 {
+        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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+input.e-input,
+textarea.e-input {
+  font-size: var(--rs-input-font-size) !important;
+  color: var(--rs-input-color) !important;
+  box-shadow: none !important;
+  border-radius: var(--rs-input-border-radius);
+  border-color: var(--rs-input-border-color) !important;
+  &:not(.error):not([disabled]):not([readonly]):hover {
+    box-shadow: 0px 0px 3px 0px rgba(31, 123, 255, 0.4) !important;
+    border-color: var(--rs-input-hover-border-color) !important;
+  }
+  &:not(.error):not([disabled]):not([readonly]):focus {
+    border-color: var(--rs-input-focus-border-color) !important;
+    box-shadow: none !important;
+  }
+  &[disabled],
+  &[readonly] {
+    border-color: var(--rs-input-border-color) !important;
+    font-size: var(--rs-input-font-size);
+    color: var(--rs-input-disabled-color) !important;
+    background-color: var(--rs-input-disabled-bg) !important;
+    -webkit-text-fill-color: var(--rs-input-disabled-color) !important;
+  }
+  &.error {
+    border-color: var(--rs-input-error-border-color) !important;
+  }
+}
+
+input.e-input {
+  height: var(--rs-input-line-height);
+  line-height: calc(var(--rs-input-line-height) - 2px);
+}

package/src/assets/style/style.scss

@@ -0,0 +1,29 @@
+@import "./syncfusion.min.css";
+@import "./variables";
+@import "./reset/input.scss";
+@import "./reset/button.scss";
+@import "./reset/dropdown.scss";
+
+html{
+  overflow: hidden;
+}
+body{
+  margin: 0;
+  padding: 0;
+}
+* {
+  box-sizing: border-box;
+}
+::-webkit-scrollbar {
+  // 滚动条样式
+  width: 5px;
+  height: 5px;
+  background: #ffffff;
+  position: static;
+  z-index: 999;
+}
+::-webkit-scrollbar-thumb {
+  // 滚动条滑块颜色
+  background: rgba(108, 124, 144, 0.30);
+  border-radius: 3px;
+}