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  .filter-label {
41    color: $text-02;
42    text-transform: uppercase;
43    font-weight: 700;
44    font-size: 0.75em;
45    margin-bottom: 3px;
46  }
47  .event__severity-filter {
48    margin-right: 2em;
49    margin-bottom: 1em;
50    font-size: 0.9em;
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    label {
67      height: 0;
68      text-indent: -9999px;
69    }
70  }
71  .event__status-filter {
72    float: left;
73    @include mediaQuery(medium) {
74      width: 25%;
75    }
76    .dropdown__wrapper,
77    .dropdown__button {
78      width: 100%;
79      text-align: left;
80    }
81  }
82}
83
84.event-log__filters {
85  position: relative;
86  padding-bottom: 0.5em;
87  padding-top: 0.5em;
88
89  @media (min-width: 1333px) {
90    float: right;
91    display: inline-block;
92  }
93}
94.empty__logs {
95  border: 1px solid $border-color-02;
96  margin-top: 0.5em;
97  text-align: center;
98  padding: 2em;
99}
100
101.accord-trigger {
102  position: absolute;
103  right: 1em;
104  top: 0.3em;
105}
106
107.event-log__events {
108  display: block;
109  position: relative;
110  overflow: hidden;
111  .header__actions-bar {
112    .event-log__col-check {
113      text-align: left;
114      max-width: 30px;
115      .control-check {
116        margin-left: -6px;
117      }
118    }
119    .btn:not([disabled]):not(.disabled) {
120      color: $primary-light;
121      svg {
122        fill: $primary-light;
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: 0.5em 2em;
138    min-height: 25px;
139    margin-top: 0.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: 0.3em;
153    }
154  }
155
156  // Single event log card
157  .event-log__single-event {
158    border: 1px solid $border-color-01;
159    padding: 1em 1em 1em 0.7em;
160    margin: 0.5em 0 0.5em 0;
161    position: relative;
162    overflow: hidden;
163    @include fastTransition-all;
164    &.active {
165      background-color: $background-02;
166      @include slowTransition-all;
167    }
168  }
169  .event-log__event-info {
170    &:hover {
171      cursor: pointer;
172    }
173  }
174
175  //Event priorities
176  .event__priority {
177    color: $primary-light;
178    font-size: 0.8em;
179    text-transform: uppercase;
180    padding: 2px 2em;
181    font-weight: 700;
182    line-height: inherit;
183    min-width: 103px;
184    text-align: center;
185    &.high-priority {
186      background: $priority-high--light;
187      border: 2px solid $priority-high;
188      color: $priority-high;
189    }
190    &.medium-priority {
191      background: $priority-medium--light;
192      border: 2px solid $priority-medium;
193      color: $priority-medium;
194    }
195    &.low-priority {
196      background: $priority-low--light;
197      border: 2px solid $priority-low;
198      color: $priority-low;
199    }
200    &.event-resolved {
201      background: $priority-low--light;
202      border: 2px solid $priority-low;
203      color: $priority-low;
204    }
205  }
206
207  //Event Severity
208  .event__severity {
209    font-size: 0.7em;
210    text-transform: uppercase;
211    font-weight: 700;
212    min-width: 103px;
213    &.high-priority {
214      color: $priority-high;
215    }
216    &.medium-priority {
217      color: $priority-medium;
218    }
219    &.low-priority {
220      color: $priority-low;
221    }
222    &.event-resolved {
223      color: $priority-low;
224    }
225  }
226
227  //Event ID
228  .event__id {
229    @include fontCourierBold;
230    font-size: 0.9em;
231    color: $text-02;
232    margin-right: 1em;
233  }
234
235  .event__timestamp {
236    text-align: left;
237    @include fontCourierBold;
238    font-size: 0.9em;
239    color: $text-02;
240    max-width: 18em;
241    @include mediaQuery(medium) {
242      float: right;
243    }
244  }
245
246  // Event metadata row
247  .event__metadata-row {
248    max-height: 0;
249    overflow: hidden;
250    transition: 0.5s linear max-height;
251    &.active {
252      max-height: 1000px;
253      @include mediaQuery(small) {
254        max-height: 1000px;
255      }
256      @include mediaQuery(medium) {
257        max-height: 1000px;
258      }
259    }
260  }
261
262  //Event metadata
263  .event__metadata {
264    height: 200px;
265    overflow-y: scroll;
266    border: 1px solid $border-color-01;
267    padding: 0.5em 0.5em 0;
268    background: $primary-light;
269    display: block;
270    margin-bottom: 1.5em;
271    &::-webkit-scrollbar {
272      -webkit-appearance: none;
273      width: 7px;
274    }
275    &::-webkit-scrollbar-thumb {
276      border-radius: 4px;
277      background-color: rgba(0, 0, 0, 0.5);
278    }
279  }
280
281  //Event Related Items
282  .event__related {
283    width: 100%;
284  }
285  .event__related-label {
286    font-weight: 700;
287    margin-right: 1.2em;
288    padding-top: 0.3em;
289    float: left;
290  }
291  .event__related-item {
292    margin-right: 1em;
293    padding-top: 0.3em;
294    display: inline-block;
295    float: left;
296    clear: both;
297  }
298  .event__actions {
299    margin-left: -1em;
300    margin-top: 0.5em;
301    @include mediaQuery(medium) {
302      float: right;
303      margin-top: -5px;
304    }
305  }
306
307  .btn:not([disabled]):not(.disabled) {
308    color: $primary-dark;
309    svg {
310      fill: $primary-dark;
311    }
312  }
313}
314
315/*p*/
316.event__description {
317  margin-bottom: 0;
318  line-height: 1.7;
319  font-weight: 400;
320  word-break: break-word;
321}
322
323.remote-logging-server {
324  float: right;
325  .modal__trigger {
326    padding: 0;
327    .icon {
328      margin: 0;
329    }
330  }
331}
332
333.remote-logging-server__details {
334  margin-right: 0.4em;
335}
336
337.remote-logging-server__modal {
338  input {
339    margin-bottom: 30px;
340    max-width: 70%;
341    + .form__validation-message {
342      position: absolute;
343      margin-top: -30px;
344    }
345  }
346  .btn--close {
347    padding: 0;
348    svg {
349      height: 1.6em;
350    }
351  }
352  .modal-header {
353    display: block;
354  }
355}
356//end event-log__events
357