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