Add gridfield component

2026-06-10 13:22:40 +02:00
parent e4fb7250ed
commit 9f99482a93
6 changed files with 108 additions and 3 deletions
@@ -77,11 +77,14 @@
  --layout-pulldown-panel-form-mobile-width: 90%;
  --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
  --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
-  --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
  --layout-multiselect-pulldown-label-column-width-fallback: max-content;
  --layout-input-label-width: var(--dimension-input-label-width);
  --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
  --layout-input-field-max-width: var(--dimension-input-field-max-width);
+  --layout-gridfield-label-column-width: var(--layout-input-label-width);
+  --layout-gridfield-column-gap: var(--spacing-small);
+  --layout-gridfield-row-gap: var(--spacing-small);
+  --layout-gridfield-field-max-width: var(--layout-input-field-max-width);
  --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
  --layout-search-field-width: var(--dimension-search-field-width);
  --layout-mode-toggle-local-height: var(--compact-interaction-height);
@@ -277,7 +280,6 @@
  --dimension-search-field-width: 15.3rem;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
-  --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
  --dimension-options-row-mode-toggle-width: 7rem;
  --dimension-options-row-help-panel-width: 16rem;
  --dimension-card-list-drawer-width: 40%;
@@ -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%;
+      }
+    }