assets/main/sass/components/_table.scss

   1 ///
   2 /// Massively 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;
  21                                 border-left: 0;
  22                                 border-right: 0;
  23                         }
  24                 }
  25
  26                 td {
  27                         padding: 0.75rem 0.75rem;
  28                 }
  29
  30                 th {
  31                         font-family: _font(family-heading);
  32                         font-size: 0.8rem;
  33                         font-weight: _font(weight-heading);
  34                         letter-spacing: 0.075em;
  35                         line-height: 1.5;
  36                         padding: 0 0.75rem 0.75rem 0.75rem;
  37                         text-align: left;
  38                         text-transform: uppercase;
  39
  40                         @include breakpoint('<=medium') {
  41                                 font-size: 0.9rem;
  42                         }
  43                 }
  44
  45                 thead {
  46                         border-bottom: solid 2px;
  47                 }
  48
  49                 tfoot {
  50                         border-top: solid 2px;
  51                 }
  52
  53                 &.alt {
  54                         border-collapse: separate;
  55
  56                         tbody {
  57                                 tr {
  58                                         td {
  59                                                 border: solid 1px;
  60                                                 border-left-width: 0;
  61                                                 border-top-width: 0;
  62
  63                                                 &:first-child {
  64                                                         border-left-width: 1px;
  65                                                 }
  66                                         }
  67
  68                                         &:first-child {
  69                                                 td {
  70                                                         border-top-width: 1px;
  71                                                 }
  72                                         }
  73                                 }
  74                         }
  75
  76                         thead {
  77                                 border-bottom: 0;
  78                         }
  79
  80                         tfoot {
  81                                 border-top: 0;
  82                         }
  83                 }
  84         }
  85
  86         @mixin color-table($p: null) {
  87                 table {
  88                         tbody {
  89                                 tr {
  90                                         border-color: _palette($p, border);
  91
  92                                         &:nth-child(2n + 1) {
  93                                                 background-color: _palette($p, border-bg);
  94                                         }
  95                                 }
  96                         }
  97
  98                         th {
  99                                 color: _palette($p, fg-bold);
 100                         }
 101
 102                         thead {
 103                                 border-bottom-color: _palette($p, border);
 104                         }
 105
 106                         tfoot {
 107                                 border-top-color: _palette($p, border);
 108                         }
 109
 110                         &.alt {
 111                                 tbody {
 112                                         tr {
 113                                                 td {
 114                                                         border-color: _palette($p, border);
 115                                                 }
 116                                         }
 117                                 }
 118                         }
 119                 }
 120         }
 121
 122         @include color-table;