styles/partials/table.scss


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

$table: $grey-dark;
$table-background: $light;
$table-border: $grey-light;
$table-head: $grey;
$table-row-hover-background: $grey-light;

table {
  background-color: $table-background;
  color: $table;
  margin: 2rem auto;
  width: 100%;
  border-collapse: collapse;
  border-radius: $radius-large;

  td,
  th {
    border: 1px solid $table-border;
    border-width: 0 0 1px;
    padding: 0.5em 0.75em;
    vertical-align: center;
  }

  th {
    color: $text-strong;
  }

  tr {
    &:hover {
      background-color: $table-row-hover-background;
    }
  }

  thead {
    td,
    th {
      border-width: 0 0 2px;
      color: $table-head;
    }
  }

  tfoot {
    td,
    th {
      border-width: 2px 0 0;
      color: $table-head;
    }
  }

  tbody {
    tr {
      &:last-child {
        td,
        th {
          border-bottom-width: 0;
        }
      }
    }
  }

  // Make border-radius
  tr:first-child th:first-child {
    border-top-left-radius: $radius-large;
  }
  tr:first-child th:last-child{
    border-top-right-radius: $radius-large;
  }
  tr:last-child td:first-child{
    border-bottom-left-radius: $radius-large;
  }
  tr:last-child td:last-child{
    border-bottom-right-radius: $radius-large;
  }
}