amis 1.5.6-beta.5 → 1.6.0

package/scss/components/_modal.scss

@@ -231,3 +231,21 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Modal {
+    .#{$ns}Modal-footer {
+      display: flex;
+
+      > .#{$ns}Button {
+        flex: 1;
+        height: px2rem(44px);
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/_panel.scss

@@ -182,3 +182,48 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Panel--form {
+    border: none;
+    box-shadow: none;
+
+    margin: 0 calc(var(--Panel-bodyPadding) * -1)
+      calc(var(--Panel-marginBottom) / 2);
+
+    .#{$ns}Panel-body {
+      padding: 0 var(--gap-md) var(--gap-md);
+    }
+
+    > .#{$ns}Panel-heading {
+      background: none;
+      border: none;
+      border-radius: 0;
+
+      .#{$ns}Panel-title {
+        padding-left: var(--Panel-bodyPadding);
+        border-left: px2rem(3px) solid var(--primary);
+        font-size: var(--fontSizeLg);
+      }
+    }
+
+    .#{$ns}Panel-footerWrap {
+      padding-bottom: var(--Panel-bodyPadding);
+    }
+
+    .#{$ns}Panel-footer {
+      border-top: none;
+      display: flex;
+      padding: 0 var(--Panel-bodyPadding);
+
+      > .#{$ns}Button {
+        flex: 1;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

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,45 +56,68 @@
 
   &.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 !important;
-    left: 0;
-    top: 0;
+  &-closeWrap {
+    position: relative;
+    text-align: center;
+    height: px2rem(48px);
+    line-height: px2rem(48px);
   }
 
-  &-close{
-    width: px2rem(34px) !important;
-    height: px2rem(34px) !important;
-    padding: px2rem(12px);
+  &-closeWrap &-close {
+    position: absolute;
+    z-index: 1;
+    color: var(--icon-color);
     cursor: pointer;
+    top: px2rem(15px);
+    right: px2rem(15px);
+  }
+
+  &-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);
   }
 
-  &-content{
+  &-confirm {
+    margin-right: var(--gap-sm);
+  }
+
+  &-content {
     overflow-y: auto;
     height: 100%;
     display: flex;
+    flex: 1;
   }
 
   & > * {
@@ -108,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;
@@ -120,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/_timeline.scss

@@ -0,0 +1,198 @@
+.#{$ns}Timeline-vertical {
+  display: flex;
+  flex-flow: column;
+
+  .#{$ns}TimelineItem {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+
+    &:last-of-type {
+      .#{$ns}TimelineItem-axle .#{$ns}TimelineItem-line {
+        display: none;
+      }
+    }
+
+    &-axle {
+      position: relative;
+      flex: var(--TimelineItem--axle-flex);
+
+      .#{$ns}TimelineItem-line {
+        position: absolute;
+        height: calc(100% - var(--TimelineItem--left-line-top));
+        width: var(--TimelineItem--left-line-width);
+        left: var(--TimelineItem--left-line-left);
+        top: var(--TimelineItem--left-line-top);
+        background-color: var(--TimelineItem--line-bg);
+      }
+
+      .#{$ns}TimelineItem-round {
+        position: absolute;
+        width: var(--TimelineItem--round-width);
+        height: var(--TimelineItem--round-height);
+        left: var(--TimelineItem--round-left);
+        top: var(--TimelineItem--round-top);
+        background: var(--TimelineItem-round-bg);
+        border-radius: var(--TimelineItem--round-radius);
+
+        &--danger {
+          background: var(--Timeline--danger-bg);
+        }
+
+        &--info {
+          background: var(--Timeline--info-bg);
+        }
+
+        &--success {
+          background: var(--Timeline--success-bg);
+        }
+
+        &--warning {
+          background: var(--Timeline--warning-bg);
+        }
+      }
+
+      .#{$ns}TimelineItem-icon {
+        position: absolute;
+        width: var(--TimelineItem--icon-width);
+        height: var(--TimelineItem--icon-height);
+        left: var(--TimelineItem--icon-left);
+        border-radius: var(--TimelineItem--icon-radius);
+      }
+    }
+
+    &-content {
+      padding-bottom: var(--TimelineItem--content-padding-bottom);
+      margin-left: var(--TimelineItem--content-margin-left);
+
+      .#{$ns}TimelineItem-time {
+        color: var(--TimelineItem--text-secondary-color);
+        font-size: var(--Timeline--font-size);
+        margin-bottom: var(--TimelineItem--content-time-margin-bottom);
+      }
+
+      .#{$ns}TimelineItem-title {
+        color: var(--TimelineItem--text-primary-color);
+        font-size: var(--Timeline--font-size);
+        margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+      }
+
+      .#{$ns}TimelineItem-detail {
+        .#{$ns}TimelineItem-detail-button {
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          font-size: var(--Timeline--font-size);
+          color: var(--TimelineItem--detail-button-color);
+          margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
+        }
+
+        .#{$ns}TimelineItem-detail-arrow {
+          width: var(--TimelineItem-detail-arrow-width);
+          height: var(--TimelineItem-detail-arrow-width);
+        }
+
+        .#{$ns}TimelineItem-detail-arrow-top {
+          transform: rotateX(180deg);
+        }
+
+        .#{$ns}TimelineItem-detail-visible {
+          display: block;
+          max-width: var(--TimelineItem-detail-visible-max-width);
+          font-size: var(--Timeline--font-size);
+          padding: var(--TimelineItem-detail-visible-padding);
+          box-shadow: var(--TimelineItem-detail-visible-shadow);
+        }
+
+        .#{$ns}TimelineItem-detail-invisible {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.#{$ns}Timeline-left {
+    .#{$ns}TimelineItem {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &.#{$ns}Timeline-alternate {
+    .#{$ns}TimelineItem:nth-child(odd) {
+      flex-direction: row-reverse;
+      max-width: 50%;
+    }
+
+    .#{$ns}TimelineItem:nth-child(even) {
+      margin-left: calc(50% - var(--Timeline-alternate-margin-left));
+      max-width: calc(50% + var(--Timeline-alternate-margin-left));
+    }
+  }
+}
+
+.#{$ns}Timeline-horizontal {
+  display: flex;
+  flex-flow: row;
+  margin-left: 50%;
+  transform: translateX(-50%);
+
+  .#{$ns}TimelineItem {
+    display: flex;
+    width: -webkit-fill-available;
+    flex-flow: column;
+
+    &:last-of-type {
+      .#{$ns}TimelineItem-axle .#{$ns}TimelineItem-line {
+        display: none;
+      }
+    }
+
+    &-axle {
+      position: relative;
+      flex: var(--TimelineItem--axle-flex);
+
+      .#{$ns}TimelineItem-line {
+        position: absolute;
+        height: var(--TimelineItem--left-line-width);
+        width: calc(100% - var(--TimelineItem--left-line-left));
+        left:  var(--TimelineItem--left-line-top);
+        top: var(--TimelineItem--left-line-left);
+        background-color: var(--TimelineItem--line-bg);
+      }
+
+      .#{$ns}TimelineItem-round {
+        position: absolute;
+        width: var(--TimelineItem--round-width);
+        height: var(--TimelineItem--round-height);
+        left: var(--TimelineItem--round-top);
+        top: var(--TimelineItem--round-left);
+        background: var(--TimelineItem-round-bg);
+        border-radius: var(--TimelineItem--round-radius);
+
+        &--danger {
+          background: var(--Timeline--danger-bg);
+        }
+
+        &--info {
+          background: var(--Timeline--info-bg);
+        }
+
+        &--success {
+          background: var(--Timeline--success-bg);
+        }
+
+        &--warning {
+          background: var(--Timeline--warning-bg);
+        }
+      }
+
+      .#{$ns}TimelineItem-icon {
+        position: absolute;
+        width: var(--TimelineItem--icon-width);
+        height: var(--TimelineItem--icon-height);
+        left: var(--TimelineItem--icon-left);
+        border-radius: var(--TimelineItem--icon-radius);
+      }
+    }
+  }
+}

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;