xref: /openbmc/phosphor-webui/app/common/styles/directives/app-navigation.scss (revision 51946552fc8c6ac9b677ccf07949e837e9caaf52) 
1 $nav__toplvlWidth: 125px;
2 $nav__seclvlWidth: 240px;
3 
4 // Top level navigation
5 #nav__top-level {
6   background: $nav__top-level-color;
7   height: 100%;
8   position: fixed;
9   left: 0;
10   top: 0;
11   bottom: 0;
12   z-index: 99;
13   list-style-type: none;
14   margin: 0;
15   padding: 0;
16   width: $nav__toplvlWidth;
17   li {
18     margin: 0;
19   }
20   //svg icons
21   .nav-icon {
22     @include navIcons;
23   }
24   .button, button, a {
25     background: transparent;
26     height: auto;
27     border: 0;
28     color: $white;
29     fill: $white;
30     width: 100%;
31     padding: 1em;
32     display: block;
33     text-align: center;
34     margin-bottom: 0;
35     white-space: normal;
36     border-radius: 0;
37     text-decoration: none;
38     border-top: 1px solid transparent;
39     border-bottom: 1px solid transparent;
40     a {
41       margin-bottom: 5px;
42     }
43     span {
44       margin: 1em 0 0 0;
45       display: block;
46       font-size: .9em;
47       font-weight: 700;
48       line-height: 1rem;
49     }
50 
51     .nav__icon-help__outer {
52       fill: transparent;
53       stroke: $white;
54       stroke-miterlimit: 10;
55       stroke-width: 1px;
56     }
57     .nav__icon-help__Inner {
58       fill: $white;
59     }
60     &:hover {
61       background: $nav__second-level-color;
62       fill: $black;
63       color: $medblue;
64       padding: 1em;
65       border-radius: 0;
66       border-top: 1px solid $medgrey;
67       border-bottom: 1px solid $medgrey;
68       .nav__icon-help__outer {
69         stroke: $black;
70       }
71       .nav__icon-help__inner {
72         fill: $lightbg__primary;
73       }
74       .nav-icon {
75         fill: $medblue;
76         color: $medblue;
77         .st0 {
78           stroke: $medblue;
79         }
80         .st1 {
81           fill: $medblue;
82           color: $medblue;
83           stroke: $medblue;
84         }
85       }
86     }
87   }
88   .opened {
89     background: $nav__second-level-color;
90     fill: $black;
91     color: $medblue;
92     .nav__icon-help__outer {
93       stroke: $lightbg__primary;
94     }
95     .nav-icon {
96       fill: $medblue;
97       color: $medblue;
98       .st0 {
99         stroke: $medblue;
100       }
101       .st1 {
102         fill: $medblue;
103         color: $medblue;
104         stroke: $medblue;
105       }
106     }
107   }
108 }
109 
110 // Second Level Navigation
111 .nav__second-level {
112   position: fixed;
113   background: $nav__second-level-color;
114   top: 0;
115   bottom: 0;
116   left: -$nav__toplvlWidth;
117   width: $nav__seclvlWidth;
118   z-index: 97;
119   padding: 0;
120   margin: 0;
121   list-style-type: none;
122   @include fastTransition-all;
123   &.opened {
124     left: $nav__toplvlWidth;
125     box-shadow: 7px 0 28px -10px $darkgrey;
126     @include fastTransition-all;
127   }
128   a {
129     padding: 1.2em 1em 1.2em 1em;
130     display: block;
131     color: $black;
132     text-decoration: none;
133     position: relative;
134     font-weight: 400;
135   }
136 
137   li {
138     a:after{
139       content: '\203A';
140       position: absolute;
141       font-size: 2em;
142       font-weight: 700;
143       top: 50%;
144       right: .6em;
145       transform: translateY(-59%);
146       color: #4b5d78;
147       opacity: 0;
148     }
149     &.active {background: $white;}
150     &.active,
151     &:focus,
152     &:hover {
153       a {color: #4b5d78;}
154       a:after {
155         opacity: 1;
156         right: .3em;
157         @include fastTransition-all;
158       }
159     }
160   }
161 }