amis-rev-ui 6.13.0

package/scss/components/_timeline.scss

@@ -0,0 +1,572 @@
+.#{$ns}Timeline {
+  min-height: #{px2rem(10px)};
+}
+
+.#{$ns}Timeline-vertical {
+  display: flex;
+  flex-flow: column;
+
+  .#{$ns}TimelineItem {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    flex-direction: row;
+
+    &-axle {
+      flex: var(--TimelineItem--axle-flex);
+      position: relative;
+
+      &.#{$ns}TimelineItem-point-align {
+        &--center {
+          .#{$ns}TimelineItem-round-wrapper {
+            transform: translate(-50%, -50%);
+            top: 50%;
+          }
+          .#{$ns}TimelineItem-icon {
+            transform: translate(-50%, -50%);
+            top: 50%;
+          }
+        }
+        &--bottom {
+          .#{$ns}TimelineItem-icon {
+            transform: translate(-50%, -50%);
+            top: calc(100% - var(--sizes-base-18));
+          }
+          .#{$ns}TimelineItem-round-wrapper {
+            transform: translate(-50%, -50%);
+            top: calc(100% - var(--sizes-base-18));
+          }
+        }
+      }
+
+      .#{$ns}TimelineItem-line {
+        width: var(--TimelineItem--left-line-width);
+        background-color: var(--TimelineItem--line-bg);
+        height: 100%;
+        position: absolute;
+        left: calc(50% - 1px);
+        transform: translateX(0.5px);
+        &-icon {
+          left: var(--TimelineItem--icon-left-line-left);
+        }
+      }
+
+      .#{$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);
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .#{$ns}TimelineItem-round-wrapper {
+        position: absolute;
+        height: var(--sizes-base-18);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .#{$ns}TimelineItem-icon {
+        height: var(--sizes-base-18);
+      }
+    }
+
+    &-content {
+      padding-bottom: var(--TimelineItem--content-padding-bottom);
+      margin-left: var(--TimelineItem--content-margin-left);
+      margin-right: var(--TimelineItem--content-margin-left);
+
+      .#{$ns}TimelineItem-time {
+        color: var(--TimelineItem--text-primary-color);
+        font-size: var(--Timeline-time-fontSize);
+        font-weight: var(--Timeline-time-fontWeight);
+        margin-bottom: var(--TimelineItem--content-time-margin-bottom);
+      }
+
+      .#{$ns}TimelineItem-title {
+        display: flex;
+        word-break: break-word;
+        color: var(--TimelineItem--text-primary-color);
+        font-size: var(--Timeline-title-fontSize);
+        font-weight: var(--Timeline-title-fontWeight);
+        margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+        .#{$ns}PlainField {
+          padding-right: var(--TimelineItem-custem-time-padding-right);
+        }
+        .#{$ns}Button {
+          margin-left: var(--TimelineItem-custem-button-margin-left);
+        }
+      }
+
+      .#{$ns}TimelineItem-detail {
+        .#{$ns}TimelineItem-detail-button {
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          font-size: var(--Timeline-detail-label-fontSize);
+          color: var(--TimelineItem--detail-button-color);
+          font-weight: var(--Timeline-detail-label-fontWeight);
+          margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
+        }
+        .#{$ns}TimelineItem-detail-arrow {
+          color: var(--Timeline-detail-icon-color);
+          width: var(--TimelineItem-detail-arrow-width);
+          height: var(--TimelineItem-detail-arrow-width);
+          transition: transform var(--animation-duration);
+        }
+
+        .#{$ns}TimelineItem-detail-arrow-top {
+          transform: rotate(180deg);
+        }
+
+        .#{$ns}TimelineItem-detail-visible {
+          display: block;
+          word-break: break-word;
+          border-radius: var(--Timeline-visible-border-radius);
+          font-size: var(--Timeline-detail-content-fontSize);
+          font-weight: var(--Timeline-detail-content-fontWeight);
+          color: var(--Timeline-detail-content-color);
+          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}TimelineItem-title {
+        text-align: right;
+      }
+      .#{$ns}TimelineItem-content,
+      .#{$ns}TimelineItem-detail {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
+  }
+
+  &.#{$ns}Timeline-alternate {
+    .#{$ns}TimelineItem:nth-child(odd) {
+      flex-direction: row-reverse;
+      max-width: 50%;
+      .#{$ns}TimelineItem-title {
+        text-align: right;
+      }
+      .#{$ns}TimelineItem-content,
+      .#{$ns}TimelineItem-detail {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+    }
+
+    .#{$ns}TimelineItem:nth-child(even) {
+      margin-left: calc(50% - var(--Timeline-alternate-margin-left));
+      max-width: calc(50% + var(--Timeline-alternate-margin-left));
+    }
+  }
+
+  .#{$ns}TimelineItem:first-child {
+    .#{$ns}TimelineItem-size-sm {
+      .#{$ns}TimelineItem-line {
+        top: 20px;
+      }
+    }
+    .#{$ns}TimelineItem-size-md {
+      .#{$ns}TimelineItem-line {
+        top: 20px;
+      }
+    }
+    .#{$ns}TimelineItem-size-lg {
+      .#{$ns}TimelineItem-line {
+        top: 20px;
+      }
+    }
+    .#{$ns}TimelineItem-size-xl {
+      .#{$ns}TimelineItem-line {
+        top: 20px;
+      }
+    }
+  }
+}
+
+.#{$ns}Timeline-horizontal {
+  display: flex;
+  flex-flow: column;
+  .#{$ns}TimelineItem {
+    display: flex;
+    width: -webkit-fill-available;
+    flex-flow: column;
+
+    &-axle {
+      // display: flex;
+      // flex-direction: row-reverse;
+      // justify-content: space-evenly;
+      // align-items: center;
+      position: relative;
+
+      &.#{$ns}TimelineItem-point-align {
+        &--left {
+          .#{$ns}TimelineItem-round-wrapper,
+          .#{$ns}TimelineItem-icon {
+            left: 0%;
+          }
+        }
+        &--right {
+          .#{$ns}TimelineItem-round-wrapper,
+          .#{$ns}TimelineItem-icon {
+            right: 0;
+          }
+        }
+        &--center {
+          .#{$ns}TimelineItem-round-wrapper,
+          .#{$ns}TimelineItem-icon {
+            left: 50%;
+          }
+        }
+      }
+
+      .#{$ns}TimelineItem-round-wrapper {
+        width: fit-content;
+        position: absolute;
+        transform: translateY(-50%);
+      }
+      .#{$ns}TimelineItem-line {
+        flex: 1;
+        height: var(--TimelineItem--left-line-width);
+        background-color: var(--TimelineItem--line-bg);
+      }
+
+      .#{$ns}TimelineItem-icon {
+        position: absolute;
+        transform: translateY(-50%);
+        border-radius: var(--TimelineItem--icon-radius);
+      }
+    }
+    &-content {
+      margin-top: var(--Timeline-horizontal-content-margin-top);
+      padding-bottom: var(--TimelineItem--content-padding-bottom);
+      margin-left: var(--TimelineItem--content-margin-left);
+
+      &.#{$ns}TimelineItem-content-align {
+        &--left {
+          .#{$ns} {
+            &TimelineItem-time,
+            &TimelineItem-title {
+              text-align: left;
+            }
+            &TimelineItem-detail {
+              align-items: flex-start;
+            }
+          }
+        }
+        &--right {
+          .#{$ns} {
+            &TimelineItem-time,
+            &TimelineItem-title {
+              text-align: right;
+            }
+            &TimelineItem-detail {
+              align-items: flex-end;
+            }
+          }
+        }
+      }
+
+      .#{$ns}TimelineItem-time {
+        text-align: center;
+        color: var(--TimelineItem--text-primary-color);
+        font-size: var(--Timeline-time-fontSize);
+        font-weight: var(--Timeline-time-fontWeight);
+        margin-bottom: var(--TimelineItem--content-time-margin-bottom);
+      }
+
+      .#{$ns}TimelineItem-title {
+        color: var(--TimelineItem--text-primary-color);
+        font-size: var(--Timeline-title-fontSize);
+        font-weight: var(--Timeline-title-fontWeight);
+        margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+        margin-left: 1%;
+        margin-right: 1%;
+        text-align: center;
+      }
+
+      .#{$ns}TimelineItem-detail {
+        margin-left: 1%;
+        margin-right: 1%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .#{$ns}TimelineItem-detail-button {
+          display: flex;
+          cursor: pointer;
+          align-items: center;
+          font-size: var(--Timeline-detail-label-fontSize);
+          color: var(--TimelineItem--detail-button-color);
+          font-weight: var(--Timeline-detail-label-fontWeight);
+          margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
+        }
+
+        .#{$ns}TimelineItem-detail-arrow {
+          color: var(--Timeline-detail-icon-color);
+          width: var(--TimelineItem-detail-arrow-width);
+          height: var(--TimelineItem-detail-arrow-width);
+        }
+
+        .#{$ns}TimelineItem-detail-arrow-top {
+          transform: rotateX(180deg);
+        }
+
+        .#{$ns}TimelineItem-detail-visible {
+          color: var(--colors-neutral-line-4);
+        }
+
+        .#{$ns}TimelineItem-detail-invisible {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .#{$ns}Timeline- {
+    &first-line,
+    &second-line {
+      display: flex;
+      > * {
+        flex: 1;
+      }
+    }
+  }
+
+  .#{$ns} {
+    &TimelineItem-round-wrapper {
+      position: absolute;
+      transform: translateY(-0.5px);
+    }
+  }
+}
+
+.#{$ns}TimelineItem,
+.#{$ns}Timeline-line {
+  .#{$ns}TimelineItem- {
+    &size-xl {
+      .#{$ns}TimelineItem-round {
+        height: calc(
+          var(--TimelineItem-round-width-xl) * 2 +
+            var(--TimelineItem-round-width-lg) * 2
+        );
+        width: calc(
+          var(--TimelineItem-round-width-xl) * 2 +
+            var(--TimelineItem-round-width-lg) * 2
+        );
+        font-size: calc(
+          var(--TimelineItem-round-width-xl) * 2 +
+            var(--TimelineItem-round-width-lg) * 2
+        );
+      }
+      .#{$ns}TimelineItem-icon {
+        font-size: calc(
+          var(--TimelineItem-round-width-xl) * 2 +
+            var(--TimelineItem-round-width-lg) * 2
+        );
+      }
+      .#{$ns}TimelineItem-dot {
+        height: calc(var(--TimelineItem-round-width-xl) * 2);
+        width: calc(var(--TimelineItem-round-width-xl) * 2);
+      }
+    }
+    &size-lg {
+      .#{$ns}TimelineItem-round {
+        height: calc(
+          var(--TimelineItem-round-width-lg) * 2 +
+            var(--TimelineItem-round-width-xl)
+        );
+        width: calc(
+          var(--TimelineItem-round-width-lg) * 2 +
+            var(--TimelineItem-round-width-xl)
+        );
+        font-size: calc(
+          var(--TimelineItem-round-width-lg) * 2 +
+            var(--TimelineItem-round-width-xl)
+        );
+      }
+      .#{$ns}TimelineItem-icon {
+        font-size: calc(
+          var(--TimelineItem-round-width-lg) * 2 +
+            var(--TimelineItem-round-width-xl)
+        );
+      }
+      .#{$ns}TimelineItem-dot {
+        height: calc(var(--TimelineItem-round-width-lg) * 2);
+        width: calc(var(--TimelineItem-round-width-lg) * 2);
+      }
+    }
+    &size-md {
+      .#{$ns}TimelineItem-round {
+        height: calc(
+          var(--TimelineItem-round-width-md) * 2 +
+            var(--TimelineItem-round-width-lg)
+        );
+        width: calc(
+          var(--TimelineItem-round-width-md) * 2 +
+            var(--TimelineItem-round-width-lg)
+        );
+        font-size: calc(
+          var(--TimelineItem-round-width-md) * 2 +
+            var(--TimelineItem-round-width-lg)
+        );
+      }
+      .#{$ns}TimelineItem-icon {
+        font-size: calc(
+          var(--TimelineItem-round-width-md) * 2 +
+            var(--TimelineItem-round-width-lg)
+        );
+      }
+      .#{$ns}TimelineItem-dot {
+        height: calc(var(--TimelineItem-round-width-md) * 2);
+        width: calc(var(--TimelineItem-round-width-md) * 2);
+      }
+    }
+    &size-sm {
+      .#{$ns}TimelineItem-round {
+        height: calc(
+          var(--TimelineItem-round-width-sm) * 2 +
+            var(--TimelineItem-round-width-sm)
+        );
+        width: calc(
+          var(--TimelineItem-round-width-sm) * 2 +
+            var(--TimelineItem-round-width-sm)
+        );
+        font-size: calc(
+          var(--TimelineItem-round-width-sm) * 2 +
+            var(--TimelineItem-round-width-sm)
+        );
+      }
+      .#{$ns}TimelineItem-icon {
+        font-size: calc(
+          var(--TimelineItem-round-width-sm) * 2 +
+            var(--TimelineItem-round-width-sm)
+        );
+      }
+      .#{$ns}TimelineItem-dot {
+        height: calc(var(--TimelineItem-round-width-sm) * 2);
+        width: calc(var(--TimelineItem-round-width-sm) * 2);
+      }
+    }
+    &round {
+      background: var(--colors-neutral-fill-1);
+      position: relative;
+      opacity: 0.2;
+      border-radius: var(--TimelineItem--round-radius);
+    }
+    &dot {
+      position: absolute;
+      background-color: var(--colors-neutral-fill-1);
+      border-radius: 100%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &round {
+      border-radius: var(--TimelineItem--round-radius);
+
+      &--danger.#{$ns}TimelineItem-dot {
+        background: var(--Timeline--danger-dot-color);
+      }
+
+      &--info.#{$ns}TimelineItem-dot {
+        background: var(--Timeline--info-dot-color);
+      }
+
+      &--success.#{$ns}TimelineItem-dot {
+        background: var(--Timeline--success-dot-color);
+      }
+
+      &--warning.#{$ns}TimelineItem-dot {
+        background: var(--Timeline--warning-dot-color);
+      }
+
+      &.#{$ns}TimelineItem-round-background--warning {
+        background: var(--Timeline--warning-dot-bg-color);
+      }
+      &.#{$ns}TimelineItem-round-background--success {
+        background: var(--Timeline--success-dot-bg-color);
+      }
+      &.#{$ns}TimelineItem-round-background--info {
+        background: var(--Timeline--info-dot-bg-color);
+      }
+      &.#{$ns}TimelineItem-round-background--danger {
+        background: var(--Timeline--danger-dot-bg-color);
+      }
+    }
+  }
+}
+
+.#{$ns}Timeline-line {
+  display: flex;
+  .#{$ns}TimelineItem-axle {
+    flex: 1;
+  }
+}
+
+.#{$ns}TimelineItem-hide-dot {
+  position: relative;
+  .#{$ns}TimelineItem-round {
+    position: absolute;
+    border-radius: 0;
+  }
+}
+
+.#{$ns}TimelineItem .#{$ns}TimelineItem-hide-dot,
+.#{$ns}TimelineItem-axle.#{$ns}TimelineItem-hide-dot {
+  .#{$ns}TimelineItem-round-wrapper {
+    display: none;
+  }
+  .#{$ns}TimelineItem-icon {
+    display: none;
+  }
+}
+
+.#{$ns}Timeline {
+  &-first-line {
+    .#{$ns}TimelineItem-content {
+      margin-top: auto;
+    }
+  }
+  &-second-line {
+    .#{$ns}Timeline-inner-content-wrapper {
+      margin-top: var(--sizes-base-12);
+    }
+    .#{$ns}TimelineItem-content {
+      margin-top: var(--TimelineItem--content-padding-bottom);
+    }
+  }
+}
+
+.#{$ns}TimelineItem-icon {
+  display: flex;
+  svg.icon {
+    top: 0;
+  }
+}
+
+.#{$ns} {
+  &TimelineItem-round-wrapper {
+    z-index: 1;
+  }
+}