@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; } &.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { font-size: 0.7em; transform: translateY(-1.28125em) scale(1); } } } } .table-box { font-size: 13px; width: 100%; overflow: hidden; display: flex; table { table-layout: fixed; width: 100%; th { @include disable-selection; text-align: center; } td.mat-cell { padding: 6px; position: relative; width: 100px; div { @include ellipsis(1); .name { font-size: 1em; font-weight: 600; } .status { font-size: 0.84em; } &.profile { width: 60px; text-overflow: unset; .presence { transform: translateY(-30px); } .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: 6px; 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; } .mat-paginator-container { display: flex; flex-flow: column; }