Add gridfield component

2026-06-10 13:22:40 +02:00
parent e4fb7250ed
commit 9f99482a93
6 changed files with 108 additions and 3 deletions
@@ -0,0 +1,52 @@
+/* ========================================================= */
+/* Components: Gridfield                                     */
+/* ========================================================= */
+
+    .sg-gridfield-demo {
+      display: inline-flex;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      width: fit-content;
+      padding: var(--spacing-large);
+      border-radius: var(--radius-card);
+      background: var(--surface-form-preview);
+    }
+
+    .sg-gridfield-row {
+      display: grid;
+      grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
+      column-gap: var(--layout-gridfield-column-gap);
+      align-items: center;
+      width: 100%;
+      max-width: var(--layout-gridfield-field-max-width);
+    }
+
+    .sg-gridfield-row .sg-label {
+      min-width: 0;
+      margin: 0;
+      line-height: 1;
+      color: var(--text-control-default);
+    }
+
+    .sg-gridfield-row .sg-interaction-element,
+    .sg-gridfield-row .sg-pulldown-demo,
+    .sg-gridfield-row .sg-pulldown {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    @media (max-width: 48rem) {
+      .sg-gridfield-demo {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
+      .sg-gridfield-row {
+        grid-template-columns: 1fr;
+        row-gap: var(--layout-gridfield-row-gap);
+        align-items: start;
+        max-width: 100%;
+      }
+    }