camunda-bpmn-js 2.4.0 → 2.6.0

package/dist/assets/properties-panel.css

@@ -99,8 +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-background-color: var(--color-grey-225-10-95);
+  --feel-active-color: var(--color-blue-205-100-45);
   --feel-inactive-color: var(--color-grey-225-10-35);
+  --feel-hover-background-color: var(--color-grey-225-10-90);
+  --feel-active-background-color: var(--color-grey-225-10-95);
 
   --feel-indicator-background-color: var(--color-grey-225-10-90);
 
@@ -113,7 +116,9 @@
   --font-family: sans-serif;
   --font-family-monospace: monospace;
 
-  display: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   position: relative;
   height: 100%;
   width: 100%;
@@ -135,12 +140,6 @@
   font-family: var(--font-family);
 }
 
-.bio-properties-panel.open {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
 /**
  * Placeholder (empty, multi select, ...)
  */
@@ -421,6 +420,14 @@
   border-radius: 3px;
 }
 
+.bio-properties-panel-description pre code {
+  width: 100%;
+  display: block;
+  overflow-x: auto;
+  padding: 4px 6px;
+  font-family: var(--font-family-monospace);
+}
+
 .bio-properties-panel-description ul {
   padding: 0;
   margin: 0 0 0 12px;
@@ -438,6 +445,22 @@
   text-decoration: underline;
 }
 
+.bio-properties-panel-feelers-editor.bio-properties-panel-input {
+  padding: 0;
+}
+
+.bio-properties-panel-feelers-input .cm-editor
+{
+  min-height: 32px;
+  max-height: 215px;
+  background-color: transparent;
+}
+
+.bio-properties-panel-feelers-editor .cm-editor.cm-focused,
+.bio-properties-panel-feelers-input .cm-editor.cm-focused {
+  outline: none;
+}
+
 .bio-properties-panel-input {
   padding: 3px 6px 2px;
   border: 1px solid var(--input-border-color);
@@ -455,7 +478,7 @@ textarea.bio-properties-panel-input,
   width: 100%;
 }
 
-textarea.bio-properties-panel-input.auto-resize {
+textarea.bio-properties-panel-input {
   min-height: 28px;
 }
 
@@ -492,7 +515,7 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type="checkbox"]:focus {
-  outline: 1px solid var(--input-focus-border-color);
+  outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
@@ -562,10 +585,23 @@ textarea.bio-properties-panel-input {
   align-items: center;
 }
 
+.bio-properties-panel-toggle-switch.inline {
+  display: flex;
+  flex-direction: row;
+}
+
+.bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
+  margin-left: auto;
+}
+
 .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
   font-size: var(--text-size-base);
 }
 
+.bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
+  font-size: var(--text-size-small);
+}
+
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
   margin: 0;
   margin-left: 6px;
@@ -578,6 +614,11 @@ textarea.bio-properties-panel-input {
   height: 16px;
 }
 
+.bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 1px;
+}
+
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
   opacity: 0;
   width: 0;
@@ -586,6 +627,7 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
   position: absolute;
+  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
@@ -942,34 +984,57 @@ textarea.bio-properties-panel-input {
   padding-right: 2em
 }
 
+.bio-properties-panel-feel-entry .bio-properties-panel-label {
+  display: flex;
+}
+
 .bio-properties-panel-feel-icon {
-  display: inline-block;
-  height: 16px;
-  border-radius: 8px;
+  display: inline-flex;
+  height: 22px;
+  width: 22px;
   vertical-align: text-bottom;
   padding: 0;
   margin: 0 3px;
   align-items: center;
   align-self: center;
+  justify-content: center;
   border: none;
   background: none;
+  border-radius: 3px;
 }
 
 .bio-properties-panel-feel-icon.optional {
   cursor: pointer;
+
+  background: var(--feel-background-color);
 }
 
 .bio-properties-panel-feel-icon svg * {
-  color: var(--feel-inactive-color);
+  fill: var(--feel-inactive-color);
+}
+
+.bio-properties-panel-feel-icon:hover {
+  background: var(--feel-hover-background-color);
+}
+
+.bio-properties-panel-feel-icon.active {
+  background: var(--feel-active-background-color);
+}
+
+.bio-properties-panel-feel-icon.active:hover {
+  background: var(--feel-hover-background-color);
+}
+
+.bio-properties-panel-feel-icon.required.active {
+  background: none;
 }
 
 .bio-properties-panel-feel-icon.active svg * {
-  color: var(--feel-active-color);
+  fill: var(--feel-active-color);
 }
 
-.bio-properties-panel-feel-icon svg {
-  width: 16px;
-  height: 16px;
+.bio-properties-panel-feel-icon.required.active svg * {
+  fill: var(--feel-inactive-color);
 }
 
 .bio-properties-panel-feel-editor-container {
@@ -990,10 +1055,6 @@ textarea.bio-properties-panel-input {
   min-height: 28px;
 }
 
-.bio-properties-panel-feel-container .cm-scroller {
-  overflow: hidden !important;
-}
-
 .bio-properties-panel-feel-indicator {
   position: absolute;
   border: 1px solid var(--input-border-color);
@@ -1007,6 +1068,18 @@ textarea.bio-properties-panel-input {
   padding: 2px 6px;
 }
 
+.bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: hidden !important;
+}
+
+.bio-properties-panel-feelers-editor .cm-editor {
+  background-color: transparent;
+}
+
+.bio-properties-panel-feelers-editor .cm-editor.cm-focused {
+  background-color: transparent;
+}
+
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
   resize: vertical;
   overflow: hidden;
@@ -1018,3 +1091,20 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-container .cm-editor {
   min-height: 100%;
 }
+
+.bio-properties-panel-feel-checkbox,
+.bio-properties-panel-feel-toggle-switch {
+  padding-top: 1px;
+}
+
+.bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
+.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
+.bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
+  margin-left: auto;
+}