visualization-design/src/styles/tdesign.css

/* 字体图标和TDesign 命名冲突 */
.t-message__list div.t-message:before {
  content: none;
}

.t-input {
  font-size: 13px;

  &:hover,
  &.t-is-focused {
    border-color: var(--color-border-input);
  }

  &.t-is-error {
    box-shadow: none;
    border-color: var(--color-error);
  }

  &.t-input--prefix > .t-input__prefix {
    font-size: 12px;
    color: var(--color-desc);
  }

  .t-input__inner::-webkit-input-placeholder {
    color: transparent;
  }
}

.t-select > .t-tag:before {
  content: none;
}

.t-input--focused,
.t-textarea__inner:focus {
  box-shadow: none;
}

.t-select {
  &.t-is-active:not(.t-is-disabled):not(.t-no-border) {
    box-shadow: none;
  }
}

.t-select-option {
  &.button {
    background: none;
    color: var(--color);
  }

  & > * {
    width: 100%;
  }

  &.t-is-selected {
    background-color: var(--color-background-popup-hover);
    color: var(--color);
  }
}

.t-tree {
  min-width: 100%;
  width: max-content;

  .t-tree__item {
    line-height: 30px;
    height: 30px;
    padding-left: calc(var(--td-comp-margin-xxl) * (var(--level) + 0.4));

    &:hover {
      background-color: var(--color-background);
    }

    .t-tree__label {
      margin-left: 0;
    }

    &.t-is-active {
      background-color: var(--color-background);
      .t-tree__label {
        background: none;
        color: var(--color-primary);
      }
    }
  }

  .t-tree__icon:not(:empty):hover {
    i {
      color: var(--color-primary-hover);
    }

    &::after {
      background: none;
    }
  }
}

.t-tree__empty {
  font-size: 12px;
  margin-left: 16px;
}

.t-tree__item--open .t-icon {
  color: var(--color);
}

.t-color-picker__format-mode-select .t-select,
.t-color-picker__format-mode-select .t-input {
  background-color: var(--color-background-popup);
  border-color: var(--color-border-input);

  .t-fake-arrow {
    color: var(--color);
  }
}

.t-color-picker__format--item .input-group__item .t-input {
  background-color: var(--color-background-popup);
  border-color: var(--color-border-input);
  &:hover {
    border-color: var(--color-primary);
  }
}

.t-color-picker__select-options > .t-popup__content {
  box-shadow: none;
  border: 1px solid var(--color-border-input);
}

.t-dropdown {
  border-color: transparent;
}

.t-dropdown__menu-column {
  padding: 4px 0;
}

.t-dropdown__menu {
  padding: 10px 4px;
  background-color: var(--color-background-popup);
  border: none;

  .t-dropdown__item {
    padding: 0;
    background-color: transparent;

    .t-dropdown__item-text {
      display: block;
      padding: 0 16px;
      line-height: 32px;
      border-radius: 4px;

      &:hover {
        background-color: var(--color-background-popup-hover);
      }

      a {
        display: block;
        text-decoration: none;
        color: var(--color);

        label {
          font-size: 10px;
          background-color: #ff400030;
          color: var(--color-bland);
          padding: 0 6px;
          margin-left: 4px;
          border-radius: 2px;
        }
      }
    }
  }

  .t-divider {
    margin: 4px 0;
    width: 100%;
  }
}

.t-popup__content {
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: var(--border-radius);
  box-shadow: none;
  background-color: var(--color-background-popup);

  .t-color-picker__format {
    align-items: center;
  }

  ul {
    padding: 16px 4px;
    font-size: 12px;
    li {
      line-height: 30px;
      list-style: none;
      cursor: pointer;
      &:hover {
        color: var(--color-primary);
      }
    }
  }
}

.t-tooltip {
  .t-popup__content {
    font-size: 12px;
    padding: 2px 8px !important;
  }
}

.t-date-range-picker {
  width: 240px;
}

.t-table {
  font-size: 13px;

  th {
    background: #f7f8fa;
    color: #7f838c;
    border-color: #edeef0;
  }

  td {
    color: #474e59;
    border-color: #edeef0;
  }

  &.border-none {
    th {
      background: none !important;
      border: none;
    }
    td {
      border: none;
    }

    .t-table__row--selected {
      background-color: var(--color-primary-background);
    }
  }

  &.hide-checkbox {
    .t-table__cell-check {
      * {
        display: none;
      }
    }
  }
}

.t-alert__description {
  color: #002da0;
}

.t-button--variant-outline {
  background-color: transparent !important;
}

.input-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px;

  .t-input {
    padding-left: 32px;
    outline: none;
    border: none;
    background: var(--color-background-input);
    z-index: 0;
    height: 28px;
    input {
      color: var(--color);
      &::placeholder {
        color: var(--color-gray);
      }
    }
  }

  .btn {
    position: absolute;
    left: 28px;
    height: 32px;
    line-height: 30px;
    z-index: 1;
  }
}

.t-tag {
  display: inline-block;
}

.t-tabs__nav-container {
  &.t-is-top::after {
    background-color: var(--color-background-input);
  }
}

.t-tabs__nav-item-wrapper > div {
  display: none;
}

.t-tabs__nav-item {
  color: var(--color);

  &:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper {
    background: none;
    color: var(--color-primary);
  }
}

.t-color-picker__trigger {
  height: 30px;

  .t-input {
    height: 30px;
    border: 1px solid var(--color-border-input);
    padding: 0;
    background: none;

    & > .t-input__prefix {
      margin: 8px;
      width: 16px;
      height: 16px;
      border: 1px solid var(--color-border-input);
      border-radius: 2px;

      span {
        width: 16px;
        height: 16px;
        border: 1px solid var(--color-border-input);
      }
    }
  }

  &.w-full {
    .t-input--auto-width {
      min-width: 100%;
    }
  }

  &.simple {
    width: 16px;
    height: 16px;

    * .t-input--auto-width {
      min-width: 14px;
      width: 14px;
    }

    .t-input {
      height: 16px;
      border: none;
      padding: 0;
      background: none;

      & > .t-input__prefix {
        margin: 0;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-desc);
        border-radius: 3px;

        &:hover {
          border-color: var(--color-primary);
        }

        span {
          border: none;
          height: 12.4px;
          cursor: pointer;
        }
      }

      input {
        display: none;
      }
    }
  }
}

.t-radio-group {
  .t-radio-button {
    border-color: var(--color-border-input);
    &:last-child {
      border-right-color: var(--color-border-input);
    }

    &.t-is-checked {
      border-color: var(--color-border-input);
      background-color: var(--color-border-input);
      color: var(--td-text-color-primary) !important;
    }
  }
}

.rectangle.t-radio-group.t-radio-group--filled {
  background: none;

  .t-radio-group__bg-block {
    display: none;
  }

  label {
    width: 30px !important;
    margin-right: 12px;
    padding: 0;
    background-color: var(--color-background-popup);
    border-radius: 4px;
    &::before {
      content: none;
    }

    .t-radio-button__label {
      width: 100%;
      height: 100%;

      svg {
        width: 100%;
        height: 100%;
        padding: 4px;
      }
    }

    &.t-is-checked {
      background-color: var(--color-primary);
    }
  }
}

.t-message {
  color: #000000e6;
  background-color: #ffffff;
  padding: 10px 16px;
}

.t-popup__arrow {
  &::before {
    background-color: var(--color-background-popup);
    box-shadow: none;
  }
}

.t-popup[data-popper-placement^='top'] .t-popup__arrow::before {
  top: -4px;
}

.t-button--variant-base {
  color: #000000e6;

  &:hover {
    color: #000000e6;
  }

  &.t-button--theme-primary {
    color: #ffffff !important;
  }
}

.t-color-picker__trigger--default__color {
  background-color: transparent;
  background-image: linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    ),
    linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    );
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}