pro-table/src/app/public/table/table.component.scss at e258136b90d2cfcf45bd9e0d0be7620fe62d32b3 · ProAngular/pro-table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
$table-bg: var(--mat-table-background-color);

:host {
  background: $table-bg;
  display: block;
  overflow-x: auto;
  overflow-y: auto;
}

:host.clickable tr:not(.expandable-row).mat-mdc-row {
  cursor: pointer;
}

table {
  background: $table-bg;
  border-collapse: collapse;
  width: 100%;

  ng-deep thead {
    background: $table-bg;

    > tr {
      background: $table-bg;
    }
  }

  td,
  th {
    text-align: left;
    padding: 0.5rem;
    border: none;
  }

  td.copyable:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  tr.expandable-row {
    height: 0;
    max-height: 0;
    min-height: 0;

    > td {
      margin: 0;
      padding: 0;
      height: 0;
    }
  }

  td {
    background-color: inherit;

    button.expandable-row-button {
      margin: 0 0 0 0.25rem;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    > div.expandable-row-details {
      background-color: inherit;
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      width: 100%;
      transition: grid-template-rows 100ms ease-in;

      > div {
        overflow: hidden;
        width: 100%;
      }
    }

    > div.expandable-row-details.open {
      grid-template-rows: 1fr;
      transition: grid-template-rows 100ms ease-out;
    }
  }
}

table tr.mat-mdc-row.even {
  background: $table-bg;
}

:host.highlight-odd-rows table tr.mat-mdc-row.odd {
  background: color-mix(in srgb, $table-bg 90%, black 10%);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, black, white)) {
  :host.highlight-odd-rows table tr.mat-mdc-row.odd {
    position: relative;
  }

  :host.highlight-odd-rows table tr.mat-mdc-row.odd::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }
}

table td {
  background-color: inherit;
}

tr.empty > td,
p.loading {
  padding: 1rem;
}

::ng-deep pro-table {
  .mat-mdc-table thead > tr > th.mat-sort-header {
    background: var(--mat-table-background-color);
  }
}

/* Animations */

@keyframes exp-leave-hold {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.exp-leave {
  animation: exp-leave-hold 100ms linear both;
}