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