@thl-ui/styles 0.0.0-stage → 0.1.1

package/src/components/_table.scss

@@ -0,0 +1,215 @@
+@use '../mixins' as *;
+
+.#{$p}-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.#{$p}-table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+  color: v(text);
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .#{$p}-input {
+    width: auto;
+  }
+}
+.#{$p}-table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  color: v(text);
+  font-size: 13px;
+  .#{$p}-pagination {
+    margin: 0;
+  }
+}
+
+.#{$p}-table {
+  --_head-bg: transparent;
+  --_head-fg: #{v(heading)};
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  color: v(text);
+  font-size: 14px;
+  th,
+  td {
+    padding: 15px 8px;
+    text-align: start;
+    vertical-align: middle;
+    border-top: 1px solid v(border-color);
+  }
+  thead th {
+    color: var(--_head-fg);
+    background: var(--_head-bg);
+    font-weight: 500;
+    border-top: 0;
+    border-bottom: 1px solid v(border-color);
+    white-space: nowrap;
+  }
+  tbody tr.is-selected td {
+    background: color-mix(in srgb, #{v(theme)} 6%, transparent);
+  }
+  &--striped tbody tr:nth-child(odd) td {
+    background: v(surface-muted);
+  }
+  &--hover tbody tr:hover td {
+    background: color-mix(in srgb, #{v(surface-muted)} 70%, #{v(border-color)});
+  }
+  &--bordered {
+    border: 1px solid v(border-color);
+    th,
+    td {
+      border: 1px solid v(border-color);
+    }
+  }
+  &--compact th,
+  &--compact td {
+    padding: 8px;
+  }
+  &__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    &-icon {
+      display: inline-flex;
+      flex-direction: column;
+      font-size: 8px;
+      line-height: 7px;
+      opacity: 0.35;
+    }
+    &.is-asc .#{$p}-table__sort-icon > :first-child,
+    &.is-desc .#{$p}-table__sort-icon > :last-child {
+      opacity: 1;
+      color: v(theme-text);
+    }
+    &.is-asc,
+    &.is-desc {
+      color: v(theme-text);
+      .#{$p}-table__sort-icon {
+        opacity: 1;
+      }
+    }
+  }
+  &__sort-icon > * {
+    opacity: 0.5;
+  }
+  &__check {
+    width: 40px;
+  }
+  &__empty td {
+    text-align: center;
+    padding: 30px;
+    color: v(text);
+  }
+  &__cell--center {
+    text-align: center !important;
+  }
+  &__cell--right {
+    text-align: end !important;
+  }
+  &__editable {
+    cursor: text;
+    border-bottom: 1px dashed v(link);
+    &:hover {
+      color: v(link);
+    }
+  }
+  &__edit-input {
+    width: 100%;
+    min-width: 80px;
+  }
+
+  /* colored header / full color tables */
+  @each $c in $colors {
+    &--color-#{$c} {
+      --_head-bg: #{v(color-#{$c})};
+      --_head-fg: #{on($c)};
+    }
+    &--full-#{$c} {
+      --_head-bg: #{v(color-#{$c})};
+      --_head-fg: #{on($c)};
+      tbody td {
+        background: color-mix(in srgb, #{v(color-#{$c})} 18%, #{v(surface)});
+        color: v(text-strong);
+        border-color: color-mix(in srgb, #{v(color-#{$c})} 30%, transparent);
+      }
+      &.#{$p}-table--hover tbody tr:hover td {
+        background: color-mix(in srgb, #{v(color-#{$c})} 30%, #{v(surface)});
+      }
+    }
+    &--bordered-#{$c} {
+      border: 1px solid v(color-#{$c});
+      th,
+      td {
+        border-color: v(color-#{$c});
+      }
+      --_head-bg: #{v(color-#{$c})};
+      --_head-fg: #{on($c)};
+    }
+  }
+  &--color-muted {
+    --_head-bg: #{v(color-muted)};
+    --_head-fg: #{on('muted')};
+  }
+
+  /* responsive stacked mode */
+  @include down(sm) {
+    &--stack {
+      thead {
+        display: none;
+      }
+      tr {
+        display: block;
+        border-bottom: 2px solid v(border-color);
+      }
+      td {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        border: 0;
+        padding: 8px;
+        text-align: end;
+        &::before {
+          content: attr(data-label);
+          font-weight: 600;
+          color: v(heading);
+          text-align: start;
+        }
+      }
+    }
+  }
+}
+.#{$p}-col-hidden-sm {
+  @include down(sm) {
+    display: none;
+  }
+}
+.#{$p}-col-hidden-md {
+  @include down(md) {
+    display: none;
+  }
+}
+.#{$p}-col-hidden-lg {
+  @include down(lg) {
+    display: none;
+  }
+}