tdesign-react/esm/common/style/web/components/breadcrumb/_index.less

TDesign Component for React

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-breadcrumb {
  .reset;
  .breadcrumb;

  &__separator {
    margin: @breadcrumb-separator-margin;
    display: flex;
    align-items: center;

    .t-icon {
      color: @breadcrumb-icon-color-current;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    color: @breadcrumb-text-color-default;
    text-decoration: none;

    &.@{prefix}-is-current {
      color: @breadcrumb-text-color-current;

      .t-icon {
        color: @breadcrumb-icon-color-current;
      }
    }

    &:last-child {
      color: @breadcrumb-text-color-current;

      .@{prefix}-breadcrumb__separator {
        display: none;
      }
    }

    .t-icon {
      font-size: @breadcrumb-icon-size;
    }

    .@{prefix}-link {
      color: inherit;
      text-decoration: none;

      &:hover {
        color: @breadcrumb-text-color-hover;
      }
    }

    .@{prefix}-is-disabled {
      cursor: not-allowed;

      .@{prefix}-breadcrumb__inner {
        color: @breadcrumb-text-color-disabled;

        &:hover {
          color: @breadcrumb-text-color-disabled;
          cursor: not-allowed;
        }

        &:active {
          animation: none;
        }
      }
    }

    //箭头型
    &--arrow {
      margin: @breadcrumb-separator-margin;
      line-height: 0;
      color: @breadcrumb-icon-arrow-color-default;
      .v-inlineblock;
    }

    //斜杠型
    &--slash {
      margin: @breadcrumb-separator-margin;
      line-height: 0;
      color: @breadcrumb-icon-slash-color-default;
      .v-inlineblock;
    }
  }

  &__inner {
    font: @breadcrumb-font-base;
    word-break: break-all;
    .v-inlineblock;

    .t-icon {
      margin: @breadcrumb-separator-margin;
    }
  }

  //下拉框
  &__select {
    position: relative;

    &:hover {

      .@{prefix}-breadcrumb__option {
        display: block;
      }
    }

    &-item {
      &:hover {
        .t-icon {
          color: @breadcrumb-icon-color-hover;
        }
      }
    }
  }

  &__option {
    display: none;
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    max-width: @breadcrumb-option-max-width;
    background: @breadcrumb-option-box-bg;
    box-shadow: @breadcrumb-option-box-shadow;
    z-index: 20;

    &-item {
      padding: @spacer;
      font: @breadcrumb-font-base;
      color: @breadcrumb-text-color-current;
      .t-overflow;

      &:hover {
        color: @breadcrumb-text-color-hover;
      }

      &.@{prefix}-is-active {
        color: @breadcrumb-text-color-hover;
      }
    }
  }

  //文案超长
  &__inner-msg {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: @breadcrumb-inner-msg-width;
    padding: @spacer;
    color: @breadcrumb-text-color-current;
    background: @bg-color-container;
    border-radius: calc(@border-radius-default * .5);
    box-shadow: @breadcrumb-option-box-shadow;
    z-index: 20;

    &::before {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      margin-left: -4px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 6px 0;
      border-color: @bg-color-container transparent transparent transparent;
      z-index: 20;
    }
  }

  &--text-overflow {
    position: relative;
    display: flex;
    align-items: center;

    &:hover {

      .@{prefix}-breadcrumb__inner-msg {
        display: block;
      }
    }

    .@{prefix}-breadcrumb__inner {
      max-width: @breadcrumb-inner-max-width-default;
      display: flex;
      align-items: center;
      transition: color @anim-duration-base linear;

      &-text {
        .t-overflow;
      }

      &:hover {
        color: @breadcrumb-text-color-hover;
        cursor: pointer;
      }

      &:active {
        .color-change;
      }
    }
  }
}