Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / b0f376ab14e7d39557f05682cf3f881e4082ebc6 / . / src / scss / layout / _navigation.scss
blob: 0b07e5f18fa383a5ab9dd0d68e36a6ab70544d77 [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 }
42 p {
43 margin: 0;
44 font-size: .9em;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]45 line-height: 1.2rem;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]46 }
47
48 .nav__icon-help__outer {
49 fill: transparent;
50 stroke: $white;
51 stroke-miterlimit: 10;
52 stroke-width: 1px;
53 }
54 .nav__icon-help__Inner {
55 fill: $white;
56 }
57 &:hover {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]58 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]59 fill: $black;
60 color: $black;
61 padding: 1em;
62 border-radius: 0;
63 .nav__icon-help__outer {
64 stroke: $black;
65 }
66 .nav__icon-help__inner {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]67 fill: $lightbg__primary;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]68 }
69 }
70 }
71 .opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]72 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]73 fill: $black;
74 color: $black;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]75 .nav__icon-help__outer {
76 stroke: $lightbg__primary;
77 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]78 }
79}
80
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]81// Second Level Navigation
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]82.nav__second-level {
83 position: fixed;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]84 background: $nav__second-level-color;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]85 top: 0;
86 bottom: 0;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]87 left: -$nav__toplvlWidth;
88 width: $nav__seclvlWidth;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]89 z-index: 97;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]90 display: none;
91 padding: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]92 margin: 0;
93 list-style-type: none;
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]94 transition: left .5s ease;
95 @include mediaQuery(medium) {
96 left: $nav__toplvlWidth;
97 }
98 &.btn-dashboard {
99 display: block;
100 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]101 &.opened {
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]102 left: $nav__toplvlWidth;
103 @include fastTransition-all;
104 }
105 a {
106 padding: 1.2em .6em 1.2em 1.9em;
107 display: block;
108 color: $black;
109 text-decoration: none;
110 position: relative;
111 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]112
Michael Davis19475752017-02-23 18:30:23 -0600[diff] [blame]113 li {
114 a:after{
115 content: '\203A';
116 position: absolute;
117 font-size: 2em;
118 font-weight: 700;
119 top: 50%;
120 right: 2em;
121 transform: translateY(-59%);
122 color: #4b5d78;
123 opacity: 0;
124 }
125 &.active,
126 &:focus,
127 &:hover {
128 background: $white;
129 a {font-weight: bold; color: #4b5d78;}
130 a:after {
131 opacity: 1;
132 right: .5em;
133 @include fastTransition-all;
134 }
135 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]136 }
137}