amis-ui 2.0.0 → 2.1.0

package/scss/components/_table.scss

@@ -15,6 +15,14 @@
     z-index: var(--Table-fixed-zIndex);
     top: auto;
     box-shadow: none;
+
+    &--autoFillHeight {
+      & > table thead {
+        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
+        top: 0;
+        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+      }
+    }
   }
 
   &-fixedLeft {
@@ -66,7 +74,16 @@
     background: var(--Table-bg);
     z-index: -1;
     opacity: 0;
-    box-shadow: var(--Table-fixedTop-boxShadow);
+
+    &-shadow {
+      position: absolute;
+      box-shadow: var(--Table-fixedTop-boxShadow);
+      z-index: -1;
+      height: 10px;
+      margin-top: -10px;
+      background-color: transparent;
+      opacity: 0;
+    }
 
     // box-sizing: content-box;
     // padding: var(--gap-base) var(--gap-base) 0 var(--gap-base);
@@ -76,7 +93,8 @@
     //   box-sizing: border-box;
     // }
 
-    &.in {
+    &.in,
+    &.in + .#{$ns}Table-fixedTop-shadow {
       position: fixed;
       opacity: 1;
       z-index: $zindex-affix;
@@ -224,6 +242,7 @@
     user-select: none;
     opacity: 0.5;
     z-index: $zindex-top;
+
     &:hover {
       background: var(--primary);
     }
@@ -257,6 +276,10 @@
       text-align: right;
     }
 
+    & td .#{$ns}SwitchControl {
+      padding-top: 0;
+    }
+
     &--withCombine {
       > thead > tr > th,
       > tbody > tr > td {
@@ -301,13 +324,19 @@
       > th {
         background: var(--Table-thead-bg);
         padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
+        text-align: left;
 
         &:first-child {
-          padding-left: var(--TableCell--edge-paddingX);
+          padding-left: px2rem(12px);
+
+          &.#{$ns}Table-checkCell {
+            padding-left: var(--TableCell--edge-paddingX);
+          }
         }
 
         &:last-child {
-          padding-right: var(--TableCell--edge-paddingX);
+          padding-right: px2rem(12px);
+
           .#{$ns}Table-content-colDragLine {
             // 避免出现横向滚动条
             width: 4px;
@@ -319,6 +348,7 @@
           border-right: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
         }
+
         border-bottom: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
 
@@ -337,6 +367,14 @@
       }
     }
 
+    > thead > tr > th:first-child {
+      border-top-left-radius: 4px;
+    }
+
+    > thead > tr > th:last-child {
+      border-top-right-radius: 4px;
+    }
+
     > thead > tr + tr {
       border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
     }
@@ -350,6 +388,7 @@
 
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
+
         > th {
           border-top: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
@@ -402,6 +441,14 @@
         }
       }
 
+      &:active {
+        background: transparent;
+      }
+
+      &:hover.#{$ns}Table-placeholder {
+        color: var(--text--muted-color);
+      }
+
       &.is-checked {
         background: var(--Table-onChecked-bg);
         border-color: var(--Table-onChecked-borderColor);
@@ -531,7 +578,6 @@
 
     > thead > tr > th.#{$ns}Table-checkCell,
     > tbody > tr > td.#{$ns}Table-checkCell {
-      border-right: 0;
       width: px2rem(1px);
       padding-right: var(--TableCell-paddingX);
       white-space: nowrap;
@@ -541,6 +587,10 @@
       }
     }
 
+    > tbody > tr > td.#{$ns}Table-checkCell {
+      border-right: 0;
+    }
+
     > thead > tr > th.#{$ns}Table-expandCell,
     > tbody > tr > td.#{$ns}Table-expandCell {
       border-right: 0;
@@ -554,6 +604,7 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+
       > svg {
         vertical-align: middle;
         top: 0;
@@ -606,7 +657,7 @@
     display: inline-block;
     vertical-align: top;
     padding-left: var(--gap-sm);
-    
+
     &:hover {
       color: var(--TableCell-searchBtn--onActive-color);
     }
@@ -645,11 +696,13 @@
     &--default {
       &.is-active {
         color: var(--text--muted-color);
+
         &:hover {
           color: var(--TableCell-searchBtn--onActive-color);
         }
       }
     }
+
     &--up,
     &--down {
       &.is-active {
@@ -667,12 +720,13 @@
       height: 12px;
     }
 
-    &:hover {
-      color: var(--text-color);
-    }
     &.is-active {
       color: var(--TableCell-searchBtn--onActive-color);
     }
+
+    &.is-opened {
+      color: var(--Button--default-onActive-border);
+    }
   }
 
   &Cell-searchPopOver {
@@ -794,6 +848,10 @@
     color: var(--info);
   }
 
+  &-foot {
+    background: var(--Table-thead-bg);
+  }
+
   &-footTable {
     position: relative;
     width: 100%;
@@ -841,10 +899,11 @@
       width: px2rem(10px);
       height: px2rem(10px);
       top: 0;
+      transform: rotate(90deg);
     }
 
     &.is-active > svg {
-      transform: rotate(90deg);
+      transform: rotate(-90deg);
     }
 
     &:hover {
@@ -863,6 +922,7 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+
     > svg {
       vertical-align: -2px;
     }
@@ -887,30 +947,55 @@
 
   &--autoFillHeight {
     margin-bottom: 0;
+
     > .#{$ns}Table-contentWrap {
       > .#{$ns}Table-content table {
         border-top: none; // 不然会导致拖动时顶部露出内容
       }
+
       > .#{$ns}Table-content table thead {
         position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
         top: 0;
         z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
       }
     }
+
     > .#{$ns}Table-fixedTop {
-      display: none;
+      .#{$ns}Table-fixedTop-shadow {
+        display: none;
+      }
     }
+
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
   }
 }
 
+.#{$ns}InputTable {
+  .#{$ns}Field--quickEditable svg {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-onHover);
+    }
+
+    &:active {
+      color: var(--primary-onActive);
+    }
+  }
+}
+
 .#{$ns}InputTable-toolbar {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
+
+  .#{$ns}Button {
+    border: none;
+    color: var(--Button--link-color);
+  }
 }
 
 .#{$ns}InputTable-pager {

package/scss/components/_tabs.scss

@@ -144,9 +144,17 @@
         outline: none;
       }
 
+      &:hover .#{$ns}Tabs-link-close {
+        width: var(--Tabs-close-size);
+        margin-left: var(--Tabs-close-margin);
+      }
+
       .#{$ns}Tabs-link-close {
-        margin: var(--Tabs-close-marginTop) 0 0 var(--Tabs-close-margin);
+        width: 0;
+        margin: var(--Tabs-close-marginTop) 0 0;
         fill: var(--Tabs-gray-color);
+        transition: all var(--Tabs-animation-duration) linear;
+        overflow: hidden;
         cursor: pointer;
 
         .#{$ns}Tabs-link-close-icon {
@@ -170,6 +178,16 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+
+        > .#{$ns}Icon {
+          margin-right: var(--Tabs-icon-gap);
+          vertical-align: unset;
+        }
+
+        > img.#{$ns}Icon {
+          position: relative;
+          top: 0.125em;
+        }
       }
 
       > .#{$ns}Combo-toolbarBtn {
@@ -236,8 +254,16 @@
 
   &--line {
     > .#{$ns}Tabs-linksContainer-wrapper {
-      border-bottom: var(--Tabs-borderWidth) solid
-        var(--Tabs--simple-split-color);
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
+      }
 
       &--toolbar {
         .#{$ns}Tabs-link {
@@ -292,6 +318,11 @@
           .#{$ns}Tabs-link-close {
             fill: var(--primary);
           }
+
+          > a:first-child:hover:active {
+            color: #144BCC;
+            border-color: #144BCC;
+          }
         }
 
         &:last-child {
@@ -676,6 +707,8 @@
             font-size: var(--Tabs--sidebar-iconSize);
             height: var(--Tabs--sidebar-iconSize);
             margin-bottom: var(--Tabs--sidebar-iconMargin);
+            margin-right: 0;
+            top: 0;
           }
         }
         &.is-active > a:first-child,
@@ -852,7 +885,6 @@
             }
 
             & > .#{$ns}Tabs-link-close {
-              padding-top: var(--Tabs--simple-split-width);
               cursor: pointer;
             }
 
@@ -868,6 +900,11 @@
                 color: var(--Tabs--line-onHover-color);
                 border: none;
               }
+
+              > a:first-child:hover:active {
+                color: #144BCC;
+                border-color: #144BCC;
+              }
             }
 
             &:not(.is-disabled):hover .#{$ns}Tabs-link-close {
@@ -987,6 +1024,11 @@
             > a:first-child:focus {
               color: var(--Tabs--line-onHover-color);
             }
+
+            > a:first-child:hover:active {
+              color: #144BCC;
+              border-color: #144BCC;
+            }
           }
 
           &:not(.is-disabled):hover .#{$ns}Tabs-link-close {

package/scss/components/_tag.scss

@@ -2,17 +2,24 @@
   display: inline-flex;
   height: var(--Tag-height);
   padding: 0 var(--gap-sm);
+  flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   font-size: var(--Tag-content-fontSize);
   max-width: 160px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
   transition: all 0.3;
   border-radius: var(--Tag-borderRadius);
   background-color: var(--Tag-default-color);
   color: var(--Tag-fontColor);
+
+  &-text {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: var(--Tag-height);
+  }
+
   &:not(:last-child) {
     margin-right: var(--gap-sm);
   }
@@ -47,6 +54,8 @@
     border-radius: calc((var(--Tag-height) + 2px) / 2);
     border: 1px solid var(--Tag-default-color);
     color: var(--Tag-default-color);
+    line-height: 22px;
+
     &--inactive {
       border-color: var(--Tag-inactive-color);
       color: var(--Tag-inactive-color);

package/scss/components/_timeline.scss

@@ -24,6 +24,9 @@
         left: var(--TimelineItem--left-line-left);
         top: var(--TimelineItem--left-line-top);
         background-color: var(--TimelineItem--line-bg);
+        &-icon {
+          left: var(--TimelineItem--icon-left-line-left);
+        }
       }
 
       .#{$ns}TimelineItem-round {
@@ -72,9 +75,16 @@
       }
 
       .#{$ns}TimelineItem-title {
+        display: flex;
         color: var(--TimelineItem--text-primary-color);
         font-size: var(--Timeline--font-size);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+        .#{$ns}PlainField {
+          padding-right: var(--TimelineItem-custem-time-padding-right);
+        }
+        .#{$ns}Button {
+          margin-left: var(--TimelineItem-custem-button-margin-left);
+        }
       }
 
       .#{$ns}TimelineItem-detail {
@@ -98,6 +108,7 @@
 
         .#{$ns}TimelineItem-detail-visible {
           display: block;
+          border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
           font-size: var(--Timeline--font-size);
           padding: var(--TimelineItem-detail-visible-padding);
@@ -155,7 +166,7 @@
         position: absolute;
         height: var(--TimelineItem--left-line-width);
         width: calc(100% - var(--TimelineItem--left-line-left));
-        left:  var(--TimelineItem--left-line-top);
+        left:  var(--TimelineItem--horizontal-left-line-top);
         top: var(--TimelineItem--left-line-left);
         background-color: var(--TimelineItem--line-bg);
       }
@@ -195,6 +206,7 @@
       }
     }
     &-content {
+      margin-top: var(--Timeline-horizontal-content-margin-top);
       padding-bottom: var(--TimelineItem--content-padding-bottom);
       margin-left: var(--TimelineItem--content-margin-left);
 
@@ -208,6 +220,7 @@
         color: var(--TimelineItem--text-primary-color);
         font-size: var(--Timeline--font-size);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+       
       }
 
       .#{$ns}TimelineItem-detail {
@@ -231,6 +244,7 @@
 
         .#{$ns}TimelineItem-detail-visible {
           display: block;
+          border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
           font-size: var(--Timeline--font-size);
           padding: var(--TimelineItem-detail-visible-padding);

package/scss/components/form/_checks.scss

@@ -109,8 +109,8 @@
 
     &.#{$ns}Checkbox {
       &:hover {
-        & > i:before {
-          background: var(--Button--primary-onHover-bg);
+        & > input + i {
+          border-color: var(--Button--primary-onHover-bg);
         }
       }
 
@@ -130,6 +130,7 @@
     &:hover {
       input:checked + i {
         background: var(--Button--primary-onHover-bg);
+        border-color: transparent;
 
         &:before {
           background: var(--Button--primary-onHover-bg);
@@ -253,6 +254,10 @@
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
       border-color: var(--Checkbox-onHover-color);
+      box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
+      &:first-child {
+        box-shadow: none;
+      }
     }
 
     &:hover {
@@ -333,14 +338,20 @@
   &--button--checked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
     border-color: var(--Checkbox-onHover-color);
     color: var(--Checkbox-onHover-color);
+    box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
+    &:first-child {
+      box-shadow: none;
+    }
 
     &:hover {
       border-color: var(--menu-active-color);
       color: var(--menu-active-color);
+      box-shadow: -1px 0 0 0 var(--menu-active-color);
     }
     &:active {
       border-color: var(--Switch-checked-onHover-bgColor);
       color: var(--Switch-checked-onHover-bgColor);
+      box-shadow: -1px 0 0 0 var(--Switch-checked-onHover-bgColor);
     }
   }
   &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {

package/scss/components/form/_date-range.scss

@@ -4,7 +4,7 @@
   flex-wrap: nowrap;
   border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: 0 var(--DatePicker-paddingX);
   height: var(--DatePicker-height);
   outline: none;
   border-radius: var(--DatePicker-borderRadius);
@@ -17,8 +17,6 @@
   }
 
   &:not(.is-disabled) {
-    cursor: pointer;
-
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
@@ -31,29 +29,42 @@
         display: none;
       }
     }
-  }
 
-  &.is-focused {
-    border-color: var(--DatePicker-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    &.is-focused {
+      border-color: var(--DatePicker-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+    }
   }
 
   .#{$ns}DateRangePicker-input {
     border: none;
-    border-bottom: 1px solid transparent;
+    border-bottom: 2px solid transparent;
     outline: none;
     padding: 0;
     background: 0;
     flex: 1;
     width: 50%;
+    line-height: px2rem(30px);
+
+    &::placeholder {
+      color: #{$G6};
+    }
   }
 
   .#{$ns}DateRangePicker-input.isActive {
-    border-bottom: 1px solid var(--DatePicker-onFocused-borderColor);
+    border-bottom: 2px solid var(--Form-input-onHover-borderColor);
   }
 
   .#{$ns}DateRangePicker-input-separator {
     margin: 0 var(--gap-sm);
+    display: flex;
+    align-items: center;
+
+    &-line {
+      width: var(--gap-sm);
+      height: 1px;
+      background: #B8BABF;
+    }
   }
 
   &.is-disabled {
@@ -95,10 +106,14 @@
   padding: 0;
 }
 
+.#{$ns}DateRangePicker-picker-wrap {
+  display: flex;
+}
+
 .#{$ns}DateRangePicker-start,
 .#{$ns}DateRangePicker-end {
-  display: inline-block;
-  vertical-align: top;
+  display: flex;
+  flex: 1;
 
   .rdtPicker {
     padding: 0;