@bpmn-io/form-js-editor 0.7.1 → 0.8.0-alpha.1

package/README.md

@@ -48,6 +48,7 @@ For proper styling include the necessary stylesheets, and font used:
 <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/form-js.css">
 <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/form-js-editor.css">
 <link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/dragula.css">
+<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.3/dist/assets/properties-panel.css">
 ```
 
 

package/dist/assets/form-js-editor.css

@@ -8,6 +8,16 @@
   --color-context-pad-item-fill: var(--color-grey-225-10-35);
   --color-context-pad-item-hover-fill: var(--color-black);
 
+  --color-properties-container-background: var(--color-white);
+  --color-properties-container-border: var(--color-grey-225-10-80);
+
+  --color-dragula-background: var(--color-blue-205-100-45);
+  --color-dragula-border: var(--color-blue-205-100-45);
+  --color-dragula-mirror-background: var(--color-white);
+  --color-dragula-mirror-border: var(--color-grey-225-10-80);
+}
+
+.fjs-palette-container {
   --color-palette-container-background: var(--color-grey-225-10-97);
   --color-palette-container-border: var(--color-grey-225-10-80);
   --color-palette-header-color: var(--color-text);
@@ -15,32 +25,6 @@
   --color-palette-header-border: var(--color-grey-225-10-80);
   --color-palette-field-border: var(--color-grey-225-10-80);
   --color-palette-field-hover-background: var(--color-grey-225-10-95);
-
-  --color-properties-container-background: var(--color-grey-225-10-97);
-  --color-properties-container-border: var(--color-grey-225-10-80);
-  --color-properties-header-background: var(--color-grey-225-10-95);
-  --color-properties-header-border: var(--color-grey-225-10-80);
-  --color-properties-header-icon-fill: var(--color-grey-225-10-35);
-  --color-properties-group-background: var(--color-grey-225-10-95);
-  --color-properties-group-border: var(--color-grey-225-10-80);
-  --color-properties-group-button-fill: var(--color-grey-225-10-35);
-  --color-properties-group-button-hover-fill: var(--color-black);
-  --color-properties-entries-border: var(--color-grey-225-10-80);
-  --color-properties-collapsible-remove-fill: var(--color-grey-225-10-35);
-  --color-properties-collapsible-remove-hover-fill: var(--color-black);
-  --color-properties-description: var(--color-grey-225-10-15);
-  --color-properties-error: var(--color-warning);
-  --color-properties-input-background: var(--color-white);
-  --color-properties-input-border: var(--color-grey-225-10-75);
-  --color-properties-input-error-border: var(--color-warning);
-  --color-properties-input-error-hover-border: var(--color-warning);
-  --color-properties-input-focus-border: var(--color-blue-205-100-50);
-  --color-properties-placeholder: var(--color-grey-225-10-80);
-
-  --color-dragula-background: var(--color-blue-205-100-45);
-  --color-dragula-border: var(--color-blue-205-100-45);
-  --color-dragula-mirror-background: var(--color-white);
-  --color-dragula-mirror-border: var(--color-grey-225-10-80);
 }
 
 .fjs-editor-container {
@@ -56,7 +40,7 @@
 }
 
 .fjs-editor-container .fjs-form-container,
-.fjs-editor-container .fjs-palette-container,
+.fjs-editor-container .fjs-editor-palette-container,
 .fjs-editor-container .fjs-properties-container {
   overflow-y: auto;
   position: relative;
@@ -160,12 +144,17 @@
  * Palette
  */
 .fjs-editor-container .fjs-palette-container {
+  height: 100%;
+}
+
+.fjs-palette-container {
   width: 200px;
   background-color: var(--color-palette-container-background);
   border-right: solid 1px var(--color-palette-container-border);
+  font-family: var(--font-family);
 }
 
-.fjs-editor-container .fjs-palette-header {
+.fjs-palette-container .fjs-palette-header {
   font-size: 12px;
   font-weight: bold;
   color: var(--color-palette-header-color);
@@ -174,7 +163,7 @@
   background-color: var(--color-palette-header-background);
 }
 
-.fjs-editor-container .fjs-palette-field {
+.fjs-palette-container .fjs-palette-field {
   padding: 10px;
   display: flex;
   white-space: pre;
@@ -186,11 +175,11 @@
   color: var(--color-text);
 }
 
-.fjs-editor-container .fjs-palette-field-icon {
+.fjs-palette-container .fjs-palette-field-icon {
   margin-right: 10px;
 }
 
-.fjs-editor-container .fjs-palette-field:hover {
+.fjs-palette-container .fjs-palette-field:hover {
   background-color: var(--color-palette-field-hover-background);
   cursor: default;
 }
@@ -206,193 +195,16 @@
   color: var(--color-text);
 }
 
-.fjs-editor-container .fjs-properties-panel * {
-  box-sizing: border-box;
-}
-
-.fjs-editor-container .fjs-properties-panel-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 14px;
-  padding: 10px;
-  background-color: var(--color-properties-header-background);
-  border-bottom: solid 1px var(--color-properties-header-border);
-}
-
-.fjs-editor-container .fjs-properties-panel-header-icon {
-  margin-right: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  fill: var(--color-properties-header-icon-fill);
-}
-
-.fjs-editor-container .fjs-properties-panel-header-type {
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.fjs-editor-container .fjs-properties-panel-group-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-  padding: 10px;
-  border-bottom: solid 1px var(--color-properties-group-border);
-  background-color: var(--color-properties-group-background);
-}
-
-.fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  padding: 0;
-  fill: var(--color-properties-group-button-fill);
-  border: none;
-  background: none;
-}
-
-.fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button:last-child {
-  margin-right: 0;
-}
-
-.fjs-editor-container .fjs-properties-panel-group-header-buttons .fjs-properties-panel-group-header-button:hover {
-  fill: var(--color-properties-group-button-hover-fill);
-}
-
-.fjs-editor-container .fjs-properties-panel-group-entries {
-  border-bottom: solid 1px var(--color-properties-entries-border);
-}
-
-.fjs-editor-container .fjs-properties-panel-group:last-child .fjs-properties-panel-group-entries {
-  border-bottom: none;
-}
-
-.fjs-editor-container .fjs-arrow-down {
-  transform: rotate(90deg);
-}
-
-.fjs-editor-container .fjs-properties-panel-entry {
-  padding: 10px 10px 0 10px;
-}
-
-.fjs-editor-container .fjs-properties-panel-entry:last-child {
-  padding-bottom: 10px;
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 10px 10px 10px;
-  cursor: default;
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry:first-child .fjs-properties-panel-collapsible-entry-header {
-  padding-top: 10px;
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-header-label {
-  font-size: 14px;
-  margin-left: 10px;
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-header-remove-entry {
-  border: none;
-  background: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 22px;
-  width: 22px;
-  padding: 0;
-  fill: var(--color-properties-collapsible-remove-fill);
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-header-remove-entry:hover {
-  fill: var(--color-properties-collapsible-remove-hover-fill);
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-entries {
-  padding-left: 20px;
-}
-
-.fjs-editor-container .fjs-properties-panel-collapsible-entry-entries .fjs-properties-panel-entry:first-child {
-  padding-top: 0;
-}
-
-.fjs-editor-container .fjs-properties-panel-label,
-.fjs-editor-container .fjs-properties-panel-description,
-.fjs-editor-container .fjs-properties-panel-error {
-  display: block;
-  margin: 4px 0;
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: 400;
-  font-size: 13px;
-}
-
-.fjs-editor-container .fjs-properties-panel-label,
-.fjs-editor-container .fjs-properties-panel-description {
-  color: var(--color-properties-description);
-}
-
-.fjs-editor-container .fjs-properties-panel-error {
-  color: var(--color-properties-error);
-}
-
-.fjs-editor-container .fjs-properties-panel-description,
-.fjs-editor-container .fjs-properties-panel-error {
-  margin-top: 7px;
-}
-
-.fjs-editor-container .fjs-properties-panel-input {
-  background-color: var(--color-properties-input-background);
-  border: solid 1px var(--color-properties-input-border);
-  border-radius: 3px;
-  padding: 4px 8px;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.fjs-editor-container .fjs-properties-panel-input[type=number],
-.fjs-editor-container select.fjs-properties-panel-input,
-.fjs-editor-container .fjs-properties-panel-input[type=text],
-.fjs-editor-container textarea.fjs-properties-panel-input {
-  display: block;
-  width: 100%;
-}
-
-.fjs-editor-container .fjs-properties-panel-input.fjs-has-error {
-  border-color: var(--color-properties-input-error-border);
-}
-
-.fjs-editor-container .fjs-properties-panel-input.fjs-has-error:focus {
-  border-color: var(--color-properties-input-error-hover-border);
-  box-shadow: 0 0 0 4px var(--color-red-360-100-92), 0 0 0 1px var(--color-grey-225-10-75) inset;
-}
-
-.fjs-editor-container .fjs-properties-panel-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px var(--color-blue-205-100-80), 0 0 0 1px var(--color-grey-225-10-75) inset;
-  border: solid 1px var(--color-properties-input-focus-border);
+.fjs-editor-container .fjs-properties-panel {
+  height: 100%;
 }
 
-.fjs-editor-container .fjs-properties-panel-placeholder {
-  padding: 10px;
-  color: var(--color-properties-placeholder);
-  font-size: 14px;
-  text-align: center;
+.fjs-editor-container .fjs-properties-panel * {
+  box-sizing: border-box;
 }
 
-.fjs-editor-container textarea.fjs-properties-panel-input {
-  font-family: inherit;
-  resize: vertical;
+.fjs-editor-container .bio-properties-panel-header-icon svg {
+  transform: scale(1.3);
 }
 
 /**