camunda-bpmn-js 2.7.0 → 3.1.0

package/dist/assets/properties-panel.css

@@ -11,12 +11,14 @@
   --color-grey-225-10-90: hsl(225, 10%, 90%);
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
+  --color-grey-0-0-22: hsl(0, 0%, 22%);
 
   --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%);
-
+  --color-blue-219-99-53: hsl(219, 99%, 53%);
+  --color-blue-218-100-74: hsl(218, 100%, 74%);
   --color-green-150-86-44: hsl(150, 86%, 44%);
 
   --color-red-360-100-40: hsl(360, 100%, 40%);
@@ -62,6 +64,7 @@
   --arrow-hover-background-color: var(--color-grey-225-10-95);
 
   --dot-color: var(--color-grey-225-10-35);
+  --dot-color-error: var(--color-red-360-100-45);
 
   --list-badge-color: var(--color-white);
   --list-badge-background-color: var(--color-grey-225-10-35);
@@ -99,14 +102,22 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
-  --feel-background-color: var(--color-grey-225-10-95);
+  --feel-background-color: transparent;
   --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-hover-color: var(--color-grey-225-10-15);
+  --feel-hover-background-color: var(--color-grey-225-10-97);
+  --feel-active-background-color: transparent;
+  --feel-required-color: var(--color-grey-225-10-55);
 
   --feel-indicator-background-color: var(--color-grey-225-10-90);
 
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
+  
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -353,6 +364,10 @@
   background-color: var(--dot-color);
 }
 
+.bio-properties-panel-dot--error {
+  --dot-color: var(--dot-color-error);
+}
+
 /**
  * Lists
  */
@@ -380,6 +395,10 @@
   background-color: var(--list-badge-background-color);
 }
 
+.bio-properties-panel-list-badge--error {
+  --list-badge-background-color: var(--dot-color-error);
+}
+
 /**
  * Basic entries
  */
@@ -990,7 +1009,7 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon {
   display: inline-flex;
-  height: 22px;
+  height: 18px;
   width: 22px;
   vertical-align: text-bottom;
   padding: 0;
@@ -1005,7 +1024,6 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon.optional {
   cursor: pointer;
-
   background: var(--feel-background-color);
 }
 
@@ -1017,6 +1035,10 @@ textarea.bio-properties-panel-input {
   background: var(--feel-hover-background-color);
 }
 
+.bio-properties-panel-feel-icon:hover svg * {
+  fill: var(--feel-hover-color);
+}
+
 .bio-properties-panel-feel-icon.active {
   background: var(--feel-active-background-color);
 }
@@ -1034,7 +1056,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-icon.required.active svg * {
-  fill: var(--feel-inactive-color);
+  fill: var(--feel-required-color);
 }
 
 .bio-properties-panel-feel-editor-container {
@@ -1107,4 +1129,63 @@ textarea.bio-properties-panel-input {
 .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;
+}
+
+.bio-properties-panel-tooltip-wrapper {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  font: inherit;
+}
+
+.bio-properties-panel-tooltip {
+  display: flex;
+  color: var(--color-white, white);
+  position: fixed;
+  z-index: 1000;
+  padding-right: 6px;
+  max-width: 300px;
+  font-size: var(--text-size-small);
+  font-family: var(--font-family);
+}
+
+.bio-properties-panel-tooltip-content {
+  background-color: var(--tooltip-background-color);
+  padding: 16px;
+  border-radius: 2px;
+  font-weight: 400;
+  white-space: pre-wrap;
+}
+
+.bio-properties-panel-tooltip-content code,
+.bio-properties-panel-tooltip-content pre {
+  color: var(--description-color);
+  font-family: var(--font-family);
+  font-size: var(--text-size-small);
+  line-height: var(--line-height-condensed);
+  padding: 0 2px;
+  background-color: var(--tooltip-code-background-color);
+  border: 1px solid var(--tooltip-code-border-color);
+  border-radius: 3px;
+}
+
+.bio-properties-panel-tooltip p:first-child {
+  margin-top: 0;
+}
+
+.bio-properties-panel-tooltip p:last-child {
+  margin-bottom: 0;
+}
+
+.bio-properties-panel-tooltip-content a {
+  color: var(--tooltip-link);
+}
+
+.bio-properties-panel-tooltip .bio-properties-panel-tooltip-arrow {
+  width: 0; 
+  height: 0; 
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid var(--tooltip-background-color);
+  margin-top: 16px;
 }