1$logoHeight: 30px;
2$logoMaxHeight: 100px;
3$logoMaxWidth: 125px;
4
5@mixin round-corners {
6  -webkit-border-radius: 6px 6px;
7  -moz-border-radius: 6px 6px;
8  border-radius: 6px 6px;
9}
10
11#header__wrapper {
12  position: fixed;
13  top: 0;
14  left: 0;
15  right: 0;
16  z-index: 300;
17}
18
19.app__version {
20  margin-left: 1em;
21  display: none;
22  @include mediaQuery(x-small) {
23    display: inline-block;
24    position: absolute;
25    top: 50%;
26    transform: translateY(-50%);
27  }
28}
29
30header {
31  position: relative;
32  background: $black;
33  color: $white;
34  overflow: hidden;
35}
36
37.header__logout {
38  float: right;
39  display: inline-block;
40  color: $white;
41  font-size: .9em;
42  text-decoration: none;
43  padding: 1em;
44  font-weight: 400;
45  &:visited {
46    color: $white;
47  }
48}
49
50.header__functions-wrapper {
51  color: $white;
52  padding: 0 1.1em;
53  box-sizing: border-box;
54  display: block;
55  position: relative;
56  overflow: hidden;
57  min-height: 5em;
58  border-bottom: 1px solid $medgrey;
59  background: $white;
60  .header__server-name {
61    font-size: 1.5em;
62    font-weight: 500;
63    color: $darkgrey;
64    padding: .4em 0 0 1em;
65    height: 100%;
66    background: transparent;
67    max-width: 350px;
68    white-space: nowrap;
69    overflow: hidden;
70    .header__hostname {
71      color: $black;
72      font-size: 1.2rem;
73      font-weight: 700;
74      margin-bottom: 0;
75    }
76    .header__server-ip {
77      font-size: 1rem;
78    }
79  }
80  .logo__wrapper {
81    padding-top: .5em;
82    //position: absolute;
83    //top: 50%;
84    //transform: translateY(-50%);
85  }
86
87  .header__logo {
88    vertical-align: middle;
89    margin: 1em;
90    float: left;
91    height: $logoHeight; //required for <SVG> logos - can remove if using img
92    max-height: $logoMaxHeight;
93    max-width: $logoMaxWidth;
94    width: auto;
95  }
96
97  .header__functions {
98    position: absolute;
99    top: 0;
100    right: 0;
101    bottom: 0;
102    z-index: 100;
103    margin: .3em 0;
104    @include fastTransition-all;
105    span {
106      display: block;
107      color: $black;
108      font-size: 1em;
109    }
110    a, p {
111      display: block;
112      float: left;
113      text-decoration: none;
114      color: $darkgrey;
115      padding: 1.250em 1.688em;
116      height: 100%;
117      font-size: 0.875em;
118      font-weight: 400;
119      line-height: 1;
120      > span {
121        display: block;
122        font-size: 1rem;
123        font-weight: bold;
124        margin-top: .3em;
125      }
126    }
127  }
128
129  // hide/show header functions based on screen size
130  .header__functions > .header__server-health {
131    display: none;
132    @include mediaQuery(small) {
133      display: block;
134    }
135  }
136
137  .header__functions > .header__refresh {
138    display: none;
139    @include mediaQuery(medium) {
140      display: block;
141      background-color: $white;
142    }
143  }
144
145  .header__functions {
146    .header__server-power,
147    .header__page-refresh,
148    .header__server-health {
149      background: $lightgrey;
150      @include round-corners;
151      margin: 0 .3em;
152      height: 100%;
153      border: 1px solid $medgrey;
154      @include fastTransition-all;
155      &:hover {
156        background: rgba(255, 255, 255, 1);
157      }
158    }
159    .header__refresh {
160      color: $darkgrey;
161      line-height: 1.4;
162      border-radius: 6px;
163      span {
164        @include fontCourierBold;
165      }
166    }
167  }
168
169  .header__page-refresh {
170    padding-top: 0;
171    position: relative;
172    span {
173      font-size: 0.875em;
174      font-weight: 400;
175      color: $darkgrey;
176      display: block;
177      margin-bottom: 1.8em;
178    }
179    svg {
180      stroke: $medblue;
181      fill: $medblue;
182      height: 20px;
183      width: 20px;
184      display: block;
185      margin: 0 auto;
186      position: absolute;
187      left: 50%;
188      top: 55%;
189      transform: translateX(-50%);
190    }
191  }
192}
193
194// end header__functions-wrapper
195