diff --git a/apps/ui/css/wizard.css b/apps/ui/css/wizard.css index d3842b8..d07114a 100644 --- a/apps/ui/css/wizard.css +++ b/apps/ui/css/wizard.css @@ -202,6 +202,7 @@ display: grid; grid-template-columns: minmax(130px, 1fr) + 24px minmax(105px, 0.65fr) minmax(130px, 1fr) minmax(120px, 0.8fr) @@ -216,7 +217,39 @@ } .response-mapping-row { - grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) 34px; + grid-template-columns: minmax(160px, 1fr) 24px minmax(140px, 1fr) 34px; +} + +.mapping-field { + display: grid; + gap: 5px; + min-width: 0; +} + +.mapping-field-label { + color: var(--text-muted); + font-size: 10.5px; + font-weight: 800; + letter-spacing: 0.04em; + line-height: 1; + text-transform: uppercase; +} + +.mapping-arrow { + display: inline-flex; + align-items: center; + justify-content: center; + align-self: end; + width: 24px; + height: 34px; + color: var(--accent); + font-size: 18px; + font-weight: 900; + line-height: 1; +} + +.mapping-default-value { + border-style: dashed; } .mapping-row-remove { @@ -331,6 +364,12 @@ grid-template-columns: 1fr; } + .mapping-arrow { + width: 100%; + height: 18px; + transform: rotate(90deg); + } + .mapping-row-remove { width: 100%; } diff --git a/apps/ui/html/wizard/step3-rest.html b/apps/ui/html/wizard/step3-rest.html index 9036727..e2172b7 100644 --- a/apps/ui/html/wizard/step3-rest.html +++ b/apps/ui/html/wizard/step3-rest.html @@ -114,24 +114,13 @@