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
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    @include mediaQuery(medium) {
253      margin: 0 1em 0 1.5em;
254    }
255    &.high-priority {
256      color: darken($highPriorityColor, 5%);
257    }
258    &.med-priority {
259      color: darken($medPriorityColor, 15%);
260    }
261    &.low-priority {
262      color: darken($lowPriorityColor, 5%);
263    }
264    &.event-resolved {
265      color: $resolvedColor;
266    }
267  }
268
269  //Event description
270  .event__description {
271    font-weight: 400;
272    margin-left: 1em;
273    @include mediaQuery(small) {
274      margin-left: 1.5em;
275      margin-right: 1em;
276    }
277    word-break: break-all;
278  }
279
280  //Event ID
281  .event__id {
282    @include fontCourierBold;
283    font-size: .9em;
284    color: $darkgrey;
285    margin-right: 1em;
286  }
287
288  .event__timestamp {
289    text-align: right;
290    @include fontCourierBold;
291    font-size: .9em;
292    color: $darkgrey;
293    max-width: 18em;
294    @media (min-width: 1105px) {
295      float: right;
296    }
297  }
298
299  // Event metadata row
300  .event__metadata-row {
301    max-height: 0;
302    overflow: hidden;
303    -webkit-transition: 0.5s linear max-height;
304    transition: 0.5s linear max-height;
305    &.active {
306      max-height: 1000px;
307      @include mediaQuery(small) {
308        max-height: 1000px;
309      }
310      @include mediaQuery(medium) {
311        max-height: 1000px;
312      }
313    }
314  }
315
316  //Event metadata
317  .event__metadata {
318    height: 200px;
319    overflow-y: scroll;
320    border: 1px solid $medgrey;
321    padding: .5em .5em 0;
322    background: $white;
323    display: block;
324    margin-bottom: 1.5em;
325    &::-webkit-scrollbar {
326      -webkit-appearance: none;
327      width: 7px;
328    }
329    &::-webkit-scrollbar-thumb {
330      border-radius: 4px;
331      background-color: rgba(0, 0, 0, .5);
332      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
333    }
334  }
335
336  //Event Related Items
337  .event__related {
338    width: 100%;
339  }
340  .event__related-label {
341    font-weight: 700;
342    margin-right: 1.2em;
343    padding-top: .3em;
344    float: left;
345  }
346  .event__related-item {
347    margin-right: 1em;
348    padding-top: .3em;
349    display: inline-block;
350    float: left;
351    clear: both;
352  }
353  .event__actions {
354    margin-left: -1em;
355    margin-top: .5em;
356    @include mediaQuery(medium) {
357      float: right;
358      margin-top: -5px;
359    }
360  }
361  .event__icon {
362    width: 20px;
363    height: 20px;
364    font-weight: normal;
365    margin-right: .5em;
366    margin-top: -3px;
367    display: inline-block;
368  }
369}
370//end event-log__events
371
372
373
374