Merge pull request #247 from pinussilvestrus/update-to-form-js-1-3

feat: update to [email protected]
camunda-community-hub · Sep 27, 2023 · 8e0300a · 8e0300a
2 parents 488644f + d29a425
commit 8e0300a
Show file tree

Hide file tree

Showing 2 changed files with 2,717 additions and 2,239 deletions.
diff --git a/src/main/resources/public/css/form-js.css b/src/main/resources/public/css/form-js.css
@@ -63,6 +63,7 @@
     --cds-border-strong,
     var(--cds-border-strong-01, var(--color-grey-225-10-55))
   );
+  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
   --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
   --color-borders-adornment: var(
     --cds-border-subtle,
@@ -80,6 +81,7 @@
   --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
   --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
   --font-family: "IBM Plex Sans", sans-serif;
+  --font-size-group: 15px;
   --font-size-base: 14px;
   --font-size-input: 14px;
   --font-size-label: 12px;
@@ -183,6 +185,11 @@
   margin-right: 0;
 }
 
+.fjs-container .cds--grid .cds--grid .cds--row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
 @media (max-width: 66rem) {
   .cds--col {
     flex-basis: unset !important;
@@ -210,7 +217,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  min-height: 100px;
+  min-height: 80px;
 }
 
 .fjs-container .fjs-element {
@@ -296,6 +303,52 @@
   color: var(--color-text-lighter);
 }
 
+.fjs-container .fjs-form-field-group {
+  padding: 10px 6px 0 6px;
+  margin: 0 10px;
+}
+
+.fjs-container .fjs-form-field-group .cds--grid {
+  padding: 4px 16px;
+}
+
+.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
+.fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+  margin-left: -6px;
+}
+
+.fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
+.fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+  margin-right: -6px;
+}
+
+.fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+  margin-left: 11px;
+}
+
+.fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
+  margin-right: 11px;
+}
+
+.fjs-container .fjs-form-field-group.fjs-outlined {
+  outline: solid var(--color-borders-group) 2px;
+}
+
+.fjs-container .fjs-form-field-group label {
+  font-size: var(--font-size-label);
+}
+
+.fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.fjs-container .fjs-form-field-group > label {
+  font-size: var(--font-size-group);
+  line-height: var(--line-height-input);
+  margin-left: 7px;
+}
+
 .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
 .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
 .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
@@ -3493,4 +3546,4 @@ span.flatpickr-weekday {
 }
 span.flatpickr-day.selected {
   font-weight: bold;
-}
+}