@bpmn-io/form-js-editor 0.7.2 → 0.8.0

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

@@ -1,449 +1,267 @@
-.fjs-editor-container {
-  --color-children-border: var(--color-grey-225-10-75);
-  --color-children-selected-border: var(--color-blue-205-100-50);
-  --color-children-selected-background: var(--color-blue-205-100-95);
-  --color-children-hover-border: var(--color-blue-205-100-50);
-  
-  --color-context-pad-item-background: var(--color-white);
-  --color-context-pad-item-fill: var(--color-grey-225-10-35);
-  --color-context-pad-item-hover-fill: var(--color-black);
-
-  --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);
-  --color-palette-header-background: var(--color-grey-225-10-95);
-  --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 {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-
-.fjs-editor-container .fjs-form-editor {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-}
-
-.fjs-editor-container .fjs-form-container,
-.fjs-editor-container .fjs-palette-container,
-.fjs-editor-container .fjs-properties-container {
-  overflow-y: auto;
-  position: relative;
-}
-
-.fjs-editor-container .fjs-form-container,
-.fjs-editor-container .fjs-form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.fjs-editor-container .fjs-form > .fjs-element {
-  flex-grow: 1;
-}
-
-.fjs-editor-container .fjs-children {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  min-width: 300px;
-  min-height: 100px;
-}
-
-.fjs-editor-container .fjs-children .fjs-children {
-  border: dashed 2px var(--color-children-border);
-  border-radius: 3px;
-}
-
-.fjs-editor-container .fjs-element {
-  display: flex;
-  flex-direction: column;
-  margin: 0 5px;
-}
-
-.fjs-editor-container .fjs-element + .fjs-element {
-  margin-top: 2px;
-}
-
-.fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
-  margin: 1px 16px;
-}
-
-.fjs-editor-container .fjs-form > .fjs-element {
-  margin: 0;
-  padding: 5px;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element {
-  position: relative;
-  border: solid 2px transparent;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element:hover,
-.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
-  border-radius: 3px;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
-  border-color: var(--color-children-selected-border);
-  background-color: var(--color-children-selected-background);
-}
-
-.fjs-editor-container .fjs-children > .fjs-element:hover {
-  border-color: var(--color-children-hover-border) !important;
-}
-
-.fjs-editor-container .fjs-input:disabled,
-.fjs-editor-container .fjs-select:disabled {
-  pointer-events: none;
-}
-
-/**
- * Context Pad
- */
-.fjs-editor-container .fjs-context-pad {
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
-}
-
-.fjs-editor-container .fjs-context-pad-item {
-  border: none;
-  border-radius: 3px;
-  background-color: var(--color-context-pad-item-background);
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  fill: var(--color-context-pad-item-fill);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.fjs-editor-container .fjs-context-pad-item:hover {
-  fill: var(--color-context-pad-item-hover-fill);
-}
-
-/**
- * Palette
- */
-.fjs-editor-container .fjs-palette-container {
-  width: 200px;
-  background-color: var(--color-palette-container-background);
-  border-right: solid 1px var(--color-palette-container-border);
-}
-
-.fjs-editor-container .fjs-palette-header {
-  font-size: 12px;
-  font-weight: bold;
-  color: var(--color-palette-header-color);
-  padding: 10px;
-  border-bottom: solid 1px var(--color-palette-header-border);
-  background-color: var(--color-palette-header-background);
-}
-
-.fjs-editor-container .fjs-palette-field {
-  padding: 10px;
-  display: flex;
-  white-space: pre;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
-  border-bottom: solid 1px var(--color-palette-field-border);
-  font-size: 14px;
-  color: var(--color-text);
-}
-
-.fjs-editor-container .fjs-palette-field-icon {
-  margin-right: 10px;
-}
-
-.fjs-editor-container .fjs-palette-field:hover {
-  background-color: var(--color-palette-field-hover-background);
-  cursor: default;
-}
-
-/**
- * Properties Panel
- */
-.fjs-editor-container .fjs-properties-container {
-  width: 300px;
-  background-color: var(--color-properties-container-background);
-  border-left: solid 1px var(--color-properties-container-border);
-  height: 100%;
-  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-placeholder {
-  padding: 10px;
-  color: var(--color-properties-placeholder);
-  font-size: 14px;
-  text-align: center;
-}
-
-.fjs-editor-container textarea.fjs-properties-panel-input {
-  font-family: inherit;
-  resize: vertical;
-}
-
-/**
- * Custom Dragula Styles
- */
-.gu-transit {
-  background: var(--color-dragula-background) !important;
-  border: solid 2px var(--color-dragula-border) !important;
-  border-radius: 3px !important;
-  filter: none !important;
-  height: 0 !important;
-  opacity: 1 !important;
-  padding: 0 !important;
-}
-
-.gu-transit * {
-  display: none !important;
-}
-
-.gu-mirror {
-  background-color: var(--color-dragula-mirror-background) !important;
-  border: solid 1px var(--color-dragula-mirror-border) !important;
-  border-radius: 3px !important;
-  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
-  display: flex !important;
-  filter: none !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-  align-items: center !important;
-  opacity: 0.5 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-  height: 54px !important;
-}
-
-/**
- * Compact editor overrides
- */
-
-.fjs-editor-compact .fjs-hide-compact {
-  display: none;
-}
-
-.fjs-editor-compact .fjs-palette-container {
-  width: auto;
-}
-
-.fjs-editor-compact .fjs-palette-field {
-  justify-content: center;
-}
-
-.fjs-editor-compact .fjs-palette-field-icon {
-  margin: 0;
-}
+.fjs-editor-container {
+  --color-children-border: var(--color-grey-225-10-75);
+  --color-children-selected-border: var(--color-blue-205-100-50);
+  --color-children-selected-background: var(--color-blue-205-100-95);
+  --color-children-hover-border: var(--color-blue-205-100-50);
+  
+  --color-context-pad-item-background: var(--color-white);
+  --color-context-pad-item-fill: var(--color-grey-225-10-35);
+  --color-context-pad-item-hover-fill: var(--color-black);
+
+  --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);
+  --color-palette-header-background: var(--color-grey-225-10-95);
+  --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);
+}
+
+.fjs-properties-container {
+  --color-properties-container-background: var(--color-white);
+  --color-properties-container-border: var(--color-grey-225-10-80);
+  --properties-panel-width: 300px;
+}
+
+.fjs-editor-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.fjs-editor-container .fjs-form-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.fjs-editor-container .fjs-form-container,
+.fjs-editor-container .fjs-editor-palette-container,
+.fjs-editor-container .fjs-editor-properties-container {
+  overflow-y: auto;
+  position: relative;
+}
+
+.fjs-editor-container .fjs-form-container,
+.fjs-editor-container .fjs-form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.fjs-editor-container .fjs-form > .fjs-element {
+  flex-grow: 1;
+}
+
+.fjs-editor-container .fjs-children {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 300px;
+  min-height: 100px;
+}
+
+.fjs-editor-container .fjs-children .fjs-children {
+  border: dashed 2px var(--color-children-border);
+  border-radius: 3px;
+}
+
+.fjs-editor-container .fjs-element {
+  display: flex;
+  flex-direction: column;
+  margin: 0 5px;
+}
+
+.fjs-editor-container .fjs-element + .fjs-element {
+  margin-top: 2px;
+}
+
+.fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
+  margin: 1px 16px;
+}
+
+.fjs-editor-container .fjs-form > .fjs-element {
+  margin: 0;
+  padding: 5px;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element {
+  position: relative;
+  border: solid 2px transparent;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element:hover,
+.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
+  border-radius: 3px;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
+  border-color: var(--color-children-selected-border);
+  background-color: var(--color-children-selected-background);
+}
+
+.fjs-editor-container .fjs-children > .fjs-element:hover {
+  border-color: var(--color-children-hover-border) !important;
+}
+
+.fjs-editor-container .fjs-input:disabled,
+.fjs-editor-container .fjs-select:disabled {
+  pointer-events: none;
+}
+
+/**
+ * Context Pad
+ */
+.fjs-editor-container .fjs-context-pad {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
+}
+
+.fjs-editor-container .fjs-context-pad-item {
+  border: none;
+  border-radius: 3px;
+  background-color: var(--color-context-pad-item-background);
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  fill: var(--color-context-pad-item-fill);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fjs-editor-container .fjs-context-pad-item:hover {
+  fill: var(--color-context-pad-item-hover-fill);
+}
+
+/**
+ * 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-palette-container .fjs-palette-header {
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--color-palette-header-color);
+  padding: 10px;
+  border-bottom: solid 1px var(--color-palette-header-border);
+  background-color: var(--color-palette-header-background);
+}
+
+.fjs-palette-container .fjs-palette-field {
+  padding: 10px;
+  display: flex;
+  white-space: pre;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: solid 1px var(--color-palette-field-border);
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.fjs-palette-container .fjs-palette-field-icon {
+  margin-right: 10px;
+}
+
+.fjs-palette-container .fjs-palette-field:hover {
+  background-color: var(--color-palette-field-hover-background);
+  cursor: default;
+}
+
+/**
+ * Properties Panel
+ */
+.fjs-editor-container .fjs-properties-container {
+  height: 100%;
+}
+
+.fjs-properties-container {
+  background-color: var(--color-properties-container-background);
+  width: var(--properties-panel-width);
+  border-left: solid 1px var(--color-properties-container-border);
+  color: var(--color-text);
+}
+
+.fjs-properties-container .fjs-properties-panel {
+  height: 100%;
+}
+
+.fjs-properties-container .fjs-properties-panel * {
+  box-sizing: border-box;
+}
+
+.fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
+  transform: scale(1.3);
+}
+
+/**
+ * Custom Dragula Styles
+ */
+.gu-transit {
+  background: var(--color-dragula-background) !important;
+  border: solid 2px var(--color-dragula-border) !important;
+  border-radius: 3px !important;
+  filter: none !important;
+  height: 0 !important;
+  opacity: 1 !important;
+  padding: 0 !important;
+}
+
+.gu-transit * {
+  display: none !important;
+}
+
+.gu-mirror {
+  background-color: var(--color-dragula-mirror-background) !important;
+  border: solid 1px var(--color-dragula-mirror-border) !important;
+  border-radius: 3px !important;
+  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
+  display: flex !important;
+  filter: none !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  opacity: 0.5 !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+  height: 54px !important;
+}
+
+/**
+ * Compact editor overrides
+ */
+
+.fjs-editor-compact .fjs-hide-compact {
+  display: none;
+}
+
+.fjs-editor-compact .fjs-palette-container {
+  width: auto;
+}
+
+.fjs-editor-compact .fjs-palette-field {
+  justify-content: center;
+}
+
+.fjs-editor-compact .fjs-palette-field-icon {
+  margin: 0;
+}