assets/sass/components/_table.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Table */
   8
   9         .table-wrapper {
  10                 -webkit-overflow-scrolling: touch;
  11                 overflow-x: auto;
  12         }
  13
  14         table {
  15                 margin: 0 0 _size(element-margin) 0;
  16                 width: 100%;
  17
  18                 tbody {
  19                         tr {
  20                                 border: solid 1px _palette_light(border);
  21                                 border-left: 0;
  22                                 border-right: 0;
  23                                 @media screen and (prefers-color-scheme: dark) {
  24                                         border: solid 1px _palette_dark(border);
  25                                 }
  26
  27                                 &:nth-child(2n + 1) {
  28                                         background-color: _palette_light(border-bg);
  29                                         @media screen and (prefers-color-scheme: dark) {
  30                                                 background-color: _palette_dark(border-bg);
  31                                         }
  32                                 }
  33                         }
  34                 }
  35
  36                 td {
  37                         padding: 0.75em 0.75em;
  38                 }
  39
  40                 th {
  41                         color: _palette_light(fg-bold);
  42                         font-size: 0.9em;
  43                         font-weight: _font(weight-bold);
  44                         padding: 0 0.75em 0.75em 0.75em;
  45                         text-align: left;
  46                         @media screen and (prefers-color-scheme: dark) {
  47                                 color: _palette_dark(fg-bold);
  48                         }
  49                 }
  50
  51                 thead {
  52                         border-bottom: solid 2px _palette_light(border);
  53                         @media screen and (prefers-color-scheme: dark) {
  54                                 border-bottom: solid 2px _palette_dark(border);
  55                         }
  56                 }
  57
  58                 tfoot {
  59                         border-top: solid 2px _palette_light(border);
  60                         @media screen and (prefers-color-scheme: dark) {
  61                                 border-top: solid 2px _palette_dark(border);
  62                         }
  63                 }
  64
  65                 &.alt {
  66                         border-collapse: separate;
  67
  68                         tbody {
  69                                 tr {
  70                                         td {
  71                                                 border: solid 1px _palette_light(border);
  72                                                 border-left-width: 0;
  73                                                 border-top-width: 0;
  74                                                 @media screen and (prefers-color-scheme: dark) {
  75                                                         border-top: solid 1px _palette_dark(border);
  76                                                 }
  77
  78                                                 &:first-child {
  79                                                         border-left-width: 1px;
  80                                                 }
  81                                         }
  82
  83                                         &:first-child {
  84                                                 td {
  85                                                         border-top-width: 1px;
  86                                                 }
  87                                         }
  88                                 }
  89                         }
  90
  91                         thead {
  92                                 border-bottom: 0;
  93                         }
  94
  95                         tfoot {
  96                                 border-top: 0;
  97                         }
  98                 }
  99         }