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