amis 1.5.7 → 1.5.8-beta.2

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/_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/_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);

package/scss/components/form/_selection.scss

@@ -1,7 +1,7 @@
 .#{$ns}Selection {
   > .#{$ns}Checkbox {
     display: block;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -57,7 +57,7 @@
 
   &-item {
     display: flex;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -193,7 +193,7 @@
   &-itemInner {
     display: flex;
     align-items: center;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(
@@ -251,6 +251,7 @@
 .#{$ns}ChainedSelection {
   display: flex;
   flex-direction: row;
+  min-height: 100%;
 
   &-col {
     flex-grow: 1;
@@ -269,7 +270,7 @@
 
   &-item {
     display: flex;
-    height: var(--Form-input-height);
+    // height: var(--Form-input-height);
     line-height: var(--Form-input-lineHeight);
     font-size: var(--Form-input-fontSize);
     padding: calc(

package/scss/themes/_antd-variables.scss

@@ -166,4 +166,46 @@ $link-color: $info;
   --Table-onChecked-borderColor: var(--Table-borderColor);
 
   --Switch-bgColor: #bfbfbf;
+
+  // timeline
+  --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
+  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-left: #{px2rem(13px)};
+  --TimelineItem--left-line-top: #{px2rem(20px)};
+  --TimelineItem--round-width: #{px2rem(8px)};
+  --TimelineItem--round-height: #{px2rem(8px)};
+  --TimelineItem--round-left: #{px2rem(10px)};
+  --TimelineItem--round-top: #{px2rem(8px)};
+  --TimelineItem--icon-width: #{px2rem(16px)};
+  --TimelineItem--icon-height: #{px2rem(16px)};
+  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
+  --TimelineItem--content-margin-left: #{px2rem(8px)};
+  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
+  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
+  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
+  --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
+  --Timeline-alternate-margin-left: #{px2rem(24px)};
+
+  --TimelineItem--icon-radius: 50%;
+  --TimelineItem--round-radius: 50%;
+  --TimelineItem--content-radius: #{px2rem(2px)};
+
+  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 rgba(0 0 0 / 10%);
+
+  --TimelineItem--font-size: #{px2rem(12px)};
+
+  --TimelineItem--text-primary-color: #151a26;
+  --TimelineItem--text-secondary-color: #83868c;
+  --TimelineItem--detail-button-color: var(--primary);
+  --TimelineItem--line-bg: #e6e6e8;
+  --TimelineItem--content-bg: #f2f2f4;
+  --TimelineItem-round-bg: #dadbdd;
+
+  --Timeline--success-bg: var(--success);
+  --Timeline--info-bg: var(--info);
+  --Timeline--warning-bg: var(--warning);
+  --Timeline--danger-bg: var(--danger);
 }

package/scss/themes/_common.scss

@@ -119,5 +119,6 @@
 @import '../components/link';
 @import '../components/mapping';
 @import '../components/formula';
+@import '../components/timeline';
 
 @import '../utilities';

package/scss/themes/_cxd-variables.scss

@@ -612,4 +612,51 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Progress-borderRadius: #{$R7};
 
   --Rating-inactive-color: #{$G9};
+
+  // timeline
+  --TimelineItem--axle-flex: 0 0 #{px2rem(24px)};
+  --TimelineItem--left-line-width: #{px2rem(2px)};
+  --TimelineItem--left-line-left: #{px2rem(13px)};
+  --TimelineItem--left-line-top: #{px2rem(20px)};
+  --TimelineItem--round-width: #{px2rem(8px)};
+  --TimelineItem--round-height: #{px2rem(8px)};
+  --TimelineItem--round-left: #{px2rem(10px)};
+  --TimelineItem--round-top: #{px2rem(8px)};
+  --TimelineItem--icon-width: #{px2rem(16px)};
+  --TimelineItem--icon-height: #{px2rem(16px)};
+  --TimelineItem--icon-left: #{px2rem(6px)};
+  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
+  --TimelineItem--content-margin-left: #{px2rem(8px)};
+  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
+  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
+  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
+  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
+  --TimelineItem-detail-visible-max-width: #{px2rem(300px)};
+  --Timeline-alternate-margin-left: #{px2rem(24px)};
+
+  --TimelineItem--icon-radius: #{$R8};
+  --TimelineItem--round-radius: #{$R8};
+  --TimelineItem--content-radius: #{$R2};
+
+  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 rgba(0 0 0 / 10%);
+
+  --TimelineItem--font-size: #{$T2};
+
+  --TimelineItem--text-primary-color: #{$text-color};
+  --TimelineItem--text-secondary-color: #{$G5};
+  --TimelineItem--detail-button-color: var(--primary);
+  --TimelineItem--line-bg: #{$G9};
+  --TimelineItem--content-bg: #{$G10};
+  --TimelineItem-round-bg: #{$G8};
+
+  --Timeline--success-bg: var(--success);
+  --Timeline--info-bg: var(--info);
+  --Timeline--warning-bg: var(--warning);
+  --Timeline--danger-bg: var(--danger);
+
+
+  // Formula
+  --Formula-header-bgColor: #{$G10};
+  --Formula-funcItem-bgColor-onActive: #{$light};
 }

package/scss/themes/_dark-variables.scss

@@ -57,6 +57,7 @@ $link-color: $info;
   --DatePicker-bg: var(--background);
   --DatePicker-header-select-borderColor: var(--background);
   --DropDown-menu-bg: var(--background);
+  --Drawer-header-bg: var(--background);
   --Fieldset-legend-bgColor: var(--background);
   --Form-input-addOnBg: var(--Form-input-bg);
   --Form-input-bg: #3c3c3c;