amis 1.5.6-beta.4 → 1.5.8-beta.2

package/scss/components/_popup.scss

@@ -0,0 +1,127 @@
+@keyframes PopUpIn {
+  from {
+    height: 0;
+  }
+}
+
+@keyframes PopUpOut {
+  to {
+    height: 0;
+  }
+}
+
+@keyframes PopUpOpacityIn {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes PopUpOpacityOut {
+  to {
+    opacity: 0;
+  }
+}
+.#{$ns}PopUp {
+  width: 100%;
+  position: fixed;
+  background: var(--PopOver-bg);
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-popover;
+  padding: 0;
+  margin: 0;
+  font-weight: var(--fontWeightNormal);
+  letter-spacing: normal;
+  line-height: var(--lineHeightBase);
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  font-size: var(--fontSizeBase);
+  box-shadow: var(--boxShadow);
+  border: var(--borderWidth) solid var(--borderColor);
+  border-radius: var(--borderRadius);
+  overflow: hidden;
+  &.in,
+  &.out {
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+  }
+
+  &.in {
+    animation-name: PopUpIn;
+    .#{$ns}PopUp-overlay{
+      animation-name: PopUpOpacityIn;
+    }
+  }
+
+  &.out {
+    animation-name: PopUpOut;
+    .#{$ns}PopUp-overlay{
+      animation-name: PopUpOpacityOut;
+    }
+  }
+
+  &-inner{
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    box-sizing: border-box;
+    background: $white;
+    padding-top: px2rem(36px);
+  }
+
+  &-closeWrap{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    text-align: center;
+    height: px2rem(48px);
+    line-height: px2rem(48px);
+  }
+
+  &-closeWrap &-close{
+    position: absolute;
+    z-index: 1;
+    color: var(--icon-color);
+    cursor: pointer;
+    top: px2rem(15px);
+    right: px2rem(15px);
+  }
+
+  &-content{
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  & > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &-overlay {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);;
+    opacity: 1;
+    animation-duration: var(--animation-duration);
+    animation-fill-mode: both;
+  }
+
+  &--leftBottomLeftTop {
+    margin-top: px2rem(4px);
+  }
+  &--leftTopLeftBottom {
+    margin-top: px2rem(-4px);
+  }
+}

package/scss/components/_steps.scss

@@ -140,3 +140,63 @@
     }
   }
 }
+
+
+.#{$ns}Steps-mobile.#{$ns}Steps--horizontal {
+  .#{$ns}StepsItem {
+
+    &-container {
+      &Wrapper {
+        .#{$ns}StepsItem-body {
+          .#{$ns}StepsItem-title {
+            &::after {
+              display: none !important;
+            }
+          }
+        }
+
+        .#{$ns}StepsItem-body{
+          .#{$ns}StepsItem-title {
+            .#{$ns}StepsItem-subTitle {
+              padding-left: px2rem(5px);
+            }
+          }
+        }
+      }
+
+      &Icon {
+        position: relative;
+        display: block;
+
+        &:after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: px2rem(15px);
+          height: 1px;
+          left: px2rem(40px);
+          width: 99999px;
+          background-color: var(--Steps-line-bg);
+        }
+      }
+
+      &Icon.is-success {
+        &:after {
+          background-color: var(--Steps-line-success-bg);
+        }
+      }
+    }
+
+    &:last-child {
+      flex: 1;
+
+      .#{$ns}StepsItem-container {
+        &Icon {
+          &:after {
+            display: none !important;
+          }
+        }
+      }
+    }
+  }
+}

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/_color.scss

@@ -10,6 +10,10 @@
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
 
+  &-popup{
+    height: 80vh;
+  }
+
   &:not(.is-disabled) {
     cursor: pointer;
 

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

@@ -127,6 +127,10 @@
   }
 }
 
+.#{$ns}DateRangePicker-popup {
+   height: 90vh;
+}
+
 @include media-breakpoint-up(sm) {
   .#{$ns}DateRangePicker-wrap {
     white-space: nowrap;

package/scss/components/form/_date.scss

@@ -122,6 +122,9 @@
   }
 }
 
+.#{$ns}DatePicker-popup {
+  height: 80vh;
+}
 // override third-party styles
 .rdt {
   user-select: none;

package/scss/components/form/_form.scss

@@ -406,3 +406,171 @@
 .#{$ns}Form-column-10 > .#{$ns}Form-item {
   width: 10%;
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Form {
+    .#{$ns}Form-item {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+      padding: var(--Form-item-gap) 0;
+      position: relative;
+
+      &::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+        transform: scaleY(0.5);
+      }
+
+      .#{$ns}InputGroup-addOn,
+      .#{$ns}TextControl-addOn {
+        border: none;
+      }
+
+      > .#{$ns}Form-label {
+        flex: 0 0 28%;
+        max-width: 28%;
+        min-height: 1px;
+        text-align: left;
+        padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
+        overflow-wrap: break-word;
+        margin-right: 0;
+        margin-bottom: 0;
+        font-size: var(--fontSizeLg);
+      }
+
+      .#{$ns}Form-description {
+        font-size: var(--fontSizeBase);
+      }
+
+      .#{$ns}TextControl-input {
+        font-size: var(--fontSizeLg);
+
+        input {
+          height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+        }
+      }
+
+      .#{$ns}Form-value,
+      .#{$ns}Form-control {
+        flex: 1;
+        flex-wrap: wrap;
+        font-size: var(--fontSizeLg);
+
+        &.is-disabled > .#{$ns}TextControl-input {
+          background: transparent;
+        }
+      }
+
+      .#{$ns}Form-hint,
+      .#{$ns}Form-remark,
+      .#{$ns}Form-static,
+      .#{$ns}Form-group--hor .#{$ns}Form-item,
+      .#{$ns}SwitchControl,
+      .#{$ns}CheckboxControl,
+      .#{$ns}RadiosControl,
+      .#{$ns}CheckboxesControl {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
+      .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
+        height: var(--Form-input-height);
+      }
+
+      .#{$ns}Form-hint {
+        font-size: var(--fontSizeBase);
+        margin-left: 0;
+        color: var(--text--muted-color);
+      }
+
+      .#{$ns}TextControl-placeholder {
+        top: 0;
+      }
+
+      .#{$ns}Form-static {
+        min-height: 0;
+      }
+
+      .#{$ns}Form-description,
+      .#{$ns}Form-feedback {
+        font-size: var(--fontSizeBase);
+      }
+
+      .#{$ns}InputGroup {
+        .#{$ns}Select,
+        .#{$ns}InputGroup-btn .#{$ns}Button {
+          border: none;
+        }
+
+        > .#{$ns}TextControl-input input {
+          height: var(--Form-input-height);
+        }
+      }
+
+      .#{$ns}ColorPicker {
+        padding: 0;
+        border: none;
+
+        .#{$ns}ColorPicker-arrow {
+          display: none;
+        }
+      }
+
+      .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button {
+        margin-bottom: var(--gap-xs);
+      }
+
+      .#{$ns}TextareaControl > textarea,
+      .#{$ns}Form-control > .#{$ns}TextControl-input,
+      .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+        border: none;
+        padding: 0 var(--Form-input-paddingX) 0 0;
+        box-shadow: none;
+
+        &:hover,
+        &:focus,
+        &.active {
+          border: none;
+          outline: none;
+          outline-style: none;
+        }
+      }
+
+      .#{$ns}Form-control > .#{$ns}TextControl-input--multiple {
+        padding: 0;
+        min-height: 0;
+      }
+    }
+
+    .#{$ns}Form-groupColumn {
+      margin-bottom: 0;
+    }
+
+    .#{$ns}Divider {
+      display: none;
+    }
+
+    .#{$ns}Tabs-pane {
+      padding: 0;
+    }
+
+    > .#{$ns}Form-item {
+      &:last-child::after,
+      &:last-of-type::after {
+        display: none;
+      }
+    }
+
+    .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item {
+      padding-bottom: var(--Form-input-paddingX);
+    }
+  }
+}

package/scss/components/form/_rating.scss

@@ -1,31 +1,70 @@
 .#{$ns}Rating {
+  display: flex;
   position: relative;
-  overflow: hidden;
-  display: block;
-  float: left;
-  font-size: px2rem(24px);
-  color: var(--dark);
-  cursor: pointer;
-
-  &.is-active {
-    color: var(--Rating-onActive-color);
-  }
+  align-items: center;
+  justify-content: flex-start;
+  flex-flow: row wrap;
 
-  &.is-disabled {
-    cursor: not-allowed;
-    pointer-events: none;
+  & > ul {
+    display: flex;
+    padding: unset;
+    margin: unset;
+    align-items: center;
+    justify-content: flex-start;
+    flex-flow: row wrap;
   }
 
-  &-half:before {
-    position: absolute;
+  &-star {
+    position: relative;
+    margin-right: var(--Rating-star-margin);
     overflow: hidden;
     display: block;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 50%;
-    content: attr(data-forhalf);
-    color: var(--Rating-onActive-color);
+    font-size: var(--Rating-star-size);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    color: var(--Rating-inactive-color);
+
+    &-half > svg.icon,
+    & > svg.icon {
+      display: block;
+      width: px2rem(24px);
+      height: px2rem(24px);
+      top: 0;
+    }
+  
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &-half {
+      position: absolute;
+      overflow: hidden;
+      display: block;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 50%;
+    }
+  }
+
+  &-text {
+    font-size: var(--fontSizeSm);
+    color: var(--text-color);
+    font-weight: var(--fontWeightNormal);
+
+    &--left {
+      margin-right: var(--Rating-star-margin);
+    }
+
+    &--right {
+      margin-left: var(--Rating-star-margin);
+    }
   }
 }
 

package/scss/components/form/_result-list.scss

@@ -40,6 +40,7 @@
     height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
+    align-items: center;
     padding: calc(
         (
             var(--Form-input-height) - var(--Form-input-lineHeight) *
@@ -54,6 +55,7 @@
     }
 
     > .#{$ns}Selections-dragbar {
+      top: 0;
       width: var(--gap-lg);
       position: relative;
       left: calc(var(--gap-xs) * -1);