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