1// System Logs SCSS
2#sys-log {
3
4  // Dropwdowns filter
5  .dropdown__date.row {
6    padding: .5em;
7  }
8
9  //Timezone select
10  .sys-log__timezone,
11  .sys-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      @include fastTransition-all;
23    }
24  }
25}
26
27.sort_button_wrapper {
28  padding-top:.3em;
29}
30
31#sys-log-filter {
32  .filter-label {
33    color: $darkgrey;
34    text-transform: uppercase;
35    font-weight: 700;
36    font-size: .75em;
37    margin-bottom: 3px;
38  }
39  .sys-log__severity-filter {
40    float:left;
41    margin-right: 2em;
42    margin-bottom: 1em;
43    button {
44      padding: .6em 2em;
45      margin: 0px -1px;
46      font-size: .9em;
47      font-weight: 700;
48      border-radius: 0;
49      &.first,
50      &.last {
51        border-radius: 3px;
52      }
53      @media (min-width: 583px) {
54        &.last {
55          border-left: 0;
56        }
57      }
58    }
59    .btn-primary {
60      border: 2px solid $primebtn__bg;
61    }
62  }
63  .sys-log__date-filter {
64    margin-right: 1em;
65    color: $darkgrey;
66    float:left;
67    input {
68      width: 170px;
69    }
70    label {
71      height: 0;
72      text-indent: -9999px;
73    }
74  }
75  .sys-log__status-filter {
76    float:left;
77    @include mediaQuery(medium) {
78      width: 25%;
79    }
80    .dropdown__wrapper,
81    .dropdown__button {
82      width: 100%;
83      text-align: left;
84    }
85  }
86}
87
88#sys-log__logs {
89  display: block;
90  position: relative;
91  .header__actions-bar {
92    .btn-export,
93    .btn-delete,
94    .btn-resolve {
95      color: $white;
96    }
97  }
98  .inline__confirm {
99    height: auto;
100    margin-left: 0;
101    left: 0;
102    padding: 1em 2em 1em 2em
103  }
104  .inline__confirm-message {
105    margin-top: 5px;
106    margin-bottom: -10px;
107  }
108  .inline__confirm-buttons .btn-primary {
109    padding: .5em 2em;
110    min-height: 25px;
111    margin-top: .5em;
112    @include mediaQuery(medium) {
113      margin-top: 0;
114    }
115  }
116  .sys-log__col-wrapper {
117    word-wrap: break-word;
118    white-space: initial;
119  }
120  .col-logged-events {
121    span {
122      display: inline-block;
123      font-weight: 700;
124      margin-right: .3em;
125    }
126  }
127  .sys-log__col-id {
128    max-width: 10%;
129  }
130  .sys-log__col-sev {
131    max-width: 12%;
132  }
133  .sys-log__col-desc {
134    min-width: 30%;
135    max-width: 40%;
136  }
137
138  .dropdown__button {
139    margin-bottom: 1.2em;
140  }
141  .dropdown__list {
142    margin-top: -17px;
143  }
144  .dropdown__button {
145    width: 25em;
146    margin-top: 0;
147    text-align: left;
148  }
149  .dropdown__wrapper {
150    width: 25em;
151    margin-top: 0.4em;
152    text-align: left;
153  }
154  //Export log
155  .btn-export, .btn-meta-copy,
156  .btn-delete,
157  .btn-resolve {
158    color: black;
159    font-size: .9em;
160    font-weight: 700;
161    position: relative;
162    padding: 0 0 1em 2em;
163    &:hover {
164      text-decoration: underline;
165    }
166  }
167  .btn-resolve.disabled:hover,
168  .btn-delete.disabled:hover{
169    cursor: default;
170    text-decoration: none;
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  .sys-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  .sys-log__event-info {
207    &:hover {
208      cursor: pointer;
209    }
210  }
211
212  //Event description
213  .event__description {
214    font-weight: 400;
215    flex:35%;
216    word-break: break-word;
217  }
218
219  //Event ID
220  .event__id {
221    @include fontCourierBold;
222    font-size: .9em;
223    color: $darkgrey;
224    margin-right: 1em;
225  }
226
227  .event__timestamp {
228    text-align: right;
229    @include fontCourierBold;
230    font-size: .9em;
231    color: $darkgrey;
232    max-width: 18em;
233    @media (min-width: 1105px) {
234      float: right;
235    }
236  }
237
238  // Event metadata row
239  .event__metadata-row {
240    max-height: 0;
241    overflow: hidden;
242    transition: max-height .5s linear;
243    &.active {
244      max-height: 1000px;
245      @include mediaQuery(small) {
246        max-height: 1000px;
247      }
248      @include mediaQuery(medium) {
249        max-height: 1000px;
250      }
251    }
252  }
253
254  //Event metadata
255  .event__metadata {
256    height: 200px;
257    overflow-y: scroll;
258    border: 1px solid $medgrey;
259    padding: .5em .5em 0;
260    background: $white;
261    display: block;
262    margin-bottom: 1.5em;
263    &::-webkit-scrollbar {
264      -webkit-appearance: none;
265      width: 7px;
266    }
267    &::-webkit-scrollbar-thumb {
268      border-radius: 4px;
269      background-color: rgba(0, 0, 0, .5);
270      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
271    }
272  }
273
274  //Event Related Items
275  .event__related {
276    width: 100%;
277  }
278  .event__related-label {
279    font-weight: 700;
280    margin-right: 1.2em;
281    padding-top: .3em;
282    float: left;
283  }
284  .event__related-item {
285    margin-right: 1em;
286    padding-top: .3em;
287    display: inline-block;
288    float: left;
289    clear: both;
290  }
291  .event__actions {
292    margin-left: -1em;
293    margin-top: .5em;
294    @include mediaQuery(medium) {
295      float: right;
296      margin-top: -5px;
297    }
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  .sort-ascending {
308    display: block;
309    padding: 0;
310    transform: rotate(-90deg);
311    font-size: 1em;
312    color: lighten($darkgrey, 10%);
313    &:hover {
314      color: $darkbg__accent;
315    }
316    &:after {
317      content: '\276F'
318    }
319    &:focus {
320      outline: 0;
321      color: $darkbg__accent;
322    }
323  }
324  .sort-descending {
325    display: block;
326    padding: 0;
327    transform: rotate(-90deg);
328    font-size: 1em;
329    color: lighten($darkgrey, 10%);
330    &:hover {
331      color: $darkbg__accent;
332    }
333    &:after {
334      content: '\276e'
335    }
336    &:focus {
337      outline: 0;
338      color: $darkbg__accent;
339    }
340  }
341}
342//end sys-log__logs
343