@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; } } ::ng-deep .rightDrawer-filebox { width: 100%; height: calc(100% - 60px); .rightDrawer-tab { .mat-tab-label { width: 50%; } } } .select-filebox { position: relative; display: flex; flex-flow: column; margin: 10px; border: 1px solid #cccccc; border-radius: 4px; .select-flie { display: flex; flex-flow: row; align-items: center; color: #212121; align-items: center; padding: 10px; border-bottom: 1px dotted #dddddd; ul { padding: 0; .name { font-weight: 600; } } } .empty-msg { display: inline-flex; flex-flow: column; margin: auto 0; align-items: center; justify-content: center; color: #999999; span { padding: 6px; } } .select-file-option { position: absolute; display: flex; justify-content: space-between; width: 100%; text-align: center; padding: 10px 0; bottom: 4px; span { width: 28px; height: 28px; display: inline-flex; text-align: center; justify-content: center; align-items: center; margin: 0 20px; cursor: pointer; svg { } &:hover { border-radius: 50%; background-color: #999999; color: #ffffff !important; } } } } .mat-table { width: 100%; position: relative; th.infos { padding: 10px; } tr.mat-row { height: 70px; .file-info { padding: 16px; display: grid; height: 70px; .file-name { font-weight: 600; margin-bottom: 2px; width: 100%; @include ellipsis(1); } .download-period { font-size: 12px; width: 100%; @include ellipsis(1); } } } } .table-box { height: calc(100% - 440px); overflow-y: auto; } .mat-paginator-container { display: flex; flex-flow: column; } .mat-row:hover { background: rgba(0, 0, 0, 0.04); cursor: pointer; } .footer-fix { position: absolute; bottom: 0; height: 160px; flex-direction: column; box-sizing: border-box; display: flex; border-top: 1px solid #dddddd; .btn-box { height: 50px; padding-bottom: 10px; width: 100%; background-color: #ffffff; button { margin: 5px; } } } ::ng-deep .mat-paginator { .mat-paginator-container { justify-content: center; } .mat-paginator-navigation-first { order: 1; } .mat-paginator-navigation-previous { order: 2; } // override material paginator page switch .mat-paginator-range-label { order: 3; } .mat-paginator-navigation-next { order: 4; } .mat-paginator-navigation-last { order: 5; } } ::ng-deep .mat-form-field-appearance-legacy { .mat-form-field-infix { padding: 6px; } }