Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / c562618de9407bbffbcb6c523b40834b9a10d259 / . / src / scss / layout / _navigation.scss
blob: 6a2bbfe052526ccef78b9b633b6e7178ed29528a [file] [log] [blame]
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]1$nav__toplvlWidth: 120px;
2$nav__seclvlWidth: 240px;
3
4// Top level navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]5#nav__top-level {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]6 background: $nav__top-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]7 height: 100%;
8 position: fixed;
9 left: 0;
10 top: 0;
11 bottom: 0;
12 z-index: 99;
13 list-style-type: none;
14 margin: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]15 padding: 0;
16 width: $nav__toplvlWidth;
17 li {
18 margin: 0;
19 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]20 .button, button, a {
21 background: transparent;
22 height: auto;
23 border: 0;
24 color: $white;
25 fill: $white;
26 width: 100%;
27 padding: 1em;
28 display: block;
29 text-align: center;
30 margin-bottom: 0;
31 white-space: normal;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]32 border-radius: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]33 .nav__icon {
34 color: $white;
35 max-height: 40px;
36 stroke-width: .5;
37 margin-bottom: -.5em;
38 }
39 a {
40 margin-bottom: 5px;
41 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]42 span {
43 margin: 1em 0 0 0;
44 display: block;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]45 font-size: .9em;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]46 font-weight: normal;
47 line-height: 1rem;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]48 }
49
50 .nav__icon-help__outer {
51 fill: transparent;
52 stroke: $white;
53 stroke-miterlimit: 10;
54 stroke-width: 1px;
55 }
56 .nav__icon-help__Inner {
57 fill: $white;
58 }
59 &:hover {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]60 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]61 fill: $black;
62 color: $black;
63 padding: 1em;
64 border-radius: 0;
65 .nav__icon-help__outer {
66 stroke: $black;
67 }
68 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]69 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]70 }
71 }
72 }
73 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]74 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]75 fill: $black;
76 color: $black;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]77 .nav__icon-help__outer {
78 stroke: $lightbg__primary;
79 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]80 }
81}
82
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]83// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]84.nav__second-level {
85 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]86 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]87 top: 0;
88 bottom: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]89 left: -$nav__toplvlWidth;
90 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]91 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]92 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]93 margin: 0;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]94 display: none;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]95 list-style-type: none;
Michael Davisc5626182017-03-10 15:48:05 -0600[diff] [blame^]96 @include fastTransition-all;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]97 @include mediaQuery(medium) {
98 left: $nav__toplvlWidth;
Michael Davis57738ea2017-03-06 23:21:19 -0600[diff] [blame]99 &.btn-overview {
100 display: block;
101 }
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]102 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]103 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]104 left: $nav__toplvlWidth;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]105 display: block;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]106 @include fastTransition-all;
107 }
Michael Davis57738ea2017-03-06 23:21:19 -0600[diff] [blame]108
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]109 a {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]110 padding: 1.2em 1em 1.2em 1em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]111 display: block;
112 color: $black;
113 text-decoration: none;
114 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]115 font-weight: 400;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]116 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]117
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]118 li {
119 a:after{
120 content: '\203A';
121 position: absolute;
122 font-size: 2em;
123 font-weight: 700;
124 top: 50%;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]125 right: .6em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]126 transform: translateY(-59%);
127 color: #4b5d78;
128 opacity: 0;
129 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]130 &.active {background: $white;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]131 &.active,
132 &:focus,
133 &:hover {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]134 a {color: #4b5d78;}
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]135 a:after {
136 opacity: 1;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]137 right: .3em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]138 @include fastTransition-all;
139 }
140 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]141 }
142}