tntd 2.8.16 → 2.8.17

package/es/progress/progress.less

@@ -0,0 +1,82 @@
+@import '../style/themes/index.less';
+@import '../style/mixins/index';
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+.tnt-progress.@{progress-prefix-cls} {
+    .ant-progress-text{
+    //   font-family: PingFang SC;
+      font-weight: 500;
+    }
+    .ant-progress-cus-format-label{
+      .ant-progress-cus-format-label{
+        padding-bottom: 4px;
+      }
+    }
+    &-percent-bottom{
+        .ant-progress-outer{
+          padding-right: 0;
+        }
+        .ant-progress-text{
+          width: 100%;
+          display: block;
+          text-align: right;
+          margin-left: 0;
+        }
+    }
+    &-circle-progress{
+      .@{progress-prefix-cls}-cus-format{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    &-small-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .ant-progress-inner{
+        overflow:visible;
+      }
+      .tntd-ellipsis{
+        position: absolute;
+        bottom: -1.8em;
+        font-size: 0.75em;
+        // margin-bottom: 2px;
+        // color: #8B919E;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-large-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .tntd-ellipsis{
+        font-size: 0.55em;
+        // margin-bottom: 2px;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-small-half-circle{
+      .ant-progress-text{
+        height: 40%;
+      }
+      .tntd-ellipsis{
+        bottom: -1.5em;
+      }
+    }
+    &-large-half-circle{
+      .ant-progress-inner{
+        .ant-progress-text{
+          top: 42%
+        }
+      }
+    }
+}
+

package/es/query-form-backup/Field/Composition/FieldPopover.less

@@ -0,0 +1,35 @@
+.tnt-queryform-field-popover {
+  min-width: 280px;
+  .ant-popover-inner-content {
+    padding: @padding-sm 0;
+  }
+  .ant-calendar-picker {
+    margin: @margin-xxs 0;
+  }
+  label {
+    color: tint(@text-color, 50%);
+    margin-bottom: @margin-xs;
+    display: block;
+    padding: 0 @padding-sm;
+  }
+  .ant-select-dropdown-menu {
+    &-item {
+      padding: @padding-xxs @padding-sm;
+      &:hover {
+        background-color: @bg-color-quaternary;
+      }
+    }
+  }
+  &-content {
+    padding: @padding-xxs @padding-sm;
+  }
+  .ant-select-selected-icon {
+    position: absolute;
+    right: @margin-base;
+    top: @margin-xs;
+    color: @blue-6;
+  }
+  .tnt-highlight {
+    color: @blue-6;
+  }
+}

package/es/query-form-backup/Field/Composition/index.less

@@ -0,0 +1,114 @@
+@import '../../../style/themes/index';
+@import '../../../style/mixins/index';
+@import '../../../input/style/mixin';
+
+.tnt-queryform-composition-input {
+  // width: 100%;
+  max-height: 162px;
+  overflow-x: hidden;
+  cursor: text;
+  padding: 2px @padding-xl;
+  position: relative;
+  box-sizing: border-box;
+  background-color: @select-background;
+  border: @border-width-base @border-style-base @select-border-color;
+  border-top-width: calc(@border-width-base + 0.02px);
+  border-radius: @border-radius-base;
+  outline: none;
+  transition: all 0.3s @ease-in-out;
+  user-select: none;
+  margin-bottom: @margin-sm;
+
+  &-prefix {
+    position: absolute;
+    left: @padding-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+  }
+
+  &-width {
+    height: 0;
+    opacity: 0;
+    width: auto;
+    position: absolute;
+    max-width: 100%;
+  }
+
+  &-items {
+    float: left;
+    padding: 0;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    &-item {
+      padding: 3px 0;
+    }
+    li {
+      float: left;
+      line-height: 1;
+    }
+    &-input {
+      .inputClass {
+        background: none;
+        border: none !important;
+        outline: none;
+        box-shadow: none !important;
+        width: 150px !important;
+        height: 26px;
+        line-height: 26px;
+        padding: 0;
+        input {
+          border: none !important;
+          outline: none !important;
+          box-shadow: none !important;
+          height: 26px;
+          line-height: 26px;
+          padding: 0;
+        }
+        textarea {
+          padding: 0;
+        }
+      }
+      .inputClass-with-placeholder {
+        min-width: 398px !important;
+      }
+    }
+  }
+  &-clear {
+    position: absolute;
+    right: @margin-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+    &:hover {
+      .anticon {
+        color: @text-color-secondary !important;
+      }
+    }
+  }
+  &:hover {
+    border-color: @blue-6;
+    outline: 0;
+    .tnt-queryform-composition-input-clear {
+      display: block;
+    }
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  &:focus,
+  &:active {
+    border-color: @blue-5;
+    outline: 0;
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  .ant-tag {
+    padding: 0 @padding-xs;
+    border: none;
+    background: @fill-color-tertiary;
+  }
+}

package/es/query-form-backup/index.less

@@ -0,0 +1,90 @@
+.tnt-queryform {
+  &-top {
+    display: flex;
+    &-body {
+      flex: 1;
+      .ant-btn {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &-extra {
+    & > * {
+      margin-left: 10px;
+    }
+  }
+
+  .ant-form {
+    // margin-bottom: @margin-sm;
+    &.ant-form-inline {
+      flex-wrap: unset;
+      position: relative;
+    }
+
+    &.ant-form-inline .ant-form-item {
+      margin-right: 10px;
+      margin-bottom: @margin-sm;
+      display: inline-block;
+    }
+
+    .ant-form-item-control {
+      // min-width: 160px;
+      line-height: unset;
+      .ant-calendar-picker-input {
+        padding: 0 @padding-sm;
+      }
+      .ant-form-item-children {
+        & > .ant-input,
+        & > .ant-input-affix-wrapper {
+          width: 160px;
+          // width: 200px;
+        }
+      }
+    }
+  }
+
+  &-drawer {
+    margin-top: @margin-xxl;
+    &.large-size {
+      margin-top: 60px;
+    }
+
+    &.ant-drawer.ant-drawer-open {
+      .ant-drawer-mask {
+        opacity: 0;
+        background: unset;
+      }
+    }
+    .ant-drawer-body {
+      .ant-form-item {
+        display: block;
+        margin-right: 0;
+        margin-bottom: @margin-md;
+        width: 100%;
+      }
+      .ant-form-item-label {
+        display: block;
+        text-align: left;
+        line-height: 22px;
+        margin-bottom: 10px;
+      }
+      .ant-form-item-control-wrapper,
+      .ant-form-item-control,
+      .ant-calendar-picker,
+      .ant-input {
+        min-width: 100%;
+        width: 100%;
+      }
+
+      & > .ant-btn {
+        display: block;
+        width: 100%;
+        margin-bottom: 10px;
+        &.ant-btn-primary {
+          margin-top: @margin-md;
+        }
+      }
+    }
+  }
+}

package/es/radio/radio.less

@@ -0,0 +1,43 @@
+@radio-prefix-cls: ~'@{ant-prefix}-radio';
+@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
+
+// 选中状态
+.tnt-radio,
+.tnt-radio-group {
+  .@{radio-prefix-cls}-checked {
+    .@{radio-inner-prefix-cls} {
+      border-color: @radio-dot-color;
+      background-color: @radio-dot-color;
+      &::after {
+        @radio-dot-size: calc(@radio-size - 12px);
+
+        width: @radio-dot-size;
+        height: @radio-dot-size;
+        top: calc((@radio-size - @radio-dot-size) / 2 - 1px);
+        left: calc((@radio-size - @radio-dot-size) / 2 - 1px);
+        background-color: @radio-button-bg;
+      }
+    }
+
+    &.@{radio-prefix-cls}-disabled {
+      .@{radio-inner-prefix-cls} {
+        border-color: @checkbox-check-disabled-color !important;
+        background-color: @checkbox-check-disabled-color;
+      }
+    }
+  }
+}
+
+.tnt-radio {
+  & > span:nth-of-type(2) {
+    display: inline-block;
+  }
+  &-children {
+    display: flex;
+    flex-direction: column;
+  }
+  &-desc {
+    font-size: @font-size-sm;
+    color: @bg-color-spotilight-tint-50;
+  }
+}

package/es/spin/spin.less

@@ -0,0 +1,9 @@
+@spin-prefix-cls: ~'@{ant-prefix}-spin';
+.tnt-spin-nested{
+    .@{spin-prefix-cls}-container {
+        &::after{
+            content:'';
+            background-color: transparent;
+        }
+    }
+}

package/es/steps/assets/background_left.svg

@@ -0,0 +1,12 @@
+<svg width="162" height="77" viewBox="0 0 162 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Ellipse 27" filter="url(#filter0_f_5274_1997)">
+    <ellipse class="test" cx="36.5" cy="-21.5" rx="78.5" ry="51.5" fill="#126BFB" fill-opacity="0.15"/>
+</g>
+<defs>
+<filter id="filter0_f_5274_1997" x="-89" y="-120" width="251" height="197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23.5" result="effect1_foregroundBlur_5274_1997"/>
+</filter>
+</defs>
+</svg>

package/es/steps/assets/background_right.svg

@@ -0,0 +1,12 @@
+<svg width="131" height="80" viewBox="0 0 131 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Ellipse 28" filter="url(#filter0_f_5274_1888)">
+<circle cx="118" cy="100" r="71" fill="#126BFB" fill-opacity="0.08"/>
+</g>
+<defs>
+<filter id="filter0_f_5274_1888" x="0" y="-18" width="236" height="236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23.5" result="effect1_foregroundBlur_5274_1888"/>
+</filter>
+</defs>
+</svg>

package/es/steps/assets/horizontal_line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="2" viewBox="0 0 6 2" fill="none">
+    <path class="t1" d="M1.5 1H206" stroke="#C9D2DD"  stroke-width="2" stroke-linecap="round" stroke-dasharray="2 7"/>
+</svg>

package/es/steps/assets/vertical_line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="10" viewBox="0 0 2 6" fill="none">
+<path d="M1 1L0.999999 25" stroke="#C9D2DD" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6"/>
+</svg>

package/es/steps/stepStyle/icon.less

@@ -0,0 +1,51 @@
+.@{tnt-steps-cls}:not(.@{steps-prefix-cls}-dot).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        &-icon{
+            border: none;
+            font-weight: 500;
+            margin: 2px 12px 2px 0;
+            width: @td-steps-icon-size;
+            height: @td-steps-icon-size;
+            line-height: @td-steps-icon-size;
+            border-radius:@td-steps-icon-size;
+            >.@{steps-prefix-cls}-icon{
+                top:0;
+                i{
+                    font-size: @td-steps-icon-size;
+                    font-weight: normal;
+                }
+            }
+        }
+        &-finish.@{step-prefix-cls}-default-icon,
+        &-error.@{step-prefix-cls}-default-icon {
+            .@{steps-prefix-cls}-item-icon {
+                background-color: transparent;
+            }
+        }
+
+        &-wait.@{step-prefix-cls}-default-icon {
+            .@{steps-prefix-cls}-item-icon {
+                background-color: @fill-color-tertiary;
+            }
+        }
+    }
+
+   
+
+    &-small {
+        .@{steps-prefix-cls}-item{
+            &-icon{
+                width: @td-steps-small-icon-size;
+                height: @td-steps-small-icon-size;
+                line-height: @td-steps-small-icon-size;
+                border-radius:@td-steps-small-icon-size;
+                >.@{steps-prefix-cls}-icon{
+                    i{
+                        font-size: @td-steps-small-icon-size;
+                    }
+                }
+            }
+        }
+    }
+}
+

package/es/steps/stepStyle/progress-dot.less

@@ -0,0 +1,10 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot,
+.@{tnt-steps-cls}.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
+  .@{steps-prefix-cls}-item {
+    &-tail {
+        &::after {
+            height: 2px;
+        }
+    }
+  }
+}

package/es/steps/stepStyle/variables.less

@@ -0,0 +1,8 @@
+@td-steps-icon-size: 40px;
+@td-steps-small-icon-size: 24px;
+@td-steps-title-height: 24px;
+@td-steps-desc-height: 20px;
+@nav-min-height: 44px;
+@nav-small-min-height: 28px;
+@finish-border-color:  @primary-color;
+

package/es/steps/stepStyle/vertical.less

@@ -0,0 +1,41 @@
+.@{tnt-steps-cls}.@{steps-prefix-cls}-vertical:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-navigation):not(.@{steps-prefix-cls}-small).@{steps-prefix-cls}{
+    .@{steps-prefix-cls}-item{
+        &-icon  >.@{steps-prefix-cls}-icon{
+            i{
+                vertical-align: middle;
+            }
+        }
+
+        &-content {
+            min-height: 94px;
+        }
+
+        > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail{
+            padding: calc(@td-steps-icon-size + 15px) 0 15px;
+            left: 18px;
+            &::after{
+                width:0;
+                border-radius: 2px;
+                background-color: transparent;
+            }
+        }
+
+        &-finish > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+            &::after {
+                border-left: 2px solid @finish-border-color;
+            }
+        }
+
+        &-wait, &-error, &-process {
+            > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+                &::after {
+                  border-left: 2px solid transparent;
+                  background-color: @border-color;
+                  mask: url(../assets/vertical_line.svg) repeat-y 0 0;
+                  -webkit-mask:url(../assets/vertical_line.svg) repeat-y 0 0;
+                }
+            }
+        }
+    }
+}
+

package/es/switch/index.less

@@ -0,0 +1,45 @@
+@switch-prefix-cls: ~'@{ant-prefix}-switch';
+
+.@{switch-prefix-cls} {
+  &-small {
+    min-width: 36px;
+  }
+
+  &-checked {
+    &:hover {
+      background-color: @blue-5;
+    }
+  }
+
+  // &-disabled {
+  //   background-color: @blue-5;
+  // }
+
+  &-wrap {
+    display: flex;
+  }
+
+  &-text-wrap {
+    margin-left: @margin-xs;
+    font-weight: 400;
+  }
+
+  &-text {
+    font-size: 14px;
+    color: @text-color;
+  }
+
+  &-text-disabled {
+    color: @text-color-tertiary;
+  }
+
+  &-subtext {
+    font-size: 12px;
+    color: tint(@text-color, 50%);
+    line-height: 20px;
+  }
+
+  &-subtext-disabled {
+    color: @text-color-tertiary;
+  }
+}

package/es/tabs/tabs.less

@@ -0,0 +1,125 @@
+// Tabs 自定义梯形页签样式
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-ladder-card.@{tab-prefix-cls}-top {
+  padding: 0 12px;
+  position: relative;
+  left: -12px;
+  padding-bottom: 20px;
+
+  > .@{tab-prefix-cls}-top-bar {
+    border-bottom: none;
+    margin-bottom: 0;
+    .@{tab-prefix-cls}-tab {
+      // display: inline-block;
+      vertical-align: bottom;
+      // position: relative;
+      min-width: 106px;
+      height: 40px;
+      line-height: 40px;
+      border-top-left-radius: @border-radius-lg;
+      filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1));
+      box-shadow: 0px 0px 2px -5px rgba(0, 0, 0, 0.05);
+      border: none;
+      margin: 0px 30px 0px 0px;
+      padding: 0px 12px 0 48px;
+      // background: @fill-color-quaternary;
+      text-align: right;
+      // color: @text-color-secondary;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: -52px;
+        height: 100%;
+        width: 64px;
+        z-index: 1;
+        background: inherit;
+        clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z');
+      }
+
+      // 兼容clip-path 属性
+      @supports not (clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z')) {
+        & {
+          padding: 0px 22px 0 48px !important;
+          margin-right: 12px;
+        }
+        &::after {
+          top: 17px !important;
+          right: -54px !important;
+          width: 93px !important;
+          z-index: -1 !important;
+          height: 45px !important;
+          border-top-right-radius: 24px !important;
+          border-top-left-radius: 26px !important;
+          transform: rotate(50deg) !important;
+        }
+      }
+      @supports (clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z')) {
+        &::after {
+          clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z');
+        }
+      }
+    }
+    .@{tab-prefix-cls}-nav {
+      margin-top: 12px;
+      padding-left: 12px;
+    }
+    .@{tab-prefix-cls}-nav-container {
+      height: auto;
+      position: relative;
+      left: -12px;
+    }
+    // 鼠标选中时，active状态在上层
+    .@{tab-prefix-cls}-tab-active {
+      z-index: 99 !important;
+      background: @tabs-active-background;
+    }
+  }
+
+  & > .@{tab-prefix-cls}-content {
+    & > .@{tab-prefix-cls}-tabpane {
+      background: @white;
+      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+      padding: 20px 12px 12px;
+      border-bottom-right-radius: @border-radius-lg;
+      border-bottom-left-radius: @border-radius-lg;
+      border-top-right-radius: @border-radius-lg;
+    }
+  }
+}
+
+// // Tabs top类型 全局样式修改
+.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-top.@{tab-prefix-cls}-line {
+  .@{tab-prefix-cls}-nav-container {
+    margin-bottom: none;
+  }
+
+  .@{tab-prefix-cls}-tab {
+    border-bottom: 1px solid transparent;
+    margin-bottom: 1px;
+    height: 40px;
+    line-height: 37px;
+    padding: 2px 12px 0;
+  }
+}
+
+.tnt-tabs.@{tab-prefix-cls} {
+  .@{tab-prefix-cls}-nav {
+    .@{tab-prefix-cls}-tab {
+      color: @tabs-tab-color;
+      // 自定义图标默认都是 16px
+      i.anticon {
+        font-size: @font-size-lg;
+        margin-right: 4px;
+      }
+    }
+    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab-active {
+      color: @tabs-active-color;
+    }
+    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab:hover {
+      color: @tabs-hover-color;
+    }
+  }
+}