@cloudtower/eagle 0.24.15 → 0.24.16

package/antd/es/steps/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import './index.less';
+import '../../progress/style';

package/antd/es/steps/style/index.js

@@ -0,0 +1,3 @@
+import '../../style/index.less';
+import './index.less';
+import '../../progress/style';

package/antd/es/steps/style/index.less

@@ -0,0 +1,246 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@steps-prefix-cls: ~'@{ant-prefix}-steps';
+@process-icon-color: @primary-color;
+@process-title-color: @heading-color;
+@process-description-color: @text-color;
+@process-icon-text-color: @text-color-inverse;
+@wait-icon-color: @disabled-color;
+@wait-title-color: @text-color-secondary;
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @process-tail-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @text-color;
+@finish-description-color: @text-color-secondary;
+@finish-tail-color: @primary-color;
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @wait-tail-color;
+@steps-nav-active-color: @primary-color;
+
+.@{steps-prefix-cls} {
+  .reset-component;
+
+  display: flex;
+  width: 100%;
+  font-size: 0;
+  text-align: initial;
+}
+
+.@{steps-prefix-cls}-item {
+  position: relative;
+  display: inline-block;
+  flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+
+  &-container {
+    outline: none;
+  }
+
+  &:last-child {
+    flex: none;
+  }
+
+  &:last-child > &-container > &-tail,
+  &:last-child > &-container > &-content > &-title::after {
+    display: none;
+  }
+
+  &-icon,
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-icon {
+    width: @steps-icon-size;
+    height: @steps-icon-size;
+    margin: @steps-icon-margin;
+    font-size: @steps-icon-font-size;
+    font-family: @font-family;
+    line-height: @steps-icon-size;
+    text-align: center;
+    border: @border-width-base @border-style-base @wait-icon-color;
+    border-radius: @steps-icon-size;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    .@{steps-prefix-cls}-icon {
+      position: relative;
+      top: @steps-icon-top;
+      color: @primary-color;
+      line-height: 1;
+    }
+  }
+  &-tail {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 100%;
+    padding: 0 10px;
+
+    &::after {
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      background: @border-color-split;
+      border-radius: 1px;
+      transition: background 0.3s;
+      content: '';
+    }
+  }
+  &-title {
+    position: relative;
+    display: inline-block;
+    padding-right: 16px;
+    color: @text-color;
+    font-size: @font-size-lg;
+    line-height: @steps-title-line-height;
+
+    &::after {
+      position: absolute;
+      top: @steps-title-line-height / 2;
+      left: 100%;
+      display: block;
+      width: 9999px;
+      height: 1px;
+      background: @wait-tail-color;
+      content: '';
+    }
+  }
+  &-subtitle {
+    display: inline;
+    margin-left: 8px;
+    color: @text-color-secondary;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
+  &-description {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+  .step-item-status(wait);
+  .step-item-status(process);
+  &-process &-icon {
+    background: @process-icon-color;
+    .@{steps-prefix-cls}-icon {
+      color: @process-icon-text-color;
+    }
+  }
+  &-process &-title {
+    font-weight: 500;
+  }
+  .step-item-status(finish);
+  .step-item-status(error);
+
+  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+    background: @error-icon-color;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ===================== Clickable =====================
+.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
+  &:not(.@{steps-prefix-cls}-item-active) {
+    & > .@{steps-prefix-cls}-item-container[role='button'] {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item {
+        &-title,
+        &-subtitle,
+        &-description,
+        &-icon .@{steps-prefix-cls}-icon {
+          transition: color 0.3s;
+        }
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item {
+          &-title,
+          &-subtitle,
+          &-description {
+            color: @primary-color;
+          }
+        }
+      }
+    }
+
+    &:not(.@{steps-prefix-cls}-item-process) {
+      & > .@{steps-prefix-cls}-item-container[role='button']:hover {
+        .@{steps-prefix-cls}-item {
+          &-icon {
+            border-color: @primary-color;
+
+            .@{steps-prefix-cls}-icon {
+              color: @primary-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
+  .@{steps-prefix-cls}-item {
+    padding-left: 16px;
+    white-space: nowrap;
+
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child .@{steps-prefix-cls}-item-title {
+      padding-right: 0;
+    }
+    &-tail {
+      display: none;
+    }
+    &-description {
+      max-width: @steps-desciption-max-width;
+      white-space: normal;
+    }
+  }
+}
+
+.step-item-status(@status) {
+  @icon-color: '@{status}-icon-color';
+  @title-color: '@{status}-title-color';
+  @description-color: '@{status}-description-color';
+  @tail-color: '@{status}-tail-color';
+  &-@{status} &-icon {
+    background-color: @steps-background;
+    border-color: @@icon-color;
+    > .@{steps-prefix-cls}-icon {
+      color: @@icon-color;
+      .@{steps-prefix-cls}-icon-dot {
+        background: @@icon-color;
+      }
+    }
+  }
+  &-@{status} > &-container > &-content > &-title {
+    color: @@title-color;
+    &::after {
+      background-color: @@tail-color;
+    }
+  }
+  &-@{status} > &-container > &-content > &-description {
+    color: @@description-color;
+  }
+  &-@{status} > &-container > &-tail::after {
+    background-color: @@tail-color;
+  }
+}
+
+@import 'custom-icon';
+@import 'small';
+@import 'vertical';
+@import 'label-placement';
+@import 'progress-dot';
+@import 'nav';
+@import './rtl';
+@import './progress.less';

package/antd/es/steps/style/label-placement.less

@@ -0,0 +1,39 @@
+.@{steps-prefix-cls}-label-vertical {
+  .@{steps-prefix-cls}-item {
+    overflow: visible;
+    &-tail {
+      margin-left: 58px;
+      padding: 3.5px 24px;
+    }
+    &-content {
+      display: block;
+      width: (@steps-icon-size / 2 + 42px) * 2;
+      margin-top: 8px;
+      text-align: center;
+    }
+    &-icon {
+      display: inline-block;
+      margin-left: 42px;
+    }
+    &-title {
+      padding-right: 0;
+      padding-left: 0;
+      &::after {
+        display: none;
+      }
+    }
+    &-subtitle {
+      display: block;
+      margin-bottom: 4px;
+      margin-left: 0;
+      line-height: @line-height-base;
+    }
+  }
+  &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
+    .@{steps-prefix-cls}-item {
+      &-icon {
+        margin-left: 46px;
+      }
+    }
+  }
+}

package/antd/es/steps/style/nav.less

@@ -0,0 +1,124 @@
+.@{steps-prefix-cls}-navigation {
+  padding-top: 12px;
+
+  &.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-item {
+      &-container {
+        margin-left: -12px;
+      }
+    }
+  }
+
+  .@{steps-prefix-cls}-item {
+    overflow: visible;
+    text-align: center;
+
+    &-container {
+      display: inline-block;
+      height: 100%;
+      margin-left: -16px;
+      padding-bottom: 12px;
+      text-align: left;
+      transition: opacity 0.3s;
+
+      .@{steps-prefix-cls}-item-content {
+        max-width: @steps-nav-content-max-width;
+      }
+
+      .@{steps-prefix-cls}-item-title {
+        max-width: 100%;
+        padding-right: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    &:not(.@{steps-prefix-cls}-item-active) {
+      .@{steps-prefix-cls}-item-container[role='button'] {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.85;
+        }
+      }
+    }
+
+    &:last-child {
+      flex: 1;
+      &::after {
+        display: none;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-top: -14px;
+      margin-left: -2px;
+      border: 1px solid @steps-nav-arrow-color;
+      border-bottom: none;
+      border-left: none;
+      transform: rotate(45deg);
+      content: '';
+    }
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      display: inline-block;
+      width: 0;
+      height: 2px;
+      background-color: @steps-nav-active-color;
+      transition: width 0.3s, left 0.3s;
+      transition-timing-function: ease-out;
+      content: '';
+    }
+  }
+
+  .@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before {
+    left: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: @screen-xs) {
+  .@{steps-prefix-cls}-navigation {
+    > .@{steps-prefix-cls}-item {
+      margin-right: 0 !important;
+      &::before {
+        display: none;
+      }
+      &.@{steps-prefix-cls}-item-active::before {
+        top: 0;
+        right: 0;
+        left: unset;
+        display: block;
+        width: 3px;
+        height: calc(100% - 24px);
+      }
+      &::after {
+        position: relative;
+        top: -2px;
+        left: 50%;
+        display: block;
+        width: 8px;
+        height: 8px;
+        margin-bottom: 8px;
+        text-align: center;
+        transform: rotate(135deg);
+      }
+      > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+        visibility: hidden;
+      }
+    }
+  }
+}

package/antd/es/steps/style/progress-dot.less

@@ -0,0 +1,79 @@
+.@{steps-prefix-cls}-dot,
+.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
+  .@{steps-prefix-cls}-item {
+    &-title {
+      line-height: @line-height-base;
+    }
+    &-tail {
+      top: @steps-dot-top;
+      width: 100%;
+      margin: 0 0 0 @steps-desciption-max-width / 2;
+      padding: 0;
+
+      &::after {
+        width: ~'calc(100% - 20px)';
+        height: 3px;
+        margin-left: 12px;
+      }
+    }
+    &:first-child .@{steps-prefix-cls}-icon-dot {
+      left: 2px;
+    }
+    &-icon {
+      width: @steps-dot-size;
+      height: @steps-dot-size;
+      margin-left: 67px;
+      padding-right: 0;
+      line-height: @steps-dot-size;
+      background: transparent;
+      border: 0;
+
+      .@{steps-prefix-cls}-icon-dot {
+        position: relative;
+        float: left;
+        width: 100%;
+        height: 100%;
+        border-radius: 100px;
+        transition: all 0.3s;
+        /* expand hover area */
+        &::after {
+          position: absolute;
+          top: -12px;
+          left: -26px;
+          width: 60px;
+          height: 32px;
+          background: fade(@black, 0.1%);
+          content: '';
+        }
+      }
+    }
+    &-process .@{steps-prefix-cls}-item-icon {
+      position: relative;
+      top: -1px;
+      width: @steps-current-dot-size;
+      height: @steps-current-dot-size;
+      line-height: @steps-current-dot-size;
+    }
+  }
+}
+
+.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
+  .@{steps-prefix-cls}-item-icon {
+    margin-top: 8px;
+    margin-left: 0;
+    background: none;
+  }
+  // https://github.com/ant-design/ant-design/issues/18354
+  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+    top: 2px;
+    left: -9px;
+    margin: 0;
+    padding: 22px 0 4px;
+  }
+  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
+    left: 0;
+  }
+  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
+    left: -2px;
+  }
+}

package/antd/es/steps/style/progress.less

@@ -0,0 +1,21 @@
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+
+.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation) {
+  &:not(.@{steps-prefix-cls}-vertical) {
+    .@{steps-prefix-cls}-item {
+      padding-top: 4px;
+    }
+  }
+  .@{steps-prefix-cls}-item {
+    .@{steps-prefix-cls}-item-icon {
+      position: relative;
+      .@{progress-prefix-cls} {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+      }
+    }
+  }
+}