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