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: -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__functions {
137    .header__server-power,
138    .header__page-refresh,
139    .header__server-health,
140    .header__info {
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    .header__info {
153      padding: .3em;
154      min-width: 60px;
155      text-align: center;
156      display: inline-block;
157      span {
158        padding: .7em 0 .3em;
159        font-size: 1em;
160        font-weight: 400;
161        color: $darkgrey;
162      }
163      .icon-angle {
164        margin-bottom: .9em;
165      }
166      .icon-angle::before {
167        font-size: 2em;
168        margin-left: 0;
169        display: block;
170        transform: rotate(180deg);
171        @include fastTransition-all;
172      }
173      @media (min-width: 1025px) {
174        display: none;
175      }
176    }
177
178    &.active > .header__info > .icon-angle::before {
179        transform: rotate(-360deg);
180        @include fastTransition-all;
181    }
182
183    .header__refresh {
184      color: $darkgrey;
185      line-height: 1.4;
186      border-radius: 6px;
187      span {
188        @include fontCourierBold;
189      }
190    }
191  }
192
193  .header__page-refresh {
194    padding-top: 0;
195    position: relative;
196    span {
197      font-size: 0.875em;
198      font-weight: 400;
199      color: $darkgrey;
200      display: block;
201      margin-bottom: 1.1em;
202    }
203    svg {
204      stroke: $medblue;
205      fill: $medblue;
206      height: 20px;
207      width: 20px;
208      display: block;
209      margin: 0 auto;
210      position: absolute;
211      left: 50%;
212      top: 55%;
213      transform: translateX(-50%);
214    }
215  }
216}
217
218// end header__functions-wrapper
219