amis 1.4.2-beta.1 → 1.4.2-beta.11

package/scss/components/form/_transfer.scss

@@ -47,19 +47,19 @@
     border-radius: var(--borderRadius);
   }
 
-  &-select > &-checkboxes,
-  &-result > &-selections {
+  &-select > &-selection,
+  &-result > &-value {
     flex-grow: 1;
     max-height: 100%;
     overflow: auto;
     position: relative; // 貌似不加 relative 会有 bug。
   }
 
-  &-search + &-checkboxes {
+  &-search + &-selection {
     border-top: 1px solid var(--borderColor);
   }
 
-  &-checkboxes .#{$ns}ListCheckboxes-placeholder {
+  &-selection .#{$ns}ListSelection-placeholder {
     height: 100%;
     display: flex;
     align-items: center;
@@ -105,6 +105,24 @@
       color: var(--text--muted-color);
     }
   }
+}
+
+.#{$ns}TabsTransfer {
+  .#{$ns}Transfer-title {
+    height: 40px;
+  }
+
+  // .#{$ns}Transfer-result {
+  //   flex-grow: unset;
+  // }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+
+  &-tab {
+    padding: 0;
+  }
 
   &-tabs {
     display: flex;
@@ -141,18 +159,19 @@
 
     > .#{$ns}Tabs-content {
       flex-grow: 1;
+      min-height: 0;
       position: relative;
       padding: 5px 0 0;
 
       > .#{$ns}Tabs-pane {
         position: relative;
-        min-height: 100%;
+        height: 100%;
 
         &.is-active {
           display: flex;
           flex-direction: column;
 
-          > .#{$ns}Transfer-checkboxes {
+          > .#{$ns}Transfer-selection {
             flex-grow: 1;
             max-height: 100%;
             overflow: auto;
@@ -163,24 +182,62 @@
   }
 }
 
-.#{$ns}TabsTransfer {
-  .#{$ns}Transfer-title {
-    height: 40px;
+.#{$ns}TransferControl {
+  position: relative;
+
+  &.is-inline {
+    display: inline-block;
   }
+}
 
-  // .#{$ns}Transfer-result {
-  //   flex-grow: unset;
-  // }
+.#{$ns}TransferPicker {
+  &-icon {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px 5px 5px auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
 
-  &-placeholder {
-    @include checkboxes-placeholder();
+    > svg {
+      width: px2rem(12px);
+      height: px2rem(12px);
+      top: 0;
+    }
   }
 }
 
-.#{$ns}TransferControl {
-  position: relative;
+.#{$ns}TransferDropDown {
+  &-icon {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px 5px 5px auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
 
-  &.is-inline {
-    display: inline-block;
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0;
+    }
+  }
+
+  &.is-active &-icon {
+    transform: rotate(180deg);
+  }
+}
+.#{$ns}TransferDropDown-content {
+  min-height: px2rem(200px);
+  display: flex;
+  flex-direction: column;
+
+  & > .#{$ns}Transfer-selection {
+    flex-grow: 1;
+    max-height: 100%;
+    overflow: auto;
+    position: relative; // 貌似不加 relative 会有 bug。
   }
 }

package/scss/themes/_common.scss

@@ -17,6 +17,7 @@
 @import '../components/tooltip';
 @import '../components/tpl';
 @import '../components/popover';
+@import '../components/picker-columns';
 @import '../components/toast';
 @import '../components/alert';
 @import '../components/app';
@@ -66,6 +67,7 @@
 @import '../components/json';
 @import '../components/icon';
 @import '../components/steps';
+@import '../components/portlet';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';
@@ -73,6 +75,7 @@
 @import '../components/form/text';
 @import '../components/form/textarea';
 @import '../components/form/checks';
+@import '../components/form/selection';
 @import '../components/form/city';
 @import '../components/form/switch';
 @import '../components/form/number';
@@ -109,5 +112,6 @@
 @import '../components/anchor-nav';
 @import '../components/markdown';
 @import '../components/link';
+@import '../components/mapping';
 
 @import '../utilities';

package/scss/themes/_cxd-variables.scss

@@ -10,7 +10,7 @@ $primary: $B6;
 $success: $S6;
 $warning: $W6;
 $danger: $E6;
-$light: #1ac5ff;
+$light: #eaf6fe;
 $white: #fff;
 $secondary: $G6;
 
@@ -236,7 +236,10 @@ $R8: 50%;
   --Collapse-header-padding: #{px2rem(16px)};
   --Collapse-header-bg: #{$G10};
   --Collapse-header-onHover-bg: #{$G9};
+  --Collapse-header-collapsed-border: none;
+  --Collapse-header-collapsed-borderTop: none;
   --Collapse-header-collapsed-borderBottom: none;
+  --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};
   --Collapse-content-color: #{$G4};
   --Collapse-content-fontSize: #{$T2};

package/scss/themes/cxd.scss

@@ -54,7 +54,6 @@
 
 .#{$ns}Select {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     .#{$ns}Select-menu {
       border-radius: #{$R3};
       .#{$ns}Select-option {
@@ -67,7 +66,6 @@
 
 .#{$ns}NestedSelectControl {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     .#{$ns}NestedSelect-menuOuter {
       .#{$ns}NestedSelect-menu {
         border-radius: #{$R3};
@@ -89,7 +87,6 @@
 
 .#{$ns}TreeSelectControl {
   .#{$ns}PopOver {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
     .#{$ns}Tree {
       border-radius: #{$R3};
@@ -100,7 +97,6 @@
 
 .#{$ns}DropDown {
   .#{$ns}DropDown-menu {
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     border: none;
     > li {
       color: #{$G2};
@@ -155,7 +151,6 @@
 .#{$ns}ColorPicker {
   .#{$ns}PopOver {
     border: none;
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
   }
 }
@@ -164,7 +159,6 @@
   .#{$ns}IconPickerControl-input--withAC {
     .#{$ns}IconPickerControl-sugsPanel {
       border: none;
-      top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
       box-shadow: var(--boxShadow);
       border-radius: px2rem(3px);
     }
@@ -186,7 +180,6 @@
 .#{$ns}LocationControl {
   .#{$ns}PopOver {
     border: none;
-    top: calc(var(--Form-input-height) + #{px2rem(4px)}) !important;
     box-shadow: var(--boxShadow);
   }
 }
@@ -244,6 +237,9 @@
 }
 
 .#{$ns}Drawer--right {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} 0 0 0;
+  }
   .#{$ns}Drawer-footer {
     justify-content: flex-end;
     .#{$ns}Button {
@@ -253,6 +249,9 @@
 }
 
 .#{$ns}Drawer--left {
+  .#{$ns}Drawer-header {
+    border-radius: 0 #{$R4} 0 0;
+  }
   .#{$ns}Drawer-footer {
     .#{$ns}Button {
       margin-left: #{px2rem(16px)};
@@ -260,8 +259,17 @@
   }
 }
 
-.#{$ns}Drawer--top,
+.#{$ns}Drawer--top {
+  .#{$ns}Drawer-footer {
+    .#{$ns}Button {
+      margin-left: #{px2rem(16px)};
+    }
+  }
+}
 .#{$ns}Drawer--bottom {
+  .#{$ns}Drawer-header {
+    border-radius: #{$R4} #{$R4} 0 0;
+  }
   .#{$ns}Drawer-footer {
     .#{$ns}Button {
       margin-left: #{px2rem(16px)};
@@ -354,10 +362,6 @@
 .#{$ns}Form {
   .#{$ns}Collapse {
     border: none;
-
-    &-arrow {
-      margin-left: px2rem(8px);
-    }
     &-header {
       background-color: var(--white);
       display: inline-flex;