table.scss

$breakpoint-alpha: 800px;
.table-search {
    display: flex;
    padding: 1.3em 1.6em;
    input {
        font-size: 14px;
        flex: 1 1 100%;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        border: none;
        background-color: transparent;
        outline: -webkit-focus-ring-color auto 0 !important;
    }
    >md-icon {
        margin-right: 16px;
        margin-top: 2px;
    }
}

[table-loading] {
    position: absolute;
    width: 100%;
    margin-top: 59px !important;
    background-color: rgba(255, 255, 255, .9);
    height: calc(100% - 59px);
    z-index: 1;
}

[table-no-entries] {
    padding: 1.6em;
}

.mat-card[has-table] {
    padding: 0px;
    .mat-card-actions {
        padding: 8px !important;
        margin: 0;
        border-top: 1px solid #dbdbdb;
        border-color: rgba(0, 0, 0, .09);
        .mat-icon-button {
            color: rgba(0, 0, 0, .54);
            &[disabled] {
                color: rgba(0, 0, 0, .18);
            }
        }
        .mat-paginator-page-size-label {
            margin: 0 15px;
            color: rgba(0, 0, 0, .54);
            font-size: 12px;
            font-weight: 400;
        }
    }
}

.table {
    width: 100%;
    margin-bottom: 0px;
    .actions {
        .button {
            margin-bottom: -.25em;
            margin-top: -.15em;
        }
    }
    thead {
        tr {
            background-color: rgba(0, 0, 0, .04) !important;
        }
        td,
        th {
            &:first-of-type {
                padding-left: 1.8em;
            }
            &:last-of-type {
                padding-right: 1.8em;
            }
            md-icon {
                height: 16px;
                width: 16px;
                line-height: 16px;
                font-size: 16px;
                vertical-align: bottom;
                margin-right: 3px;
            }
        }
    }
    tbody {
        td,
        th {
            border-color: rgba(0, 0, 0, .04);
            &:first-of-type {
                padding-left: 1.6em;
            }
            &:last-of-type {
                padding-right: 1.6em;
            }
        }
    }
    thead {
        td,
        th {
            color: rgba(0, 0, 0, .54);
            font-size: 12px;
            font-weight: 400;
            padding: 1.3em 0.75em;
            border: none;
            border-width: 0 0 0px;
        }
    }
    tbody {
        td {
            color: rgba(0, 0, 0, .87);
            padding: 1.0em 0.75em;
            font-size: .9rem;
            font-weight: 400
        }
    }
    @media (max-width: $breakpoint-alpha) {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        overflow-x: auto; // optional - looks better for small cell values
        white-space: nowrap;
        border-collapse: collapse;
        border-spacing: 0;
        display: flex;
        overflow: hidden;
        background: none;
        .actions a {
            margin-top: -.35em;
        }
        .is-pulled-right {
            float: none !important;
        }
        thead {
            display: flex;
            flex-shrink: 0;
            min-width: min-content;
            th,
            td {
                padding: 1.3em 1.8em;
                text-align: right;
                md-icon {
                    margin-right: 0px;
                }
            }
        }
        tbody {
            flex: 1 1 100%;
            box-sizing: border-box;
            -webkit-box-flex: 1; // optional - enable iOS momentum scrolling
            -webkit-overflow-scrolling: touch; // scrolling shadows
            background: radial-gradient(left, ellipse, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
            background-size: 10px 100%, 10px 100%;
            background-attachment: scroll, scroll;
            background-repeat: no-repeat;
            display: flex;
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            margin-right: 1.6em;
            tr {
                flex: 1 1 100%;
                box-sizing: border-box;
                -webkit-box-flex: 1;
            }
            th,
            td {
                padding: 1.155em 1.6em;
                text-align: left !important;
                &:first-of-type {
                    padding-left: 1.6em;
                }
                &:last-of-type {
                    padding-right: 1.6em;
                }
            }
        }
        tr {
            display: flex;
            flex-direction: column;
            min-width: min-content;
            flex-shrink: 0;
        }
        th,
        td {
            display: block;
            background-image: none !important; // border-collapse is no longer active
            border-left: 0;
            &:first-child {
                background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
                background-repeat: no-repeat;
                background-size: 20px 100%;
            }
            &:last-child {
                background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
                background-repeat: no-repeat;
                background-position: 100% 0;
                background-size: 20px 100%;
            }
            &:not(:last-child) {
                border-bottom: 0;
            }
        }
    }
}

.table {
     ::-webkit-scrollbar {
        height: 8px;
        overflow: visible;
        width: 16px;
    }
     ::-webkit-scrollbar-button {
        height: 0;
        width: 0;
    }
     ::-webkit-scrollbar-corner {
        background: transparent;
    }
     ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        background-clip: padding-box;
        border: solid transparent;
        border-width: 1px 1px 1px 6px;
        min-height: 28px;
        padding: 100px 0 0;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
    }
     ::-webkit-scrollbar-track {
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 4px;
    }
}

[enterlist] {
    [has-table] {
        margin-right: -24px;
        margin-left: -24px;
        .table {
            background-color: transparent;
            thead tr {
                background-color: rgba(0, 0, 0, 0.02) !important;
            }
            tr {
                &:hover {
                    background-color: inherit;
                }
            }
        }
    }
}