eoss-ui 0.5.81-beta9 → 0.5.82

package/packages/theme-chalk/src/base.scss

@@ -1,6 +1,43 @@
 @import './common/var.scss';
 @import './mixins/mixins.scss';
 @import 'icon.scss';
+a,
+blockquote,
+body,
+button,
+caption,
+dd,
+div,
+dl,
+dt,
+fieldset,
+figure,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+html,
+i,
+input,
+label,
+legend,
+li,
+menu,
+ol,
+p,
+pre,
+span,
+table,
+td,
+textarea,
+th,
+ul {
+  font-family: $--font-family;
+}
 html {
   overflow: hidden;
 }
@@ -60,6 +97,7 @@ $end: -51;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  word-wrap: break-word;
   // .cell, span{
   //   text-overflow: ellipsis;
   //   white-space: nowrap;
@@ -77,6 +115,7 @@ $end: -51;
     -webkit-box-orient: vertical;
     line-clamp: $i;
     -webkit-line-clamp: $i;
+    word-wrap: break-word;
   }
 }
 .es-float-right {

package/packages/theme-chalk/src/button-group.scss

@@ -2,7 +2,8 @@
 .es-button-group {
   display: flex;
   & > .el-dropdown {
-    & > .el-button {
+    margin-left: 10px;
+    & > .el-button:not(.el-button--text) {
       border-color: $--border-color-base;
     }
   }
@@ -11,7 +12,10 @@
 .el-button-group {
   & > .el-button:not(.el-button--text) + .es-button:not(.el-button--text),
   & > .es-button:not(.el-button--text) + .el-button:not(.el-button--text),
-  & > .es-button:not(.el-button--text) + .es-button:not(.el-button--text) {
+  & > .es-button:not(.el-button--text) + .es-button:not(.el-button--text),
+  & > .es-button:not(.el-button--text) + .es-selector,
+  & > .es-button:not(.el-button--text) + .es-upload,
+  & > .es-button:not(.el-button--text) + .el-dropdown {
     margin-left: 0;
   }
   & > .es-selector {
@@ -30,6 +34,7 @@
       }
     }
     &:not(:first-child):not(:last-child) {
+      margin-left: 10px;
       & > .el-button {
         border-radius: 0;
         &.el-button--danger,
@@ -60,6 +65,10 @@
         margin-right: -1px;
       }
     }
+    & + .el-button--text,
+    & + .el-dropdown {
+      margin-left: 10px;
+    }
   }
   & > .es-upload {
     float: left;
@@ -79,6 +88,7 @@
       }
     }
     &:not(:first-child):not(:last-child) {
+      margin-left: 10px;
       & > .el-upload--handle > .el-upload {
         & > .el-button {
           border-radius: 0;
@@ -115,6 +125,10 @@
         }
       }
     }
+    & + .el-button--text,
+    & + .el-dropdown {
+      margin-left: 10px;
+    }
   }
 }
 .es-dropdown-padding {

package/packages/theme-chalk/src/common/var.scss

@@ -262,6 +262,10 @@ $--type--index: (
   info: 6
 );
 
+/* font
+-------------------------- */
+$--font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
+  'Microsoft YaHei' !default;
 // 文字默认颜色
 $--font-color-title: rgba(0, 0, 0, 0.85) !default;
 $--font-color-primary: rgba(0, 0, 0, 0.75) !default;
@@ -566,10 +570,11 @@ $--select-option-disabled-color: $--color-text-placeholder !default;
 $--select-option-disabled-background: $--color-white !default;
 /// height||Other|4
 $--select-option-height: 34px !default;
+$--select-option-hover-color: $--color-text-regular !default;
 $--select-option-hover-background: $--background-color-base !default;
 /// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
+$--select-option-selected-color: $--color-primary !default;
+$--select-option-selected-background: $--background-color-base !default;
 
 $--select-group-color: $--color-info !default;
 $--select-group-height: 30px !default;

package/packages/theme-chalk/src/data-table.scss

@@ -1,8 +1,23 @@
 @import './common/var.scss';
 .es-data-table {
   position: relative;
-  .es-toolbar + .es-data-table-content {
-    padding: 16px;
+  .es-toolbar {
+    &.es-table-toolbar-plus {
+      padding: 16px 16px 8px 16px;
+      border-color: transparent;
+      .es-advanced-filter.es-absolute {
+        top: 55px;
+        .es-form {
+          border: 0;
+        }
+      }
+    }
+    & + .es-data-table-content {
+      padding: 16px;
+      &.es-table-plus {
+        padding-top: 0;
+      }
+    }
   }
 }
 .es-data-table-content {
@@ -61,7 +76,7 @@
         display: flex;
       }
       &.el-tooltip {
-        line-height: 28px;
+        line-height: 22px;
       }
     }
     .el-form-item {
@@ -127,7 +142,7 @@
   .es-table-page {
     height: 46px;
     border: $--table-border;
-    padding: 8px 12px;
+    padding: 8px 24px;
     background-color: $--table-page-background-color;
     &.es-loading-page {
       line-height: 30px;
@@ -150,15 +165,6 @@
         }
       }
     }
-    // .el-table__fixed-right {
-    //   &:not(.el-table-box-shadow) {
-    //     thead {
-    //       th:last-child {
-    //         border-left: $--table-border;
-    //       }
-    //     }
-    //   }
-    // }
     .is-scrolling-right ~ .el-table__fixed-right {
       &:not(.el-table-box-shadow) {
         thead {
@@ -186,16 +192,6 @@
     .el-table__body-wrapper {
       .el-table__body {
         position: relative;
-        // &::after {
-        //   content: '';
-        //   display: block;
-        //   height: 1px;
-        //   background-color: $--table-border-color;
-        //   position: absolute;
-        //   left: 0;
-        //   right: 0;
-        //   bottom: -1px;
-        // }
       }
     }
   }
@@ -207,6 +203,47 @@
       }
     }
   }
+  &.es-table-plus {
+    background-color: #fff;
+    padding-top: 0;
+    .el-table__header {
+      thead {
+        color: #6e7c98;
+      }
+      th {
+        background-color: #fff;
+        border-color: #cdd9e4;
+        &:not(.gutter) {
+          border-right-color: transparent;
+        }
+      }
+    }
+    .es-table {
+      border-color: transparent;
+      &::before {
+        background-color: #cdd9e4;
+      }
+      td {
+        border-color: #cdd9e4;
+      }
+      .cell {
+        min-height: 35px;
+      }
+    }
+    .es-table-page {
+      height: 48px;
+      border-top-color: #cdd9e4;
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      padding: 10px 24px;
+      background-color: #fff;
+      .el-pagination__total,
+      .el-select__caret {
+        color: #6e7c98;
+      }
+    }
+  }
 }
 .el-table--border::after,
 .el-table--group::after,

package/packages/theme-chalk/src/form.scss

@@ -1,4 +1,44 @@
 @import './common/var.scss';
+.es-input__inner {
+  display: block;
+  flex: 1;
+  height: 40px;
+  line-height: 38px;
+  padding: 0 10px;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  color: $--input-font-color;
+  &.es-disabled-tips {
+    color: rgba(0, 0, 0, 0.25);
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+  }
+}
+div.es-input__inner {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.es-textarea__inner {
+  min-height: 40px;
+  padding: 5px 15px;
+  line-height: 1.5;
+  color: $--input-font-color;
+  border: $--input-border;
+  border-radius: $--input-border-radius;
+  word-wrap: break-word;
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+}
+.es-input {
+  display: block;
+  line-height: 40px;
+}
+.es-textarea {
+  min-height: 40px;
+}
 .es-form {
   background-color: #ffffff;
   .es-form-content {
@@ -72,46 +112,6 @@
       border: 0;
     }
   }
-  .es-input__inner {
-    display: block;
-    flex: 1;
-    height: 40px;
-    line-height: 38px;
-    padding: 0 10px;
-    border: $--input-border;
-    border-radius: $--input-border-radius;
-    color: $--input-font-color;
-    &.es-disabled-tips {
-      color: rgba(0, 0, 0, 0.25);
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.04);
-      border-color: rgba(0, 0, 0, 0.12);
-    }
-  }
-  div.es-input__inner {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .es-textarea__inner {
-    min-height: 40px;
-    padding: 5px 15px;
-    line-height: 1.5;
-    color: $--input-font-color;
-    border: $--input-border;
-    border-radius: $--input-border-radius;
-    word-wrap: break-word;
-    word-break: break-all;
-    display: flex;
-    align-items: center;
-  }
-  .es-input {
-    display: block;
-    line-height: 40px;
-  }
-  .es-textarea {
-    min-height: 40px;
-  }
   .el-form-item__content {
     line-height: normal;
     .el-upload {
@@ -164,6 +164,8 @@
     .es-collapse-item {
       border-top: 0;
       .el-collapse-item__header {
+        height: 45px;
+        line-height: 45px;
         padding-left: 14px;
         font-size: 16px;
         font-weight: bold;

package/packages/theme-chalk/src/main.scss

@@ -146,6 +146,17 @@
       flex: 1;
       position: relative;
       overflow: hidden;
+      &.es-body-wrapper {
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
     }
 
     .es-body-main {

package/packages/theme-chalk/src/pagination.scss

@@ -1,4 +1,5 @@
 .es-pagination {
+  text-align: center;
   .el-select {
     .el-input {
       width: 56px;
@@ -19,4 +20,10 @@
   .el-input__suffix {
     line-height: 26px;
   }
+  &.es-pagination-complete {
+    text-align: right;
+    .el-pagination__total {
+      float: left;
+    }
+  }
 }

package/packages/theme-chalk/src/simplicity.scss

@@ -1,5 +1,21 @@
 @import './common/var.scss';
 @import './base.scss';
+@keyframes open-submenu {
+  0% {
+    padding-left: 0;
+  }
+  100% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+}
+@keyframes close-submenu {
+  0% {
+    padding-left: $--main-simplicity-menu-width;
+  }
+  100% {
+    padding-left: 48px;
+  }
+}
 .es-simplicity-side {
   width: $--main-simplicity-side-width;
   height: 100%;
@@ -72,7 +88,8 @@
     .es-icon_image {
       opacity: 0.3;
     }
-    &.is-active {
+    &.is-active,
+    &:hover {
       color: #fff;
       .el-badge {
         padding: 8px 0;
@@ -83,6 +100,19 @@
         opacity: 1;
       }
     }
+    .el-icon-circle-close {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 2px;
+      display: none;
+    }
+    &:hover {
+      .el-icon-circle-close {
+        display: block;
+        z-index: 999;
+      }
+    }
   }
   .el-badge {
     width: 100%;
@@ -112,7 +142,6 @@
   .es-simplicity-apps,
   .es-simplicity-message,
   .es-simplicity-message-modal,
-  .es-simplicity-subMenus,
   .es-simplicity-apps-modal,
   .es-simplicity-public-drawer {
     position: absolute;
@@ -140,8 +169,10 @@
   }
   .es-simplicity-subMenus {
     width: auto;
+    height: 100%;
     overflow: visible;
     right: auto;
+    position: absolute;
     .el-drawer {
       box-shadow: none;
       overflow: visible;
@@ -450,6 +481,16 @@
       border-left: 1px solid #dfebf6;
     }
   }
+  &.es-simplicity-menus-plus {
+    .es-simplicity-menus-box {
+      .es-simplicity-menus-title {
+        padding: 13px 7px 13px 14px;
+      }
+      .es-simplicity-menus-scrollbar {
+        top: 57px;
+      }
+    }
+  }
 }
 .es-simplicity-menus-lists {
   padding: 8px 0;
@@ -591,11 +632,11 @@
   }
   &.is-open {
     & > .el-tabs__content {
-      padding-left: $--main-simplicity-menu-width;
+      animation: open-submenu 0.3s 1ms forwards;
     }
     &.is-fold {
       & > .el-tabs__content {
-        padding-left: 48px;
+        animation: close-submenu 0.1s 0ms forwards;
       }
     }
   }

package/packages/theme-chalk/src/tabs.scss

@@ -1,7 +1,7 @@
 @import './common/var.scss';
 .es-tabs {
   &:not(.el-tabs--card):not(.el-tabs--border-card):not(.el-tabs--left) {
-    .el-tabs__nav-wrap {
+    .el-tabs__nav-wrap:not(.is-scrollable) {
       padding: 5px 8px 0 8px;
       .is-top {
         .el-tabs__item {
@@ -26,36 +26,32 @@
     }
   }
   &.el-tabs--border-card {
-    .el-tabs__header {
+    & > .el-tabs__header {
       height: 44px;
       border-bottom: $--border-base;
-    }
-    .el-tabs__nav-scroll {
-      padding: 9px 10px 0 10px;
-      .el-tabs__item {
-        height: 36px;
-        line-height: 36px;
-        .el-badge {
-          position: absolute;
-          right: 0;
-          top: 0;
-          line-height: 0;
-          .el-badge__content {
-            display: block;
-            line-height: 16px;
-            font-weight: 200;
-            width: 16px;
-            height: 16px;
-            padding: 0;
-            border: 0;
+      .el-tabs__nav-scroll {
+        padding: 9px 10px 0 10px;
+        .el-tabs__item {
+          height: 36px;
+          line-height: 36px;
+          .el-badge {
+            .el-badge__content {
+              display: block;
+              line-height: 16px;
+              font-weight: 200;
+              width: 16px;
+              height: 16px;
+              padding: 0;
+              border: 0;
+            }
+          }
+          &.is-active {
+            border-top-color: #d9d9d9;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            font-weight: bold;
+            color: $--color-primary;
           }
-        }
-        &.is-active {
-          border-top-color: #d9d9d9;
-          border-top-left-radius: 2px;
-          border-top-right-radius: 2px;
-          font-weight: bold;
-          color: $--color-primary;
         }
       }
     }

package/packages/theme-chalk/src/toolbar.scss

@@ -12,12 +12,23 @@
       .el-button {
         padding: 4px 8px;
         & + .el-button,
-        & + .es-button-badge {
+        & + .es-button-badge,
+        & + .es-upload,
+        & + .el-dropdown,
+        & + .es-selector {
           margin-left: 6px;
         }
       }
-      .es-button-badge + .el-button {
-        margin-left: 6px;
+      .es-button-badge,
+      .es-upload,
+      .es-selector {
+        & + .el-button,
+        & + .es-button-badge,
+        & + .es-upload,
+        & + .el-dropdown,
+        & + .es-selector {
+          margin-left: 6px;
+        }
       }
     }
     .es-form {
@@ -108,7 +119,8 @@
     }
   }
   .es-form-search-small {
-    .el-form-item__content {
+    .el-form-item__content,
+    .el-input-number {
       line-height: 32px !important;
     }
     .el-form-item__label {

package/packages/theme-chalk/src/tree-group.scss

@@ -54,6 +54,14 @@ $--tree-offset-base: 240px;
           height: 100%;
         }
       }
+      &.es-tabs-tree-card-plus {
+        .el-tabs__nav-wrap {
+          padding-top: 14px;
+        }
+        .el-tabs__content {
+          top: 50px;
+        }
+      }
     }
   }
   .es-tree-group-right {

package/packages/theme-chalk/src/tree.scss

@@ -7,6 +7,7 @@
   position: relative;
   .es-tree-title,
   .es-tree-search {
+    line-height: 32px;
     padding: 6px 8px;
     background-color: #f5f7fa;
     border-bottom: $--border-base;
@@ -29,11 +30,6 @@
       }
     }
   }
-  .es-tree-title {
-    line-height: 34px;
-    padding: 6px 8px 4px 8px;
-    min-height: 45px;
-  }
   .el-input-group__append {
     border: 0;
     background-color: $--color-primary;
@@ -79,7 +75,7 @@
     }
   }
   .es-filter-tree {
-    padding-top: 4px;
+    padding-top: 8px;
     padding-left: 8px;
     .el-tree-node__expand-icon {
       &::before {
@@ -149,4 +145,21 @@
       }
     }
   }
+  &.es-tree-plus {
+    .es-tree-title,
+    .es-tree-search {
+      background-color: #fff;
+      border-bottom-color: transparent;
+    }
+    .es-tree-search:first-child {
+      padding: 16px 8px 8px 8px;
+    }
+  }
+  &.es-tabs-tree-plus {
+    .es-tree-search {
+      padding-top: 12px;
+      background-color: #fff;
+      border-bottom-color: transparent;
+    }
+  }
 }