wetrade-design/es/tabs/style/position.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@tab-prefix-cls: ~'@{wd-prefix}-tabs';

.@{tab-prefix-cls} {
  // ========================== Top & Bottom ==========================
  &-top,
  &-bottom {
    flex-direction: column;

    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      margin: 0;

      &::before {
        position: absolute;
        right: 0;
        left: 0;
        border-bottom: @border-width-base @border-style-base @tabs-position-border-color;
        content: '';
      }

      .@{tab-prefix-cls}-ink-bar {
        height: 2px;

        &-animated {
          transition: width @animation-duration-slow, left @animation-duration-slow,
            right @animation-duration-slow;
        }
      }

      .@{tab-prefix-cls}-nav-wrap {
        &::before,
        &::after {
          top: 0;
          bottom: 0;
          width: @tabs-tab-nav-wrap-width;
        }

        // &::before {
        //   left: @tabs-tab-nav-wrap-before-left;
        //   box-shadow: @shadow-tab;
        // }

        &::after {
          right: @tabs-tab-nav-wrap-after-right;
          box-shadow: @shadow-tab;
        }

        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
          opacity: 1;
        }
        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
          opacity: 1;
        }
      }
    }
  }

  &-top {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      &::before {
        bottom: 0;
      }

      .@{tab-prefix-cls}-ink-bar {
        bottom: 0;
      }
    }
  }

  &-bottom {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      order: 1;
      margin-top: @margin-md;
      margin-bottom: 0;

      &::before {
        top: 0;
      }

      .@{tab-prefix-cls}-ink-bar {
        top: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
    }
  }

  // ========================== Left & Right ==========================
  &-left,
  &-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      flex-direction: column;
      min-width: 50px;

      // >>>>>>>>>>> Tab
      .@{tab-prefix-cls}-tab {
        padding: @tabs-right-tab-padding;
        text-align: center;
      }

      .@{tab-prefix-cls}-tab-last {
        margin: @tabs-right-tab-last-margin;
      }

      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
        margin: @tabs-vertical-margin;
      }

      // >>>>>>>>>>> Nav
      .@{tab-prefix-cls}-nav-wrap {
        flex-direction: column;

        &::before,
        &::after {
          right: 0;
          left: 0;
          height: @tabs-tab-nav-wrap-height;
        }

        &::before {
          top: @tabs-tab-nav-wrap-before-top;
          box-shadow: @shadow-tab;
        }

        &::after {
          bottom: @tabs-tab-nav-wrap-after-bottom;
          box-shadow: @shadow-tab;
        }

        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
          opacity: 1;
        }
        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
          opacity: 1;
        }
      }

      .@{tab-prefix-cls}-tab-active {
        & > div {
          color: @brand-primary;
        }
      }

      // >>>>>>>>>>> Ink Bar
      .@{tab-prefix-cls}-ink-bar {
        width: 2px;

        &-animated {
          transition: height @animation-duration-slow, top @animation-duration-slow;
        }
      }

      .@{tab-prefix-cls}-nav-list,
      .@{tab-prefix-cls}-nav-operations {
        flex: 1 0 auto; // fix safari scroll problem
        flex-direction: column;

        .@{tab-prefix-cls}-nav-add {
          margin-top: @tabs-right-nav-add-margin-top !important;
          margin-left: 0 !important;
        }

        .@{tab-prefix-cls}-nav-add {
          margin-left: 0 !important;
        }
      }
    }
  }

  &-left {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      .@{tab-prefix-cls}-ink-bar {
        right: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      margin-left: -@border-width-base;
      border-left: @border-width-base @border-style-base @border-color-split;

      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
        padding-left: @padding-lg;
      }
    }
  }

  &-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      order: 1;

      .@{tab-prefix-cls}-ink-bar {
        left: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
      margin-right: -@border-width-base;
      border-right: @border-width-base @border-style-base @border-color-split;

      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
        padding-right: @padding-lg;
      }
    }
  }
}