@gooddata/sdk-ui-kit 10.34.0-alpha.16 → 10.34.0-alpha.18

package/styles/scss/asyncTable.scss

@@ -0,0 +1,261 @@
+// (C) 2025 GoodData Corporation
+@use "./mixins";
+
+.gd-ui-kit-async-table {
+    $root: &;
+    font-family: var(--gd-font-family);
+    font-size: var(--gd-table-font-size);
+    font-style: normal;
+    line-height: var(--gd-table-row-line-height);
+    color: var(--gd-palette-complementary-8);
+
+    &__row {
+        display: flex;
+        height: var(--gd-table-row-height-normal);
+
+        &--large {
+            height: var(--gd-table-row-height-large);
+        }
+        &:hover {
+            #{$root}__cell {
+                background-color: var(--gd-palette-complementary-2);
+            }
+        }
+    }
+
+    &__header {
+        display: flex;
+        height: var(--gd-table-row-height-normal);
+        line-height: var(--gd-table-row-line-height);
+        color: var(--gd-palette-complementary-6);
+
+        &--small {
+            height: var(--gd-table-row-height-small);
+        }
+
+        &:focus-visible {
+            outline: none;
+
+            #{$root}__cell--isFocused {
+                transition: outline 0s ease-in-out;
+                @include mixins.focus-ring;
+            }
+        }
+
+        #{$root}__cell {
+            transition: var(--gd-transition-all);
+
+            &--sortable {
+                cursor: pointer;
+            }
+
+            &--sorted,
+            &:hover {
+                #{$root}__sort {
+                    display: flex;
+                }
+            }
+
+            &--sorted:hover {
+                #{$root}__sort svg {
+                    fill: var(--gd-palette-complementary-8);
+                }
+            }
+
+            &--desc {
+                svg {
+                    transform: rotate(0deg);
+                }
+            }
+
+            &:hover {
+                color: var(--gd-palette-complementary-8);
+            }
+
+            .gd-ui-kit-checkbox {
+                visibility: hidden;
+            }
+        }
+    }
+
+    &__cell {
+        padding: 0 var(--gd-spacing-10px);
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        overflow: hidden;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--gd-palette-complementary-2);
+
+        > * {
+            flex: 0 0 auto;
+        }
+
+        &--bold {
+            font-weight: 700;
+        }
+
+        &--checkbox {
+            width: var(--gd-spacing-34px);
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+
+    &__text {
+        flex: 0 1 auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &--multi-line {
+            display: flex;
+            flex-direction: column;
+            font-size: var(--gd-table-multi-line-font-size);
+            line-height: var(--gd-table-multi-line-line-height);
+            > span:first-child {
+                font-size: var(--gd-table-multi-line-font-size-large);
+                line-height: var(--gd-table-multi-line-line-height-large);
+                font-weight: 700;
+            }
+        }
+    }
+
+    &__role-icon,
+    &__prefix-icon,
+    &__suffix-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__role-icon {
+        margin-right: var(--gd-spacing-10px);
+    }
+
+    &__prefix-icon {
+        margin-right: var(--gd-spacing-5px);
+    }
+
+    &__suffix-icon {
+        margin-left: var(--gd-spacing-5px);
+    }
+
+    &__sort {
+        padding: 0 var(--gd-spacing-5px);
+        display: none;
+
+        svg {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__badge {
+        margin-left: var(--gd-spacing-5px);
+    }
+
+    &__toolbar {
+        padding: 0;
+        height: var(--gd-table-row-height-small);
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        gap: var(--gd-spacing-10px);
+        margin-bottom: var(--gd-spacing-20px);
+
+        #{$root}__cell {
+            visibility: hidden;
+            border-bottom: none;
+        }
+
+        &--checkbox {
+            #{$root}__cell {
+                visibility: visible;
+                height: 100%;
+                border: 1px solid var(--gd-palette-complementary-3);
+                border-radius: 3px;
+            }
+        }
+    }
+
+    &__toolbar-label {
+        font-size: var(--gd-table-label-font-size);
+        font-weight: 700;
+        line-height: var(--gd-table-row-line-height);
+        text-transform: uppercase;
+        color: var(--gd-palette-complementary-6);
+    }
+
+    &__toolbar-selected-count {
+        color: var(--gd-palette-complementary-7);
+        font-size: var(--gd-table-counter-font-size);
+        padding-right: var(--gd-spacing-20px);
+    }
+
+    &__dropdown-item {
+        display: flex;
+        align-items: center;
+        padding: 0 var(--gd-spacing-10px);
+        font-size: var(--gd-table-dropdown-item-font-size);
+        cursor: pointer;
+        height: var(--gd-table-dropdown-item-height);
+
+        &:hover {
+            background-color: var(--gd-palette-complementary-2);
+        }
+
+        &--selected {
+            color: var(--gd-palette-primary-base);
+            font-weight: 700;
+        }
+    }
+
+    &__title {
+        display: flex;
+        align-items: center;
+        gap: var(--gd-spacing-10px);
+        margin-bottom: var(--gd-spacing-20px);
+    }
+
+    &__title-text,
+    &__title-icon,
+    &__title-search,
+    &__title-actions {
+        display: flex;
+        flex: none;
+    }
+
+    &__title-actions {
+        gap: var(--gd-spacing-10px);
+    }
+
+    &__title-text {
+        font-size: var(--gd-table-title-font-size);
+    }
+
+    &__title-divider {
+        margin: 0 var(--gd-spacing-10px);
+        flex: 1 1 auto;
+    }
+
+    &__empty-state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 300px;
+    }
+
+    &__empty-state-title {
+        font-size: 20px;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-5);
+        padding: var(--gd-spacing-10px) 0;
+    }
+
+    &__empty-state-description {
+        font-size: 14px;
+        color: var(--gd-palette-complementary-5);
+        line-height: 20px;
+    }
+}

package/styles/scss/main.scss

@@ -46,3 +46,4 @@
 @use "separatorLine";
 @use "richText";
 @use "recurrenceForm";
+@use "asyncTable";