Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 1f370d50d46503bcccb35b77639dac763a796213 / . / app / common / styles / directives / app-navigation.scss
blob: f91457c402c98975045362ee3a598add87030a42 [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 Davisb8a41c12017-08-14 14:59:46 -0500[diff] [blame]54 .button, a, .nav__btn {
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]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 Davisb8a41c12017-08-14 14:59:46 -0500[diff] [blame]87 cursor: pointer;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]88 .nav__icon-help__outer {
89 stroke: $black;
90 }
91 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]92 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]93 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]94 .nav-icon {
95 fill: $medblue;
96 color: $medblue;
97 .st0 {
98 stroke: $medblue;
99 }
100 .st1 {
101 fill: $medblue;
102 color: $medblue;
103 stroke: $medblue;
104 }
105 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]106 }
107 }
108 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]109 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]110 fill: $black;
Michael Davis44621a82017-07-31 18:18:32 -0500[diff] [blame]111 color: darken($medblue, 10%);
112 border-bottom: 1px solid $lightgrey;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]113 .nav-icon {
114 fill: $medblue;
115 color: $medblue;
116 .st0 {
117 stroke: $medblue;
118 }
119 .st1 {
120 fill: $medblue;
121 color: $medblue;
122 stroke: $medblue;
123 }
124 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]125 }
126}
127
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]128// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]129.nav__second-level {
130 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]131 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]132 top: 0;
133 bottom: 0;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]134 left: -245px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]135 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]136 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]137 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]138 margin: 0;
139 list-style-type: none;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]140 @include fastTransition-all;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]141 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]142 left: $nav__toplvlWidth;
Michael Davis272297b2017-04-24 12:11:53 -0500[diff] [blame]143 box-shadow: 7px 0 28px -10px $darkgrey;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]144 @include fastTransition-all;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]145 }
146 a {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]147 padding: 1.2em 1em 1.2em 1em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]148 display: block;
149 color: $black;
150 text-decoration: none;
151 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]152 font-weight: 400;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]153 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]154
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]155 li {
156 a:after{
157 content: '\203A';
158 position: absolute;
159 font-size: 2em;
160 font-weight: 700;
161 top: 50%;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]162 right: .6em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]163 transform: translateY(-59%);
164 color: #4b5d78;
165 opacity: 0;
166 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]167 &.active {background: $white;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]168 &.active,
169 &:focus,
170 &:hover {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]171 a {color: #4b5d78;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]172 a:after {
173 opacity: 1;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]174 right: .3em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]175 @include fastTransition-all;
176 }
177 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]178 }
Iftekharul Islam99d199f2017-03-24 15:28:25 -0500[diff] [blame]179}