Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 309b5da3750a3a5b189362e31013d2ab9404e806 / . / app / common / styles / directives / app-navigation.scss
blob: 79eb11e72ee66af391ba0f76517e80d3a9263877 [file] [log] [blame]
Iftekharul Islamcd789502017-04-19 14:37:55 -0500[diff] [blame]1$nav__toplvlWidth: 125px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]2$nav__seclvlWidth: 240px;
3
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame]4//Navigation icons
5@mixin navIcons {
6 color: $white;
7 fill: $white;
8 max-height: 40px;
9 stroke-width: .5;
10 display: block;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -0500[diff] [blame]11 margin: .5em auto;
12 overflow: hidden;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame]13 .st0 {
14 fill: none;
15 stroke: $white;
16 stroke-width: 2;
17 stroke-miterlimit: 10;
18 }
19 .st1 {
20 fill: none;
21 stroke: $white;
22 stroke-width: 4;
23 stroke-miterlimit: 10;
24 }
25}
26
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]27.nav__wrapper {
28 height: 100%;
29 position: fixed;
30 top: 0;
31 z-index: 100;
32}
33
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]34// Top level navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]35#nav__top-level {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]36 background: $nav__top-level-color;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]37 position: absolute;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]38 left: 0;
39 top: 0;
40 bottom: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]41 list-style-type: none;
42 margin: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]43 padding: 0;
44 width: $nav__toplvlWidth;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]45 overflow-y: auto;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]46 li {
47 margin: 0;
48 }
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -0500[diff] [blame]49 > li > a,
50 > li > button {
51 height: 120px;
52 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]53 //svg icons
54 .nav-icon {
55 @include navIcons;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -0500[diff] [blame]56 width: 100%;
57 svg {
58 width: 36px;
59 height: auto;
60 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]61 }
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]62 .button, button, a {
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]63 background: transparent;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]64 border: 0;
65 color: $white;
66 fill: $white;
67 width: 100%;
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]68 padding: 1em;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]69 display: block;
70 text-align: center;
71 margin-bottom: 0;
72 white-space: normal;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]73 border-radius: 0;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]74 text-decoration: none;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]75 border-top: 1px solid transparent;
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]76 border-bottom: 1px solid $darkgrey;
Yoshie Muranakac86ce3c2019-06-05 12:30:30 -0500[diff] [blame]77 font-weight: normal;
78 font-size: .9em;
79 line-height: 1.2;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]80 &:hover {
Ryan Arnellcc619bd2018-10-17 13:32:40 -0500[diff] [blame]81 background: $white;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]82 fill: $black;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]83 color: $medblue;
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]84 padding: 1em;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]85 border-radius: 0;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame]86 border-bottom: 1px solid $lightgrey;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]87 .nav__icon-help__outer {
88 stroke: $black;
89 }
90 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]91 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]92 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]93 .nav-icon {
94 fill: $medblue;
95 color: $medblue;
96 .st0 {
97 stroke: $medblue;
98 }
99 .st1 {
100 fill: $medblue;
101 color: $medblue;
102 stroke: $medblue;
103 }
104 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]105 }
106 }
107 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]108 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]109 fill: $black;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame]110 color: darken($medblue, 10%);
111 border-bottom: 1px solid $lightgrey;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]112 .nav-icon {
113 fill: $medblue;
114 color: $medblue;
115 .st0 {
116 stroke: $medblue;
117 }
118 .st1 {
119 fill: $medblue;
120 color: $medblue;
121 stroke: $medblue;
122 }
123 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]124 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]125
Yoshie Muranaka21f8cb92019-05-22 10:02:52 -0500[diff] [blame]126 // Second Level Navigation
127 .nav__second-level {
128 position: fixed;
129 background: $nav__second-level-color;
130 top: 0;
131 bottom: 0;
132 left: -245px;
133 width: $nav__seclvlWidth;
134 z-index: -1;
135 padding: 0;
136 margin: 0;
137 list-style-type: none;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]138 display: block;
Yoshie Muranaka21f8cb92019-05-22 10:02:52 -0500[diff] [blame]139 @include fastTransition-all;
140 &.opened {
141 left: $nav__toplvlWidth;
142 box-shadow: 7px 0 28px -10px $darkgrey;
143 @include fastTransition-all;
Ryan Arnellcc619bd2018-10-17 13:32:40 -0500[diff] [blame]144 }
Yoshie Muranaka21f8cb92019-05-22 10:02:52 -0500[diff] [blame]145 a {
146 padding: 1.2em 1em 1.2em 1em;
147 display: block;
148 color: $black;
149 text-decoration: none;
150 position: relative;
151 font-weight: 400;
152 text-align: left;
153 border-bottom: 1px solid transparent;
154 &:hover {
155 background: $white;
156 }
157 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]158
Yoshie Muranaka21f8cb92019-05-22 10:02:52 -0500[diff] [blame]159 li {
160 a:after{
161 content: '\203A';
162 position: absolute;
163 font-size: 2em;
164 font-weight: 700;
165 top: 50%;
166 right: .6em;
167 transform: translateY(-59%);
168 color: $nav__second-level-text-color;
169 opacity: 0;
170 }
171 &.active {
172 a {font-weight: 700;}
173 }
174 &.active,
175 &:focus,
176 &:hover {
177 a {color: $nav__second-level-text-color;}
178 a:after {
179 opacity: 1;
180 right: .3em;
181 @include fastTransition-all;
182 }
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]183 }
184 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]185 }
Iftekharul Islamdb28a382017-11-02 13:16:17 -0500[diff] [blame]186}