amis2/scss/components/_tabs.scss

.#{$ns}Tabs {
  &-linksContainer {
    position: relative;

    &-arrow {
      height: 100%;
      display: flex;
      align-items: center;
      top: 0;
      cursor: pointer;
      position: absolute;
      .iconfont {
        font-size: var(--Remark-icon-fontSize);
      }
      &:hover {
        color: var(--icon-onHover-color);
      }
    }
    &-arrow--left {
      left: 4px;
    }
    &-arrow--right {
      right: 4px;
    }
    &-arrow--disabled {
      .iconfont {
        cursor: not-allowed;
        color: var(--Number-handler-onDisabled-color);
      }
      &:hover {
        color: var(--Number-handler-onDisabled-color);
      }
    }
    &-main {
      overflow-y: auto;
      scrollbar-width: none;
      width: 100%;
      &::-webkit-scrollbar {
        display: none;
      }
      > .#{$ns}Tabs-links {
        white-space: nowrap;
        min-width: 100%;
        display: inline-block;
      }
    }
  }
  .#{$ns}Tabs-linksContainer--overflow {
    padding: 0 20px;
  }
  &-links {
    margin: 0;
    padding: 0;
    border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
    list-style: none;
    user-select: none;
    @include clearfix();

    > .#{$ns}Tabs-link {
      margin-bottom: calc(var(--Tabs-borderWidth) * -1);
      display: inline-block;
      position: relative;

      > a:first-child {
        font-size: var(--Tabs-linkFontSize);
        outline: none;
        border: var(--Tabs-borderWidth) solid transparent;
        border-top-left-radius: var(--Tabs-borderRadius);
        border-top-right-radius: var(--Tabs-borderRadius);
        color: var(--Tabs-color);
        margin: var(--Tabs-linkMargin);
        padding: var(--Tabs-linkPadding);
        text-decoration: none;
        cursor: pointer;
        display: block;
      }

      > .#{$ns}Combo-toolbarBtn {
        position: absolute;
        right: -10px;
        top: -10px;
        z-index: 10;
        display: none;
      }

      &:hover > .#{$ns}Combo-toolbarBtn {
        display: block;
      }

      &:hover > a:first-child,
      > a:first-child:focus {
        border-color: var(--Tabs-onHover-borderColor);
        text-decoration: none;
      }

      &.disabled,
      &.is-disabled {
        cursor: not-allowed;

        > a:first-child {
          color: var(--Tabs-onDisabled-color);
          background: transparent;
          border-color: transparent;
          pointer-events: none;
        }
      }

      &.active > a:first-child,
      &.is-active > a:first-child {
        color: var(--Tabs-onActive-color);
        background: var(--Tabs-onActive-bg);
        border-color: var(--Tabs-onActive-borderColor);
        border-bottom-color: transparent;
      }
    }
  }

  &-content {
    background: var(--Tabs-content-bg);
    border-style: solid;
    border-width: 0 var(--Tabs-borderWidth) var(--Tabs-borderWidth);
    border-color: var(--Tabs-borderColor);
  }

  &-pane {
    display: none;
    padding: var(--gap-base);
    opacity: 0;
    transition: opacity var(--animation-duration) linear;

    &.is-active {
      display: block;
    }

    &.in {
      opacity: 1;
    }
  }

  &--line {
    > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-arrow {
      top: -4px;
    }

    > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
      border-bottom-color: var(--Tabs--line-borderColor);

      > li {
        > a:first-child {
          border-width: 0 0 var(--Tabs--line-borderWidth) 0;
          padding: var(--Tabs--line-linkPadding);
          margin: var(--Tabs--line-linkMargin);

          &:hover,
          &:focus {
            color: var(--primary);
            background: transparent;
            border-color: transparent;
          }
        }

        &:last-child {
          > a {
            margin: 0;
          }
        }

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            border-color: var(--Tabs--line-onHover-borderColor);
            color: var(--Tabs--line-onHover-color);
            background: transparent;
          }
        }
      }
    }

    > .#{$ns}Tabs-content {
      border-width: 0;
      padding: var(--Tabs--line-content-padding);
      background: var(--Tabs--line-content-bg);
    }
  }

  &--card {
    > .#{$ns}Tabs-linksContainer {
      background: var(--Tabs--card-bg);
    }
    > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
      padding: var(--Tabs--card-padding);
      background: var(--Tabs--card-bg);
      border-top: px2rem(1px) solid var(--Tabs--card-borderTopColor);

      > li {
        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            border-color: var(--Tabs--card-onActive-borderColor);
            color: var(--primary);
            border-bottom-color: var(--Tabs--card-onActive-bg);
            background: var(--Tabs--card-onActive-bg);
          }
        }

        > a:first-child {
          padding: var(--Tabs--card-linkPadding);
          margin: var(--Tabs--card-linkMargin);

          &:hover,
          &:focus {
            color: #666;
            background: var(--Tabs--card-onActive-bg);
            border-bottom-color: transparent;
          }
        }
      }
    }

    > .#{$ns}Tabs-content {
      border-width: 0;
    }
  }

  &--radio {
    > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-arrow {
      top: -4px;
    }
    > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
      border: 0;
      margin-bottom: px2rem(10px);

      > li {
        margin: 0;

        > a:first-child {
          border-width: px2rem(1px);
          border-color: var(--Tabs-borderColor);
          font-size: var(--fontSizeSm);
          text-align: center;
          margin: 0;
          padding: 0 px2rem(10px);
          min-width: 68px;
          height: px2rem(30px);
          line-height: px2rem(30px);
          border-radius: 0;
          background: var(--Tabs--radio-bg);

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

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            color: var(--Tabs--radio-bg);
            background: var(--primary);
            border-color: var(--primary);
            position: relative;
            z-index: 1;
          }
        }
      }

      > li + li {
        margin-left: -1px;
      }
    }

    > .#{$ns}Tabs-content {
      border-top: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
    }
  }

  // todo 第一个选中，有一像素的空隙待修复。
  // 不带眼镜应该看不出来。
  &--tiled {
    > .#{$ns}Tabs-links, > .#{$ns}Tabs-linksContainer > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
      width: 100%;
      display: flex;
      flex-direction: row;
      padding-left: var(--Tabs-borderWidth);
      border-bottom: 0;

      > li {
        flex-grow: 1;
        text-align: center;
        margin: 0 0 0 calc(var(--Tabs-borderWidth) * -1);

        > a:first-child {
          margin: 0;
          border-radius: 0;
          border-style: solid;
          border-color: var(--Tabs-borderColor);
          border-width: var(--Tabs-borderWidth);

          &:hover,
          &:focus {
            position: relative;
            z-index: 1;
            border-color: var(--Tabs-onActive-borderColor);
            color: var(--primary);
          }
        }

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            cursor: default;
            color: var(--primary);
            border-color: var(--Tabs-borderColor);
            border-top-color: var(--primary);
            border-bottom-color: transparent;
          }
        }
      }
    }
  }

  &--vertical {
    display: flex;
    min-height: px2rem(200px);
    border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
    border-radius: 0;

    > .#{$ns}Tabs-links {
      width: var(--Tabs--vertical-width);
      background: var(--Tabs--vertical-onActive-container-bg);
      border: none;
      border-right: var(--Tabs--vertical-onActive-container-borderRight);
      padding-bottom: px2rem(60px);

      > li {
        margin: 0 0 0 -1px;
        display: block;

        > a:first-child {
          border-color: transparent;
          border-radius: 0;
          border-width: var(--Tabs--vertical-onActive-borderWidth);
          margin: 0;

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

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            color: var(--Tabs--vertical-onActive-color);
            background: var(--Tabs--vertical-onActive-bg);
            border-color: var(--Tabs--vertical-onActive-border);
          }
        }
      }
    }

    > .#{$ns}Tabs-content {
      border: none;
      flex-grow: 1;

      > .#{$ns}Tabs-pane {
        height: 100%;
      }
    }
  }

  &--chrome {
    > .#{$ns}Tabs-links {
      background: var(--Tabs--chrome-bg);
      border-bottom: 0;
      padding: 0 px2rem(10px);
      padding-top: px2rem(8px);
      display: flex;
      > li {
        position: relative;
        margin-bottom: 0;
        white-space: nowrap;
        min-width: 0;
        max-width: px2rem(250px);
        padding: px2rem(7px) px2rem(20px) px2rem(6px);
        cursor: pointer;
        flex: 1;

        > a:first-child {
          background: none;
          border: none;
          position: relative;
          z-index: 5;
          overflow: hidden;
          padding: 0;
        }

        &.is-active {
          > a:first-child,
          > a:first-child:hover,
          > a:first-child:focus {
            background: none;
            border: none;
          }
          &:after {
            display: none;
          }
        }

        &:after {
          content: '';
          width: 1px;
          height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
          position: absolute;
          right: -2px;
          background: var(--Tabs--chrome-right-boder-color);
          top: var(--Tabs--chrome-radius-size)
        }

        &:hover {
          .chrome-tab-background {
            z-index: 3;
            display: block;
            background-color: var(--Tabs--chrome-onHover-bg);
          }
          .chrome-tab-background > svg {
            fill: var(--Tabs--chrome-onHover-bg);
          }
          &:after {
            display: none;
          }
        }

        &.is-active {
          .chrome-tab-background {
            display: block;
            background-color: var(--Tabs-onActive-bg);
          }
          .chrome-tab-background > svg {
            fill: var(--Tabs-onActive-bg);
          }
        }
      }
    }
    .chrome-tab-background {
      display: none;
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0;
      > svg {
        width: var(--Tabs--chrome-radius-size);
        height: var(--Tabs--chrome-radius-size);
        bottom: 0;
        position: absolute;
      }
      > .chrome-tab-background--right {
        right: calc(var(--Tabs--chrome-radius-size) * -1);
      }
      > .chrome-tab-background--left {
        left: calc(var(--Tabs--chrome-radius-size) * -1);
      }
    }
  }

  &-toolbar {
    display: inline-block;
    float: right;
    padding-top: var(--gap-xs);
  }
}