1$logoHeight: 30px;
2$logoMaxHeight: 100px;
3$logoMaxWidth: 125px;
4
5#header__wrapper {
6  position: fixed;
7  top: 0;
8  left: 0;
9  right: 0;
10  z-index: 100;
11}
12
13.app__version {
14  margin-left: 1em;
15  display: none;
16  @include mediaQuery(x-small) {
17    display: inline-block;
18    position: absolute;
19    top: 50%;
20    transform: translateY(-50%);
21  }
22}
23
24header {
25  position: relative;
26  background: #000;
27  color: $white;
28  overflow: hidden;
29}
30
31.header__logout {
32  float: right;
33  display: inline-block;
34  color: $white;
35  font-size: .9em;
36  text-decoration: none;
37  padding: 1em;
38  &:visited {
39    color: $white;
40  }
41}
42
43.header__functions-wrapper {
44  color: $white;
45  background: $darkbg__primary;
46  padding: 0 1.1em;
47  box-sizing: border-box;
48  display: block;
49  position: relative;
50  overflow: hidden;
51  min-height: 5em;
52  #header__server-name {
53    //margin-top: .8em;
54    font-size: 1.5em;
55    font-weight: 500;
56    color: $white;
57    padding: .9em;
58    height: 100%;
59    background: transparent;
60    max-width: 350px;
61    white-space: nowrap;
62  }
63  .logo__wrapper {
64    padding-top: .5em;
65    //position: absolute;
66    //top: 50%;
67    //transform: translateY(-50%);
68  }
69
70  #header__logo {
71    vertical-align: middle;
72    margin: 1em;
73    float: left;
74    height: $logoHeight; //required for <SVG> logos - can remove if using img
75    max-height: $logoMaxHeight;
76    max-width: $logoMaxWidth;
77    width: auto;
78  }
79  #header__funct-icon {
80    display: block;
81    font-size: 2.3em;
82    color: $white;
83    padding: 0;
84    &:before {
85      content: '\2261';
86      line-height: .5;
87      font-size: 2em;
88      padding: 0 .3em;
89    }
90    @include mediaQuery(medium) {
91      display: none;
92    }
93  }
94
95  .header__functions {
96    position: absolute;
97    top: 0;
98    right: 0;
99    bottom: 0;
100    background: $darkbg__primary;
101    z-index: 100;
102    @include fastTransition-all;
103    span {
104      display: block;
105      color: $white;
106      font-size: 1em;
107    }
108    a, p, button {
109      display: block;
110      float: left;
111      text-decoration: none;
112      border-left: 1px solid #384456;
113      color: $lightgrey;
114      margin: 0;
115      padding: 1.250em 1.688em;
116      height: 100%;
117      font-size: 0.875em;
118      line-height: 1;
119      > span {
120        font-size: 1rem;
121        font-weight: bold;
122      }
123    }
124  }
125
126  // hide/show header functions based on screen size
127  .header__functions > #header__server-health {
128    display: none;
129    @include mediaQuery(small) {
130      display: block;
131    }
132  }
133
134  .header__functions > .header__refresh {
135    display: none;
136    @include mediaQuery(medium) {
137      display: block;
138    }
139  }
140
141  .header__functions {
142    .header__refresh {
143      color: $lightgrey;
144      line-height: 1.8;
145      margin-top: -4px;
146    }
147  }
148  .header__server-power,
149  .header__page-refresh {
150    &:hover {
151      background: rgba(60, 109, 240, .4);
152    }
153  }
154  .header__page-refresh {
155    img {
156      stroke: $white;
157      height: 22px;
158      width: 24px;
159    }
160  }
161}
162
163// end header__functions-wrapper
164