@gooddata/sdk-ui-catalog 11.23.0 → 11.24.0-alpha.2

package/styles/scss/main.scss

@@ -201,6 +201,123 @@ $content-font-size: 14px;
         height: 100%;
     }
 
+    &__tabs {
+        flex: none;
+    }
+
+    &__tab-panel {
+        padding-top: 20px;
+
+        &__loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 155px;
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
+    &__card-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 20px;
+
+        > :nth-child(n + 2) {
+            display: none;
+        }
+
+        @media #{kit-variables.$medium-up} {
+            grid-template-columns: repeat(2, 1fr);
+
+            > :nth-child(n + 2) {
+                display: initial;
+            }
+
+            > :nth-child(n + 3) {
+                display: none;
+            }
+        }
+
+        @media #{kit-variables.$large-up} {
+            grid-template-columns: repeat(3, 1fr);
+
+            > :nth-child(n + 3) {
+                display: initial;
+            }
+
+            > :nth-child(n + 4) {
+                display: none;
+            }
+        }
+
+        @media #{kit-variables.$xlarge-up} {
+            grid-template-columns: repeat(5, 1fr);
+
+            > :nth-child(n + 4) {
+                display: initial;
+            }
+        }
+    }
+
+    &__item-card {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 20px;
+        border: 1px solid kit-variables.$gd-border-color;
+        border-radius: 3px;
+        overflow: hidden;
+        background: none;
+        text-align: start;
+        font: inherit;
+        cursor: pointer;
+        transition: border-color 0.15s ease-in-out;
+
+        &:hover {
+            border-color: kit-variables.$gd-color-highlight;
+        }
+
+        &__icon {
+            .gd-ui-kit-icon-background {
+                background-color: color-mix(in sRGB, var(--catalog-object-type-icon-color) 10%, transparent);
+            }
+
+            .gd-ui-kit-icon path,
+            .gd-ui-kit-icon rect {
+                fill: var(--catalog-object-type-icon-color);
+            }
+        }
+
+        &__info {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        &__title {
+            font-size: $content-font-size;
+            font-weight: 700;
+            line-height: 20px;
+            color: kit-variables.$gd-color-text;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        &__date {
+            font-size: 12px;
+            line-height: 20px;
+            color: var(--gd-palette-complementary-6);
+        }
+    }
+
     &__quality-score-card {
         box-sizing: border-box;
         width: 100%;