plain-design 1.0.0-beta.6 → 1.0.0-beta.60

package/src/packages/components/AutoTable/auto-table.scss

@@ -1,399 +1,432 @@
-@include prefix(auto-table) {
-  position: relative;
-
-  @include sizeMixin(auto-table, (font-size)) {
-  }
-
-  .virtual-table-head-table {
-    td:hover {
-      color: plv(primary-6);
-      user-select: none;
-      cursor: pointer;
-    }
-  }
-
-  .auto-table-pagination-bar {
-    .auto-table-pagination-total-number {
-      color: plv(primary-6);
-      cursor: pointer;
-    }
-  }
-  .table-operation-bar {
-    .table-operation-bar-left {
-      @include comp(input-group) {
-        display: inline-flex;
-        & + button {
-          margin-left: 4px;
-        }
-      }
-    }
-  }
-
-  &.filter-form-expanded {
-    .table-operation-bar {
-      margin-bottom: 0;
-    }
-  }
-
-  .auto-table-loading-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    cursor: progress;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .auto-table-loading-inner {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: plv(primary-6);
-
-      @include comp(loading) {
-        font-size: 2.5em;
-      }
-
-      span {
-        font-size: inherit;
-      }
-    }
-  }
-}
-
-@include comp(auto-table-tips) {
-  text-align: left;
-
-  .auto-table-tips-item {
-    display: inline-flex;
-    align-items: center;
-    font-size: inherit;
-    background-color: plv(primary-light-1);
-    border: solid 1px plv(primary-2);
-    color: plv(primary-6);
-    cursor: pointer;
-    margin: 4px 8px 4px 0;
-    height: 1.8em;
-    overflow: hidden;
-    border-radius: plv(box-size-small-border-radius);
-
-    .auto-table-tips-label {
-      display: inline-block;
-      max-width: 150px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      position: relative;
-      padding: 0 4px;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .auto-table-tips-close {
-      padding: 0 4px;
-      height: 100%;
-      transition: background-color linear 300ms;
-
-      &:hover {
-        background-color: plv(primary-2);
-      }
-    }
-
-    .auto-table-tips-separator {
-      width: 1px;
-      align-self: stretch;
-      background-color: plv(primary-2);
-    }
-  }
-}
-
-@include prefix(auto-table-setting-dialog) {
-
-  .dialog-body {
-    position: relative;
-    width: 720px;
-  }
-
-  .dialog-content {
-    border: none;
-  }
-
-  .auto-table-setting-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .auto-table-setting-nav {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 100px;
-      background-color: plv(secondary-light-1);
-
-      .auto-table-setting-nav-item {
-        padding: 8px 0;
-        text-align: center;
-        border: solid 1px transparent;
-        border-left-width: 3px;
-        cursor: pointer;
-
-        &.auto-table-setting-nav-item-prev {
-          border-right: solid 1px plv(secondary-light-2);
-          border-bottom: solid 1px plv(secondary-light-2);
-          border-bottom-right-radius: 4px;
-        }
-
-        &.auto-table-setting-nav-item-next {
-          border-right: solid 1px plv(secondary-light-2);
-          border-top: solid 1px plv(secondary-light-2);
-          border-top-right-radius: 4px;
-        }
-
-        &.auto-table-setting-nav-item-active {
-          background-color: plv(background-color);
-          border-left: solid 3px plv(primary-6);
-        }
-      }
-    }
-
-    .auto-table-setting-body {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 100px;
-      right: 0;
-
-      .auto-table-setting-body-inner {
-        padding: 12px 16px;
-      }
-    }
-
-    @include comp(empty) {
-      padding: 20px 0;
-    }
-  }
-
-  .auto-table-setting-all-filter {
-    width: 100%;
-    display: inline-block;
-    box-sizing: border-box;
-
-    & > * {
-      margin-bottom: 12px;
-
-      &:first-child {
-        text-align: right;
-      }
-    }
-
-    .auto-table-setting-all-filter-item {
-      background-color: plv(background-color);
-      box-sizing: border-box;
-      border-radius: 2px;
-      box-shadow: 1px 1px 8px 1px plv(secondary-light-2);
-
-      .auto-table-setting-all-filter-item-head {
-        font-size: 12px;
-        font-weight: 600;
-        border-bottom: solid 1px plv(border-color);
-        padding: 12px 16px;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .auto-table-setting-all-filter-item-body {
-        padding: 16px;
-
-        & > .#{componentName(input-group)} {
-          margin: 4px 0px;
-          display: inline-flex;
-        }
-      }
-    }
-  }
-
-  .auto-table-setting-cache {
-
-    .auto-table-setting-cache-operation {
-      text-align: right;
-      margin-bottom: 12px;
-
-      button + button {
-        margin-left: 12px;
-      }
-    }
-  }
-
-  .auto-table-setting-export {
-
-    .auto-table-setting-export-1 {
-      .auto-table-setting-export-display-checker {
-        text-align: center;
-        margin-top: 40px;
-      }
-    }
-
-    .auto-table-setting-export-option {
-      padding: 12px 12px 12px 50px;
-      transition: background-color linear 300ms;
-      position: relative;
-
-      &:hover {
-        background-color: plv(primary-light-1);
-        cursor: pointer;
-      }
-
-      &:not(:first-child) {
-        border-top: solid 1px plv(border-color);
-      }
-
-      .auto-table-setting-export-option-radio {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .auto-table-setting-export-option-title {
-        font-size: 16px;
-        margin-bottom: 8px;
-      }
-
-      .auto-table-setting-export-option-desc {
-        font-size: 12px;
-        color: plv(text-4);
-      }
-    }
-
-    .auto-table-setting-export-foot {
-      text-align: center;
-      margin-top: 20px;
-
-      button + button {
-        margin-left: 8px;
-      }
-    }
-
-    .auto-table-setting-export-loading {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .#{componentName(loading)}, .#{componentName(icon)} {
-        font-size: 32px;
-      }
-
-      & > span:not(.#{componentName(icon)}) {
-        color: plv(text-4);
-      }
-
-      & > * {
-        margin-bottom: 24px;
-      }
-    }
-  }
-
-  .auto-table-setting-config {
-    .auto-table-setting-config-button {
-      text-align: right;
-      margin-bottom: 16px;
-
-      & > * {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  .auto-table-setting-senior-filter {
-    .auto-table-setting-senior-filter-button {
-      display: flex;
-      justify-content: space-between;
-
-      button + button {
-        margin-left: 4px;
-      }
-    }
-
-    .auto-table-setting-senior-filter-list {
-      margin: 20px 0;
-
-      .auto-table-setting-senior-filter-list-item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        & + .auto-table-setting-senior-filter-list-item {
-          margin-top: 12px;
-        }
-      }
-    }
-
-    .auto-table-setting-senior-filter-expression-header {
-      display: flex;
-      align-items: center;
-
-      .auto-table-setting-senior-filter-expression-title {
-        font-size: 14px;
-        font-weight: 700;
-        margin-right: 16px;
-      }
-
-      & + .#{componentName(input)} {
-        margin: 12px 0;
-      }
-    }
-  }
-
-  .auto-table-setting-senior-sort {
-    .auto-table-setting-senior-sort-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 12px;
-
-      button + button {
-        margin-left: 4px;
-      }
-    }
-  }
-}
-
-@include comp(auto-table-column-popper) {
-  & > div + div {
-    margin-top: 8px;
-  }
-  .auto-table-column-popper-button-group {
-    display: flex;
-    align-items: stretch;
-
-    & > button:first-child {
-      flex: 1;
-    }
-  }
-  .auto-table-sort-switcher {
-    display: flex;
-    align-items: center;
-
-    button {
-      flex: 1;
-
-      & + button {
-        margin-left: 4px;
-      }
-    }
-  }
-}
+@include prefix(auto-table) {
+  position: relative;
+
+  @include sizeMixin(auto-table, (font-size)) {
+
+    .table-operation-bar {
+      .table-operation-bar-left {
+        @include comp(input-group) {
+          display: inline-flex;
+          & + button {
+            margin-left: $margin;
+          }
+        }
+      }
+    }
+
+    .#{componentName(auto-table-tips)} .auto-table-tips-item {
+      margin-top: $margin;
+      margin-bottom: $margin;
+    }
+
+    & > div {
+      padding: $margin;
+      background-color: plv(background-color);
+      border-radius: $border-radius;
+
+      & + div {
+        margin-top: $margin;
+      }
+    }
+
+    & + .#{componentName(auto-table)} {
+      margin-top: $margin;
+    }
+  }
+
+  .virtual-table-head-table {
+    td:hover {
+      color: plv(primary-6);
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+
+  .auto-table-pagination-bar {
+    .auto-table-pagination-total-number {
+      color: plv(primary-6);
+      cursor: pointer;
+    }
+  }
+
+  .table-operation-bar {
+    position: relative;
+    /*virtual-table-head-table-wrapper的z-index是4*/
+    z-index: 5;
+  }
+
+  &.filter-form-expanded {
+    .table-operation-bar {
+      margin-bottom: 0;
+    }
+  }
+
+  .auto-table-loading-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: progress;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .auto-table-loading-inner {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: plv(primary-6);
+
+      @include comp(loading) {
+        font-size: 2.5em;
+      }
+
+      span {
+        font-size: inherit;
+      }
+    }
+  }
+
+  &.auto-table-loading {
+    .table-empty {
+      display: none;
+    }
+  }
+}
+
+@include comp(auto-table-tips) {
+  text-align: left;
+
+  .auto-table-tips-item {
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    background-color: plv(bg-2);
+    border: solid 1px plv(border-color);
+    color: plv(text-2);
+    cursor: pointer;
+    margin-right: 8px;
+    height: 1.8em;
+    overflow: hidden;
+    border-radius: plv(box-size-small-border-radius);
+
+    .auto-table-tips-label {
+      display: inline-block;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      position: relative;
+      padding: 0 0 0 4px;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .auto-table-tips-close {
+      padding: 0 4px;
+      height: 100%;
+      transition: background-color linear 300ms;
+
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+
+    /*    & + .#{componentName(button)} {
+          @include comp(icon) {
+            position: relative;
+            top: 2px;
+          }
+        }*/
+  }
+}
+
+@include prefix(auto-table-setting-dialog) {
+
+  .dialog-body {
+    position: relative;
+    width: 720px;
+  }
+
+  .dialog-content {
+    border: none;
+  }
+
+  .auto-table-setting-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .auto-table-setting-nav {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 100px;
+      background-color: plv(secondary-light-1);
+
+      .auto-table-setting-nav-item {
+        padding: 8px 0;
+        text-align: center;
+        border: solid 1px transparent;
+        border-left-width: 3px;
+        cursor: pointer;
+
+        &.auto-table-setting-nav-item-prev {
+          border-right: solid 1px plv(secondary-light-2);
+          border-bottom: solid 1px plv(secondary-light-2);
+          border-bottom-right-radius: 4px;
+        }
+
+        &.auto-table-setting-nav-item-next {
+          border-right: solid 1px plv(secondary-light-2);
+          border-top: solid 1px plv(secondary-light-2);
+          border-top-right-radius: 4px;
+        }
+
+        &.auto-table-setting-nav-item-active {
+          background-color: plv(background-color);
+          border-left: solid 3px plv(primary-6);
+        }
+      }
+    }
+
+    .auto-table-setting-body {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 100px;
+      right: 0;
+
+      .auto-table-setting-body-inner {
+        padding: 12px 16px;
+      }
+    }
+
+    @include comp(empty) {
+      padding: 20px 0;
+    }
+  }
+
+  .auto-table-setting-all-filter {
+    width: 100%;
+    display: inline-block;
+    box-sizing: border-box;
+
+    & > * {
+      margin-bottom: 12px;
+
+      &:first-child {
+        text-align: right;
+      }
+    }
+
+    .auto-table-setting-all-filter-item {
+      background-color: plv(background-color);
+      box-sizing: border-box;
+      border-radius: 2px;
+      box-shadow: 1px 1px 8px 1px plv(secondary-light-2);
+
+      .auto-table-setting-all-filter-item-head {
+        font-size: 12px;
+        font-weight: 600;
+        border-bottom: solid 1px plv(border-color);
+        padding: 12px 16px;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .auto-table-setting-all-filter-item-body {
+        padding: 16px;
+
+        & > .#{componentName(input-group)} {
+          margin: 4px 0px;
+          display: inline-flex;
+        }
+      }
+    }
+  }
+
+  .auto-table-setting-cache {
+
+    .auto-table-setting-cache-operation {
+      text-align: right;
+      margin-bottom: 12px;
+
+      button + button {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  .auto-table-setting-export {
+
+    .auto-table-setting-export-1 {
+      .auto-table-setting-export-display-checker {
+        text-align: center;
+        margin-top: 40px;
+      }
+    }
+
+    .auto-table-setting-export-option {
+      padding: 12px 12px 12px 50px;
+      transition: background-color linear 300ms;
+      position: relative;
+
+      &:hover {
+        background-color: plv(primary-light-1);
+        cursor: pointer;
+      }
+
+      &:not(:first-child) {
+        border-top: solid 1px plv(border-color);
+      }
+
+      .auto-table-setting-export-option-radio {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .auto-table-setting-export-option-title {
+        font-size: 16px;
+        margin-bottom: 8px;
+      }
+
+      .auto-table-setting-export-option-desc {
+        font-size: 12px;
+        color: plv(text-4);
+      }
+    }
+
+    .auto-table-setting-export-foot {
+      text-align: center;
+      margin-top: 20px;
+
+      button + button {
+        margin-left: 8px;
+      }
+    }
+
+    .auto-table-setting-export-loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .#{componentName(loading)}, .#{componentName(icon)} {
+        font-size: 32px;
+      }
+
+      & > span:not(.#{componentName(icon)}) {
+        color: plv(text-4);
+      }
+
+      & > * {
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .auto-table-setting-config {
+    .auto-table-setting-config-button {
+      text-align: right;
+      margin-bottom: 16px;
+
+      & > * {
+        margin-right: 4px;
+      }
+    }
+  }
+
+  .auto-table-setting-senior-filter {
+    .auto-table-setting-senior-filter-button {
+      display: flex;
+      justify-content: space-between;
+
+      button + button {
+        margin-left: 4px;
+      }
+    }
+
+    .auto-table-setting-senior-filter-list {
+      margin: 20px 0;
+
+      .auto-table-setting-senior-filter-list-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        & + .auto-table-setting-senior-filter-list-item {
+          margin-top: 12px;
+        }
+      }
+    }
+
+    .auto-table-setting-senior-filter-expression-header {
+      display: flex;
+      align-items: center;
+
+      .auto-table-setting-senior-filter-expression-title {
+        font-size: 14px;
+        font-weight: 700;
+        margin-right: 16px;
+      }
+
+      & + .#{componentName(input)} {
+        margin: 12px 0;
+      }
+    }
+  }
+
+  .auto-table-setting-senior-sort {
+    .auto-table-setting-senior-sort-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+
+      button + button {
+        margin-left: 4px;
+      }
+    }
+  }
+}
+
+@include comp(auto-table-column-popper) {
+  & > div + div {
+    margin-top: 8px;
+  }
+  .auto-table-column-popper-button-group {
+    display: flex;
+    align-items: stretch;
+
+    & > button:first-child {
+      flex: 1;
+    }
+  }
+  .auto-table-sort-switcher {
+    display: flex;
+    align-items: center;
+
+    button {
+      flex: 1;
+
+      & + button {
+        margin-left: 4px;
+      }
+    }
+  }
+}