1 files changed, 94 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
new file mode 100644
index 00000000..b2b701b2
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
@@ -0,0 +1,94 @@
+.composition-view {
+	display: flex;
+	width: 100%;
+
+	.bpmn-container {
+		flex-basis: 100%;
+		flex-grow: 1;
+		.djs-palette.open {
+			border: none;
+		}
+		.djs-palette-entries {
+			border: solid 1px $light-gray;
+			&:empty {
+				border: none;
+			}
+		}
+	}
+	.bpmn-sidebar {
+		background-color: $light-silver;
+		height: 100%;
+		width: 320px;
+
+		label {
+			@include body-1;
+		}
+		.group-label {
+			@include heading-4-emphasis;
+			font-size: 110%;
+		}
+		.properties-panel {
+			background-color: $light-silver;
+			overflow-y: auto;
+			max-height: calc(100vh - 70px);
+			&, .bpp-properties-panel {
+				[disabled], [editable-readonly=false] {
+					background-color: $light-gray;
+					color: $dark-gray;
+                    pointer-events: none;
+				}
+				label[for] {
+					cursor: default;
+					background: transparent;
+				}
+				background-color: $light-silver;
+				#camunda-activitySelect-select {
+					&.invalid {
+						border-color: $camunda-panel-error-border-color;
+						background-color: $camunda-panel-error-background-color;
+					}
+				}
+			}
+		}
+		[editable-readonly] {
+			font-family: OpenSans-Regular, Arial, sans-serif;
+			font-style: normal;
+			font-weight: 400;
+			font-size: 14px;
+			box-sizing: border-box;
+		}
+
+		.composition-buttons {
+			position: fixed;
+			background-color: $light-silver;
+			left: 265px;
+			bottom: 46px;
+			border: 1px solid $light-gray;
+			width: 189px;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			height: 57px;
+			align-items: center;
+			padding: 10px;
+			.divider {
+				height: 35px;
+    			border: 1px solid $light-gray;
+			}
+			.diagram-btn {
+				
+				&:hover {
+					fill: $blue;
+					cursor: pointer;
+				}
+				&.disabled {
+					fill: $gray;
+				}
+				.svg-icon {
+					width: 25px;
+				    height: 23px;
+				}
+			}
+		}
+	}
+}