@rt-tools/ui-kit 0.0.4

package/src/styles/components/_table.scss

@@ -0,0 +1,239 @@
+@use '../base/mixin' as mixins;
+
+$table: (
+    header: (
+        z-index: 2,
+        font-size: 0.875rem,
+        background-color: var(--mat-form-field-filled-container-color),
+    ),
+    header-row-last-child: (
+        border-bottom: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-20),
+    ),
+    body: (
+        font-size: 0.875rem,
+        background-color: transparent,
+    ),
+    row: (
+        height: 3rem,
+        color: var(--clr-txt),
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-black-20),
+        background-color: transparent,
+    ),
+    row-hover: (
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
+        transition: 0.2s,
+    ),
+    row-active: (
+        border-bottom: var(--rt-table-row-border-bottom-width) solid var(--clr-blue-100),
+    ),
+    header-cell-wrapper: (
+        padding: 0.625rem,
+        text-color: var(--clr-txt),
+        font-size: 1rem,
+        font-weight: 500,
+        text-align: left,
+        line-height: 1.2,
+        border-right: var(--rt-table-header-cell-wrapper-border-width) solid var(--clr-black-40),
+        background-color: var(--clr-white-100),
+    ),
+    header-filterable-cell-wrapper: (
+        padding: 0.25rem 0.5rem,
+    ),
+    base-cell-wrapper: (
+        padding: 0.625rem,
+    ),
+    base-cell-wrapper-last-child: (
+        padding: 0.625rem 4rem 0.625rem 0.625rem,
+    ),
+    actions: (
+        z-index: 1,
+    ),
+    actions-container: (
+        background-color: var(--clr-white-100),
+    ),
+);
+
+:root {
+    @each $element, $elements in $table {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('table', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+
+    // initial table container scrollbar styles
+    --rt-table-container-content-scrollbar-vertical-width: 0;
+    --rt-table-container-content-scrollbar-horizontal-height: 12px;
+
+    --rt-table-row-border-bottom-width: 1px;
+    --rt-table-header-cell-wrapper-border-width: 1px;
+}
+
+// TABLE
+.c-table {
+    width: 100%;
+
+    border-collapse: collapse;
+
+    overflow-x: scroll;
+    overflow-y: scroll;
+
+    thead {
+        position: sticky;
+        top: 0;
+        z-index: var(--rt-table-header-z-index);
+        font-size: var(--rt-table-header-font-size);
+
+        tr {
+            &:last-child {
+                border-bottom: var(--rt-table-header-row-last-child-border-bottom);
+            }
+
+            th {
+                background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 50%);
+
+                &:not(.c-table__cell--filterable):not(.c-table__cell--empty) {
+                    background-color: var(--rt-table-header-background-color);
+                }
+
+                &:hover {
+                    &:not(.c-table__cell--selectable):not(.c-table__cell--filterable) {
+                        background-color: color-mix(in srgb, var(--rt-table-header-background-color), var(--clr-white-100) 30%);
+                    }
+                }
+            }
+        }
+    }
+
+    tbody {
+        font-size: var(--rt-table-body-font-size);
+        background-color: var(--rt-table-body-background-color);
+    }
+}
+
+// ROW
+.c-table__row {
+    height: var(--rt-table-row-height);
+    color: var(--rt-table-row-color);
+    border-bottom: var(--rt-table-row-border-bottom);
+    background-color: var(--rt-table-row-background-color);
+
+    transform: translate(0);
+
+    &--active {
+        border-bottom: var(--rt-table-row-active-border-bottom);
+    }
+
+    &--clickable {
+        cursor: pointer;
+    }
+
+    &:hover {
+        border-bottom: var(--rt-table-row-hover-border-bottom);
+        transition: var(--rt-table-row-hover-transition);
+
+        .c-table-actions {
+            visibility: visible;
+        }
+    }
+}
+
+// CELL
+th.c-table__cell {
+    width: fit-content;
+    height: 100%;
+
+    position: relative;
+
+    pointer-events: none;
+
+    padding: var(--rt-table-header-cell-wrapper-padding);
+    color: var(--rt-table-header-cell-wrapper-text-color);
+    font-size: var(--rt-table-header-cell-wrapper-font-size);
+    font-weight: var(--rt-table-header-cell-wrapper-font-weight);
+    text-align: var(--rt-table-header-cell-wrapper-text-align);
+    line-height: var(--rt-table-header-cell-wrapper-line-height);
+    background-color: var(--rt-table-header-cell-wrapper-background-color);
+
+    &--sortable,
+    &--selectable,
+    &--filterable {
+        pointer-events: auto;
+    }
+
+    &--filterable {
+        padding: var(--rt-table-header-filterable-cell-wrapper-padding);
+    }
+
+    &:not(:last-child):not(&--selectable):not(&--empty) {
+        &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 25%;
+            height: 50%;
+            border-right: var(--rt-table-header-cell-wrapper-border-right);
+            pointer-events: none;
+        }
+    }
+}
+
+td.c-table__cell {
+    width: fit-content;
+    height: 100%;
+
+    padding: var(--rt-table-base-cell-wrapper-padding);
+}
+
+// ROW ACTIONS
+.c-table-actions {
+    width: 100%;
+    height: var(--rt-table-row-height);
+
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: var(--rt-table-actions-z-index);
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    pointer-events: none;
+
+    &__container {
+        position: sticky;
+
+        right: 0;
+        width: fit-content;
+        height: calc(var(--rt-table-row-height) - var(--rt-table-row-border-bottom-width) - var(--rt-table-row-border-bottom-width));
+
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0 0.25rem 0 1.25rem;
+
+        overflow: hidden;
+
+        background: linear-gradient(
+            to right,
+            transparent 0%,
+            color-mix(in srgb, var(--rt-table-actions-container-background-color) 30%, var(--rt-table-actions-container-background-color))
+                10%,
+            var(--rt-table-actions-container-background-color) 20%,
+            var(--rt-table-actions-container-background-color) 100%
+        );
+        pointer-events: none;
+    }
+
+    &__action {
+        position: sticky;
+        pointer-events: auto;
+    }
+
+    @media (hover: hover) {
+        &--hidden {
+            visibility: hidden;
+        }
+    }
+}

package/src/styles/main.scss

@@ -0,0 +1,14 @@
+// Base
+@forward 'base/variables' as vars-*;
+@forward 'base/mixin' as mixins-*;
+@forward 'base/base';
+
+// Components
+@forward 'components/form';
+@forward 'components/button';
+@forward 'components/rtui_button';
+@forward 'components/table';
+@forward 'components/snackbar';
+@forward 'components/dynamic-selectors';
+@forward 'components/action-bar';
+@forward 'components/checkbox';