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