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 } 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: -650px; 98 bottom: 0; 99 z-index: 100; 100 margin: .3em 0; 101 background: $white; 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: $black; 112 font-size: 1em; 113 } 114 a, p { 115 display: block; 116 float: left; 117 text-decoration: none; 118 color: $darkgrey; 119 padding: 1.25em 1.3em; 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: .3em; 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: $lightgrey; 139 @include round-corners; 140 margin: 0 .3em; 141 height: 100%; 142 border: 1px solid $medgrey; 143 opacity: 1; 144 @include fastTransition-all; 145 &:hover { 146 background: rgba(255, 255, 255, 1); 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: 60px; 172 text-align: center; 173 display: inline-block; 174 span { 175 padding: .7em 0 .3em; 176 font-size: 1em; 177 font-weight: 400; 178 color: $darkgrey; 179 } 180 .icon-angle { 181 margin-bottom: .9em; 182 } 183 .icon-angle::before { 184 font-size: 2em; 185 margin-left: 0; 186 display: block; 187 transform: rotate(180deg); 188 @include fastTransition-all; 189 } 190 @media (min-width: 1025px) { 191 display: none; 192 } 193 } 194 195 &.active > .header__info > .icon-angle::before { 196 transform: rotate(-360deg); 197 @include fastTransition-all; 198 } 199 200 .header__refresh { 201 color: $darkgrey; 202 line-height: 1.4; 203 border-radius: 6px; 204 span { 205 @include fontCourierBold; 206 } 207 } 208 } 209 .header__page-refresh { 210 padding-top: 0; 211 position: relative; 212 span { 213 font-size: 0.875em; 214 font-weight: 400; 215 color: $darkgrey; 216 display: block; 217 margin-bottom: 1.1em; 218 } 219 svg { 220 stroke: $medblue; 221 fill: $medblue; 222 height: 20px; 223 width: 20px; 224 display: block; 225 margin: 0 auto; 226 position: absolute; 227 left: 50%; 228 top: 55%; 229 transform: translateX(-50%); 230 } 231 } 232} 233 234// end header__functions-wrapper 235