1
2// Table Header
3.table-header {
4  width: 100%;
5  color: $black;
6  line-height: 30px;
7  padding: 10px 15px;
8
9  @include mediaQuery(medium) {
10    padding: 15px 20px;
11  }
12
13  @include mediaQuery(large) {
14    padding: 15px 30px;
15  }
16}
17
18
19// Table
20.table {
21  width: 100%;
22}
23
24.table__row {
25  display: flex;
26  width: 100%;
27  max-width: calc(100vw - 30px);
28  flex-wrap: wrap;
29  border-bottom: 1px solid $medgrey;
30  border-left: 1px solid $medgrey;
31  border-right: 1px solid $medgrey;
32  padding: 5px 0;
33
34  @include mediaQuery(small) {
35    padding: 0;
36  }
37}
38
39.table__cell {
40  flex: 0 0 100%;
41  line-height: 20px;
42  padding: 5px 15px;
43  white-space: nowrap;
44  overflow: hidden;
45  text-overflow: ellipsis;
46
47  @include mediaQuery(small) {
48    flex: 1;
49    padding: 15px 20px;
50  }
51
52  @include mediaQuery(large) {
53    padding: 15px 30px;
54  }
55}
56
57.table__cell-label {
58  display: inline-block;
59  font-weight: 700;
60  min-width: 50%;
61  padding-right: 15px;
62
63  @include mediaQuery(small) {
64    display: none;
65  }
66}
67
68// Table Head
69.table__head {
70  .table__row {
71    display: none;
72    font-weight: 700;
73    border-bottom: 1px solid $medgrey;
74    background-color: $darkbg__primary;
75    color: $white;
76
77    @include mediaQuery(small) {
78      display: flex;
79    }
80
81    .table__cell {
82      @include fastTransition-all();
83      position: relative;
84
85      &:last-child {
86        border: 0;
87      }
88    }
89  }
90}
91
92