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      @include fastTransition-all;
25    }
26  }
27}
28
29#event-filter {
30  .filter-label {
31    color: $darkgrey;
32    text-transform: uppercase;
33    font-weight: 700;
34    font-size: .75em;
35    margin-bottom: 3px;
36  }
37  .event__severity-filter {
38    margin-right: 2em;
39    margin-bottom: 1em;
40    button {
41      margin: 3px -3px;
42      padding: .6em 2em;
43      min-height: 2.1em;
44      font-size: .9em;
45      font-weight: 700;
46      border-radius: 0;
47      &.first,
48      &.last {
49        border-radius: 3px;
50      }
51      @media (min-width: 583px) {
52        &.last {
53          border-left: 0;
54        }
55      }
56    }
57    .btn-primary {
58      border: 2px solid $primebtn__bg;
59    }
60  }
61  .event__date-filter {
62    margin-right: 1.5em;
63    color: $darkgrey;
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    @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
96// Event Log Events
97#event-log__events.row {
98  padding-left: 0;
99  padding-right: 0;
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    .btn-export,
116    .btn-delete,
117    .btn-resolve {
118      color: $white;
119    }
120    .event-log__col-check {
121      text-align: left;
122      max-width: 30px;
123      .control-check {
124        margin-left: -6px;
125      }
126    }
127  }
128  .inline__confirm {
129    height: auto;
130    margin-left: 0;
131    left: 0;
132    padding: 1em 2em 1em 2em
133  }
134  .inline__confirm-message {
135    margin-top: 5px;
136    margin-bottom: -10px;
137  }
138  .inline__confirm-buttons .btn-primary {
139    padding: .5em 2em;
140    min-height: 25px;
141    margin-top: .5em;
142    @include mediaQuery(medium) {
143      margin-top: 0;
144    }
145  }
146  .event-log__col-check {
147    max-width: 60px;
148    text-align: center;
149  }
150  .col-logged-events {
151    span {
152      display: inline-block;
153      font-weight: 700;
154      margin-right: .3em;
155    }
156  }
157
158  //Export log
159  .btn-export, .btn-meta-copy,
160  .btn-delete,
161  .btn-resolve {
162    text-transform: capitalize;
163    color: black;
164    font-size: .9em;
165    font-weight: 700;
166    position: relative;
167    padding: 0 0 1em 2em;
168    &:hover {
169      text-decoration: underline;
170    }
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  }
340  .event__related-item {
341    margin-right: 1em;
342    padding-top: .3em;
343    display: inline-block;
344    float: left;
345    clear: both;
346  }
347  .event__actions {
348    margin-left: -1em;
349    margin-top: .5em;
350    @include mediaQuery(medium) {
351      float: right;
352      margin-top: -5px;
353    }
354  }
355  .event__icon {
356    width: 20px;
357    height: 20px;
358    font-weight: normal;
359    margin-right: .5em;
360    margin-top: -3px;
361    display: inline-block;
362  }
363}
364//end event-log__events
365
366
367
368