@difizen/mana-react/es/tabs/styles/position.less

@import '../../styles/variables.less';


@tab-prefix-cls: ~'@{mana-prefix}-tabs';

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

    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      margin: 0;
      background-color: var(--mana-sideBar-background);

      &::before {
        position: absolute;
        right: 0;
        left: 0;
        border-bottom: 0;
        content: '';
      }

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

        &-animated {
          transition: width 0.3s, left 0.3s,
            right 0.3s;
        }
      }

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

        &::before {
          left: 0;
        }

        &::after {
          right: 0;
        }

        &.@{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 {
        top: 0;
      }

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

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

      &::before {
        bottom: 0;
      }

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

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
      background-color: var(--mana-editor-background);
    }
  }

  // ========================== Left & Right ==========================
  &-left,
  &-right {
    > .@{tab-prefix-cls}-nav,
    > div > .@{tab-prefix-cls}-nav {
      flex-direction: column;
      min-width: 50px;
      padding: 8px 0;
      background-color: var(--mana-activityBar-background);
      border-right: 1px solid var(--mana-activityBar-border);

      // >>>>>>>>>>> Tab
      .@{tab-prefix-cls}-tab {
        justify-content: center;
        width: 48px;
        max-width: 48px;
        height: 48px;
        padding: 0;
        text-align: center;
      }

      .@{tab-prefix-cls}-tab-btn {
        color: var(--mana-activityBar-inactiveForeground);

        &:hover {
          color: var(--mana-activityBar-foreground);
        }

        .anticon {
          font-size: 24px;
        }
      }

      .anticon {
        margin: 0;
        font-size: var(--mana-sidebar-icon-size);
      }

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

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

        &::before,
        &::after {
          right: 0;
          left: 0;
          height: 30px;
        }

        &::before {
          top: 0;
        }

        &::after {
          bottom: 0;
        }

        &.@{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: 3px;

        &-animated {
          transition: height 0.3s, top 0.3s;
        }
      }

      .@{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 {
        left: 0;
      }
    }

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      margin-left: -1px;
      background-color: var(--mana-sideBar-background);
      border-left: 1px solid hsv(0, 0, 94%);

    }
  }

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

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

    > .@{tab-prefix-cls}-content-holder,
    > div > .@{tab-prefix-cls}-content-holder {
      order: 0;
      margin-right: -1px;
      background-color: var(--mana-sideBar-background);
      border-right: 1px solid hsv(0, 0, 94%);

    }
  }
}