rsuite/Nav/styles/index.less

A suite of react components

@import '../../styles/common';
@import '../../internals/Ripple/styles/mixins';
@import '../../Dropdown/styles/index';

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

// Base class
// --------------------------------------------------
.rs-nav {
  position: relative;
  outline: 0;

  // Rest dropdown height
  .rs-dropdown > .rs-dropdown-toggle {
    height: 36px;
    vertical-align: bottom;
  }

  // Ripple
  .rs-nav-default &-item,
  .rs-nav-tabs &-item {
    .with-ripple();

    transition: @nav-item-transition;
  }
}

// Nav item
.rs-nav-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--rs-navs-text);
  background: transparent;
  transition: @nav-item-transition;
  .ellipsis-basic();
  .safari-border-radius-overflow-hidden();

  outline: none;
  .reset-link-text-decoration(none);

  .high-contrast-mode({
    transition: none;
  });

  &:hover,
  &:focus,
  &&-focus {
    color: var(--rs-navs-text-hover);

    .high-contrast-mode({
      text-decoration: underline;
    });
  }

  &:focus-visible {
    .focus-ring(slim);

    z-index: 2;
  }

  &:active {
    color: var(--rs-navs-text-active);

    .high-contrast-mode({
      text-decoration: underline;
    });
  }

  &.rs-nav-item-disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--rs-text-disabled);
  }

  &.rs-nav-item-active {
    position: relative;
    color: var(--rs-navs-selected);
    z-index: 1;

    .high-contrast-mode({
      text-decoration: underline;
    });
  }

  &-icon {
    margin-right: 6px;
  }

  &-caret {
    font-size: 16px;
    vertical-align: text-bottom;
    margin-left: 6px;
  }
}

// Orientations
.rs-nav-horizontal {
  white-space: nowrap;

  > .rs-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
  }

  // Waterline
  .rs-nav-bar {
    position: absolute;
    bottom: 0;
    width: 100%;

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

.rs-nav-vertical {
  > .rs-nav-item {
    display: flex;
    align-items: center;
  }

  > .rs-dropdown {
    width: 100%;

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

  // Waterline
  .rs-nav-bar {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    .rs-nav-reversed& {
      right: auto;
    }
  }
}

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

// Default Nav
.rs-nav-default {
  .rs-nav-item {
    border-radius: 6px;

    &:hover {
      background: var(--rs-navs-bg-hover);
    }
  }
}

// Tab Nav
.rs-nav-tabs {
  .rs-nav-item {
    &:hover,
    &:focus {
      background: var(--rs-navs-bg-hover);
    }

    &.rs-nav-item-active {
      border: 1px solid var(--rs-navs-tab-border);
      background-color: var(--rs-bg-card);
      z-index: 1;
    }
  }

  // Horizontal
  &.rs-nav-horizontal {
    //Nav content
    > .rs-nav-item,
    > .rs-dropdown .rs-dropdown-toggle {
      border-radius: 6px 6px 0 0;

      .rs-nav-reversed& {
        border-radius: 0 0 6px 6px;
      }
    }

    // ** Waterline
    .rs-nav-bar {
      border-top: 1px solid var(--rs-navs-tab-border);
    }

    // ** Active
    .rs-nav-item.rs-nav-item-active {
      border-bottom-width: 0;

      // Reversed
      .rs-nav-reversed& {
        border-bottom-width: 1px;
        border-top-width: 0;
      }
    }
  }

  // Vertical
  &.rs-nav-vertical {
    //Nav content
    > .rs-nav-item,
    > .rs-dropdown .rs-dropdown-toggle {
      border-radius: 6px 0 0 6px;

      .rs-nav-reversed& {
        border-radius: 0 6px 6px 0;
      }
    }

    // ** Waterline
    .rs-nav-bar {
      width: 1px;
      background: var(--rs-navs-tab-border);
    }

    // ** Active
    .rs-nav-item.rs-nav-item-active {
      border-right-width: 0;

      // Reversed
      .rs-nav-reversed& {
        border-right-width: 1px;
        border-left-width: 0;
      }
    }
  }
}

// Subtle Nav
.rs-nav-subtle {
  .rs-nav-item {
    position: relative;

    &:hover,
    &:focus {
      color: var(--rs-navs-selected);
    }

    &.rs-nav-item-active::before {
      content: '';
      position: absolute;
      background-color: var(--rs-navs-selected);
      display: block;
      z-index: 1;
    }
  }

  // Horizontal
  &.rs-nav-horizontal {
    //Waterline
    .rs-nav-bar {
      border-top: 2px solid var(--rs-navs-subtle-border);
    }

    // Active item
    .rs-nav-item.rs-nav-item-active::before {
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      // Reversed
      .rs-nav-reversed& {
        bottom: auto;
        top: 0;
      }
    }
  }

  // Vertical
  &.rs-nav-vertical {
    // Waterline
    .rs-nav-bar {
      width: 2px;
      background: var(--rs-navs-subtle-border);
    }

    // Active item
    .rs-nav-item.rs-nav-item-active::before {
      right: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      // Reversed
      .rs-nav-reversed& {
        right: auto;
        left: 0;
      }
    }
  }
}

// Pills Nav
.rs-nav-pills {
  display: inline-flex;
  background-color: var(--rs-navs-pills-bg);
  border-radius: 6px;
  padding: 4px;
  width: max-content;

  .rs-nav-item {
    border-radius: 6px;
    position: relative;
    padding: 4px 12px;
    color: var(--rs-navs-pills-item-color);

    &-active {
      background-color: var(--rs-navs-pills-item-active-bg);
      color: var(--rs-navs-pills-item-active-color);
      box-shadow: var(--rs-navs-pills-item-shadow);
    }

    &-disabled {
      color: var(--rs-navs-pills-item-disabled-color);
    }
  }

  &.rs-nav-vertical {
    flex-direction: column;

    .rs-nav-item {
      padding: 6px 12px;
      justify-content: center;
    }
  }
}

// Justified
.rs-nav-justified {
  display: flex;

  > .rs-nav-item,
  > .rs-dropdown {
    flex: 1 1 1%;
  }

  > .rs-dropdown .rs-dropdown-toggle {
    width: 100%;
    text-align: left;
  }
}