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