ant-design-vue/components/tabs/style/position.less

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

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

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

      &::before {
        position: absolute;
        right: 0;
        left: 0;
        border-bottom: @border-width-base @border-style-base @border-color-split;
        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: 30px;
        }

        &::before {
          left: 0;
          box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
        }

        &::after {
          right: 0;
          box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
        }

        &.@{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-vertical-padding;
        text-align: center;
      }

      .@{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: 30px;
        }

        &::before {
          top: 0;
          box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
        }

        &::after {
          bottom: 0;
          box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
        }

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

      // >>>>>>>>>>> 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;
      }
    }
  }

  &-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;
      }
    }
  }
}