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