@c8y/style/styles/_navs.less

Styles for Cumulocity IoT applications

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;

  > li {
    position: relative;
    display: block;
    > a {
      position: relative;
      display: block;
      padding: @navlink-padding;
      color: @navlink-color-default;
      &:hover,
      &:focus {
        background-color: @navlink-background-hover;
        color: @navlink-color-hover;
        text-decoration: none;
      }
      &:focus {
        outline: 2px solid @component-color-focus;
        outline-offset: -2px;
        border-radius: @component-border-radius-focus;
      }
    }
    &.disabled > a {
      opacity: @component-disabled-opacity;
      &:hover,
      &:focus {
        cursor: @cursor-disabled;
      }
    }
  } // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @navlink-background-hover;
    }
  }
}

// Pills
.nav-pills {
  > li {
    float: left;
    // Links rendered as pills
    > a {
      margin: 0;
      padding: @nav-pills-padding;
      border-radius: @nav-pills-border-radius;
    }
    + li {
      margin-left: 2px;
    }
    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        background-color: @nav-pills-background-active;
        color: @nav-pills-color-active;
      }
    }
    &:focus {
      outline: 2px solid @component-color-focus;
      outline-offset: -2px;
      border-radius: @component-border-radius-focus;
    }
  }
}

// Stacked pills
.nav-stacked {
  > li {
    float: none;
    + li {
      margin-top: 2px;
      margin-left: 0;
    }
  }
}

.nav-justified {
  width: 100%;
  > li {
    float: none;
    flex: 1 1 auto;
    > a {
      text-align: center;
    }
  }
  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }
  @media (min-width: @screen-sm-min) {
    > li {
      > a {
        margin-bottom: 0;
      }
    }
  }
}