@mixin ellipsis($row) { overflow: hidden; text-overflow: ellipsis; @if $row == 1 { display: block; white-space: nowrap; word-wrap: normal; } @else if $row >= 2 { display: -webkit-box; -webkit-line-clamp: $row; -webkit-box-orient: vertical; word-wrap: break-word; } } @mixin disable-selection { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .search-scrollbar { height: 550px; } ::ng-deep .search-area { .search-container { width: 100%; max-width: 100%; .icon-img { color: #777777; transform: translateY(-4px); } .mat-form-field { color: #333333; width: 100%; margin-left: -20px; .mat-form-field-infix { padding-left: 26px; } } } } .table-box { font-size: 13px; width: 100%; overflow: hidden; display: flex; table { table-layout: fixed; width: 100%; th { @include disable-selection; text-align: center; &.profile { width: 200px; min-width: 200px; } } td.mat-cell { padding: 6px; position: relative; width: 100px; div { @include ellipsis(1); &.table-item { display: flex; width: 200px; min-width: 200px; font-size: 1em; div { display: inline-flex; height: 100%; align-self: center; .name { @include ellipsis(1); font-size: 1em; font-weight: 600; } .status { font-size: 0.84em; } &.profile { width: 70px; text-overflow: unset; flex: 0 0 auto; .presence { transform: translateY(6px); } .thumbnail { cursor: pointer; &-mask { display: inline-block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 0; position: relative; img { width: 40px; height: auto; background-color: #efefef; } } } .marker-mobile-state { position: absolute; background-color: #ffffff; width: 20px; height: 20px; border-radius: 50%; bottom: 4px; left: 50px; display: flex; align-items: center; align-content: center; justify-content: center; .mat-icon { font-size: 0.9em; width: 18px; height: 18px; line-height: 18px; min-width: 18px; min-height: 18px; } } } } } } } } } .work-status { display: inline-block; justify-content: center; justify-items: center; color: #ffffff; height: 100%; min-width: 32px; margin-right: 4px; border-radius: 24px; flex: 0 0 auto; font-size: 0.8em; text-align: center; } ::ng-deep .search-result-footer { position: relative; .mat-paginator-container { .mat-paginator-page-size { position: absolute; left: 0; top: -10px; } .mat-paginator-range-actions { padding-top: 10px; } } }