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