views/style/sass/lib/nav.scss

/************************* NAV *************************/

@import "../bootstrap/bootstrap/_variables.scss";

#sidebar-wrapper {
  -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    3px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         3px 0px 5px 0px rgba(50, 50, 50, 0.75);

  .logo{
    max-width: 100%;
  }

  a {
    font-weight: bold;
  }

  // ICONS
  .icon-app {
    background-image: url("opencloudApp.png");
  }
  .icon-home {
    /*  Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
    background-image: url("Home.png");
  }
  .icon-deployment{
    background-image: url("Deployments.png");
  }
  .icon-site{
    background-image: url("Sites.png");
  }
  .icon-slice{
    background-image: url("Slices.png");
  }
  .icon-user{
    background-image: url("Users.png");
  }
  .icon-reservation{
    background-image: url("Reservations.png");
  }
  .icon-cog{
    background-image: url("Services.png");
  }

  // ACTIVE ICONS
  li.active a,
  li.focus a {
    .icon-home{
      background-image: url("Home_over.png");
    }
    .icon-deployment{
      background-image: url("Deployments_over.png");
    }
    .icon-site{
      background-image: url("Sites_over.png");
    }
    .icon-slice{
      background-image: url("Slices_over.png");
    }
    .icon-user{
      background-image: url("Users_over.png");
    }
    .icon-reservation{
      background-image: url("Reservations_over.png");
    }
    .icon-cog{
      background-image: url("Services_over.png");
    }
  }

  li{
    ul.dashboard-list{


      li{

          float: none;
          position: relative;

          // Make the list-items overlay the bottom border

          // Actual tabs (as links)
          > a {
            position: relative;
            display: block;
            padding: $nav-link-padding;
            margin-right: 2px;
            line-height: $line-height-base;
            border: 1px solid transparent;
            border-radius: $border-radius-base $border-radius-base 0 0;
            &:hover,&:focus  {
              text-decoration: none;
              background-color: $nav-link-hover-bg;
            }
            cursor: pointer;

          }

          // Active state, and its :hover to override normal :hover
          &.active > a {
            &,
            &:hover,
            &:focus {
              border-radius: $nav-pills-border-radius;
              color: $nav-pills-active-link-hover-color;
              background-color: $nav-pills-active-link-hover-bg;
              cursor: pointer;
            }
          }

      }
    }
  }
  [class^="icon-"]{
    background-position: left center;
    width:22px;
    height:22px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 5px;
  }

}

/************************* END NAV *************************/