amis-ui 2.0.2 → 2.1.0

package/scss/components/form/_textarea.scss

@@ -4,6 +4,11 @@
 
   position: relative;
 
+  > textarea.#{$ns}TextareaControl-input--counter {
+    // 23 px 是计数器 counter 的高度
+    padding-bottom: 23px;
+  }
+
   > textarea {
     @include input-border();
 
@@ -30,23 +35,22 @@
 
   &-counter {
     position: absolute;
-    right: var(--Form-input-paddingX);
-    bottom: var(--Form-input-paddingY);
+    left: 1px;
+    bottom: 1px;
+    right: var(--scrollbar-width);
+    padding-bottom: var(--Form-input-paddingY);
+    background-color: #fff;
+    text-align: right;
+    // right: var(--Form-input-paddingX);
+    // bottom: var(--Form-input-paddingY);
     font-size: var(--fontSizeSm);
-    padding: 0 5px;
+    // padding: 0 5px;
     border-radius: 3px;
     color: #84868c;
 
     &.is-empty {
       color: #84868c;
     }
-
-    &.is-clearable {
-      right: calc(
-        var(--Form-input-paddingX) + var(--Form-input-clearBtn-size) +
-          var(--Form-input-clearBtn-padding) * 2 + #{px2rem(5px)}
-      );
-    }
   }
 
   .has-error--maxLength &-counter {
@@ -57,6 +61,6 @@
     @include input-clear();
     position: absolute;
     right: var(--Form-input-paddingX);
-    bottom: var(--Form-input-paddingY);
+    top: var(--Form-input-paddingY);
   }
 }

package/scss/components/form/_transfer.scss

@@ -61,12 +61,13 @@
     max-height: 100%;
     overflow: auto;
     position: relative; // 貌似不加 relative 会有 bug。
+    padding: 0;
   }
 
   &-select > .#{$ns}ChainedSelection {
     min-height: unset;
     overflow: hidden;
-    
+
     .#{$ns}ChainedSelection-col {
       height: 100%;
       overflow: auto;
@@ -92,10 +93,6 @@
     overflow: hidden;
   }
 
-  &-search + &-selection {
-    border-top: 1px solid var(--borderColor);
-  }
-
   &-selection .#{$ns}ListSelection-placeholder {
     height: 100%;
     display: flex;

package/scss/components/form/_tree.scss

@@ -85,6 +85,7 @@
 
   &-itemLabel {
     display: flex;
+    flex-direction: row;
     align-items: center;
     position: relative;
     user-select: none;
@@ -98,16 +99,35 @@
       display: inline-flex;
       align-self: center;
     }
+    &-item {
+      padding-left: var(--Tree-item-arrow-padding-left);
+      display: inline-block;
+      width: 100%;
+    }
   
     &:hover {
-      background: var(--Tree-item-onHover-bg-pure);
+      .#{$ns}Tree{
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onHover-bg-pure);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
   }
 
   &-item {
     .is-checked {
-      background: var(--Tree-item-onChekced-bg);
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+      .#{$ns}Tree{
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onChekced-bg);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
     .is-disabled {
       color: var(--text--muted-color);
@@ -136,7 +156,6 @@
       vertical-align: middle;
       margin-left: var(--Tree-icon-gap);
       cursor: pointer;
-
       > svg {
         $svgSize: px2rem(12px);
         width: $svgSize;
@@ -235,6 +254,7 @@
       display: block;
       transition: transform var(--animation-duration);
       top: 0;
+      color: var(--Tree-item-arrow-color);
     }
 
     &.is-folded > svg {
@@ -258,7 +278,7 @@
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--Tree-icon-gap);
+    margin-right: var(--Tree-icon-margin-right);
   }
 
   &-rootIcon,
@@ -275,8 +295,15 @@
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
+    display: inline-block;
     color: var(--Form-input-color);
     line-height: var(--lineHeightBase);
+    max-width: var(--Tree-item-text-max-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+    top: var(--Tree-item-text-top);
   }
   .is-disabled &-itemText {
     color: var(--text--muted-color);

package/scss/components/react-datetime.scss

@@ -16,6 +16,11 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f9f9f9;
 }
+
+.rdtPickerNotDays {
+  width: 192px;
+}
+
 .rdtOpen .rdtPicker {
   display: block;
 }
@@ -57,7 +62,7 @@
   > span {
     display: inline-block;
     border-radius: 2px;
-    height: 100%;
+    height: 24px;
     width: 24px;
   }
 }

package/scss/themes/_cxd-variables.scss

@@ -86,7 +86,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --borderColor: #{$G8};
   --borderRadius: #{$R3};
   --body-bg: #ffffff;
-  --text-color: #151a26;
+  --text-color: #151b26;
 
   --text--muted-color: #{$G6};
   --text--loud-color: #333;
@@ -144,7 +144,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form-input-onDisabled-borderColor: #{$G8};
   --Form-input-onDisabled-color: #{$G5};
   --Form-input-iconColor: #{$G5};
-  --Form-input-paddingX: #{px2rem(10px)};
+  --Form-input-paddingX: var(--gap-base);
   --Form-description-color: #999;
   --Form--horizontal-label-whiteSpace: normal;
   --Form--horizontal-label-widthXs: #{px2rem(50px)};
@@ -558,7 +558,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --TransferSelect-heading-borderBottom: 0;
 
   // Alert
-  --Alert-fontColor: #{$G4};
+  --Alert-fontColor: #{$G2};
   --Alert-title-fontColor: #{$G2};
 
   --Alert-height: #{px2rem(40px)};
@@ -567,19 +567,19 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Alert-borderRadius: #{$R3};
   --Alert-marginBottom: var(--gap-md);
 
-  --Alert--danger-color: #{$G4};
+  --Alert--danger-color: #{$G2};
   --Alert--danger-bg: #{$danger-bg};
   --Alert--danger-borderColor: transparent;
 
-  --Alert--info-color: #{$G4};
+  --Alert--info-color: #{$G2};
   --Alert--info-bg: #{$info-bg};
   --Alert--info-borderColor: transparent;
 
-  --Alert--success-color: #{$G4};
+  --Alert--success-color: #{$G2};
   --Alert--success-bg: #{$success-bg};
   --Alert--success-borderColor: transparent;
 
-  --Alert--warning-color: #{$G4};
+  --Alert--warning-color: #{$G2};
   --Alert--warning-bg: #{$warning-bg};
   --Alert--warning-borderColor: transparent;
 
@@ -655,7 +655,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
 
   --Progress-borderRadius: #{$R7};
 
-  --Rating-inactive-color: #{$G9};
+  --Rating-inactive-color: #{$G8};
+  --Rating-text-color: #{$G2};
 
   // tree
   --Tree-item-onHover-bg-pure: #{$G10};

package/scss/themes/cxd.scss

@@ -52,11 +52,6 @@
         // height: var(--Form-input-height);
         line-height: 1.1;
         padding: px2rem(5px) px2rem(12px);
-
-        &.is-highlight:hover > span {
-          color: var(--menu-active-color);
-        }
-
         svg {
           color: var(--default-icon-color);
         }
@@ -243,12 +238,11 @@
 .#{$ns}Modal {
   box-shadow: var(--boxShadow);
   &-content {
-    padding: #{px2rem(24px)};
+    padding: #{px2rem(24px)} 0;
     border-radius: #{$R4};
   }
 
   &-body {
-    padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
     font-size: #{$T2};
     font-weight: #{$W2};
   }
@@ -285,7 +279,7 @@
   .#{$ns}Drawer-footer {
     justify-content: flex-end;
     .#{$ns}Button {
-      margin-left: #{px2rem(16px)};
+      margin-left: #{px2rem(12px)};
     }
   }
 }