ele-admin-plus 1.1.4 → 1.1.5-beta.1

package/lib/ele-pro-table/style/index.scss

@@ -5,372 +5,28 @@
 @include set-pro-table-var($ele);
 
 .ele-pro-table {
-  // 工具栏
+  /* 工具栏 */
   & > .ele-toolbar {
     border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  // 表格样式修改
-  & > div.el-table {
-    $bg: eleVar('table', 'tr-bg');
-    $hover-bg: eleVar('table', 'tr-hover-bg');
-    $active-bg: eleVar('table', 'tr-active-bg');
-    #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
-    #{elVarName('table', 'text-color')}: eleVar('table', 'color');
-    #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
-    #{elVarName('table', 'row-hover-bg-color')}: #{$hover-bg};
-    #{elVarName('table', 'current-row-bg-color')}: #{$active-bg};
-    #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
-    #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
-    #{elVarName('table', 'tr-bg-color')}: #{$bg};
-    #{elVarName('table', 'expanded-cell-bg-color')}: #{$bg};
-  }
-
-  & > .el-table {
-    .el-table__header thead .ele-table-head-tr > .el-table__cell,
-    & > .el-table__inner-wrapper > .el-table__footer-wrapper .el-table__cell {
-      background: eleVar('table', 'th-bg');
-    }
-
-    .el-table__body .ele-table-tr {
-      & > .el-table__cell {
-        background: eleVar('table', 'tr-bg');
-      }
-
-      &:hover > .el-table__cell,
-      &.hover-row > .el-table__cell {
-        background: eleVar('table', 'tr-hover-bg');
-      }
-
-      &.current-row > .el-table__cell {
-        background: eleVar('table', 'tr-active-bg');
-      }
-
-      &.current-row:hover > .el-table__cell,
-      &.current-row.hover-row > .el-table__cell {
-        background: eleVar('table', 'tr-active-hover-bg');
-      }
-    }
-  }
-
-  .ele-table-tr.el-table__row--striped {
-    &:not(.current-row):not(.hover-row):not(:hover) > .el-table__cell {
-      background: eleVar('table', 'even-bg');
-    }
-  }
-
-  // 表头
-  .ele-table-head-tr {
-    & > .el-table__cell {
-      font-weight: eleVar('table', 'th-font-weight');
-
-      & > .cell {
-        display: flex;
-        align-items: center;
-      }
-
-      &.is-center > .cell {
-        justify-content: center;
-      }
-
-      &.is-right > .cell {
-        justify-content: flex-end;
-      }
-    }
-
-    &.is-ellipsis > .el-table__cell > .cell {
-      white-space: nowrap;
-    }
-
-    // 排序图标
-    .caret-wrapper {
-      $color: eleVar('table', 'icon-color');
-      #{elVarName('text-color', 'placeholder')}: #{$color};
-      width: 14px;
-      overflow: visible;
-      flex-shrink: 0;
-
-      .ascending {
-        left: 4px;
-        top: -4px;
-      }
-
-      .descending {
-        left: 4px;
-        bottom: -4px;
-      }
-    }
-
-    // 筛选图标
-    .el-table__column-filter-trigger {
-      margin: eleVar('table', 'filter-margin');
-      padding: eleVar('table', 'filter-padding');
-      border-radius: eleVar('table', 'filter-radius');
-      transition: (color $ele-transition, background-color $ele-transition);
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      & > .el-icon {
-        color: eleVar('table', 'icon-color');
-        font-size: eleVar('table', 'filter-size');
-
-        & > svg > path {
-          #{'d'}: path(
-            'M 349 838 c 0 17.7 14.2 32 31.8 32 h 262.4 c 17.6 0 31.8 -14.3 31.8 -32 V 642 H 349 v 196 Z M 880.1 154 H 143.9 c -24.5 0 -39.8 26.7 -27.5 48 l 221.3 376 h 348.8 l 221.3 -376 c 12.1 -21.3 -3.2 -48 -27.7 -48 Z'
-          );
-        }
-      }
-
-      &:hover {
-        background: eleVar('table', 'filter-hover-bg');
-      }
-    }
-  }
-
-  .ele-cell-title {
-    flex: 1;
-    position: relative;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  // 行高
-  .ele-table-tr > .el-table__cell > .cell,
-  .ele-table-head-tr > .el-table__cell > .cell {
-    line-height: eleVar('table', 'line-height');
-  }
-
-  // 展开按钮
-  .ele-table-tr > .el-table__cell > .cell > .el-table__expand-icon {
-    vertical-align: -2px;
-
-    & > .el-icon {
-      font-size: 13px;
-    }
-  }
-
-  // 复选框
-  .ele-table-head-tr > .el-table-column--selection > .cell,
-  .ele-table-tr > .el-table-column--selection > .cell {
-    height: auto;
-    vertical-align: middle;
-    overflow: visible;
-  }
-
-  // 边框线
-  & > .el-table--border::after,
-  & > .el-table--border::before,
-  & > .el-table > .el-table__inner-wrapper > .el-table__border-left-patch {
-    width: eleVar('table', 'fix-border');
-  }
-
-  & > .el-table > .el-table__inner-wrapper::before,
-  & > .el-table--border > .el-table__inner-wrapper::after {
-    height: eleVar('table', 'fix-border');
-  }
-
-  // 隐藏下边框
-  &.hide-bottom-line > .el-table > .el-table__inner-wrapper::before {
-    display: none;
-  }
-
-  // 圆角
-  & > .el-table:not(.el-table--border) {
-    // 表头
-    & > .el-table__inner-wrapper > .el-table__header-wrapper {
-      thead > .ele-table-head-tr:first-child > th:first-child {
-        border-top-left-radius: eleVar('table', 'radius');
-      }
-
-      thead > .ele-table-head-tr:first-child > th:last-child {
-        border-top-right-radius: eleVar('table', 'radius');
-      }
-    }
-
-    // 表头大尺寸
-    &.el-table--large > .el-table__inner-wrapper > .el-table__header-wrapper {
-      thead > .ele-table-head-tr:first-child > th:first-child {
-        border-top-left-radius: eleVar('table', 'lg-radius');
-      }
-
-      thead > .ele-table-head-tr:first-child > th:last-child {
-        border-top-right-radius: eleVar('table', 'lg-radius');
-      }
-    }
-
-    // 表头小尺寸
-    &.el-table--small > .el-table__inner-wrapper > .el-table__header-wrapper {
-      thead > .ele-table-head-tr:first-child > th:first-child {
-        border-top-left-radius: eleVar('table', 'sm-radius');
-      }
-
-      thead > .ele-table-head-tr:first-child > th:last-child {
-        border-top-right-radius: eleVar('table', 'sm-radius');
-      }
-    }
-
-    // 合计行
-    & > .el-table__inner-wrapper > .el-table__footer-wrapper {
-      margin-top: calc(0px - eleVar('table', 'fix-height'));
-
-      & > table > tbody > tr:last-child > td {
-        border-bottom-color: transparent;
-      }
-
-      & > table > tbody > tr:last-child > td:first-child {
-        border-bottom-left-radius: eleVar('table', 'radius');
-      }
-
-      & > table > tbody > tr:last-child > td:last-child {
-        border-bottom-right-radius: eleVar('table', 'radius');
-      }
-    }
-
-    // 合计行大尺寸
-    &.el-table--large > .el-table__inner-wrapper > .el-table__footer-wrapper {
-      & > table > tbody > tr:last-child > td:first-child {
-        border-bottom-left-radius: eleVar('table', 'lg-radius');
-      }
-
-      & > table > tbody > tr:last-child > td:last-child {
-        border-bottom-right-radius: eleVar('table', 'lg-radius');
-      }
-    }
-
-    // 合计行小尺寸
-    &.el-table--small > .el-table__inner-wrapper > .el-table__footer-wrapper {
-      & > table > tbody > tr:last-child > td:first-child {
-        border-bottom-left-radius: eleVar('table', 'sm-radius');
-      }
-
-      & > table > tbody > tr:last-child > td:last-child {
-        border-bottom-right-radius: eleVar('table', 'sm-radius');
-      }
-    }
-  }
-
-  & > .el-table.has-footer > .el-table__inner-wrapper::before {
-    display: none;
-  }
-
-  // 滚动条
-  & > .el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
-    & > .el-scrollbar > .el-scrollbar__wrap {
-      padding-bottom: eleVar('table', 'fix-height');
-      box-sizing: border-box;
-    }
-  }
-
-  // loading
-  & > .el-table--border > .el-loading-mask {
-    top: 1px;
-    left: 1px;
-    right: 1px;
-    bottom: 1px;
-  }
-
+  /* 加载图标 */
   & > .ele-loading-spinner {
     background: transparent;
   }
-
-  // 空状态
-  .ele-table-empty {
-    padding: 58px 0;
-    line-height: 1;
-
-    .el-empty__description {
-      margin-top: 8px;
-
-      p {
-        color: elVar('text-color', 'placeholder');
-      }
-    }
-  }
-
-  // 粘性头部
-  &.is-sticky > .el-table {
-    overflow: visible;
-
-    & > .el-table__inner-wrapper > .el-table__header-wrapper {
-      position: sticky;
-      top: eleVar('table', 'sticky-top');
-      z-index: 3;
-    }
-  }
-}
-
-/* 粘性头部适配布局风格 */
-.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-pro-table.is-sticky {
-  & > .el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
-    top: eleVar('table', 'fixed-header-sticky-top');
-  }
-}
-
-.ele-admin-fixed-header.ele-admin-maximized:not(.ele-admin-expanded) {
-  &:not(.ele-admin-fixed-body) .ele-pro-table.is-sticky {
-    & > .el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
-      top: eleVar('table', 'maximized-sticky-top');
-    }
-  }
-}
-
-/* Tooltip */
-body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
-  padding: eleVar('tooltip', 'padding');
-
-  &::after {
-    content: '';
-    background: inherit;
-    border-radius: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-  }
-}
-
-/* 开关 */
-.ele-table-tr .el-switch,
-.ele-table-head-tr .el-switch {
-  height: auto;
-}
-
-/* Link */
-.ele-table-tr .el-link,
-.ele-table-head-tr .el-link {
-  display: inline;
-  font-size: inherit;
-
-  & > .el-link__inner {
-    display: inline;
-  }
-
-  & > .el-icon {
-    vertical-align: -1.7px;
-  }
-}
-
-// 超出隐藏
-.ele-table-tr > .el-table__cell > .cell.el-tooltip > div {
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* 底栏 */
 .ele-pro-table-footer {
-  padding-top: 4px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
 
   & > .ele-pagination {
     margin: 0 auto;
+    padding-top: 4px;
   }
 }
 
@@ -398,56 +54,60 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
 }
 
 /* 列配置 */
-.ele-tool-column {
-  &.ele-popover {
-    width: eleVar('tool-column', 'width') !important;
-    max-width: 100%;
-  }
+.ele-tool-column.ele-popover {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
 
-  .ele-popover-content {
-    padding: 0;
+.ele-tool-column-header {
+  display: flex;
+  align-items: center;
+  border-bottom: eleVar('tool-column', 'header-border');
+  padding: eleVar('tool-column', 'header-padding');
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ele-tool-column-link {
+  color: elVar('color-primary');
+  transition: color $ele-transition;
+  cursor: pointer;
+
+  &:hover {
+    color: elVar('color-primary', 'light-3');
   }
+}
 
-  .el-checkbox-group {
-    line-height: inherit;
+.ele-tool-column.ele-popover.ele-popper.el-popper {
+  .el-checkbox {
+    height: eleVar('tool-column', 'item-height');
+    line-height: eleVar('tool-column', 'item-height');
   }
 
   .el-checkbox__label {
-    color: inherit !important;
+    color: inherit;
     line-height: inherit;
     white-space: nowrap;
     word-break: break-all;
     text-overflow: ellipsis;
     overflow: hidden;
   }
-
-  .el-checkbox {
-    height: eleVar('tool-column', 'item-height');
-    line-height: eleVar('tool-column', 'item-height');
-  }
 }
 
-.ele-tool-column-header {
-  display: flex;
-  align-items: center;
-  border-bottom: eleVar('tool-column', 'header-border');
-  padding: eleVar('tool-column', 'header-padding');
+.ele-tool-column-label {
+  flex: 1;
+  overflow: hidden;
   box-sizing: border-box;
-  position: relative;
-
-  .ele-tool-column-label {
-    flex: 1;
-  }
 }
 
-.ele-tool-column-body {
+.ele-popover-body > .ele-tool-column-list {
   padding: eleVar('tool-column', 'body-padding');
   max-height: eleVar('tool-column', 'max-height');
   box-sizing: border-box;
   overflow: auto;
 }
 
-.ele-tool-column-item {
+.ele-tool-column-item-body {
   display: flex;
   align-items: center;
   padding: 0 eleVar('tool-column', 'item-padding');
@@ -455,62 +115,72 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
   transition: background-color $ele-transition;
   position: relative;
 
-  .ele-tool-column-handle {
-    display: flex;
-    font-size: 14px;
-    color: elVar('text-color', 'placeholder');
-    margin-right: 4px;
-    cursor: move;
+  .el-checkbox {
+    width: 100%;
   }
 
-  .ele-tool-column-label {
-    flex: 1;
-    overflow: hidden;
+  &:hover {
+    background: eleVar('tool-column', 'item-hover-bg');
+  }
+}
+
+.ele-tool-column-item {
+  border-radius: eleVar('tool-column', 'item-radius');
+
+  &.sortable-chosen {
+    background: eleVar('tool-column', 'item-hover-bg');
 
-    .el-checkbox {
-      width: 100%;
+    & > .ele-tool-column-item-body {
+      background: none;
     }
   }
 
-  .ele-tool-column-fixed {
-    display: flex;
-    align-items: center;
+  &.sortable-ghost {
+    opacity: 0;
+  }
 
-    .ele-tool-fixed-item {
-      display: flex;
-      font-size: 12px;
-      color: eleVar('tool-column', 'btn-color');
-      padding: eleVar('tool-column', 'btn-padding');
-      margin-left: eleVar('tool-column', 'btn-space');
-      border-radius: eleVar('tool-column', 'btn-radius');
-      transition: (color $ele-transition, background-color $ele-transition);
-      box-sizing: border-box;
-      cursor: pointer;
+  & > .ele-tool-column-list {
+    padding-left: 24px;
+  }
+}
 
-      &:hover {
-        color: eleVar('tool-column', 'btn-hover-color');
-        background: eleVar('tool-column', 'btn-hover-bg');
-      }
+.ele-tool-column-handle {
+  display: flex;
+  font-size: 14px;
+  color: elVar('text-color', 'placeholder');
+  margin-right: 4px;
+  cursor: move;
+}
 
-      &.is-active {
-        color: eleVar('tool-column', 'btn-active-color');
-        background: eleVar('tool-column', 'btn-active-bg');
-      }
-    }
-  }
+.ele-tool-column-fixed {
+  display: flex;
+  align-items: center;
+}
 
-  &:hover,
-  &.sortable-chosen {
-    background: eleVar('tool-column', 'item-hover-bg');
+.ele-tool-column-fixed-item {
+  display: flex;
+  font-size: 12px;
+  color: eleVar('tool-column', 'btn-color');
+  padding: eleVar('tool-column', 'btn-padding');
+  margin-left: eleVar('tool-column', 'btn-space');
+  border-radius: eleVar('tool-column', 'btn-radius');
+  transition: (color $ele-transition, background-color $ele-transition);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('tool-column', 'btn-hover-color');
+    background: eleVar('tool-column', 'btn-hover-bg');
   }
 
-  &.sortable-ghost {
-    opacity: 0;
+  &.is-active {
+    color: eleVar('tool-column', 'btn-active-color');
+    background: eleVar('tool-column', 'btn-active-bg');
   }
 }
 
-.ele-tool-column.is-sortable {
-  .ele-tool-column-item {
+.ele-popover-body.is-sortable {
+  .ele-tool-column-item-body {
     padding-left: 6px;
   }