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