@bpmn-io/form-js-editor 0.9.1 → 0.9.4

package/dist/assets/properties-panel.css

@@ -12,6 +12,7 @@
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
+  --color-blue-205-100-35: hsl(205, 100%, 35%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
@@ -98,6 +99,11 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
+  --feel-active-color: var(--color-blue-205-100-35);
+  --feel-inactive-color: var(--color-grey-225-10-35);
+
+  --feel-indicator-background-color: var(--color-grey-225-10-90);
+
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -114,8 +120,11 @@
   overflow: hidden;
 }
 
-.bio-properties-panel * {
+.bio-properties-panel {
   color: var(--text-base-color);
+}
+
+.bio-properties-panel * {
   font-size: var(--text-size-base);
   line-height: var(--text-line-height);
   font-weight: 400;
@@ -167,7 +176,7 @@
   background-color: var(--header-background-color);
   border-bottom: 1px solid var(--header-bottom-border-color);
   width: 100%;
-  z-index: 1;
+  z-index: 10;
   max-height: 64px;
   overflow: hidden;
 }
@@ -240,7 +249,7 @@
   position: -webkit-sticky;  /* for safari */
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
 }
 
 .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
@@ -446,12 +455,19 @@ textarea.bio-properties-panel-input,
   width: 100%;
 }
 
-.bio-properties-panel-input:focus {
+.bio-properties-panel-input:focus,
+.bio-properties-panel-input:focus-within {
   outline: none;
   background-color: var(--input-focus-background-color);
   border: 1px solid var(--input-focus-border-color);
 }
 
+.bio-properties-panel-textfield:focus-within,
+.bio-properties-panel-feel-entry:focus-within {
+  --input-background-color: var(--input-focus-background-color);
+  --input-border-color: var(--input-focus-border-color);
+}
+
 .bio-properties-panel-input:disabled {
   border-color: var(--input-disabled-border-color);
   background-color: var(--input-disabled-background-color);
@@ -501,7 +517,12 @@ textarea.bio-properties-panel-input {
   background-color: var(--input-error-background-color);
 }
 
-.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus {
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator {
+  border-color: var(--input-error-border-color);
+}
+
+.bio-properties-panel-entry.has-error .bio-properties-panel-input:focus,
+.bio-properties-panel-entry.has-error .bio-properties-panel-feel-indicator:focus {
   border-color: var(--input-error-focus-border-color);
 }
 
@@ -920,11 +941,76 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-icon {
   display: inline-block;
   height: 16px;
+  border-radius: 8px;
   vertical-align: text-bottom;
-  padding: 0 3px;
+  padding: 0;
+  margin: 0 3px;
+  align-items: center;
+  align-self: center;
+  border: none;
+  background: none;
+}
+
+.bio-properties-panel-feel-icon.optional {
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-icon svg * {
+  color: var(--feel-inactive-color);
+}
+
+.bio-properties-panel-feel-icon.active svg * {
+  color: var(--feel-active-color);
 }
 
 .bio-properties-panel-feel-icon svg {
   width: 16px;
   height: 16px;
-}
+}
+
+.bio-properties-panel-feel-editor-container {
+  position: relative;
+}
+
+.bio-properties-panel-feel-editor-container.active {
+  font-family: var(--font-family-monospace);
+}
+
+.bio-properties-panel-feel-container {
+  position: relative;
+}
+
+.bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
+  position: static;
+  padding-left: 2.4em !important;
+  min-height: 28px;
+}
+
+.cm-scroller {
+  overflow: hidden !important;
+}
+
+.bio-properties-panel-feel-indicator {
+  position: absolute;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--feel-indicator-background-color);
+  border-right: 0px;
+  border-radius: 2px 0 0 2px;
+  z-index: 1;
+  height: 100%;
+  width: 2em;
+  text-align: center;
+  padding: 2px 6px;
+}
+
+.bio-properties-panel-feel-editor-container .bio-properties-panel-input {
+  resize: vertical;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.bio-properties-panel-feel-editor-container,
+.bio-properties-panel-feel-editor-container .bio-properties-panel-input,
+.cm-editor {
+  min-height: 100%;
+}