blob: b71a7ae2b86fb9b4981b8ff0d47806d52de6aaf7 [file] [log] [blame]
/************************* 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%;
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;
}
}
/************************* END NAV *************************/