rsuite/src/Nav/styles/common.less

A suite of react components

@import '../../styles/common';
@import '../../Button/styles/mixin';

//
// Navs
// --------------------------------------------------

// Base class
// --------------------------------------------------
.@{ns}nav {
  position: relative;

  > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  // Nav item
  &-item {
    //:hover :focus :active
    &:not(.@{ns}nav-item-disabled) > .@{ns}nav-item-content {
      &:hover,
      &:focus {
        color: @nav-item-hover-font-color;
      }

      &:active {
        color: @nav-item-click-font-color;
      }
    }

    &.@{ns}nav-item-disabled {
      cursor: not-allowed;

      > .@{ns}nav-item-content {
        // Repair the cursor style is not the right questions.
        cursor: not-allowed;
        color: @B400;
      }
    }

    // Nav item content
    > .@{ns}nav-item-content {
      padding: @nav-item-padding-vertical @nav-item-padding-horizontal;
      font-size: @nav-item-font-size;
      line-height: @nav-item-line-height;
      display: block;
      cursor: pointer;
      color: @nav-item-font-default-color;
      transition: @nav-item-transition;
      .ellipsis-basic;

      .safari-border-radius-overflow-hidden;

      > .@{ns}icon {
        margin-right: @nav-item-icon-spacing;
      }
    }

    // reset link style
    > a.@{ns}nav-item-content:hover,
    > a.@{ns}nav-item-content:active,
    > a.@{ns}nav-item-content:focus {
      text-decoration: none;
    }
  }

  // Rest dropdown height
  .@{ns}dropdown > .@{ns}dropdown-toggle {
    height: @nav-base-height;
  }

  // Active
  .@{ns}dropdown .@{ns}dropdown-menu-active ~ .@{ns}dropdown-toggle,
  .@{ns}nav-item-active > .@{ns}nav-item-content {
    position: relative;
    z-index: 1;

    &,
    &:hover,
    &:focus,
    &:active {
      color: @nav-item-active-font-color;
      background: transparent;
    }
  }

  // Orientation
  &.@{ns}nav-horizontal {
    white-space: nowrap;

    // Justified
    &.@{ns}nav-justified {
      > ul {
        display: flex;
      }

      .@{ns}nav-item,
      .@{ns}dropdown {
        flex: 1 1 1%;
      }

      .@{ns}dropdown .@{ns}dropdown-toggle {
        width: 100%;
        text-align: left;
      }
    }

    .@{ns}dropdown,
    .@{ns}nav-item {
      display: inline-block;
      vertical-align: top;
    }

    // Waterline
    .@{ns}nav-waterline {
      position: absolute;
      bottom: 0;
      width: 100%;

      //** Reversed
      .@{ns}nav-reversed& {
        bottom: auto;
        top: 0;
      }
    }
  }

  &.@{ns}nav-vertical {
    // margin space
    ul > .@{ns}dropdown:not(:first-child),
    ul > .@{ns}nav-item:not(:first-child) {
      margin-top: @nav-item-spacing;
    }

    .@{ns}dropdown {
      width: 100%;

      > .@{ns}dropdown-toggle {
        width: 100%;
        text-align: left;
        z-index: 0;
      }
    }

    // Waterline
    .@{ns}nav-waterline {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;

      .@{ns}nav-reversed& {
        right: auto;
      }
    }
  }

  // Ripple
  .@{ns}nav-default &-item,
  .@{ns}nav-tabs &-item {
    .button-ripple(~'@{ns}nav-item-');

    transition: @nav-item-transition;
  }

  .@{ns}nav-default &-item .@{ns}ripple-pond {
    border-radius: inherit;
    overflow: hidden;
  }

  &-tabs &-item&-item-active {
    z-index: 1;
  }
}

// Alternate Navs
// --------------------------------------------------

// Default Nav
.@{ns}nav-default {
  .@{ns}nav-item > .@{ns}nav-item-content {
    border-radius: @nav-item-border-radius;
  }

  .@{ns}nav-item:not(.@{ns}nav-item-active):not(.@{ns}nav-item-disabled) > .@{ns}nav-item-content {
    &:hover,
    &:focus {
      background: @nav-item-default-hover-bg;
    }

    &:active {
      background: @nav-item-click-bg;
    }
  }
}

// Tab Nav
.@{ns}nav-tabs {
  //Default style
  //.@{ns}nav-item > .@{ns}nav-item-content {
  //  background-color: @nav-tab-default-bg;
  //}

  //:hover :active :focus
  .@{ns}nav-item:not(.@{ns}nav-item-active):not(.@{ns}nav-item-disabled) > .@{ns}nav-item-content {
    &:hover,
    &:focus {
      background: @nav-subtle-hover-bg;
    }

    &:active {
      background: @nav-item-click-bg;
    }
  }

  //** Active
  .@{ns}nav-item.@{ns}nav-item-active > .@{ns}nav-item-content {
    @padding-vertical: @nav-item-padding-vertical - @nav-tab-waterline-width;
    @padding-horizontal: @nav-item-padding-horizontal - @nav-tab-waterline-width;

    padding: @padding-vertical @padding-horizontal;
  }

  // Horizontal
  &.@{ns}nav-horizontal {
    //Nav content
    .@{ns}nav-item > .@{ns}nav-item-content {
      border-radius: @nav-item-border-radius @nav-item-border-radius 0 0;

      .@{ns}nav-reversed& {
        border-radius: 0 0 @nav-item-border-radius @nav-item-border-radius;
      }
    }

    //** Waterline
    .@{ns}nav-waterline {
      border-top: @nav-tab-waterline;
    }

    //** Active
    .@{ns}nav-item.@{ns}nav-item-active > .@{ns}nav-item-content {
      border: @nav-tab-waterline-width solid @nav-tab-waterline-color;
      border-bottom-color: @nav-tab-default-bg;

      // Reversed
      .@{ns}nav-reversed& {
        border-bottom-color: @nav-tab-waterline-color;
        border-top-color: @nav-tab-default-bg;
      }
    }
  }

  // Vertical
  &.@{ns}nav-vertical {
    //Nav content
    .@{ns}dropdown > .@{ns}dropdown-toggle,
    .@{ns}nav-item > .@{ns}nav-item-content {
      border-radius: @nav-item-border-radius 0 0 @nav-item-border-radius;

      .@{ns}nav-reversed& {
        border-radius: 0 @nav-item-border-radius @nav-item-border-radius 0;
      }
    }

    //** Waterline
    .@{ns}nav-waterline {
      width: @nav-tab-waterline-width;
      background: @nav-tab-waterline-color;
    }

    //** Active
    .@{ns}nav-item.@{ns}nav-item-active > .@{ns}nav-item-content {
      border: @nav-tab-waterline-width solid @nav-tab-waterline-color;
      border-right-color: @nav-tab-default-bg;

      // Reversed
      .@{ns}nav-reversed& {
        border-left-color: @nav-tab-default-bg;
        border-right-color: @nav-tab-waterline-color;
      }
    }
  }
}

// Subtle Nav
.@{ns}nav-subtle {
  // Horizontal
  &.@{ns}nav-horizontal {
    //Waterline
    .@{ns}nav-waterline {
      border-top: @nav-subtle-default-waterline;
    }

    // Active item
    .@{ns}nav-item {
      > .@{ns}nav-item-content {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          right: 50%;
          height: @nav-subtle-waterline-width;
          background-color: @nav-subtle-waterline-active-color;
          transition: left @nav-subtle-content-transition, right @nav-subtle-content-transition;

          // Reversed
          .@{ns}nav-reversed& {
            bottom: auto;
            top: 0;
          }
        }
      }

      &.@{ns}nav-item-active > .@{ns}nav-item-content::before {
        left: 0;
        right: 0;
      }
    }
  }

  // Horizontal
  &.@{ns}nav-vertical {
    //Waterline
    .@{ns}nav-waterline {
      width: @nav-subtle-waterline-width;
      background: @nav-subtle-waterline-default-color;
    }

    // Active item
    .@{ns}nav-item {
      > .@{ns}nav-item-content {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          bottom: 50%;
          width: @nav-subtle-waterline-width;
          background-color: @nav-subtle-waterline-active-color;
          transition: top @nav-subtle-content-transition, bottom @nav-subtle-content-transition;

          // Reversed
          .@{ns}nav-reversed& {
            right: auto;
            left: 0;
          }
        }
      }

      &.@{ns}nav-item-active > .@{ns}nav-item-content::before {
        top: 0;
        bottom: 0;
      }
    }
  }
}