@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.4

package/src/style/vxetable.scss

@@ -1,356 +1,364 @@
-// 默认主题
-html[data-vxe-ui-theme='light'] {
-  // 字体颜色
-  --vxe-ui-font-color: #000;
-  --vxe-ui-table-font-color: #000;
-
-  // 禁用颜色
-  --vxe-ui-font-disabled-color: #040404;
-  --el-disabled-text-color: #040404;
-  --vxe-ui-input-disabled-background-color: #fafafa;
-  --el-disabled-bg-color: #fafafa;
-  --vxe-ui-button-height-mini: 24px;
-  --vxe-ui-table-row-current-background-color: #00b789;
-}
-
-/** 重写table的背景 */
-.vxe-table--header {
-  font-weight: 700;
-  color: #34538b;
-  background-color: #d8e5f7;
-  background-image: linear-gradient(180deg, #d8e5f7, #bcd3f5);
-}
-
-/** 日期选择器弹出面板 */
-.vxe-input--date-picker-body {
-  td.is--prev,
-  td.is--next {
-    .vxe-input--date-label {
-      color: #bfbfbf;
-    }
-  }
-}
-
-/** 必填录入框颜色 */
-.vxe-form--item.is--required {
-  // 输入框必填
-  .vxe-input > .vxe-input--wrapper > .vxe-input--inner:not(:disabled) {
-    background-color: #fffbdf;
-  }
-
-  // 数字框框必填
-  .vxe-input:not(.is--disabled) > .vxe-input--wrapper {
-    .vxe-input--control-icon {
-      background-color: #fffbdf;
-    }
-  }
-
-  // 输入框必填
-  .vxe-input:not(.is--disabled) > .vxe-input--suffix {
-    background-color: #fffbdf;
-  }
-
-  // 下拉选择必填
-  .el-select__wrapper:not(.is-disabled) {
-    background-color: #fffbdf;
-  }
-
-  // 输入框必填
-  .el-input:not(.is-disabled) > .el-input__wrapper {
-    background-color: #fffbdf;
-  }
-
-  // 文本域必填
-  .vxe-textarea:not(.is--disabled) > .vxe-textarea--inner {
-    background-color: #fffbdf;
-  }
-
-  // 日期必填
-  .vxe-date-picker:not(.is--disabled) {
-    .vxe-date-picker--inner,
-    .vxe-input--suffix {
-      background-color: #fffbdf;
-    }
-
-    .vxe-date-picker--prefix,
-    .vxe-date-picker--suffix {
-      background-color: #fffbdf;
-    }
-  }
-
-  .vxe-number-input:not(.is--disabled) {
-    .vxe-number-input--input-inner {
-      .vxe-number-input--input {
-        background-color: #fffbdf;
-      }
-    }
-  }
-
-  // 日期范围必填
-  .vxe-date-range-picker:not(.is--disabled) {
-    .vxe-date-range-picker--inner,
-    .vxe-date-range-picker--suffix {
-      background-color: #fffbdf;
-    }
-  }
-}
-
-/** 分页组件：当前页颜色 */
-.vxe-pager {
-  .vxe-pager--num-btn:not(.is--disabled).is--active {
-    color: #fff !important;
-  }
-}
-
-/***** switch ******/
-.vxe-switch {
-  padding-left: 0;
-
-  .vxe-switch--label {
-    width: 24px;
-  }
-}
-
-/**********  */
-
-/***** grid统计页脚 ******/
-
-.ut-grid-footer {
-  font-weight: 800;
-}
-
-/************  */
-
-.vxe-button--dropdown-wrapper {
-  padding: 0;
-
-  .vxe-button {
-    padding: 8px !important;
-    border-bottom: 1px solid #bfbfbf;
-
-    .vxe-button--icon {
-      font-size: 16px;
-    }
-  }
-}
-
-// mini-size
-.vxe-table--render-default.size--mini .vxe-header--column:not(.col--ellipsis),
-.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis),
-.vxe-table--render-default.size--mini .vxe-footer--column:not(.col--ellipsis) {
-  padding: 5px 0;
-}
-
-// small-size
-.vxe-table--render-default.size--small .vxe-header--column:not(.col--ellipsis),
-.vxe-table--render-default.size--small .vxe-body--column:not(.col--ellipsis),
-.vxe-table--render-default.size--small .vxe-footer--column:not(.col--ellipsis) {
-  padding: 5px 0;
-}
-
-.vxe-toolbar {
-  height: 36px !important;
-  padding: 0 10px;
-  color: white;
-
-  .vxe-custom--option-wrapper {
-    .vxe-custom--body {
-      li:not([class~='is--checked']) {
-        color: #000;
-      }
-    }
-  }
-}
-
-/********************* vxe-modal *****************/
-.vxe-modal {
-  .vxe-modal--wrapper .vxe-modal--content {
-    padding: 0.4em 0.8em !important;
-  }
-}
-
-/********************* vxe-modal *****************/
-
-/************* button *******************/
-
-// .vxe-button + .vxe-button:not(.type--text) {
-//   margin-left: 6px;
-// }
-
-.vxe-button {
-  padding: 0 0.5em !important;
-}
-
-/************* button *******************/
-
-/************* pulldown *******************/
-.vxe-pulldown {
-  width: 100%;
-}
-
-/************* pulldown *******************/
-
-.vxe-form {
-  .vxe-input.size--mini {
-    height: 24px;
-  }
-
-  .vxe-form--item-trigger-node {
-    min-width: 60px;
-  }
-
-  // 表单分组标题
-  .vxe-form--group-title {
-    border-bottom: 1px solid #eee;
-
-    .vxe-form--item-title-content {
-      font-size: 13px;
-    }
-  }
-
-  .vxe-form--group-title::before {
-    position: relative;
-    top: 2px;
-    padding-right: 5px;
-    color: var(--udp-theme-project-text);
-    content: '▉';
-  }
-}
-
-.vxe-form.size--mini .vxe-form--item-inner {
-  min-height: 26px !important;
-}
-
-.ut-input-suffix.vxe-input {
-  width: 100%;
-  height: 34px;
-}
-
-.ut-input-suffix.vxe-input .vxe-input--suffix {
-  top: 1px;
-  width: 40px;
-  height: 32px;
-  text-align: center;
-  cursor: pointer;
-  background-color: #f5f7fa;
-  border-left: 1px solid #dcdfe6;
-}
-
-.ut-input-suffix.vxe-input .vxe-input--inner {
-  padding-right: 40px;
-  border: 1px solid #dcdfe6;
-}
-
-// 斑马线颜色
-.vxe-table--render-default .vxe-body--row.row--stripe {
-  background-color: #e6f7ff;
-}
-
-// 点击高亮
-.vxe-table--render-default {
-  .vxe-body--row.row--current {
-    .vxe-cell--label {
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .vxe-cell > span:first-child:not(.vxe-cell--title, .el-tag) {
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .col--checkbox {
-      background: #fff !important;
-    }
-
-    .vxe-body--column {
-      font-weight: bold;
-      color: #fff;
-    }
-  }
-}
-
-// .vxe-cell--label > span:first-child:not(.vxe-cell--title),
-// .vxe-cell > span:first-child:not(.vxe-cell--title) {
-//   color: #000;
-// }
-
-.vxe-cell {
-  .el-tag:first-child:not(.vxe-cell--title) {
-    .el-tag__content {
-      color: #fff !important;
-    }
-  }
-
-  .el-switch span:first-child:not(.vxe-cell--title) {
-    color: #fff !important;
-  }
-
-  .udp-select-wrapper {
-    .el-tag:first-child:not(.vxe-cell--title) {
-      .el-tag__content {
-        color: inherit !important;
-      }
-    }
-  }
-}
-
-.vxe-table--header-wrapper {
-  // .vxe-checkbox--icon {
-  //   // color: #fff !important;
-  // }
-
-  .vxe-icon-checkbox-checked,
-  .vxe-icon-checkbox-indeterminate {
-    color: #409eff !important;
-  }
-
-  // .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
-  //   color: #fff !important;
-  // }
-}
-
-.ut-grid-wrapper {
-  .vxe-form--item-content {
-    .vxe-switch {
-      height: 24px;
-    }
-  }
-}
-
-.vxe-table--body {
-  .vxe-body--row:hover {
-    font-weight: bold;
-  }
-}
-
-.el-table th.el-table__cell {
-  font-weight: 700;
-  color: #34538b;
-  background-color: #d8e5f7;
-  background-image: linear-gradient(180deg, #d8e5f7, #bcd3f5);
-}
-
-/*********************************** tabs ****************************/
-
-.vxe-tabs-header--item-name {
-  font-size: 12px;
-  font-weight: 600;
-  color: #909399;
-}
-
-.vxe-tabs-header--item.is--active {
-  .vxe-tabs-header--item-name {
-    font-size: 13px;
-    color: var(--udp-theme-vxeColor);
-  }
-}
-
-/******************************** tab end *************************************/
-
-/******************************** preview start 预览图片组件 *************************************/
-.vxe-image-preview--operation-wrapper {
-  color: #c0c4cc;
-}
-
-/******************************** preview end *************************************/
+// 默认主题
+html[data-vxe-ui-theme='light'] {
+  // 字体颜色
+  --vxe-ui-font-color: #000;
+  --vxe-ui-table-font-color: #000;
+
+  // 禁用颜色
+  --vxe-ui-font-disabled-color: #040404;
+  --el-disabled-text-color: #040404;
+  --vxe-ui-input-disabled-background-color: #fafafa;
+  --el-disabled-bg-color: #fafafa;
+  --vxe-ui-button-height-mini: 24px;
+  --vxe-ui-table-row-current-background-color: #00b789;
+}
+
+/** 重写table的背景 */
+.vxe-table--header {
+  font-weight: 700;
+  color: #34538b;
+  background-color: #d8e5f7;
+  background-image: linear-gradient(180deg, #d8e5f7, #bcd3f5);
+}
+
+/** 日期选择器弹出面板 */
+.vxe-input--date-picker-body {
+  td.is--prev,
+  td.is--next {
+    .vxe-input--date-label {
+      color: #bfbfbf;
+    }
+  }
+}
+
+/** 必填录入框颜色 */
+.vxe-form--item.is--required {
+  // 输入框必填
+  .vxe-input > .vxe-input--wrapper > .vxe-input--inner:not(:disabled) {
+    background-color: #fffbdf;
+  }
+
+  // 数字框框必填
+  .vxe-input:not(.is--disabled) > .vxe-input--wrapper {
+    .vxe-input--control-icon {
+      background-color: #fffbdf;
+    }
+  }
+
+  // 输入框必填
+  .vxe-input:not(.is--disabled) > .vxe-input--suffix {
+    background-color: #fffbdf;
+  }
+
+  // 下拉选择必填
+  .el-select__wrapper:not(.is-disabled) {
+    background-color: #fffbdf;
+  }
+
+  // 输入框必填
+  .el-input:not(.is-disabled) > .el-input__wrapper {
+    background-color: #fffbdf;
+  }
+
+  // 文本域必填
+  .vxe-textarea:not(.is--disabled) > .vxe-textarea--inner {
+    background-color: #fffbdf;
+  }
+
+  // 日期必填
+  .vxe-date-picker:not(.is--disabled) {
+    .vxe-date-picker--inner,
+    .vxe-input--suffix {
+      background-color: #fffbdf;
+    }
+
+    .vxe-date-picker--prefix,
+    .vxe-date-picker--suffix {
+      background-color: #fffbdf;
+    }
+  }
+
+  .vxe-number-input:not(.is--disabled) {
+    .vxe-number-input--input-inner {
+      .vxe-number-input--input {
+        background-color: #fffbdf;
+      }
+    }
+  }
+
+  // 日期范围必填
+  .vxe-date-range-picker:not(.is--disabled) {
+    .vxe-date-range-picker--inner,
+    .vxe-date-range-picker--suffix {
+      background-color: #fffbdf;
+    }
+  }
+}
+
+/** 分页组件：当前页颜色 */
+.vxe-pager {
+  .vxe-pager--num-btn:not(.is--disabled).is--active {
+    color: #fff !important;
+  }
+}
+
+/***** switch ******/
+.vxe-switch {
+  padding-left: 0;
+
+  .vxe-switch--label {
+    width: 24px;
+  }
+}
+
+/**********  */
+
+/***** grid统计页脚 ******/
+
+.ut-grid-footer {
+  font-weight: 800;
+}
+
+/************  */
+
+.vxe-button--dropdown-wrapper {
+  padding: 0;
+
+  .vxe-button {
+    padding: 8px !important;
+    border-bottom: 1px solid #bfbfbf;
+
+    .vxe-button--icon {
+      font-size: 16px;
+    }
+  }
+}
+
+// mini-size
+.vxe-table--render-default.size--mini .vxe-header--column:not(.col--ellipsis),
+.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis),
+.vxe-table--render-default.size--mini .vxe-footer--column:not(.col--ellipsis) {
+  padding: 5px 0;
+}
+
+// small-size
+.vxe-table--render-default.size--small .vxe-header--column:not(.col--ellipsis),
+.vxe-table--render-default.size--small .vxe-body--column:not(.col--ellipsis),
+.vxe-table--render-default.size--small .vxe-footer--column:not(.col--ellipsis) {
+  padding: 5px 0;
+}
+
+.vxe-toolbar {
+  height: 36px !important;
+  padding: 0 10px;
+  color: white;
+
+  .vxe-custom--option-wrapper {
+    .vxe-custom--body {
+      li:not([class~='is--checked']) {
+        color: #000;
+      }
+    }
+  }
+}
+
+/********************* vxe-modal *****************/
+.vxe-modal {
+  .vxe-modal--wrapper .vxe-modal--content {
+    padding: 0.4em 0.8em !important;
+  }
+}
+
+/********************* vxe-modal *****************/
+
+/************* button *******************/
+
+// .vxe-button + .vxe-button:not(.type--text) {
+//   margin-left: 6px;
+// }
+
+.vxe-button {
+  padding: 0 0.5em !important;
+}
+
+/************* button *******************/
+
+/************* pulldown *******************/
+.vxe-pulldown {
+  width: 100%;
+}
+
+/************* pulldown *******************/
+
+.vxe-form {
+  .vxe-input.size--mini {
+    height: 24px;
+  }
+
+  .vxe-form--item-trigger-node {
+    min-width: 60px;
+  }
+
+  // 表单分组标题
+  .vxe-form--group-title {
+    border-bottom: 1px solid #eee;
+
+    .vxe-form--item-title-content {
+      font-size: 13px;
+    }
+  }
+
+  .vxe-form--group-title::before {
+    position: relative;
+    top: 2px;
+    padding-right: 5px;
+    color: var(--udp-theme-project-text);
+    content: '▉';
+  }
+}
+
+.vxe-form.size--mini .vxe-form--item-inner {
+  min-height: 26px !important;
+}
+
+.ut-input-suffix.vxe-input {
+  width: 100%;
+  height: 34px;
+}
+
+.ut-input-suffix.vxe-input .vxe-input--suffix {
+  top: 1px;
+  width: 40px;
+  height: 32px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #f5f7fa;
+  border-left: 1px solid #dcdfe6;
+}
+
+.ut-input-suffix.vxe-input .vxe-input--inner {
+  padding-right: 40px;
+  border: 1px solid #dcdfe6;
+}
+
+// 斑马线颜色
+.vxe-table--render-default .vxe-body--row.row--stripe {
+  background-color: #e6f7ff;
+}
+
+// 点击高亮
+.vxe-table--render-default {
+  .vxe-body--row.row--current {
+    .vxe-cell--label {
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .vxe-cell > span:first-child:not(.vxe-cell--title, .el-tag) {
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .col--checkbox {
+      background: #fff !important;
+    }
+
+    .vxe-body--column {
+      font-weight: bold;
+      color: #fff;
+    }
+  }
+}
+
+// .vxe-cell--label > span:first-child:not(.vxe-cell--title),
+// .vxe-cell > span:first-child:not(.vxe-cell--title) {
+//   color: #000;
+// }
+
+.vxe-cell {
+  .el-tag:first-child:not(.vxe-cell--title) {
+    .el-tag__content {
+      color: #fff !important;
+    }
+  }
+
+  .el-switch span:first-child:not(.vxe-cell--title) {
+    color: #fff !important;
+  }
+
+  .udp-select-wrapper {
+    .el-tag:first-child:not(.vxe-cell--title) {
+      .el-tag__content {
+        color: inherit !important;
+      }
+    }
+  }
+}
+
+.vxe-table--header-wrapper {
+  // .vxe-checkbox--icon {
+  //   // color: #fff !important;
+  // }
+
+  .vxe-icon-checkbox-checked,
+  .vxe-icon-checkbox-indeterminate {
+    color: #409eff !important;
+  }
+
+  // .vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon {
+  //   color: #fff !important;
+  // }
+}
+
+.ut-grid-wrapper {
+  .vxe-form--item-content {
+    .vxe-switch {
+      height: 24px;
+    }
+  }
+}
+
+.vxe-table--body {
+  .vxe-body--row:hover {
+    font-weight: bold;
+  }
+}
+
+.el-table th.el-table__cell {
+  font-weight: 700;
+  color: #34538b;
+  background-color: #d8e5f7;
+  background-image: linear-gradient(180deg, #d8e5f7, #bcd3f5);
+}
+
+/*********************************** tabs ****************************/
+
+.vxe-tabs-header--item-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #909399;
+}
+
+.vxe-tabs-header--item.is--active {
+  .vxe-tabs-header--item-name {
+    font-size: 13px;
+    color: var(--udp-theme-vxeColor);
+  }
+}
+
+/******************************** tab end *************************************/
+
+/******************************** preview start 预览图片组件 *************************************/
+.vxe-image-preview {
+  &--operation-wrapper {
+    color: #c0c4cc;
+  }
+
+  &--close-btn {
+    .vxe-icon-close {
+      color: #f56c6c;
+    }
+  }
+}
+
+/******************************** preview end *************************************/