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: $primary-dark;
34  color: $primary-light;
35  overflow: hidden;
36}
37
38.header__logout {
39  float: right;
40  color: $primary-light;
41  font-size: .9em;
42  text-decoration: none;
43  padding: 1em;
44  font-weight: 400;
45  &:visited {
46    color: $primary-light;
47  }
48}
49
50.header__functions-section {
51  color: $primary-light;
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 $border-color-01;
59  background: $primary-light;
60  .header__server-name {
61    font-size: 1.5em;
62    font-weight: 500;
63    color: $text-02;
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: $primary-dark;
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: -480px;
98    bottom: 0;
99    z-index: 100;
100    margin: .3em 0;
101    background: $primary-light;
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: $primary-dark;
112      font-size: 1em;
113    }
114    a, p {
115      display: block;
116      float: left;
117      text-decoration: none;
118      color: $text-02;
119      padding: 1.250em;
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: .5em;
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: $background-02;
139    @include round-corners;
140    margin: 0 .3em;
141    height: 100%;
142    border: 1px solid $border-color-01;
143    opacity: 1;
144    @include fastTransition-all;
145    &:hover {
146      background: $background-01;
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: 40px;
172      text-align: center;
173      float: left;
174      span {
175        padding: .7em 0 .3em;
176        font-size: 1em;
177        font-weight: 400;
178        color: $text-02;
179      }
180      .icon-angle {
181        margin: 0.2em 0 0 0;
182      }
183      .icon-angle::before {
184        font-size: 1.625em;
185        font-weight: 400;
186        margin-left: 0;
187        display: block;
188        transform: rotate(180deg);
189        @include fastTransition-all;
190      }
191      @media (min-width: 1025px) {
192        display: none;
193      }
194    }
195
196    &.active > .header__info > .icon-angle::before {
197      transform: rotate(-360deg);
198      @include fastTransition-all;
199    }
200
201    .header__refresh {
202      color: $text-02;
203      line-height: 1.4;
204      border-radius: 6px;
205      span {
206        @include fontCourierBold;
207      }
208    }
209  }
210  .header__page-refresh {
211    padding-top: 1em;
212    span {
213      font-size: 0.875em;
214      font-weight: 400;
215      color: $text-02;
216      display: block;
217      margin-bottom: .2em;
218    }
219    .icon {
220      display: block;
221      margin-left: auto;
222      margin-right: auto;
223    }
224    svg {
225      width: 25px;
226      height: auto;
227      fill: $primary-accent;
228    }
229  }
230}
231
232// end header__functions-section
233