amis 1.5.8-beta.2 → 1.6.0

package/scss/_properties.scss

@@ -626,10 +626,11 @@
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
   --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
-  --DropDown-menuItem-color: var(--text-color);
+  --DropDown-group-color: #848b99;
+  --DropDown-menuItem-color: #151a26;
   --DropDown-menuItem-onHover-color: var(--primary);
   --DropDown-menuItem-onActive-color: var(--primary);
-  --DropDown-menuItem-onDisabled-color: var(--text--muted-color);
+  --DropDown-menuItem-onDisabled-color: #b4b6ba;
   --DropDown-menuItem-paddingX: var(--gap-sm);
   --DropDown-menuItem-paddingY: calc(
     (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) /
@@ -1096,11 +1097,12 @@
   --PickerColumns-bg: white;
   --PickerColumns-toolbar-height: #{px2rem(50px)};
   --PickerColumns-title-fontSize: var(--fontSizeLg);
+  --PickerColumns-title-color: #222;
   --PickerColumns-title-lineHeight: 1.5;
-  --PickerColumns-action-padding: 0 var(--gap-sm);
-  --PickerColumns-action-fontSize: var(--fontSizeMd);
-  --PickerColumns-confirmAction-color: #{lighten($text-color, 25%)};
-  --PickerColumns-cancelAction-color: #{lighten($text-color, 50%)};
+  --PickerColumns-action-padding: 0 var(--gap-md);
+  --PickerColumns-action-fontSize: var(--fontSizeLg);
+  --PickerColumns-confirmAction-color: #2468f2;
+  --PickerColumns-cancelAction-color: #666;
   --PickerColumns-option-fontSize: var(--fontSizeLg);
   --PickerColumns-optionText-color: var(--text-color);
   --PickerColumns-optionDisabled-opacity: 0.3;
@@ -1111,6 +1113,8 @@
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
 
+  --PopUp-cancelAction-color: #666;
+
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
 

package/scss/components/_calendar.scss

@@ -245,7 +245,7 @@
       background: #fff;
       box-shadow: 0 0 2px 2px rgba(0,0,0,0.02);
       border-radius: 24px;
-      overflow-x: scroll;
+      overflow-x: auto;
       position: relative;
       height: px2rem(48px);
       line-height: px2rem(48px);
@@ -345,7 +345,7 @@
   }
 
   &-time {
-    height: px2rem(200px);
+    height: px2rem(180px);
     &-title {
       border: var(--Calendar-borderWidth) solid var(--borderColorDarken);
       border-left: none;
@@ -358,4 +358,11 @@
       margin: 0 auto;
     }
   }
+  .#{$ns}CalendarTime {
+    height: px2rem(130px);
+    overflow: hidden;
+  }
+  .#{$ns}PickerColumns-header {
+    display: none;
+  }
 }

package/scss/components/_cascader.scss

@@ -0,0 +1,102 @@
+.#{$ns}Cascader-tabs {
+  display: flex;
+  &.scrollable {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+.#{$ns}Cascader-tab {
+  flex: 1;
+  width: calc((100vw - 20px) / 3);
+  height: px2rem(370px);
+  overflow-y: auto;
+  display: inline-block;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.#{$ns}Cascader {
+  width: 100%;
+  padding: 0 10px;
+  &-Nav {
+    overflow-x: auto;
+    &Item {
+      display: inline-block;
+      margin-right: px2rem(10px);
+      list-style: none;
+      cursor: pointer;
+      user-select: none;
+      padding: 0 px2rem(6px);
+    }
+  }
+  &-btnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: px2rem(60px);
+  }
+  &-options {
+    box-sizing: border-box;
+    height: var(--Cascader-option-height);
+    padding-top: px2rem(6px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 0;
+    padding: 0;
+  }
+  &-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: px2rem(6px) 0;
+    font-size: var(--fontSizeMd);
+    line-height: var(--Cascader-option-lineHeight);
+    cursor: pointer;
+    position: relative;
+    &.selected {
+      span {
+        color: var(--primary);
+      }
+    }
+    &.disabled {
+      span {
+        color: gray;
+      }
+    }
+    &--text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: none;
+    }
+    &-selectedNum {
+      min-width: px2rem(16px);
+      height: px2rem(16px);
+      line-height: px2rem(16px);
+      border-radius: 100%;
+      text-align: center;
+      background: var(--Form-select-menu-onActive-color);
+      color: var(--white) !important;
+      font-size: var(--fontSizeSm);
+      display: inline-block;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  &-icon {
+    color: var(--primary);
+  }
+  &-tab {
+    padding: 0;
+  }
+
+  &-btnCancel {
+    color: var(--PopUp-cancelAction-color);
+  }
+}

package/scss/components/_city-area.scss

@@ -0,0 +1,27 @@
+.#{$ns}CityArea {
+  &-popup {
+    height: px2rem(280px);
+  }
+  &-Input {
+    margin-top: var(--gap-xs);
+    outline: none;
+    vertical-align: top;
+    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+    border-radius: var(--Form-input-borderRadius);
+    line-height: var(--Form-input-lineHeight);
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    font-size: var(--Form-input-fontSize);
+    display: inline-flex !important;
+
+    &::placeholder {
+      color: var(--Form-input-placeholderColor);
+      user-select: none;
+    }
+
+    &:focus {
+      border-color: var(--Form-input-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+      background: var(--Form-input-onFocused-bg);
+    }
+  }
+}

package/scss/components/_dropdown.scss

@@ -34,20 +34,28 @@
   }
 
   &-menu {
-    position: absolute;
-    z-index: $zindex-dropdown;
-    top: 100%;
-    left: 0;
-    margin: px2rem(1px) 0 0;
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
-    border: var(--DropDown-menu-borderWidth) solid
-      var(--DropDown-menu-borderColor);
-    border-radius: var(--DropDown-menu-borderRadius);
-    box-shadow: var(--DropDown-menu-boxShadow);
     min-width: var(--DropDown-menu-minWidth);
     text-align: left;
+    border: none;
+    user-select: none;
+
+    &-root {
+      position: absolute;
+      z-index: $zindex-dropdown;
+      top: 100%;
+      left: 0;
+      margin: px2rem(1px) 0 0;
+      border: none;
+      border-radius: var(--DropDown-menu-borderRadius);
+      box-shadow: var(--DropDown-menu-boxShadow);
+      min-width: var(--DropDown-menu-minWidth);
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: px2rem(300px);
+    }
   }
 
   &--alignRight &-menu {
@@ -95,6 +103,28 @@
       background: var(--DropDown-menu-borderColor);
       padding: 0;
     }
+
+    &.#{$ns}DropDown-groupTitle {
+      height: inherit;
+      font-size: var(--fontSizeSm);
+      padding: var(--gap-xs) var(--gap-xs);
+      padding-left: var(--gap-sm);
+      color: var(--DropDown-group-color);
+      flex-grow: 1;
+      cursor: default;
+
+      &:hover {
+        background: none;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+
+      & ~ .#{$ns}DropDown-button {
+        padding-left: var(--gap-lg);
+      }
+    }
   }
 
   &-menu > li a {

package/scss/components/_picker-columns.scss

@@ -6,7 +6,11 @@
   overflow: hidden;
   font-size: var(--PickerColumns-option-fontSize);
 
-  &-toolbar {
+  li:focus {
+    outline: none;
+  }
+
+  &-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -18,12 +22,12 @@
     height: 100%;
     padding: var(--PickerColumns-action-padding);
     font-size: var(--PickerColumns-action-fontSize);
-    background-color: transparent;
+    background-color: transparent !important;
     border: none;
     cursor: pointer;
 
     &:active {
-      opacity: 0.7;
+      background-color: none !important;
     }
     &:hover {
       background-color: none !important;
@@ -31,11 +35,11 @@
   }
 
   &-confirm {
-    color: var(--PickerColumns-confirmAction-color);
+    color: var(--PickerColumns-confirmAction-color) !important;
   }
 
   &-cancel {
-    color: var(--PickerColumns-cancelAction-color);
+    color: var(--PickerColumns-cancelAction-color) !important;
   }
 
   &-title {
@@ -44,6 +48,7 @@
     font-size: var(--PickerColumns-title-fontSize);
     line-height: var(--PickerColumns-title-lineHeight);
     text-align: center;
+    color: var(--PickerColumns-title-color);
   }
 
   &-columns {
@@ -127,4 +132,9 @@
     cursor: not-allowed;
     opacity: var(--PickerColumns-optionDisabled-opacity);
   }
+
+  &-columnItemis-selected {
+    font-size: 18px;
+    color: --PickerColumns-title-color;
+  }
 }

package/scss/components/_popup.scss

@@ -23,6 +23,7 @@
 }
 .#{$ns}PopUp {
   width: 100%;
+  height: px2rem(400px);
   position: fixed;
   background: var(--PopOver-bg);
   left: 0;
@@ -55,38 +56,36 @@
 
   &.in {
     animation-name: PopUpIn;
-    .#{$ns}PopUp-overlay{
+    .#{$ns}PopUp-overlay {
       animation-name: PopUpOpacityIn;
     }
   }
 
   &.out {
     animation-name: PopUpOut;
-    .#{$ns}PopUp-overlay{
+    .#{$ns}PopUp-overlay {
       animation-name: PopUpOpacityOut;
     }
   }
 
-  &-inner{
+  &-inner {
     position: relative;
     overflow: hidden;
     height: 100%;
     box-sizing: border-box;
     background: $white;
-    padding-top: px2rem(36px);
+    display: flex;
+    flex-direction: column;
   }
 
-  &-closeWrap{
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
+  &-closeWrap {
+    position: relative;
     text-align: center;
     height: px2rem(48px);
     line-height: px2rem(48px);
   }
 
-  &-closeWrap &-close{
+  &-closeWrap &-close {
     position: absolute;
     z-index: 1;
     color: var(--icon-color);
@@ -95,9 +94,30 @@
     right: px2rem(15px);
   }
 
-  &-content{
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: px2rem(60px);
+  }
+  &-title {
+    font-size: var(--fontSizeMd);
+  }
+
+  &-cancel {
+    color: var(--PopUp-cancelAction-color);
+    margin-left: var(--gap-sm);
+  }
+
+  &-confirm {
+    margin-right: var(--gap-sm);
+  }
+
+  &-content {
     overflow-y: auto;
     height: 100%;
+    display: flex;
+    flex: 1;
   }
 
   & > * {
@@ -112,7 +132,7 @@
     right: 0;
     z-index: 1;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.3);;
+    background: rgba(0, 0, 0, 0.3);
     opacity: 1;
     animation-duration: var(--animation-duration);
     animation-fill-mode: both;
@@ -124,4 +144,7 @@
   &--leftTopLeftBottom {
     margin-top: px2rem(-4px);
   }
+  &-safearea {
+    height: px2rem(16px);
+  }
 }

package/scss/components/_result-box.scss

@@ -126,4 +126,35 @@
     padding-left: 8px;
     min-height: 24px;
   }
+
+  &.is-mobile {
+    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    border: none;
+    padding: 0;
+    font-size: var(--fontSizeLg);
+    border: none;
+    justify-content: flex-end;
+
+    .#{$ns}ResultBox-arrow {
+      margin-right: var(--gap-xs);
+      // margin-left: var(--gap-xs);
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      margin-left: 4px;
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+        transform: rotate(-90deg);
+      }
+    }
+  }
 }

package/scss/components/form/_checks.scss

@@ -29,6 +29,8 @@
       pointer-events: all;
       margin-left: var(--Checkbox-gap);
       cursor: pointer;
+      display: inline-block;
+      vertical-align: middle;
 
       > a {
         // float: right;

package/scss/components/form/_color.scss

@@ -10,8 +10,8 @@
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
 
-  &-popup{
-    height: 80vh;
+  &-popup {
+    height: px2rem(400px);
   }
 
   &:not(.is-disabled) {

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

@@ -128,7 +128,7 @@
 }
 
 .#{$ns}DateRangePicker-popup {
-   height: 90vh;
+  height: px2rem(400px);
 }
 
 @include media-breakpoint-up(sm) {

package/scss/components/form/_date.scss

@@ -123,8 +123,53 @@
 }
 
 .#{$ns}DatePicker-popup {
-  height: 80vh;
+  height: px2rem(300px);
 }
+
+// 移动端输入框样式
+.#{$ns}DatePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+
+  span,
+  a {
+    &:focus {
+      outline: unset;
+    }
+  }
+
+  .#{$ns}DatePicker-value,
+  .#{$ns}DatePicker-clear {
+    display: inline-flex;
+    justify-content: flex-end;
+    padding: 0 0;
+  }
+
+  .#{$ns}DatePicker-value {
+    margin-right: var(--gap-xs);
+  }
+
+  .#{$ns}DatePicker-placeholder {
+    flex-grow: unset;
+    flex-basis: unset;
+  }
+
+  .#{$ns}DatePicker-toggler {
+    margin-top: -3px;
+  }
+}
+
+.#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {
+  color: red;
+  .rdt {
+    width: 100%;
+    .rdtPicker {
+      width: 100%;
+      padding: unset;
+    }
+  }
+}
+
 // override third-party styles
 .rdt {
   user-select: none;

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

@@ -87,4 +87,7 @@
       }
     }
   }
+  &-popup {
+    height: px2rem(460px);
+  }
 }

package/scss/components/form/_select.scss

@@ -2,6 +2,7 @@
   display: inline-flex;
   vertical-align: middle;
   text-align: left;
+  align-items: center;
   outline: none;
   position: relative;
   font-size: var(--Form-input-fontSize);
@@ -148,10 +149,27 @@
     }
   }
 
-  &.is-opened &-arrow > svg {
+  &.is-opened:not(.is-mobile) &-arrow > svg {
     transform: rotate(180deg);
   }
 
+  &.is-mobile {
+    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    border: none;
+    padding: 0;
+    font-size: var(--fontSizeLg);
+
+    .#{$ns}Select-valueWrap {
+      text-align: right;
+      padding-right: 4px;
+    }
+    .#{$ns}Select-arrow {
+      > svg {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
   &-menu {
     max-height: px2rem(300px);
     overflow: auto;
@@ -159,6 +177,13 @@
     .#{$ns}Checkbox--sm > i {
       margin-top: px2rem(-3px);
     }
+    &.is-mobile {
+      width: 100%;
+      text-align: center;
+      .#{$ns}Select-option {
+        line-height: px2rem(36px);
+      }
+    }
   }
   &--longlist {
     overflow: hidden;
@@ -282,8 +307,8 @@
     }
   }
 
-  &.is-focused,
-  &.is-opened {
+  &.is-focused:not(.is-mobile),
+  &.is-opened:not(.is-mobile) {
     border-color: var(--Form-input-onFocused-borderColor);
     color: var(--Form-select-onFocused-color);
   }
@@ -314,6 +339,10 @@
       fill: var(--Form-input-onHover-iconColor);
     }
   }
+
+  &-popup {
+    height: px2rem(320px);
+  }
 }
 
 .#{$ns}Select-popover {

package/scss/components/form/_transfer.scss

@@ -235,6 +235,9 @@
   display: flex;
   flex-direction: column;
 
+  &.is-mobile {
+     width: 100%;
+  }
   & > .#{$ns}Transfer-selection {
     flex-grow: 1;
     max-height: 100%;

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

@@ -17,7 +17,7 @@
   }
 
   &-popup {
-    height: 80vh;
+    height: px2rem(400px);
   }
 }
 

package/scss/themes/_common.scss

@@ -82,6 +82,7 @@
 @import '../components/form/checks';
 @import '../components/form/selection';
 @import '../components/form/city';
+@import '../components/city-area';
 @import '../components/form/switch';
 @import '../components/form/number';
 @import '../components/form/select';
@@ -112,6 +113,7 @@
 @import '../components/form/rating';
 @import '../components/form/transfer';
 @import '../components/form/nested-select';
+@import '../components/cascader';
 @import '../components/form/icon-picker';
 @import '../components/form/form';
 @import '../components/anchor-nav';

package/scss/themes/_cxd-variables.scss

@@ -318,7 +318,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Button--primary-onActive-color: #{$G11};
 
   --Button--light-border: var(--light);
-  --Button--light-color: var(--button-color);
+  --Button--light-color: var(--text-color);
 
   --Button-onDisabled-borderColor: #{$G9};
   --Button-onDisabled-opacity: 0.65;
@@ -639,7 +639,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --TimelineItem--round-radius: #{$R8};
   --TimelineItem--content-radius: #{$R2};
 
-  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 rgba(0 0 0 / 10%);
+  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0
+    rgba(0 0 0 / 10%);
 
   --TimelineItem--font-size: #{$T2};
 
@@ -655,7 +656,6 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Timeline--warning-bg: var(--warning);
   --Timeline--danger-bg: var(--danger);
 
-
   // Formula
   --Formula-header-bgColor: #{$G10};
   --Formula-funcItem-bgColor-onActive: #{$light};