Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 4eaa0f5ceca447127e947543a6bd3b13e946137a / . / src / scss / layout / _header.scss
blob: f0431ca8720dbc8d8f462e8c0648068d540e6a85 [file] [log] [blame]
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]1$logoHeight: 30px;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]2$logoMaxHeight: 100px;
3$logoMaxWidth: 125px;
4
5#header__wrapper {
6 position: fixed;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]7 top: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]8 left: 0;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]9 right: 0;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]10 z-index: 100;
11}
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]12
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]13.app__version {
14 margin-left: 1em;
15 display: none;
16 @include mediaQuery(x-small) {
17 display: inline-block;
18 position: absolute;
19 top: 50%;
20 transform: translateY(-50%);
21 }
22}
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]23
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]24header {
25 position: relative;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]26 background: #000;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]27 color: $white;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]28 overflow: hidden;
29}
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]30
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]31.header__logout {
32 float: right;
33 display: inline-block;
34 color: $white;
35 font-size: .9em;
36 text-decoration: none;
37 padding: 1em;
38 &:visited {
39 color: $white;
40 }
41}
42
43.header__functions-wrapper {
44 color: $white;
45 background: $lightbg__primary;
46 padding: 0 1.1em;
47 box-sizing: border-box;
48 display: block;
49 position: relative;
50 overflow: hidden;
51 min-height: 5em;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]52 .logo__wrapper {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]53 position: absolute;
54 top: 50%;
55 transform: translateY(-50%);
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]56 }
57
58 #header__logo {
59 vertical-align: middle;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]60 margin: 1em;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]61 float: left;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]62 height: $logoHeight; //required for <SVG> logos - can remove if using img
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]63 max-height: $logoMaxHeight;
64 max-width: $logoMaxWidth;
65 width: auto;
66 }
67
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]68 .header__functions {
69 position: absolute;
70 top: 0;
71 right: 0;
72 bottom: 0;
73 background: $darkbg__primary;
74 span {
75 display: block;
76 color: $white;
77 font-size: 1em;
78 &.status-light__disabled {
79 color: $darkgrey;
80 &::before {
81 @include status-light__disabled;
82 }
83 }
84 &.status-light__good{
85 &::before {
86 @include status-light__good;
87 }
88 }
89 &.status-light__error{
90 color: $error-color;
91 &::before {
92 @include status-light__error;
93 }
94 }
95 }
96 a, p, button {
97 display: block;
98 float: left;
99 text-decoration: none;
100 border-left: 1px solid #384456;
101 color: $lightgrey;
102 margin: 0;
103 padding: 1.250em 1.688em;
104 height: 100%;
105 font-size: 0.875em;
106 line-height: 1.3;
107 > span {font-size: 1rem;
108 font-weight: bold;}
109 }
110 }
111 .header__functions {
112 .header__refresh {
113 color: $lightgrey;
114 line-height: 1.6;
115 }
116 }
117 .header__server-power,
118 .header__page-refresh{
119 &:hover {
120 background: rgba(60,109,240,.4);
121 }
122 }
123 .header__page-refresh {
124 img {
125 stroke: $white;
126 height: 22px;
127 width: 24px;
128 }
129 }
130}// end header__functions-wrapper