blob: b71a7ae2b86fb9b4981b8ff0d47806d52de6aaf7 [file] [log] [blame]
Matteo Scandolo2500e392016-03-25 17:20:27 -07001/************************* NAV *************************/
2
Arpit Agarwal8168d2e2016-07-18 14:01:39 -07003@import "../bootstrap/bootstrap/_variables.scss";
4
Matteo Scandolo2500e392016-03-25 17:20:27 -07005#sidebar-wrapper {
6 -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
7 -moz-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
8 box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.75);
9
10 .logo{
11 max-width: 100%;
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -070012 margin: $default-spacing auto;
Matteo Scandolo2500e392016-03-25 17:20:27 -070013 }
14
15 a {
16 font-weight: bold;
17 }
18
19 // ICONS
20 .icon-app {
21 background-image: url("opencloudApp.png");
22 }
23 .icon-home {
24 /* Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
25 background-image: url("Home.png");
26 }
27 .icon-deployment{
28 background-image: url("Deployments.png");
29 }
30 .icon-site{
31 background-image: url("Sites.png");
32 }
33 .icon-slice{
34 background-image: url("Slices.png");
35 }
36 .icon-user{
37 background-image: url("Users.png");
38 }
39 .icon-reservation{
40 background-image: url("Reservations.png");
41 }
42 .icon-cog{
43 background-image: url("Services.png");
44 }
45
46 // ACTIVE ICONS
47 li.active a,
48 li.focus a {
49 .icon-home{
50 background-image: url("Home_over.png");
51 }
52 .icon-deployment{
53 background-image: url("Deployments_over.png");
54 }
55 .icon-site{
56 background-image: url("Sites_over.png");
57 }
58 .icon-slice{
59 background-image: url("Slices_over.png");
60 }
61 .icon-user{
62 background-image: url("Users_over.png");
63 }
64 .icon-reservation{
65 background-image: url("Reservations_over.png");
66 }
67 .icon-cog{
68 background-image: url("Services_over.png");
69 }
70 }
71
Arpit Agarwal8168d2e2016-07-18 14:01:39 -070072 li{
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -070073 a {
74 transition: all .5s ease-in-out;
75 }
Arpit Agarwal8168d2e2016-07-18 14:01:39 -070076 ul.dashboard-list{
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -070077 padding-left: $default-spacing;
Arpit Agarwal8168d2e2016-07-18 14:01:39 -070078 li{
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -070079 list-style: none;
80 position: relative;
81 margin-top: $default-spacing / 4;
82 margin-bottom: $default-spacing / 4;
83 margin-left: $default-spacing;
Arpit Agarwal8168d2e2016-07-18 14:01:39 -070084
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -070085 &:before {
86 display: inline-block;
87 font-size: 2em;
88 font-weight: 200;
89 position: absolute;
90 top: 15px;
91 left: -15px;
92 line-height: 0;
93 content: '-';
94 background-color: $nav-pills-active-link-hover-bg;
95 }
96 // Actual tabs (as links)
97 > a {
98 cursor: pointer;
99 display: block;
100 padding: 5px 0px;
101 margin-right: 0;
102 border-radius: $nav-pills-border-radius;
Arpit Agarwalfecac782016-07-18 17:30:32 -0700103 > img {
104 width:20px;
105 }
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -0700106 &:hover,&:focus {
107 padding-left: 15px;
108 text-decoration: none;
109 background-color: $nav-link-hover-bg;
Arpit Agarwal8168d2e2016-07-18 14:01:39 -0700110 }
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -0700111 }
Arpit Agarwal8168d2e2016-07-18 14:01:39 -0700112
Matteo Scandoloe0b8cc82016-07-18 16:34:58 -0700113 // Active state, and its :hover to override normal :hover
114 &.active > a {
115 padding-left: 15px;
116 color: $nav-pills-active-link-hover-color;
117 background-color: lighten($nav-pills-active-link-hover-bg, 5%);
118 }
Arpit Agarwal8168d2e2016-07-18 14:01:39 -0700119 }
120 }
121 }
Matteo Scandolo2500e392016-03-25 17:20:27 -0700122 [class^="icon-"]{
123 background-position: left center;
124 width:22px;
125 height:22px;
126 display: inline-block;
127 margin-right: 10px;
128 position: relative;
129 top: 5px;
130 }
131
132}
133
134/************************* END NAV *************************/