@bpmn-io/properties-panel 1.8.2 → 2.1.0

package/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, ...)
  */
@@ -516,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;
 }
 
@@ -586,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;
@@ -602,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;
@@ -610,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;
@@ -966,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 {
@@ -1050,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;
+}