Gitiles
Code Review Sign In
gerrit.openbmc.org / openbmc / phosphor-webui / 3a0d471c48cb09ddd06c5288c21612bd127b60ac / . / app / common / styles / layout / header.scss
blob: 9b7dff56e81c3fec46ef55c8ba549e3f6c71b8b0 [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;
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]45 background: $darkbg__primary;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]46 padding: 0 1.1em;
47 box-sizing: border-box;
48 display: block;
49 position: relative;
50 overflow: hidden;
51 min-height: 5em;
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]52 #header__server-name {
53 //margin-top: .8em;
54 font-size: 1.5em;
55 font-weight: 500;
56 color: $white;
57 padding: .9em;
58 height: 100%;
59 background: transparent;
60 max-width: 350px;
61 white-space: nowrap;
62 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]63 .logo__wrapper {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]64 padding-top: .5em;
65 //position: absolute;
66 //top: 50%;
67 //transform: translateY(-50%);
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]68 }
69
70 #header__logo {
71 vertical-align: middle;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]72 margin: 1em;
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]73 float: left;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]74 height: $logoHeight; //required for <SVG> logos - can remove if using img
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]75 max-height: $logoMaxHeight;
76 max-width: $logoMaxWidth;
77 width: auto;
78 }
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]79 #header__funct-icon {
80 display: block;
81 font-size: 2.3em;
82 color: $white;
83 padding: 0;
84 &:before {
85 content: '\2261';
86 line-height: .5;
87 font-size: 2em;
88 padding: 0 .3em;
89 }
90 @include mediaQuery(medium) {
91 display: none;
92 }
93 }
Michael Daviscb8bb192017-02-09 15:45:13 -0600[diff] [blame]94
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]95 .header__functions {
96 position: absolute;
97 top: 0;
98 right: 0;
99 bottom: 0;
100 background: $darkbg__primary;
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]101 z-index: 100;
102 @include fastTransition-all;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]103 span {
104 display: block;
105 color: $white;
106 font-size: 1em;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]107 }
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]108 a, p, button {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]109 display: block;
110 float: left;
111 text-decoration: none;
112 border-left: 1px solid #384456;
113 color: $lightgrey;
114 margin: 0;
115 padding: 1.250em 1.688em;
116 height: 100%;
117 font-size: 0.875em;
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]118 line-height: 1;
119 > span {
120 font-size: 1rem;
121 font-weight: bold;
122 }
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]123 }
124 }
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]125
126 // hide/show header functions based on screen size
127 .header__functions > #header__server-health {
128 display: none;
129 @include mediaQuery(small) {
130 display: block;
131 }
132 }
133
134 .header__functions > .header__refresh {
135 display: none;
136 @include mediaQuery(medium) {
137 display: block;
138 }
139 }
140
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]141 .header__functions {
142 .header__refresh {
143 color: $lightgrey;
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]144 line-height: 1.8;
145 margin-top: -4px;
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]146 }
147 }
148 .header__server-power,
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]149 .header__page-refresh {
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]150 &:hover {
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]151 background: rgba(60, 109, 240, .4);
Michael Davis0f03ad12017-02-27 16:54:18 -0600[diff] [blame]152 }
153 }
154 .header__page-refresh {
155 img {
156 stroke: $white;
157 height: 22px;
158 width: 24px;
159 }
160 }
Michael Davise15a9562017-03-03 14:30:24 -0600[diff] [blame]161}
162
163// end header__functions-wrapper