summaryrefslogtreecommitdiff
path: root/public/css/_sass/elements/table.sass
blob: a1cf9360286289857ad693c71b862e1a0e6f0b14 (plain) (blame)
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
$table-color: $grey-darker !default
$table-background-color: $white !default

$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default

$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default

$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default

$table-row-hover-background-color: $white-bis !default

$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default

$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default

.table
  @extend %block
  background-color: $table-background-color
  color: $table-color
  td,
  th
    border: $table-cell-border
    border-width: $table-cell-border-width
    padding: $table-cell-padding
    vertical-align: top
    // Colors
    @each $name, $pair in $colors
      $color: nth($pair, 1)
      $color-invert: nth($pair, 2)
      &.is-#{$name}
        background-color: $color
        border-color: $color
        color: $color-invert
    // Modifiers
    &.is-narrow
      white-space: nowrap
      width: 1%
    &.is-selected
      background-color: $table-row-active-background-color
      color: $table-row-active-color
      a,
      strong
        color: currentColor
  th
    color: $table-cell-heading-color
    text-align: left
  tr
    &.is-selected
      background-color: $table-row-active-background-color
      color: $table-row-active-color
      a,
      strong
        color: currentColor
      td,
      th
        border-color: $table-row-active-color
        color: currentColor
  thead
    background-color: $table-head-background-color
    td,
    th
      border-width: $table-head-cell-border-width
      color: $table-head-cell-color
  tfoot
    background-color: $table-foot-background-color
    td,
    th
      border-width: $table-foot-cell-border-width
      color: $table-foot-cell-color
  tbody
    background-color: $table-body-background-color
    tr
      &:last-child
        td,
        th
          border-bottom-width: 0
  // Modifiers
  &.is-bordered
    td,
    th
      border-width: 1px
    tr
      &:last-child
        td,
        th
          border-bottom-width: 1px
  &.is-fullwidth
    width: 100%
  &.is-hoverable
    tbody
      tr:not(.is-selected)
        &:hover
          background-color: $table-row-hover-background-color
    &.is-striped
      tbody
        tr:not(.is-selected)
          &:hover
            background-color: $table-row-hover-background-color
            &:nth-child(even)
              background-color: $table-striped-row-even-hover-background-color
  &.is-narrow
    td,
    th
      padding: 0.25em 0.5em
  &.is-striped
    tbody
      tr:not(.is-selected)
        &:nth-child(even)
          background-color: $table-striped-row-even-background-color

.table-container
  @extend %block
  +overflow-touch
  overflow: auto
  overflow-y: hidden
  max-width: 100%