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