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    flex:35%;
219    word-break: break-word;
220  }
221
222  //Event ID
223  .event__id {
224    @include fontCourierBold;
225    font-size: .9em;
226    color: $darkgrey;
227    margin-right: 1em;
228  }
229
230  .event__timestamp {
231    text-align: right;
232    @include fontCourierBold;
233    font-size: .9em;
234    color: $darkgrey;
235    max-width: 18em;
236    @media (min-width: 1105px) {
237      float: right;
238    }
239  }
240
241  // Event metadata row
242  .event__metadata-row {
243    max-height: 0;
244    overflow: hidden;
245    transition: max-height .5s linear;
246    &.active {
247      max-height: 1000px;
248      @include mediaQuery(small) {
249        max-height: 1000px;
250      }
251      @include mediaQuery(medium) {
252        max-height: 1000px;
253      }
254    }
255  }
256
257  //Event metadata
258  .event__metadata {
259    height: 200px;
260    overflow-y: scroll;
261    border: 1px solid $medgrey;
262    padding: .5em .5em 0;
263    background: $white;
264    display: block;
265    margin-bottom: 1.5em;
266    &::-webkit-scrollbar {
267      -webkit-appearance: none;
268      width: 7px;
269    }
270    &::-webkit-scrollbar-thumb {
271      border-radius: 4px;
272      background-color: rgba(0, 0, 0, .5);
273      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
274    }
275  }
276
277  //Event Related Items
278  .event__related {
279    width: 100%;
280  }
281  .event__related-label {
282    font-weight: 700;
283    margin-right: 1.2em;
284    padding-top: .3em;
285    float: left;
286  }
287  .event__related-item {
288    margin-right: 1em;
289    padding-top: .3em;
290    display: inline-block;
291    float: left;
292    clear: both;
293  }
294  .event__actions {
295    margin-left: -1em;
296    margin-top: .5em;
297    @include mediaQuery(medium) {
298      float: right;
299      margin-top: -5px;
300    }
301  }
302  .event__icon {
303    width: 20px;
304    height: 20px;
305    font-weight: normal;
306    margin-right: .5em;
307    margin-top: -3px;
308    display: inline-block;
309  }
310  .sort-ascending {
311    display: block;
312    padding: 0;
313    transform: rotate(-90deg);
314    font-size: 1em;
315    color: lighten($darkgrey, 10%);
316    &:hover {
317      color: $darkbg__accent;
318    }
319    &:after {
320      content: '\276F'
321    }
322    &:focus {
323      outline: 0;
324      color: $darkbg__accent;
325    }
326  }
327  .sort-descending {
328    display: block;
329    padding: 0;
330    transform: rotate(-90deg);
331    font-size: 1em;
332    color: lighten($darkgrey, 10%);
333    &:hover {
334      color: $darkbg__accent;
335    }
336    &:after {
337      content: '\276e'
338    }
339    &:focus {
340      outline: 0;
341      color: $darkbg__accent;
342    }
343  }
344}
345//end sys-log__logs
346