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