Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / cb5450b09cf547cb32b98c93ca41fb9db9d1c631 / . / app / common / styles / directives / app-navigation.scss
blob: 8e69b7f09ba42398a08ec915f8d144c1e83b7279 [file] [log] [blame]
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]1<<<<<<< HEAD
Iftekharul Islamcd789502017-04-19 14:37:55 -0500[diff] [blame]2$nav__toplvlWidth: 125px;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]3$nav__seclvlWidth: 240px;
4
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]5.nav__wrapper {
6 height: 100%;
7 position: fixed;
8 top: 0;
9 z-index: 100;
10}
11
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]12// Top level navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]13#nav__top-level {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]14 background: $nav__top-level-color;
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]15 //height: 100%;
16 position: absolute;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]17=======
18$nav__toplvlWidth: 120px;
19$nav__seclvlWidth: 240px;
20
21// Top level navigation
22#nav__top-level {
23 background: $nav__top-level-color;
24 height: 100%;
25 position: fixed;
26>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]27 left: 0;
28 top: 0;
29 bottom: 0;
30 z-index: 99;
31 list-style-type: none;
32 margin: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]33 padding: 0;
34 width: $nav__toplvlWidth;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]35<<<<<<< HEAD
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]36 overflow-y: auto;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]37 li {
38 margin: 0;
39 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]40 //svg icons
41 .nav-icon {
42 @include navIcons;
43 }
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]44=======
45 li {
46 margin: 0;
47 }
48>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]49 .button, button, a {
50 background: transparent;
51 height: auto;
52 border: 0;
53 color: $white;
54 fill: $white;
55 width: 100%;
56 padding: 1em;
57 display: block;
58 text-align: center;
59 margin-bottom: 0;
60 white-space: normal;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]61 border-radius: 0;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]62<<<<<<< HEAD
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]63 text-decoration: none;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]64 border-top: 1px solid transparent;
65 border-bottom: 1px solid transparent;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]66=======
67 .nav__icon {
68 color: $white;
69 max-height: 40px;
70 stroke-width: .5;
71 margin-bottom: -.5em;
72 }
73>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]74 a {
75 margin-bottom: 5px;
76 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]77 span {
78 margin: 1em 0 0 0;
79 display: block;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]80 font-size: .9em;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]81<<<<<<< HEAD
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]82 font-weight: 700;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]83=======
84 font-weight: normal;
85>>>>>>> 4c1a3dd... Major update to code structure
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]86 line-height: 1rem;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]87 }
88
89 .nav__icon-help__outer {
90 fill: transparent;
91 stroke: $white;
92 stroke-miterlimit: 10;
93 stroke-width: 1px;
94 }
95 .nav__icon-help__Inner {
96 fill: $white;
97 }
98 &:hover {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]99 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]100 fill: $black;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]101<<<<<<< HEAD
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]102 color: $medblue;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]103 padding: 1em;
104 border-radius: 0;
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]105 border-top: 1px solid $medgrey;
106 border-bottom: 1px solid $medgrey;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]107=======
108 color: $black;
109 padding: 1em;
110 border-radius: 0;
111>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]112 .nav__icon-help__outer {
113 stroke: $black;
114 }
115 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]116 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]117 }
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]118<<<<<<< HEAD
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]119 .nav-icon {
120 fill: $medblue;
121 color: $medblue;
122 .st0 {
123 stroke: $medblue;
124 }
125 .st1 {
126 fill: $medblue;
127 color: $medblue;
128 stroke: $medblue;
129 }
130 }
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]131=======
132>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]133 }
134 }
135 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]136 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]137 fill: $black;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]138<<<<<<< HEAD
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]139 color: $medblue;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]140 .nav__icon-help__outer {
141 stroke: $lightbg__primary;
142 }
Michael Davis51946552017-05-01 10:30:38 -0500[diff] [blame]143 .nav-icon {
144 fill: $medblue;
145 color: $medblue;
146 .st0 {
147 stroke: $medblue;
148 }
149 .st1 {
150 fill: $medblue;
151 color: $medblue;
152 stroke: $medblue;
153 }
154 }
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]155=======
156 color: $black;
157 .nav__icon-help__outer {
158 stroke: $lightbg__primary;
159 }
160>>>>>>> 4c1a3dd... Major update to code structure
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]161 }
162}
163
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]164// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]165.nav__second-level {
166 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]167 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]168 top: 0;
169 bottom: 0;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]170<<<<<<< HEAD
Iftekharul Islam8947e702017-07-27 10:28:07 -0500[diff] [blame]171 left: -245px;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]172=======
173 left: -$nav__toplvlWidth;
174>>>>>>> 4c1a3dd... Major update to code structure
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]175 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]176 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]177 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]178 margin: 0;
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]179<<<<<<< HEAD
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]180 list-style-type: none;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]181 @include fastTransition-all;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]182 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]183 left: $nav__toplvlWidth;
Michael Davis272297b2017-04-24 12:11:53 -0500[diff] [blame]184 box-shadow: 7px 0 28px -10px $darkgrey;
Michael Davis71ec7452017-04-24 16:28:57 -0500[diff] [blame]185 @include fastTransition-all;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]186 }
Michael Davisdfad5d52017-07-20 14:53:46 -0500[diff] [blame]187=======
188 display: none;
189 list-style-type: none;
190 @include fastTransition-all;
191 @include mediaQuery(medium) {
192 left: $nav__toplvlWidth;
193 &.btn-overview {
194 display: block;
195 }
196 }
197 &.opened {
198 left: $nav__toplvlWidth;
199 display: block;
200 @include fastTransition-all;
201 }
202
203>>>>>>> 4c1a3dd... Major update to code structure
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]204 a {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]205 padding: 1.2em 1em 1.2em 1em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]206 display: block;
207 color: $black;
208 text-decoration: none;
209 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]210 font-weight: 400;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]211 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]212
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]213 li {
214 a:after{
215 content: '\203A';
216 position: absolute;
217 font-size: 2em;
218 font-weight: 700;
219 top: 50%;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]220 right: .6em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]221 transform: translateY(-59%);
222 color: #4b5d78;
223 opacity: 0;
224 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]225 &.active {background: $white;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]226 &.active,
227 &:focus,
228 &:hover {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]229 a {color: #4b5d78;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]230 a:after {
231 opacity: 1;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]232 right: .3em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]233 @include fastTransition-all;
234 }
235 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]236 }
Iftekharul Islam99d199f2017-03-24 15:28:25 -0500[diff] [blame]237}