views/style/sass/lib/nav.scss

/*
 * Copyright 2017-present Open Networking Foundation

 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at

 * http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


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

@import "../bootstrap/bootstrap/_variables.scss";
@import "./_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%;
    margin: $default-spacing auto;
  }

  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{
    a {
      transition: all .5s ease-in-out;
    }
    ul.dashboard-list{
      padding-left: $default-spacing;
      li{
        list-style: none;
        position: relative;
        margin-top: $default-spacing / 4;
        margin-bottom: $default-spacing / 4;
        margin-left: $default-spacing;

        &:before {
          display: inline-block;
          font-size: 2em;
          font-weight: 200;
          position: absolute;
          top: 15px;
          left: -15px;
          line-height: 0;
          content: '-';
          background-color: $nav-pills-active-link-hover-bg;
        }
        // Actual tabs (as links)
        > a {
          cursor: pointer;
          display: block;
          padding: 5px 0px;
          margin-right: 0;
          border-radius: $nav-pills-border-radius;
          > img {
            width:20px;
          }
          &:hover,&:focus  {
            padding-left: 15px;
            text-decoration: none;
            background-color: $nav-link-hover-bg;
          }
        }

        // Active state, and its :hover to override normal :hover
        &.active > a {
          padding-left: 15px;
          color: $nav-pills-active-link-hover-color;
          background-color: lighten($nav-pills-active-link-hover-bg, 5%);
        }
      }
    }
  }
  [class^="icon-"]{
    background-position: left center;
    width:22px;
    height:22px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: 5px;
  }

  .glyphicon-arrow-right{
    display: none;
  }
}

#wrapper.collapsed {

  padding-left: 60px;

  #sidebar-wrapper {
    width: 60px;

    a>span, .logo, .dashboard-list{
      display: none;
    }

    a{
      padding: 10px;
    }

    .glyphicon-arrow-left{
      display: none;
    }
    .glyphicon-arrow-right{
      display: block;
    }
  }    
}

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