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 {
12  position: fixed;
13  top: 0;
14  left: 0;
15  right: 0;
16  z-index: 300;
17}
18
19.header__title {
20  margin-left: 1em;
21  display: none;
22  float: left;
23  @include mediaQuery(x-small) {
24    display: inline-block;
25    position: absolute;
26    top: 50%;
27    transform: translateY(-50%);
28  }
29}
30
31.header__info-section {
32  position: relative;
33  background: $black;
34  color: $white;
35  overflow: hidden;
36}
37
38.header__logout {
39  float: right;
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-section {
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: -480px;
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;
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: 40px;
175      text-align: center;
176      float: left;
177      span {
178        padding: .7em 0 .3em;
179        font-size: 1em;
180        font-weight: 400;
181        color: $darkgrey;
182      }
183      .icon-angle {
184        margin: 0.2em 0 0 0;
185      }
186      .icon-angle::before {
187        font-size: 1.625em;
188        font-weight: 400;
189        margin-left: 0;
190        display: block;
191        transform: rotate(180deg);
192        @include fastTransition-all;
193      }
194      @media (min-width: 1025px) {
195        display: none;
196      }
197    }
198
199    &.active > .header__info > .icon-angle::before {
200      transform: rotate(-360deg);
201      @include fastTransition-all;
202    }
203
204    .header__refresh {
205      color: $darkgrey;
206      line-height: 1.4;
207      border-radius: 6px;
208      span {
209        @include fontCourierBold;
210      }
211    }
212  }
213  .header__page-refresh {
214    padding: 0 0.5rem 0.6rem;
215    position: relative;
216    span {
217      font-size: 0.875em;
218      font-weight: 400;
219      color: $darkgrey;
220      display: block;
221      margin-bottom: 1.1em;
222    }
223    svg {
224      stroke: $medblue;
225      fill: $medblue;
226      height: 20px;
227      width: 20px;
228      display: block;
229      margin: 0 auto;
230      position: absolute;
231      left: 50%;
232      top: 55%;
233      transform: translateX(-50%);
234    }
235  }
236}
237
238// end header__functions-section
239