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