Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 44621a87cfe4cc2809fd507dcd8635707a35a888 / . / app / common / styles / directives / app-navigation.scss
blob: 997ab7c90afa895dbb364c67ed3e7126d4fd2986 [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;
41 z-index: 99;
42 list-style-type: none;
43 margin: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]44 padding: 0;
45 width: $nav__toplvlWidth;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]46 overflow-y: auto;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]47 li {
48 margin: 0;
49 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]50 //svg icons
51 .nav-icon {
52 @include navIcons;
53 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]54 .button, button, a {
55 background: transparent;
56 height: auto;
57 border: 0;
58 color: $white;
59 fill: $white;
60 width: 100%;
61 padding: 1em;
62 display: block;
63 text-align: center;
64 margin-bottom: 0;
65 white-space: normal;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]66 border-radius: 0;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]67 text-decoration: none;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]68 border-top: 1px solid transparent;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame^]69 border-bottom: 1px solid $darkgrey;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]70 a {
71 margin-bottom: 5px;
72 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]73 span {
74 margin: 1em 0 0 0;
75 display: block;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]76 font-size: .9em;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame^]77 font-weight: 400;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]78 line-height: 1rem;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]79 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]80 &:hover {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]81 background: $nav__second-level-color;
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;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]84 padding: 1em;
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 }
125}
126
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]127// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]128.nav__second-level {
129 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]130 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]131 top: 0;
132 bottom: 0;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]133 left: -245px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]134 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]135 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]136 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]137 margin: 0;
138 list-style-type: none;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]139 @include fastTransition-all;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]140 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]141 left: $nav__toplvlWidth;
Michael Davis272297b2017-04-24 12:11:53 -0500[diff] [blame]142 box-shadow: 7px 0 28px -10px $darkgrey;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]143 @include fastTransition-all;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]144 }
145 a {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]146 padding: 1.2em 1em 1.2em 1em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]147 display: block;
148 color: $black;
149 text-decoration: none;
150 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]151 font-weight: 400;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]152 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]153
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]154 li {
155 a:after{
156 content: '\203A';
157 position: absolute;
158 font-size: 2em;
159 font-weight: 700;
160 top: 50%;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]161 right: .6em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]162 transform: translateY(-59%);
163 color: #4b5d78;
164 opacity: 0;
165 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]166 &.active {background: $white;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]167 &.active,
168 &:focus,
169 &:hover {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]170 a {color: #4b5d78;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]171 a:after {
172 opacity: 1;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]173 right: .3em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]174 @include fastTransition-all;
175 }
176 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]177 }
Iftekharul Islam99d199f2017-03-24 15:28:25 -0500[diff] [blame]178}