1// Event Log SCSS 2#event-log { 3 4 .dropdown__button { 5 } 6 // Dropwdowns filter 7 .dropdown__date.row { 8 padding: .5em; 9 } 10 11 //Timezone select 12 .event-log__timezone, 13 .event-log__timezone button { 14 position: relative; 15 text-transform: uppercase; 16 color: $lightbg__primary; 17 font-size: .9em; 18 font-weight: 700; 19 border: 0; 20 } 21 .content__search { 22 float: none; 23 @include mediaQuery(x-large) { 24 max-width: 61%; 25 @include fastTransition-all; 26 } 27 } 28} 29 30#event-filter { 31 .filter-label { 32 color: darken($medgrey, 10%); 33 text-transform: uppercase; 34 font-weight: 700; 35 font-size: .75em; 36 margin-bottom: 3px; 37 } 38 .event__severity-filter { 39 margin-right: 2em; 40 margin-bottom: 1em; 41 button { 42 margin: 3px -3px; 43 padding: .6em 2em; 44 min-height: 2.1em; 45 font-size: .9em; 46 font-weight: 700; 47 border-radius: 0; 48 &.first, 49 &.last { 50 border-radius: 3px; 51 } 52 &.last { 53 border-left: 0; 54 } 55 } 56 .btn-primary { 57 border: 2px solid $primebtn__bg; 58 } 59 } 60 .event__date-filter { 61 margin-right: 1.5em; 62 color: $darkgrey; 63 input { 64 width: 170px; 65 height: 2.1rem; 66 } 67 label { 68 height: 0; 69 text-indent: -9999px; 70 } 71 } 72 .event__status-filter .dropdown__wrapper, 73 .event__status-filter .dropdown__button { 74 width: 100%; 75 text-align: left; 76 } 77} 78 79.event-log__filters { 80 position: relative; 81 padding-bottom: .5em; 82 padding-top: .5em; 83 84 @media (min-width: 1333px) { 85 float: right; 86 display: inline-block; 87 } 88} 89 90// Event Log Events 91#event-log__events.row { 92 padding-left: 0; 93 padding-right: 0; 94} 95 96#event-log__events, 97.event-log__events { 98 display: block; 99 margin-top: 1.6em; 100 position: relative; 101 overflow: hidden; 102 .header__actions-bar { 103 .btn-export, 104 .btn-delete, 105 .btn-resolve { 106 color: $white; 107 } 108 .event-log__col-check { 109 text-align: left; 110 max-width: 30px; 111 .control-check { 112 margin-left: -5px; 113 } 114 } 115 } 116 .inline__confirm { 117 height: auto; 118 margin-left: 0; 119 left: 0; 120 padding: 1em 2em 1em 2em 121 } 122 .inline__confirm-message { 123 margin-top: 5px; 124 margin-bottom: -10px; 125 } 126 .inline__confirm-buttons .btn-primary { 127 padding: .5em 2em; 128 min-height: 25px; 129 margin-top: .5em; 130 @include mediaQuery(medium) { 131 margin-top: 0; 132 } 133 } 134 .event-log__col-check { 135 max-width: 60px; 136 text-align: center; 137 } 138 .col-logged-events { 139 span { 140 display: inline-block; 141 font-weight: 700; 142 margin-right: .3em; 143 } 144 } 145 146 //Export log 147 .btn-export, .btn-meta-copy, 148 .btn-delete, 149 .btn-resolve { 150 text-transform: capitalize; 151 color: black; 152 font-size: .9em; 153 font-weight: 700; 154 position: relative; 155 padding: 0 0 1em 2em; 156 &:hover { 157 text-decoration: underline; 158 } 159 } 160 .btn-export { 161 margin-top: 7px; 162 padding-bottom: 0; 163 } 164 .btn-export:before { 165 content: '\21E5'; 166 position: absolute; 167 font-size: 1.7em; 168 vertical-align: middle; 169 transform: rotate(90deg); 170 display: inline-block; 171 left: 2px; 172 top: -5px; 173 } 174 .btn-meta-copy, 175 .btn-delete, 176 .btn-resolve { 177 margin-left: 5px; 178 padding: .5em .5em; 179 } 180 181 // Single event log card 182 .event-log__single-event { 183 border: 1px solid $medgrey; 184 padding: 1em 1em 1em .7em; 185 margin: .5em 0 .5em 0; 186 position: relative; 187 overflow: hidden; 188 @include fastTransition-all; 189 &.active { 190 background-color: $lightgrey; 191 @include slowTransition-all; 192 } 193 .accord-trigger { 194 position: absolute; 195 right: 1em; 196 top: .3em; 197 } 198 } 199 .event-log__event-info { 200 &:hover { 201 cursor: pointer; 202 } 203 } 204 205 //Event priorities 206 .event__priority { 207 color: $white; 208 font-size: .8em; 209 text-transform: uppercase; 210 padding: 2px 2em; 211 font-weight: 700; 212 line-height: inherit; 213 min-width: 103px; 214 text-align: center; 215 &.high-priority { 216 background: $highPriority-bg; 217 border: 2px solid $highPriorityColor; 218 color: darken($highPriorityColor, 5%); 219 } 220 &.med-priority { 221 background: $medPriorty-bg; 222 border: 2px solid $medPriorityColor; 223 color: darken($medPriorityColor, 15%); 224 } 225 &.low-priority { 226 background: $lowPriorty-bg; 227 border: 2px solid $lowPriorityColor; 228 color: darken($lowPriorityColor, 5%); 229 } 230 &.event-resolved { 231 background: $resolved-bg; 232 border: 2px solid $resolvedColor; 233 color: $resolvedColor; 234 } 235 } 236 237 //Event Severity 238 .event__severity { 239 font-size: .7em; 240 text-transform: uppercase; 241 font-weight: 700; 242 min-width: 103px; 243 @include mediaQuery(medium) { 244 margin: 0 1em 0 1.5em; 245 } 246 &.high-priority { 247 color: darken($highPriorityColor, 5%); 248 } 249 &.med-priority { 250 color: darken($medPriorityColor, 15%); 251 } 252 &.low-priority { 253 color: darken($lowPriorityColor, 5%); 254 } 255 &.event-resolved { 256 color: $resolvedColor; 257 } 258 } 259 260 //Event description 261 .event__description { 262 font-weight: 400; 263 margin-left: 1em; 264 @include mediaQuery(small) { 265 margin-left: 4.5em; 266 margin-right: 1em; 267 } 268 word-break: break-all; 269 } 270 271 //Event ID 272 .event__id { 273 @include fontCourierBold; 274 font-size: .9em; 275 color: $darkgrey; 276 margin-right: 1em; 277 } 278 279 .event__timestamp { 280 @include fontCourierBold; 281 font-size: .9em; 282 color: #999999; 283 @media (min-width: 1105px ) { 284 float: right; 285 } 286 } 287 288 // Event metadata row 289 .event__metadata-row { 290 max-height: 0; 291 overflow: hidden; 292 -webkit-transition: 0.5s linear max-height; 293 transition: 0.5s linear max-height; 294 &.active { 295 @include mediaQuery(small) { 296 max-height: 1000px; 297 } 298 @include mediaQuery(medium) { 299 max-height: 1000px; 300 } 301 } 302 } 303 304 //Event metadata 305 .event__metadata { 306 height: 200px; 307 overflow-y: scroll; 308 border: 1px solid $medgrey; 309 padding: .5em .5em 0; 310 background: $white; 311 display: block; 312 margin-bottom: 1.5em; 313 &::-webkit-scrollbar { 314 -webkit-appearance: none; 315 width: 7px; 316 } 317 &::-webkit-scrollbar-thumb { 318 border-radius: 4px; 319 background-color: rgba(0, 0, 0, .5); 320 -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5); 321 } 322 } 323 324 //Event Related Items 325 .event__related { 326 width: 100%; 327 } 328 .event__related-label { 329 font-weight: 700; 330 margin-right: 1.2em; 331 padding-top: .3em; 332 } 333 .event__related-item { 334 margin-right: 1em; 335 padding-top: .3em; 336 display: inline-block; 337 float: left; 338 clear: both; 339 } 340 .event__actions { 341 margin-left: -1em; 342 float: right; 343 } 344 .event__icon { 345 width: 20px; 346 height: 20px; 347 font-weight: normal; 348 margin-right: .5em; 349 margin-top: -3px; 350 display: inline-block; 351 } 352} 353//end event-log__events 354 355 356 357