@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; } } .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; td.mat-cell { padding: 6px; div { @include ellipsis(1); &.name { font-size: 1em; font-weight: 600; } &.status { font-size: 0.84em; } } } } .thumbnail { &-mask { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 12px; position: relative; img { width: 40px; height: auto; background-color: #efefef; } } }