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