@bpmn-io/form-js-viewer 0.11.0 → 0.12.0

package/dist/assets/form-js.css

@@ -34,6 +34,7 @@
   --color-background: var(--color-white);
   --color-background-disabled: var(--color-grey-225-10-95);
   --color-background-adornment: var(--color-grey-225-10-95);
+  --color-icon-base: var(--color-black);
   --color-text: var(--color-grey-225-10-15);
   --color-text-light: var(--color-grey-225-10-35);
   --color-text-lighter: var(--color-grey-225-10-45);
@@ -48,6 +49,20 @@
 
   --font-family: 'IBM Plex Sans', sans-serif;
 
+  --font-size-base: 14px;
+  --font-size-input: 14px;
+  --font-size-label: 12px;
+
+  --line-height-base: 20px;
+  --line-height-input: 18px;
+  --line-height-label: 16px;
+
+  --letter-spacing-base: .16px;
+  --letter-spacing-input: .16px;
+  --letter-spacing-label: .32px;
+
+  --form-field-height: 36px;
+
   --border-definition: 1px solid var(--color-borders);
   --border-definition-adornment: 1px solid var(--color-borders-adornment);
   --outline-definition: 1px solid var(--color-borders);
@@ -88,8 +103,9 @@
  */
 .fjs-container .fjs-form {
   font-family: var(--font-family);
-  font-size: 14px;
-  line-height: 1.3;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-base);
   font-weight: 400;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -104,34 +120,32 @@
   margin: 16px;
 }
 
-.fjs-container .fjs-form-field-placeholder {
-  color: var(--color-text-light);
-  font-style: italic;
-}
-
-.fjs-container .fjs-form-field-placeholder svg {
-  width: 36px;
-  height: 36px;
-  vertical-align: middle;
-  margin-top: -2px;
-  margin-right: 2px;
-}
-
 .fjs-container .fjs-input,
+.fjs-container .fjs-taglist-input,
 .fjs-container .fjs-textarea,
 .fjs-container .fjs-select {
   border-color: var(--color-borders);
   background-color: var(--color-background);
   font-family: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.fjs-container .fjs-button {
+  font-family: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
 }
 
 .fjs-container .fjs-input::placeholder,
+.fjs-container .fjs-taglist-input::placeholder,
 .fjs-container .fjs-textarea::placeholder,
 .fjs-container .fjs-select > option:disabled,
 .fjs-container .fjs-select [disabled] {
-  font-style: italic;
-  letter-spacing: 0.25px;
   color: var(--color-text-lightest);
+  font-size: var(--font-size-input);
+  line-height: var(--line-height-input);
+  letter-spacing: var(--letter-spacing-input);
 }
 
 .fjs-container .fjs-form-field-label {
@@ -140,17 +154,37 @@
 }
 
 .fjs-container .fjs-incollapsible-label {
-  min-height: 18.2px;
+  min-height: var(--line-height-label);
 }
 
-.fjs-container .fjs-form-field-description {
-  display: block;
+.fjs-container .fjs-form-field-label,
+.fjs-container .fjs-form-field-description,
+.fjs-container .fjs-form-field-error {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+}
+
+.fjs-container .fjs-form-field-label {
   color: var(--color-text-light);
 }
 
-.fjs-container .fjs-form-field-label,
 .fjs-container .fjs-form-field-description {
-  margin: 4px 0;
+  color: var(--color-text-lighter);
+}
+
+.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) {
+  font-size: var(--font-size-input);
+  line-height: var(--line-height-input);
+  letter-spacing: var(--letter-spacing-input);
+  color: var(--color-text);
+}
+
+.fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,
+.fjs-container .fjs-form-field-radio .fjs-form-field-label:first-child {
+  margin-bottom: 4px;
 }
 
 .fjs-container .fjs-form-field.required label::after,
@@ -167,12 +201,16 @@
 .fjs-container .fjs-textarea,
 .fjs-container .fjs-select {
   background-color: var(--color-background);
+  font-size: var(--font-size-input);
+  line-height: var(--line-height-input);
+  letter-spacing: var(--letter-spacing-input);
 }
 
 .fjs-container .fjs-input-adornment {
   border-style: solid;
   border-color: var(--color-borders-adornment);
   background-color: var(--color-background-adornment);
+  line-height: var(--line-height-input);
   color: var(--color-text-lighter);
   padding: 8px;
   width: auto !important;
@@ -180,6 +218,7 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
 }
 
 .fjs-container .fjs-input-adornment svg {
@@ -192,14 +231,6 @@
   color: var(--color-background-adornment);
 }
 
-.fjs-container .fjs-input::placeholder,
-.fjs-container .fjs-textarea::placeholder,
-.fjs-container .fjs-select > option:disabled,
-.fjs-container .fjs-select [disabled] {
-  font-style: italic;
-  letter-spacing: 0.25px;
-  color: var(--color-text-lightest);
-}
 
 .fjs-container .fjs-input[type='text'],
 .fjs-container .fjs-input[type='email'],
@@ -217,6 +248,19 @@
   border-radius: 3px;
 }
 
+.fjs-container .fjs-input-group .fjs-input[type='text'],
+.fjs-container .fjs-input-group .fjs-input[type='email'],
+.fjs-container .fjs-input-group .fjs-input[type='tel'],
+.fjs-container .fjs-input-group .fjs-input[type='number'],
+.fjs-container .fjs-select {
+  height: var(--form-field-height);
+}
+
+.fjs-container .fjs-taglist {
+  min-height: var(--form-field-height);
+}
+
+
 .fjs-container .fjs-datepicker,
 .fjs-container .fjs-timepicker,
 .fjs-container .fjs-datetime-subsection {
@@ -224,7 +268,7 @@
 }
 
 .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
-  color: var(--color-black);
+  color: var(--color-icon-base);
 }
 
 .fjs-container .fjs-datetime-separator {
@@ -234,11 +278,22 @@
 .fjs-container .fjs-input-group {
   display: flex;
   width: 100%;
+  height: var(--form-field-height);
   margin: 4px 0;
   border: var(--border-definition);
   border-radius: 3px;
 }
 
+
+.fjs-container .fjs-input-group .fjs-input[type='text'],
+.fjs-container .fjs-input-group .fjs-input[type='email'],
+.fjs-container .fjs-input-group .fjs-input[type='tel'],
+.fjs-container .fjs-input-group .fjs-input[type='number'],
+.fjs-container .fjs-input-group .fjs-taglist,
+.fjs-container .fjs-input-group .fjs-select {
+  height: unset;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-input,
 .fjs-container .fjs-input-group .fjs-input {
   border: none;
@@ -249,6 +304,17 @@
   flex-grow: 1;
 }
 
+.fjs-container .fjs-input-group .fjs-select-display {
+  flex: 1;
+  padding: 8px;
+  user-select: none; 
+}
+
+.fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
+.fjs-container .fjs-input-group.disabled .fjs-select-display {
+  color: var(--color-text-lightest);
+}
+
 .fjs-container .fjs-input-group .fjs-input-adornment {
   border-width: 0;
 }
@@ -270,7 +336,7 @@
 }
 
 .fjs-container .fjs-input-group .fjs-input,
-.fjs-container .fjs-input-group.disabled .fjs-input {
+.fjs-container .fjs-input-group.fjs-disabled .fjs-input {
   border-radius: 3px;
 }
 
@@ -287,7 +353,11 @@
   resize: none;
   overflow: hidden;
   height: 75px;
-  font-size: 14px;
+}
+
+.fjs-container .fjs-select-cross,
+.fjs-container .fjs-select-arrow {
+  padding: 6px 10px;
 }
 
 .fjs-container .fjs-number-arrow-container {
@@ -311,6 +381,7 @@
   background-color: var(--color-grey-225-10-95);
   font-weight: bold;
   font-size: 10px;
+  line-height: 15px;
 }
 
 .fjs-container .fjs-number-arrow-container button:hover {
@@ -382,9 +453,9 @@
 .fjs-container .fjs-input:disabled,
 .fjs-container .fjs-textarea:disabled,
 .fjs-container .fjs-select:disabled,
-.fjs-container .fjs-number-arrow-container.disabled button,
-.fjs-container .fjs-input-group.disabled,
-.fjs-container .fjs-taglist.disabled {
+.fjs-container .fjs-number-arrow-container.fjs-disabled button,
+.fjs-container .fjs-input-group.fjs-disabled,
+.fjs-container .fjs-taglist.fjs-disabled {
   background-color: var(--color-background-disabled);
   border-color: var(--color-borders-disabled);
 }
@@ -396,8 +467,8 @@
   border-color: var(--color-borders-disabled);
 }
 
-.fjs-container .fjs-input-group.disabled .fjs-input,
-.fjs-container .fjs-input-group.disabled .fjs-input-adornment {
+.fjs-container .fjs-input-group.fjs-disabled .fjs-input,
+.fjs-container .fjs-input-group.fjs-disabled .fjs-input-adornment {
   border-color: var(--color-borders-disabled);
 }
 
@@ -449,11 +520,27 @@
   color: var(--color-accent);
 }
 
+.fjs-container .fjs-form-field-text a {
+  color: var(--color-accent);
+}
+
+.fjs-container .fjs-form-field-text .fjs-disabled-link {
+  pointer-events: none;
+  cursor: default;
+}
+
 .fjs-container .fjs-taglist-anchor,
+.fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {
   position: relative;
 }
 
+.fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
+.fjs-container .fjs-select-anchor .fjs-dropdownlist {
+  position: absolute;
+  top: -5px;
+}
+
 .fjs-container .fjs-taglist {
   display: flex;
   flex-wrap: wrap;
@@ -469,8 +556,12 @@
   display: flex;
   overflow: hidden;
   user-select: none;
-  border-radius: 2px;
   background-color: var(--color-grey-225-10-90);
+  border-radius: 2px;
+}
+
+.fjs-container .fjs-taglist .fjs-taglist-tag.fjs-disabled { 
+  background-color: var(--color-grey-225-10-85);
 }
 
 .fjs-container .fjs-taglist .fjs-taglist-tags {
@@ -483,20 +574,25 @@
   padding: 2px 6px 2px 8px;
 }
 
+.fjs-container .fjs-taglist .fjs-taglist-tag.fjs-disabled .fjs-taglist-tag-label {
+  padding: 2px 8px;
+}
+
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
   overflow: clip;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   text-align: center;
   line-height: 28px;
   background-color: var(--color-grey-225-10-80);
   border: none;
   padding: 1px 0;
-  color: var(--color-black);
 }
 
-.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
+.fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
+  margin-bottom: 4px;
   opacity: 0.6;
+  color: var(--color-icon-base);
 }
 
 .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
@@ -518,6 +614,7 @@
   background-color: transparent;
   min-width: 100px;
   height: 22px;
+  margin: 1px 0;
   flex-grow: 1;
 }