1/**
2 * Application header styles
3 * Should only be used for the application header
4 */
5
6$logoHeight: 30px;
7$logoMaxHeight: 100px;
8$logoMaxWidth: 125px;
9
10@mixin round-corners {
11  -webkit-border-radius: 6px 6px;
12  -moz-border-radius: 6px 6px;
13  border-radius: 6px 6px;
14}
15
16.header {
17  position: fixed;
18  top: 0;
19  left: 0;
20  right: 0;
21  z-index: 300;
22}
23
24.header__info-section {
25  position: relative;
26  background: $primary-dark;
27  color: $primary-light;
28  width: 100%;
29  height: 50px;
30  display: flex;
31  justify-content: space-between;
32  .dropdown-menu {
33    left: unset;
34    right: 0;
35    border-radius: 0;
36    font-size: 0.9rem;
37    .btn {
38      color: $primary-dark;
39    }
40  }
41  .dropdown-toggle {
42    color: $primary-light;
43    fill: $primary-light;
44    text-decoration: none;
45    font-weight: 400;
46    margin-right: 0.5rem;
47    height: 50px; //to vertically align in 50px header
48    &::after {
49      display: none; //hiding dropdown caret inserted by bootstrap
50    }
51  }
52}
53
54.header__title {
55  margin-left: 1rem;
56  display: block;
57  line-height: 50px; //to vertically align in 50px header
58}
59
60.header__functions-section {
61  color: $primary-light;
62  padding: 0 1.1em;
63  box-sizing: border-box;
64  display: block;
65  position: relative;
66  overflow: hidden;
67  min-height: 5em;
68  border-bottom: 1px solid $border-color-01;
69  background: $primary-light;
70  .header__server-name {
71    font-size: 1.5em;
72    font-weight: 500;
73    color: $text-02;
74    padding: 0.4em 0 0 1em;
75    height: 100%;
76    background: transparent;
77    max-width: 600px;
78    white-space: nowrap;
79    overflow: hidden;
80    .header__hostname {
81      color: $primary-dark;
82      font-size: 1.2rem;
83      font-weight: 700;
84      margin-bottom: 0;
85    }
86    .header__server-ip {
87      font-size: 1rem;
88    }
89  }
90  .logo__wrapper {
91    padding-top: 0.5em;
92  }
93
94  .header__logo {
95    vertical-align: middle;
96    margin: 1em;
97    float: left;
98    height: $logoHeight; //required for <SVG> logos - can remove if using img
99    max-height: $logoMaxHeight;
100    max-width: $logoMaxWidth;
101    width: auto;
102  }
103
104  .header__functions {
105    position: absolute;
106    top: 0;
107    right: -480px;
108    bottom: 0;
109    z-index: 100;
110    margin: 0.3em 0;
111    background: $primary-light;
112    @include fastTransition-all;
113    &.active {
114      right: 1em;
115    }
116    @media (min-width: 1025px) {
117      right: 0;
118    }
119    span {
120      display: block;
121      color: $primary-dark;
122      font-size: 1em;
123    }
124    a,
125    p {
126      display: block;
127      float: left;
128      text-decoration: none;
129      color: $text-02;
130      padding: 1.25em;
131      height: 100%;
132      font-size: 0.875em;
133      font-weight: 400;
134      line-height: 1;
135      > span {
136        display: block;
137        font-size: 1rem;
138        font-weight: bold;
139        margin-top: 0.5em;
140      }
141    }
142  }
143
144  .header__action {
145    @include fastTransition-all;
146    @include round-corners;
147    height: 100%;
148    background: $background-02;
149    border: 1px solid $border-color-01;
150    margin: 0 0.3em;
151    opacity: 1;
152
153    .icon svg {
154      height: 1rem;
155    }
156
157    .status-icon {
158      vertical-align: text-top;
159    }
160
161    &:hover {
162      background: $background-01;
163    }
164  }
165
166  .header__functions {
167    .header__action--info {
168      padding: 0.3em;
169      min-width: 40px;
170      text-align: center;
171      float: left;
172      span {
173        padding: 0.7em 0 0.3em;
174        font-size: 1em;
175        font-weight: 400;
176        color: $text-02;
177      }
178
179      .icon {
180        @include fastTransition-all;
181        svg {
182          width: 1.25rem;
183          height: auto;
184        }
185      }
186
187      @media (min-width: 1025px) {
188        display: none;
189      }
190    }
191
192    &.active > .header__action--info > .icon {
193      transform: rotate(-180deg);
194    }
195
196    .header__refresh {
197      color: $text-02;
198      line-height: 1.4;
199      border-radius: 6px;
200      span {
201        @include fontCourierBold;
202      }
203    }
204  }
205  .header__action--refresh {
206    padding-top: 1em;
207    span {
208      font-size: 0.875em;
209      font-weight: 400;
210      color: $text-02;
211      display: block;
212      margin-bottom: 0.2em;
213    }
214    .icon {
215      display: block;
216      margin-left: auto;
217      margin-right: auto;
218
219      svg {
220        height: 1.5rem;
221        fill: $primary-accent;
222      }
223    }
224  }
225}
226
227// end header__functions-section
228