packages/styles/scss/components/_simple-table.scss

   1 .simple-table {
   2         @extend .border-collapse;
   3         @extend .border-none;
   4
   5         inline-size: 100%;
   6
   7         --table-border-color: var(--border-norm);
   8
   9         &--border-weak {
  10                 --table-border-color: var(--border-weak);
  11         }
  12
  13         caption {
  14                 transform: scale(0);
  15         }
  16
  17         td,
  18         th {
  19                 padding: var(--space-2);
  20                 border-block-end: 1px solid var(--table-border-color);
  21         }
  22
  23         // NEW RESPONSIVE TABLES
  24         &--responsive {
  25                 @include media('<=medium') {
  26                         td {
  27                                 display: block;
  28                                 margin: 0;
  29                                 padding: 0;
  30                                 border: none;
  31                         }
  32
  33                         thead {
  34                                 display: none;
  35                         }
  36
  37                         tr {
  38                                 display: block;
  39                         }
  40                 }
  41         }
  42
  43         &--responsive-stacked {
  44                 @include media('<=medium') {
  45                         tr {
  46                                 margin-block-end: var(--space-2);
  47                                 border-block-end: 1px solid var(--table-border-color);
  48                         }
  49
  50                         td {
  51                                 padding-block-end: var(--space-2);
  52                         }
  53                 }
  54         }
  55
  56         &--responsive-cards {
  57                 @include media('<=medium') {
  58                         tr {
  59                                 padding: var(--space-3);
  60                                 border: 1px solid var(--table-border-color);
  61                                 border-radius: var(--border-radius-lg);
  62
  63                                 &:not(:last-child) {
  64                                         margin-block-end: var(--space-3);
  65                                 }
  66                         }
  67
  68                         td {
  69                                 &:not(:last-child) {
  70                                         padding-block-end: var(--space-2);
  71                                 }
  72                         }
  73                 }
  74         }
  75
  76         &--responsive &__th-small {
  77                 display: none;
  78
  79                 @include media('<=medium') {
  80                         display: flex;
  81                         align-content: center;
  82                         font-weight: var(--font-weight-medium);
  83                         color: var(--text-weak);
  84                         font-size: 0.86em;
  85                         margin: 0;
  86                 }
  87         }
  88
  89         // END
  90
  91         th:not(#{&}-row-th) {
  92                 text-align: start;
  93
  94                 &.text-center {
  95                         text-align: center;
  96                 }
  97
  98                 &.text-right {
  99                         text-align: end;
 100                 }
 101         }
 102
 103         // no style for this case
 104         &-row-th {
 105                 font-weight: var(--font-weight-normal);
 106         }
 107
 108         /* alternate bg for rows */
 109         &--alternate-bg-row tbody tr:nth-child(odd) {
 110                 background-color: var(--background-weak);
 111         }
 112
 113         &--is-hoverable tbody tr {
 114                 @media (hover: hover) {
 115                         &:hover,
 116                         &:focus-within {
 117                                 background-color: var(--interaction-default-hover);
 118                         }
 119                 }
 120         }
 121
 122         tr#{&}-sticky-row {
 123                 td,
 124                 th {
 125                         position: sticky;
 126                         inset-block-start: 0;
 127                         background: var(--background-norm);
 128                         z-index: 1;
 129
 130                         &::after {
 131                                 content: '';
 132                                 position: absolute;
 133                                 inset-block-start: 100%;
 134                                 inset-inline: 0;
 135                                 z-index: -1;
 136                                 block-size: rem(10);
 137                                 background: linear-gradient(to bottom, rgb(0 0 0 / var(--shadow-norm-opacity)) 0%, transparent 100%);
 138                                 pointer-events: none;
 139                                 transition: opacity 0.125s ease-out;
 140                         }
 141                 }
 142         }
 143
 144         tr#{&}-sticky-row#{&}-sticky-row--is-on-top {
 145                 td,
 146                 th {
 147                         &::after {
 148                                 opacity: 0;
 149                         }
 150                 }
 151         }
 152
 153         /* border-table */
 154         &--border {
 155                 &,
 156                 th,
 157                 td {
 158                         border: 1px solid var(--table-border-color);
 159                 }
 160         }
 161
 162         &--has-actions {
 163                 &#{&} {
 164                         // Specificity -_-v
 165                         td,
 166                         th {
 167                                 &:last-child {
 168                                         text-align: end;
 169                                 }
 170                         }
 171                 }
 172         }
 173
 174         // TODO: refactor this
 175         @include media('<=medium') {
 176                 &--responsive#{&}--has-actions {
 177                         td,
 178                         th {
 179                                 &:last-child {
 180                                         text-align: start;
 181                                 }
 182                         }
 183                 }
 184         }
 185 }
 186
 187 .alternate-table-bg-row-rounded {
 188         @extend .border-none;
 189
 190         inline-size: 100%;
 191         border-spacing: 0; // no border-collapse for radius ^^
 192
 193         td,
 194         th {
 195                 padding: var(--space-2);
 196         }
 197
 198         /* alternate bg for rows */
 199         tbody tr:nth-child(odd) {
 200                 // bg on all cells
 201                 > * {
 202                         background-color: var(--background-weak);
 203                 }
 204
 205                 // radiuses
 206                 > :first-child {
 207                         border-start-start-radius: var(--border-radius-lg);
 208                         border-end-start-radius: var(--border-radius-lg);
 209                 }
 210
 211                 > :last-child {
 212                         border-start-end-radius: var(--border-radius-lg);
 213                         border-end-end-radius: var(--border-radius-lg);
 214                 }
 215         }
 216 }