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  }
83
84  .header__logo {
85    vertical-align: middle;
86    margin: 1em;
87    float: left;
88    height: $logoHeight; //required for <SVG> logos - can remove if using img
89    max-height: $logoMaxHeight;
90    max-width: $logoMaxWidth;
91    width: auto;
92  }
93
94  .header__functions {
95    position: absolute;
96    top: 0;
97    right: -650px;
98    bottom: 0;
99    z-index: 100;
100    margin: .3em 0;
101    background: $white;
102    @include fastTransition-all;
103    &.active {
104      right: 1em;
105    }
106    @media (min-width: 1025px) {
107      right: 0;
108    }
109    span {
110      display: block;
111      color: $black;
112      font-size: 1em;
113    }
114    a, p {
115      display: block;
116      float: left;
117      text-decoration: none;
118      color: $darkgrey;
119      padding: 1.25em 1.3em;
120      height: 100%;
121      font-size: 0.875em;
122      font-weight: 400;
123      line-height: 1;
124      > span {
125        display: block;
126        font-size: 1rem;
127        font-weight: bold;
128        margin-top: .3em;
129      }
130    }
131  }
132
133  .header__server-power,
134  .header__page-refresh,
135  .header__server-health,
136  .header__info,
137  .header__multi-server {
138    background: $lightgrey;
139    @include round-corners;
140    margin: 0 .3em;
141    height: 100%;
142    border: 1px solid $medgrey;
143    opacity: 1;
144    @include fastTransition-all;
145    &:hover {
146      background: rgba(255, 255, 255, 1);
147    }
148  }
149
150  .header__multi-server {
151    padding: .5em;
152    padding-top: .8em;
153    float: left;
154    margin-top: 10px;
155    margin-right: -10px;
156    .icon-angle::before {
157      margin-left: 0;
158      transform: rotate(90deg);
159      @include fastTransition-all;
160    }
161    &.active {
162      .icon-angle::before {
163        transform: rotate(266deg);
164        @include fastTransition-all;
165      }
166    }
167  }
168  .header__functions {
169    .header__info {
170      padding: .3em;
171      min-width: 60px;
172      text-align: center;
173      display: inline-block;
174      span {
175        padding: .7em 0 .3em;
176        font-size: 1em;
177        font-weight: 400;
178        color: $darkgrey;
179      }
180      .icon-angle {
181        margin-bottom: .9em;
182      }
183      .icon-angle::before {
184        font-size: 2em;
185        margin-left: 0;
186        display: block;
187        transform: rotate(180deg);
188        @include fastTransition-all;
189      }
190      @media (min-width: 1025px) {
191        display: none;
192      }
193    }
194
195    &.active > .header__info > .icon-angle::before {
196      transform: rotate(-360deg);
197      @include fastTransition-all;
198    }
199
200    .header__refresh {
201      color: $darkgrey;
202      line-height: 1.4;
203      border-radius: 6px;
204      span {
205        @include fontCourierBold;
206      }
207    }
208  }
209  .header__page-refresh {
210    padding-top: 0;
211    position: relative;
212    span {
213      font-size: 0.875em;
214      font-weight: 400;
215      color: $darkgrey;
216      display: block;
217      margin-bottom: 1.1em;
218    }
219    svg {
220      stroke: $medblue;
221      fill: $medblue;
222      height: 20px;
223      width: 20px;
224      display: block;
225      margin: 0 auto;
226      position: absolute;
227      left: 50%;
228      top: 55%;
229      transform: translateX(-50%);
230    }
231  }
232}
233
234// end header__functions-wrapper
235