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: $primary-action;
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: $text-02;
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    .btn {
44      width: 100px;
45      font-size: .9em;
46      &:not(:first-of-type) {
47        border-left-width: 1px;
48      }
49    }
50  }
51  .sys-log__date-filter {
52    margin-right: 1em;
53    color: $text-02;
54    float:left;
55    input {
56      width: 170px;
57    }
58    label {
59      height: 0;
60      text-indent: -9999px;
61    }
62  }
63  .sys-log__status-filter {
64    float:left;
65    @include mediaQuery(medium) {
66      width: 25%;
67    }
68    .dropdown__wrapper,
69    .dropdown__button {
70      width: 100%;
71      text-align: left;
72    }
73  }
74}
75
76#sys-log__logs {
77  display: block;
78  position: relative;
79  .header__actions-bar {
80    .btn-export,
81    .btn-delete,
82    .btn-resolve {
83      color: $primary-light;
84    }
85  }
86  .inline__confirm {
87    height: auto;
88    margin-left: 0;
89    left: 0;
90    padding: 1em 2em 1em 2em
91  }
92  .inline__confirm-message {
93    margin-top: 5px;
94    margin-bottom: -10px;
95  }
96  .inline__confirm-buttons .btn-primary {
97    padding: .5em 2em;
98    min-height: 25px;
99    margin-top: .5em;
100    @include mediaQuery(medium) {
101      margin-top: 0;
102    }
103  }
104  .sys-log__col-wrapper {
105    word-wrap: break-word;
106    white-space: initial;
107  }
108  .col-logged-events {
109    span {
110      display: inline-block;
111      font-weight: 700;
112      margin-right: .3em;
113    }
114  }
115  .sys-log__col-id {
116    max-width: 10%;
117  }
118  .sys-log__col-sev {
119    max-width: 12%;
120  }
121  .sys-log__col-desc {
122    min-width: 30%;
123    max-width: 40%;
124  }
125
126  .dropdown__button {
127    margin-bottom: 1.2em;
128  }
129  .dropdown__list {
130    margin-top: -17px;
131  }
132  .dropdown__button {
133    width: 25em;
134    margin-top: 0;
135    text-align: left;
136  }
137  .dropdown__wrapper {
138    width: 25em;
139    margin-top: 0.4em;
140    text-align: left;
141  }
142  //Export log
143  .btn-export, .btn-meta-copy,
144  .btn-delete,
145  .btn-resolve {
146    color: black;
147    font-size: .9em;
148    font-weight: 700;
149    position: relative;
150    padding: 0 0 1em 2em;
151    &:hover {
152      text-decoration: underline;
153    }
154  }
155  .btn-resolve.disabled:hover,
156  .btn-delete.disabled:hover{
157    cursor: default;
158    text-decoration: none;
159  }
160  .btn-export {
161    margin-top: 7px;
162    padding-bottom: 0;
163  }
164  .btn-export:before {
165    content: '\21E5';
166    position: absolute;
167    font-size: 1.7em;
168    vertical-align: middle;
169    transform: rotate(90deg);
170    display: inline-block;
171    left: 2px;
172    top: -5px;
173  }
174  .btn-meta-copy,
175  .btn-delete,
176  .btn-resolve {
177    margin-left: 5px;
178    padding: .5em .5em;
179  }
180
181  // Single event log card
182  .sys-log__single-event {
183    border: 1px solid $border-color-01;
184    padding: 1em 1em 1em .7em;
185    margin: .5em 0 .5em 0;
186    position: relative;
187    overflow: hidden;
188    @include fastTransition-all;
189    &.active {
190      background-color: $background-02;
191      @include slowTransition-all;
192    }
193  }
194  .sys-log__event-info {
195    &:hover {
196      cursor: pointer;
197    }
198  }
199
200  //Event description
201  .event__description {
202    font-weight: 400;
203    flex:35%;
204    word-break: break-word;
205  }
206
207  //Event ID
208  .event__id {
209    @include fontCourierBold;
210    font-size: .9em;
211    color: $text-02;
212    margin-right: 1em;
213  }
214
215  .event__timestamp {
216    text-align: right;
217    @include fontCourierBold;
218    font-size: .9em;
219    color: $text-02;
220    max-width: 18em;
221    @media (min-width: 1105px) {
222      float: right;
223    }
224  }
225
226  // Event metadata row
227  .event__metadata-row {
228    max-height: 0;
229    overflow: hidden;
230    transition: max-height .5s linear;
231    &.active {
232      max-height: 1000px;
233      @include mediaQuery(small) {
234        max-height: 1000px;
235      }
236      @include mediaQuery(medium) {
237        max-height: 1000px;
238      }
239    }
240  }
241
242  //Event metadata
243  .event__metadata {
244    height: 200px;
245    overflow-y: scroll;
246    border: 1px solid $border-color-01;
247    padding: .5em .5em 0;
248    background: $primary-light;
249    display: block;
250    margin-bottom: 1.5em;
251    &::-webkit-scrollbar {
252      -webkit-appearance: none;
253      width: 7px;
254    }
255    &::-webkit-scrollbar-thumb {
256      border-radius: 4px;
257      background-color: rgba(0, 0, 0, .5);
258      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
259    }
260  }
261
262  //Event Related Items
263  .event__related {
264    width: 100%;
265  }
266  .event__related-label {
267    font-weight: 700;
268    margin-right: 1.2em;
269    padding-top: .3em;
270    float: left;
271  }
272  .event__related-item {
273    margin-right: 1em;
274    padding-top: .3em;
275    display: inline-block;
276    float: left;
277    clear: both;
278  }
279  .event__actions {
280    margin-left: -1em;
281    margin-top: .5em;
282    @include mediaQuery(medium) {
283      float: right;
284      margin-top: -5px;
285    }
286  }
287  .event__icon {
288    width: 20px;
289    height: 20px;
290    font-weight: normal;
291    margin-right: .5em;
292    margin-top: -3px;
293    display: inline-block;
294  }
295  .sort-ascending {
296    display: block;
297    padding: 0;
298    transform: rotate(-90deg);
299    font-size: 1em;
300    color: $text-02;
301    &:hover {
302      color: $primary-action;
303    }
304    &:after {
305      content: '\276F'
306    }
307    &:focus {
308      outline: 0;
309      color: $primary-action;
310    }
311  }
312  .sort-descending {
313    display: block;
314    padding: 0;
315    transform: rotate(-90deg);
316    font-size: 1em;
317    color: $text-02;
318    &:hover {
319      color: $primary-action;
320    }
321    &:after {
322      content: '\276e'
323    }
324    &:focus {
325      outline: 0;
326      color: $primary-action;
327    }
328  }
329}
330//end sys-log__logs
331