amis-ui 2.0.2 → 2.1.0

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;

package/scss/components/form/_date.scss

@@ -24,6 +24,9 @@
       outline: none;
       box-sizing: none;
     }
+    &::placeholder {
+      color: #{$G6};
+    }
   }
 
   .#{$ns}DatePicker-clear {
@@ -47,11 +50,11 @@
         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);
+    }
   }
 
   &.is-disabled {
@@ -254,11 +257,17 @@
     .rdtTimeToggle {
       background: var(--Calendar-cell-bg);
 
-      &:hover {
+      &:hover span {
         background: var(--Calendar-cell-onHover-bg);
       }
     }
 
+    td.rdtToday {
+      &:hover span {
+        background: transparent;
+      }
+    }
+
     td.rdtBetween {
       background: var(--Calendar-cell-onBetween-bg);
     }
@@ -289,12 +298,10 @@
     .rdtActive.rdtToday {
       color: #151b26;
       > span {
-        background: transparent;
         border-color: #144bcc;
       }
     }
 
-    td.rdtDisabled,
     td.rdtDisabled:hover {
       > span {
         background: var(--Calendar-cell-onDisabled-bg);
@@ -334,12 +341,21 @@
   }
 }
 
+.#{$ns}CalendarTimesWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .#{$ns}CalendarInputsWrapper {
+    height: #{px2rem(248px)};
+  }
+}
+
 .#{$ns}CalendarInputWrapper {
   display: inline-block;
   position: relative;
   // padding-top: #{px2rem(4px)};
   width: #{px2rem(64px)};
-  height: #{px2rem(224px)};
+  height: #{px2rem(248px)};
   overflow: auto;
   .#{$ns}CalendarInput-sugs {
     list-style: none;
@@ -350,25 +366,32 @@
     top: 100%;
     z-index: 10;
     &Hours {
-      height: #{px2rem(868px)};
+      height: #{px2rem(892px)};
     }
     &Times {
-      height: #{px2rem(1876px)};
+      height: #{px2rem(1900px)};
       border-left: 1px solid var(--Calendar-input-borderColor);
     }
     &Item {
       text-align: center;
       height: 28px;
       line-height: 28px;
-      &.is-highlight,
-      &:hover {
+      &.is-highlight {
         color: var(--Form-select-menu-onHover-color);
         background: var(--Form-select-menu-onHover-bg);
       }
+      &:hover {
+        color: var(--Form-select-menu-onHover-color);
+        background: #F7F7F9;
+      }
     }
   }
 }
 
+.#{$ns}TimeContentWrapper {
+  display: flex;
+}
+
 .#{$ns}TimeRangeHeaderWrapper {
   height: 40px;
   padding-top: 10px;
@@ -382,6 +405,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
+  border-top: 1px solid var(--Calendar-input-borderColor);
 
   .#{$ns}Button {
     height: 24px;
@@ -565,7 +589,6 @@
   display: table;
   table-layout: fixed;
   border-collapse: separate;
-  border-bottom: 1px solid var(--Calendar-input-borderColor);
   height: 40px;
   width: 100%;
   margin-top: -8px;
@@ -579,6 +602,28 @@
   .rdtSwitch + .rdtSwitch {
     margin-left: var(--gap-xs);
   }
+
+  .date-icon-arrow-left,
+  .date-icon-arrow {
+    width: #{px2rem(10px)};
+    height: #{px2rem(10px)};
+    top: 0;
+  }
+
+  .date-icon-arrow-left {
+    transform: rotate(180deg);
+    transform-origin: 50% 50%;
+  }
+}
+
+.header-line {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 40px;
+  height: 1px;
+  background: var(--Calendar-input-borderColor);
 }
 
 td.rdtMonth,
@@ -592,7 +637,15 @@ td.rdtQuarter {
     background: var(--Calendar-cell-onBetween-bg);
   }
 
-  &:hover,
+  &:hover {
+    background: transparent;
+
+    > span {
+      color: var(--Form-select-menu-onHover-color);
+      background: #F7F7F9;
+    }
+  }
+
   &.rdtActive,
   &.rdtActive:hover {
     background: transparent;
@@ -610,30 +663,41 @@ td.rdtQuarter {
   }
 }
 
-.#{$ns}DateRangePicker-start {
-  .rdtPicker .rdtActive.rdtBetween {
-    background: linear-gradient(
-      to right,
-      transparent 0%,
-      transparent 50%,
-      var(--Calendar-cell-onBetween-bg) 51%,
-      var(--Calendar-cell-onBetween-bg) 100%
-    );
-  }
+.rdtPicker .rdtActive.rdtBetween.rdtStartDay {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    transparent 50%,
+    var(--Calendar-cell-onBetween-bg) 51%,
+    var(--Calendar-cell-onBetween-bg) 100%
+  );
 }
 
-.#{$ns}DateRangePicker-end {
-  .rdtPicker .rdtActive.rdtBetween {
-    background: linear-gradient(
-      to right,
-      var(--Calendar-cell-onBetween-bg) 0%,
-      var(--Calendar-cell-onBetween-bg) 50%,
-      transparent 51%,
-      transparent 100%
-    );
+.rdt .rdtPicker td.is-disabled {
+  cursor: not-allowed !important;
+  background: var(--Calendar-cell-onDisabled-bg);
+  color: var(--text--muted-color);
+
+  &:hover {
+    background: var(--Calendar-cell-onDisabled-bg);
+    color: var(--text--muted-color);
+    & > span {
+      background: inherit !important;
+      color: inherit !important;
+    }
   }
 }
 
+.rdtPicker .rdtActive.rdtBetween.rdtEndDay {
+  background: linear-gradient(
+    to right,
+    var(--Calendar-cell-onBetween-bg) 0%,
+    var(--Calendar-cell-onBetween-bg) 50%,
+    transparent 51%,
+    transparent 100%
+  );
+}
+
 .#{$ns}DateCalendar {
   display: inline-block;
   border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);

package/scss/components/form/_form.scss

@@ -50,7 +50,7 @@
 
 .#{$ns}Form-label {
   font-weight: var(--fontWeightNormal);
-  margin-bottom: var(--gap-xs);
+  margin-bottom: var(--gap-sm);
   position: relative;
   font-size: var(--Form-item-fontSize);
   color: var(--Form-item-fontColor);
@@ -161,6 +161,13 @@
   &.is-error > .#{$ns}Form-label {
     color: var(--danger);
   }
+
+  .#{$ns}Form-control--withSize {
+    > .#{$ns}ResultBox {
+      // 兼容 @media (min-width: 576px) .cxd-Form-control--sizeLg
+      display: flex;
+    }
+  }
 }
 
 .#{$ns}Form-placeholder {

package/scss/components/form/_nested-select.scss

@@ -1,5 +1,11 @@
 .#{$ns}NestedSelectControl {
   position: relative;
+
+  .#{$ns}NestedSelect-menu {
+    padding-top: px2rem(4px);
+    padding-bottom: px2rem(4px);
+    box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
+  }
 }
 
 .#{$ns}NestedSelect {

package/scss/components/form/_number.scss

@@ -40,6 +40,10 @@
 
   &:hover {
     border-color: var(--Form-input-onFocused-borderColor);
+
+    .#{$ns}Number-handler-wrap {
+      display: block;
+    }
   }
 
   &-disabled:hover {
@@ -104,6 +108,7 @@
 
   @if $Number-handler-mode==vertical {
     &-handler-wrap {
+      display: none;
       float: right;
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
@@ -220,13 +225,13 @@
     color: var(--Form-input-color);
     background: var(--Form-input-bg);
     &:hover {
-        cursor: pointer;
-        background: var(--Form-input-bg);
-        color: var(--Form-input-onHover-borderColor);
+      cursor: pointer;
+      background: var(--Form-input-bg);
+      color: var(--Form-input-onHover-borderColor);
     }
     &-focused {
-        background: var(--Form-input-bg);
-        color: var(--Form-input-onFocused-borderColor);
+      background: var(--Form-input-bg);
+      color: var(--Form-input-onFocused-borderColor);
     }
     & > svg {
       width: var(--fontSizeSm);
@@ -258,13 +263,13 @@
     border-color: var(--Form-input-onFocused-borderColor);
   }
   .#{$ns}Number--enhance-border-min,
-  .#{$ns}Number--enhance-border-max{
+  .#{$ns}Number--enhance-border-max {
     background: var(--Number-handler-onDisabled-bg);
     pointer-events: none;
     color: var(--Number-handler-onDisabled-color);
     &:hover {
-        background: var(--Number-handler-onDisabled-bg);
-        color: var(--Number-handler-onDisabled-color);
+      background: var(--Number-handler-onDisabled-bg);
+      color: var(--Number-handler-onDisabled-color);
     }
   }
   .#{$ns}Number--enhance-border-disabled {
@@ -272,15 +277,15 @@
     color: var(--Form-inputNumber-strong-disabled-color);
     cursor: not-allowed;
     &:hover {
-        cursor: not-allowed;
-        background: var(--Form-input-onDisabled-bg);
-        color: var(--Form-inputNumber-strong-disabled-color);
+      cursor: not-allowed;
+      background: var(--Form-input-onDisabled-bg);
+      color: var(--Form-inputNumber-strong-disabled-color);
     }
   }
   .#{$ns}Number--enhance-border-readOnly,
   .#{$ns}Number--enhance-border-readOnly {
     &:hover {
-      color: var(--Number-handler-onHover-color);;
+      color: var(--Number-handler-onHover-color);
     }
   }
 }
@@ -296,7 +301,7 @@
   }
 }
 
-.#{$ns}Number--enhance-disabled{
+.#{$ns}Number--enhance-disabled {
   border-color: var(--Form-input-onDisabled-borderColor);
   .#{$ns}Number--enhance-input {
     border-color: var(--Form-input-onDisabled-borderColor);

package/scss/components/form/_picker.scss

@@ -19,11 +19,14 @@
     position: absolute;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
   }
 
   &-input {
     min-height: var(--Form-input-height);
     height: auto;
+    padding: 0;
+    flex-wrap: nowrap;
   }
 
   .#{$ns}Picker-values {
@@ -33,6 +36,7 @@
   &-valueWrap {
     flex-grow: 1;
     position: relative;
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 
     > input {
       width: 1rem;
@@ -80,6 +84,10 @@
   &-btn {
     cursor: pointer;
     color: var(--Picker-iconColor);
+    flex: 30px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
       color: var(--Picker-onHover-iconColor);

package/scss/components/form/_rating.scss

@@ -54,8 +54,8 @@
   }
 
   &-text {
-    font-size: var(--fontSizeSm);
-    color: var(--text-color);
+    font-size: var(--fontSizeMd);
+    color: var(--Rating-text-color);
     font-weight: var(--fontWeightNormal);
 
     &--left {

package/scss/components/form/_select.scss

@@ -62,13 +62,17 @@
 
   &:hover {
     background: var(--Form-select-onHover-bg);
-    border-color: var(--Form-select-onHover-borderColor);
+    border-color: var(--Form-input-onHover-borderColor);
 
     .#{$ns}Select-arrow:before {
       color: var(--Form-select-caret-onHover-iconColor);
     }
   }
 
+  &:active {
+    border-color: var(--Button--default-onActive-border);
+  }
+
   &.is-disabled {
     color: var(--text--muted-color);
     background: var(--Form-input-onDisabled-bg);
@@ -80,6 +84,7 @@
   }
 
   .#{$ns}PopOver.#{$ns}Select-popover {
+    margin-top: px2rem(4px);
     .#{$ns}Select-menu {
       overflow-x: hidden;
 
@@ -313,6 +318,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
+          width: 100%;
         }
       }
     }
@@ -506,6 +512,33 @@
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);
   }
+
+  .#{$ns}TransferDropDown-popover {
+    border: none;
+
+    .#{$ns}Tree-list {
+      .#{$ns}Tree-item {
+        .#{$ns}Tree-itemLabel,
+        .#{$ns}Tree-item--isLeaf {
+          &:hover {
+            background-color: transparent;
+            .#{$ns}Tree-itemText {
+              background: var(--Transfer-title-bg);
+            }
+          }
+          &:active {
+            background-color: transparent;
+            .#{$ns}Tree-itemText {
+              background: var(--Tree-item-onChekced-bg);
+            }
+          }
+          &.is-checked {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}Select.is-error {

package/scss/components/form/_selection.scss

@@ -47,6 +47,7 @@
   padding: var(--gap-xs) 0;
 
   &-group > &-itemLabel {
+    height: px2rem(32px);
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
   }

package/scss/components/form/_text.scss

@@ -1,6 +1,12 @@
 .#{$ns}TextControl {
   @include input-text();
 
+  &-input input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &-placeholder {
     color: var(--Form-input-placeholderColor);
     user-select: none;