sequential-workflow-designer 0.14.2 → 0.15.3

package/sass/designer-theme.scss

@@ -0,0 +1,378 @@
+@mixin sqd-theme-ui-toolbox(
+	$theme,
+	$panelBackgroundColor: #fff,
+	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
+	$headerTextColor: #000,
+	$filterBackground: #fff,
+	$filterTextColor: #000,
+	$filterBorder: (1px solid #c3c3c3),
+	$filterBorderColorFocused: #939393,
+	$groupTextColor: #000,
+	$groupBackgroundColor: #e5e5e5
+) {
+	.sqd-theme-#{$theme} {
+		.sqd-toolbox {
+			background: $panelBackgroundColor;
+			box-shadow: $panelBoxShadow;
+		}
+		.sqd-toolbox-header-title {
+			color: $headerTextColor;
+		}
+		.sqd-toolbox-filter {
+			background: $filterBackground;
+			color: $filterTextColor;
+			border: $filterBorder;
+		}
+		.sqd-toolbox-filter:focus {
+			border-color: $filterBorderColorFocused;
+		}
+		.sqd-toolbox-group-title {
+			color: $groupTextColor;
+			background: $groupBackgroundColor;
+		}
+	}
+}
+@mixin sqd-theme-ui-toolbox-item(
+	$theme,
+	$stepType: '',
+	$itemTextColor: #000,
+	$itemBackgroundColor: #fff,
+	$itemBorder: (1px solid #c3c3c3),
+	$itemBoxShadow: (0 2px 2px rgba(0, 0, 0, 0.15)),
+	$itemBorderHovered: #939393,
+	$itemBackgroundColorHovered: #fff,
+	$noIconBackgroundColor: #c6c6c6
+) {
+	.sqd-theme-#{$theme} .sqd-toolbox-item#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		& {
+			color: $itemTextColor;
+			border: $itemBorder;
+			box-shadow: $itemBoxShadow;
+			background: $itemBackgroundColor;
+		}
+		&:hover {
+			border-color: $itemBorderHovered;
+			background: $itemBackgroundColorHovered;
+		}
+		& .sqd-toolbox-item-icon.sqd-no-icon {
+			background: $noIconBackgroundColor;
+		}
+	}
+}
+
+@mixin sqd-theme-ui-control-bar(
+	$theme,
+	$panelBackgroundColor: #fff,
+	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
+	$buttonBackground: #fff,
+	$buttonBackgroundHovered: #fff,
+	$buttonBorder: (1px solid #c3c3c3),
+	$buttonBorderColorHovered: #939393,
+	$buttonIconPathFillColor: #000,
+	$buttonDeleteIconPathFillColor: #e01a24
+) {
+	.sqd-theme-#{$theme} {
+		.sqd-control-bar {
+			background: $panelBackgroundColor;
+			box-shadow: $panelBoxShadow;
+		}
+		.sqd-control-bar-button {
+			border: $buttonBorder;
+			background: $buttonBackground;
+		}
+		.sqd-control-bar-button:hover {
+			border-color: $buttonBorderColorHovered;
+			background: $buttonBackgroundHovered;
+		}
+		.sqd-control-bar-button .sqd-icon-path {
+			fill: $buttonIconPathFillColor;
+		}
+		.sqd-control-bar-button.sqd-delete .sqd-icon-path {
+			fill: $buttonDeleteIconPathFillColor;
+		}
+	}
+}
+
+@mixin sqd-theme-ui-editor(
+	$theme,
+	$panelBackgroundColor: #fff,
+	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15)),
+	$toggleBackgroundColor: #fff,
+	$toggleBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15))
+) {
+	.sqd-theme-#{$theme} {
+		.sqd-smart-editor {
+			background: $panelBackgroundColor;
+			box-shadow: $panelBoxShadow;
+		}
+		.sqd-smart-editor-toggle {
+			background: $toggleBackgroundColor;
+			box-shadow: $toggleBoxShadow;
+		}
+	}
+}
+
+@mixin sqd-theme-ui-context-menu(
+	$theme,
+	$panelBackgroundColor: #fff,
+	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
+	$groupTextColor: #888,
+	$itemTextColor: #000,
+	$itemBackgroundColorHovered: #eee
+) {
+	.sqd-theme-#{$theme}.sqd-context-menu {
+		background: $panelBackgroundColor;
+		box-shadow: $panelBoxShadow;
+	}
+	.sqd-theme-#{$theme} .sqd-context-menu-group {
+		color: $groupTextColor;
+	}
+	.sqd-theme-#{$theme} .sqd-context-menu-item {
+		color: $itemTextColor;
+	}
+	.sqd-theme-#{$theme} .sqd-context-menu-item:hover {
+		background: $itemBackgroundColorHovered;
+	}
+}
+
+@mixin sqd-theme-workspace($theme, $backgroundColor: #f9f9f9) {
+	.sqd-theme-#{$theme}.sqd-designer {
+		background: $backgroundColor;
+	}
+}
+
+@mixin sqd-theme-line-grid($theme, $strokeColor: #e3e3e3, $strokeWidth: 1) {
+	.sqd-theme-#{$theme} .sqd-line-grid-path {
+		stroke: $strokeColor;
+		stroke-width: $strokeWidth;
+	}
+}
+
+@mixin sqd-theme-join($theme, $joinStrokeColor: #000, $joinStrokeWidth: 2) {
+	.sqd-theme-#{$theme} {
+		.sqd-join {
+			stroke-width: $joinStrokeWidth;
+			stroke: $joinStrokeColor;
+		}
+	}
+}
+
+@mixin sqd-theme-placeholder(
+	$theme,
+	$rectFillColor: #d8d8d8,
+	$rectStrokeColor: #6a6a6a,
+	$rectStrokeWidth: 1,
+	$rectStrokeDasharray: 3,
+	$rectFillHovered: #ed4800,
+	$iconPathFillColor: #2b2b2b,
+	$iconPathFillColorHovered: #fff
+) {
+	.sqd-theme-#{$theme} {
+		.sqd-placeholder .sqd-placeholder-rect {
+			fill: $rectFillColor;
+			stroke: $rectStrokeColor;
+			stroke-width: $rectStrokeWidth;
+			stroke-dasharray: $rectStrokeDasharray;
+		}
+		.sqd-placeholder.sqd-hover .sqd-placeholder-rect {
+			fill: $rectFillHovered;
+		}
+		.sqd-placeholder-icon-path {
+			fill: $iconPathFillColor;
+		}
+		.sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
+			fill: $iconPathFillColorHovered;
+		}
+	}
+}
+
+@mixin sqd-theme-region(
+	$theme,
+	$strokeColor: #cecece,
+	$strokeColorSelected: #ed4800,
+	$strokeWidth: 2,
+	$strokeWidthSelected: 2,
+	$strokeDasharray: 3,
+	$strokeDasharraySelected: 0
+) {
+	.sqd-theme-#{$theme} {
+		.sqd-region {
+			stroke: $strokeColor;
+			stroke-width: $strokeWidth;
+			stroke-dasharray: $strokeDasharray;
+		}
+		.sqd-region.sqd-selected {
+			stroke: $strokeColorSelected;
+			stroke-width: $strokeWidthSelected;
+			stroke-dasharray: $strokeDasharraySelected;
+		}
+	}
+}
+
+@mixin sqd-theme-validation-error-badge($theme, $triangleFillColor: #ffa200, $iconFillColor: #000) {
+	.sqd-theme-#{$theme} {
+		.sqd-validation-error {
+			fill: $triangleFillColor;
+		}
+		.sqd-validation-error-icon-path {
+			fill: $iconFillColor;
+		}
+	}
+}
+
+@mixin sqd-theme-start-stop-root-component($theme, $circleFillColor: #2c18df, $iconFillColor: #fff) {
+	.sqd-theme-#{$theme} {
+		.sqd-root-start-stop-circle {
+			fill: $circleFillColor;
+		}
+		.sqd-root-start-stop-icon {
+			fill: $iconFillColor;
+		}
+	}
+}
+
+@mixin sqd-theme-task-step-component(
+	$theme,
+	$stepType: '',
+	$rectFillColor: #fff,
+	$rectStrokeColor: #c3c3c3,
+	$rectStrokeColorSelected: #ed4800,
+	$rectStrokeWidth: 1,
+	$rectStrokeWidthSelected: 2,
+	$rectShadow: (0 1.5px 1.5px rgba(0, 0, 0, 0.15)),
+	$textColor: #000,
+	$emptyIconColor: #c6c6c6,
+	$inputStrokeWidth: 2,
+	$inputStrokeColor: #000,
+	$inputFillColor: #fff,
+	$outputFillColor: #000,
+	$outputStrokeWidth: 0,
+	$outputStrokeColor: #000
+) {
+	.sqd-theme-#{$theme} .sqd-step-task#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		.sqd-step-task-rect {
+			fill: $rectFillColor;
+			stroke-width: $rectStrokeWidth;
+			stroke: $rectStrokeColor;
+			filter: drop-shadow($rectShadow);
+		}
+		.sqd-step-task-rect.sqd-selected {
+			stroke: $rectStrokeColorSelected;
+			stroke-width: $rectStrokeWidthSelected;
+		}
+		.sqd-step-task-text {
+			fill: $textColor;
+		}
+		.sqd-step-task-empty-icon {
+			fill: $emptyIconColor;
+		}
+		@include _sqd-input($inputFillColor: $inputFillColor, $inputStrokeWidth: $inputStrokeWidth, $inputStrokeColor: $inputStrokeColor);
+		@include _sqd-output(
+			$outputFillColor: $outputFillColor,
+			$outputStrokeWidth: $outputStrokeWidth,
+			$outputStrokeColor: $outputStrokeColor
+		);
+	}
+}
+
+@mixin sqd-theme-switch-step-component(
+	$theme,
+	$stepType: '',
+	$labelPrimaryTextColor: #fff,
+	$labelPrimaryFillColor: #2411db,
+	$labelPrimaryStrokeColor: #fff,
+	$labelPrimaryStrokeWidth: 0,
+	$labelPrimaryShadow: '',
+	$labelSecondaryTextColor: #fff,
+	$labelSecondaryFillColor: #000,
+	$labelSecondaryStrokeColor: #000,
+	$labelSecondaryStrokeWidth: 0,
+	$labelSecondaryShadow: '',
+	$inputStrokeWidth: 2,
+	$inputStrokeColor: #000,
+	$inputFillColor: #fff
+) {
+	.sqd-theme-#{$theme} .sqd-step-switch#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		& > .sqd-label-primary > .sqd-label-text {
+			fill: $labelPrimaryTextColor;
+		}
+		& > .sqd-label-primary > .sqd-label-rect {
+			fill: $labelPrimaryFillColor;
+			stroke-width: $labelPrimaryStrokeWidth;
+			@if $labelPrimaryStrokeWidth > 0 {
+				stroke: $labelPrimaryStrokeColor;
+			}
+			@if $labelPrimaryShadow != '' {
+				filter: drop-shadow($labelPrimaryShadow);
+			}
+		}
+		& > .sqd-label-secondary > .sqd-label-rect {
+			fill: $labelSecondaryFillColor;
+			stroke-width: $labelSecondaryStrokeWidth;
+			@if $labelSecondaryStrokeWidth > 0 {
+				stroke: $labelSecondaryStrokeColor;
+			}
+			@if $labelSecondaryShadow != '' {
+				filter: drop-shadow($labelSecondaryShadow);
+			}
+		}
+		& > .sqd-label-secondary > .sqd-label-text {
+			fill: $labelSecondaryTextColor;
+		}
+		& > g > {
+			@include _sqd-input(
+				$inputFillColor: $inputFillColor,
+				$inputStrokeWidth: $inputStrokeWidth,
+				$inputStrokeColor: $inputStrokeColor
+			);
+		}
+	}
+}
+
+@mixin sqd-theme-container-step-component(
+	$theme,
+	$stepType: '',
+	$labelTextColor: #fff,
+	$labelFillColor: #2411db,
+	$inputStrokeWidth: 2,
+	$inputStrokeColor: #000,
+	$inputFillColor: #fff
+) {
+	.sqd-theme-#{$theme} .sqd-step-container#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
+		& > .sqd-label > .sqd-label-text {
+			fill: $labelTextColor;
+		}
+		& > .sqd-label > .sqd-label-rect {
+			fill: $labelFillColor;
+		}
+		& > g > {
+			@include _sqd-input(
+				$inputFillColor: $inputFillColor,
+				$inputStrokeWidth: $inputStrokeWidth,
+				$inputStrokeColor: $inputStrokeColor
+			);
+		}
+	}
+}
+
+/* internal */
+
+@mixin _sqd-input($inputFillColor, $inputStrokeWidth, $inputStrokeColor) {
+	.sqd-input {
+		fill: $inputFillColor;
+		stroke-width: $inputStrokeWidth;
+		@if $inputStrokeWidth > 0 {
+			stroke: $inputStrokeColor;
+		}
+	}
+}
+
+@mixin _sqd-output($outputFillColor, $outputStrokeWidth, $outputStrokeColor) {
+	.sqd-output {
+		fill: $outputFillColor;
+		stroke-width: $outputStrokeWidth;
+		@if $outputStrokeWidth > 0 {
+			stroke: $outputStrokeColor;
+		}
+	}
+}

package/sass/designer.scss

@@ -0,0 +1,257 @@
+/* .sqd-designer */
+
+.sqd-designer {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 100%;
+}
+.sqd-designer,
+.sqd-drag,
+.sqd-context-menu {
+	font-size: 13px;
+	line-height: 1em;
+}
+.sqd-hidden {
+	display: none !important;
+}
+.sqd-disabled {
+	opacity: 0.25;
+}
+
+/* .sqd-toolbox */
+
+.sqd-toolbox,
+.sqd-toolbox-filter {
+	font-size: 11px;
+	line-height: 1.2em;
+}
+.sqd-toolbox {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	z-index: 20;
+	box-sizing: border-box;
+	border-radius: 10px;
+	width: 130px;
+	user-select: none;
+}
+.sqd-toolbox-header {
+	position: relative;
+	padding: 15px 10px;
+	cursor: pointer;
+}
+.sqd-toolbox-header-title {
+	display: block;
+	font-size: 1.2em;
+	line-height: 1em;
+	font-weight: bold;
+}
+.sqd-toolbox-toggle-icon {
+	position: absolute;
+	top: 50%;
+	right: 10px;
+	width: 16px;
+	height: 16px;
+	margin: -8px 0 0;
+}
+.sqd-toolbox-header:hover .sqd-toolbox-toggle-icon {
+	opacity: 0.6;
+}
+.sqd-scrollbox {
+	position: relative;
+	overflow: hidden;
+}
+.sqd-scrollbox-body {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.sqd-toolbox-filter {
+	display: block;
+	box-sizing: border-box;
+	padding: 6px 8px;
+	outline: none;
+	width: 110px;
+	margin: 0 10px 10px;
+	box-sizing: border-box;
+	border-radius: 10px;
+}
+.sqd-toolbox-group-title {
+	text-align: center;
+	padding: 5px 0;
+	margin: 0 10px 10px;
+	border-radius: 10px;
+}
+.sqd-toolbox-item {
+	position: relative;
+	border-radius: 5px;
+	box-sizing: border-box;
+	margin: 0 10px 10px;
+	width: 110px;
+	cursor: move;
+}
+.sqd-toolbox-item-icon {
+	position: absolute;
+	top: 50%;
+	left: 5px;
+	margin-top: -10px;
+	width: 20px;
+	height: 20px;
+}
+.sqd-toolbox-item-icon.sqd-no-icon {
+	border-radius: 4px;
+}
+.sqd-toolbox-item-icon-image {
+	width: 100%;
+	height: 100%;
+}
+.sqd-toolbox-item-text {
+	position: relative;
+	display: block;
+	padding: 10px 10px 10px 30px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.sqd-drag {
+	position: absolute;
+	z-index: 9999999;
+	pointer-events: none;
+}
+
+/* .sqd-control-bar */
+
+.sqd-control-bar {
+	position: absolute;
+	bottom: 10px;
+	left: 10px;
+	z-index: 20;
+	padding: 8px 0 8px 8px;
+	border-radius: 10px;
+	white-space: nowrap;
+}
+.sqd-control-bar-button {
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	border-radius: 5px;
+	margin-right: 8px;
+	cursor: pointer;
+	box-sizing: border-box;
+}
+.sqd-control-bar-button-icon {
+	width: 24px;
+	height: 24px;
+	margin: 3px 0 0 3px;
+}
+.sqd-control-bar-button.sqd-disabled .sqd-control-bar-button-icon {
+	opacity: 0.2;
+}
+
+/* .sqd-smart-editor */
+
+.sqd-smart-editor-toggle {
+	position: absolute;
+	top: 0;
+	z-index: 29;
+	width: 36px;
+	height: 64px;
+	border-bottom-left-radius: 10px;
+	cursor: pointer;
+}
+.sqd-smart-editor-toggle-icon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 24px;
+	height: 24px;
+	margin: -12px 0 0 -12px;
+}
+.sqd-smart-editor-toggle:hover .sqd-smart-editor-toggle-icon {
+	opacity: 0.6;
+}
+.sqd-smart-editor {
+	z-index: 30;
+}
+.sqd-layout-desktop .sqd-smart-editor {
+	position: relative;
+	width: 300px;
+}
+.sqd-layout-desktop .sqd-smart-editor-toggle {
+	right: 300px;
+}
+.sqd-layout-desktop .sqd-smart-editor-toggle.sqd-collapsed {
+	right: 0;
+}
+.sqd-layout-mobile .sqd-smart-editor {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 41px;
+}
+.sqd-layout-mobile .sqd-smart-editor-toggle {
+	left: 5px;
+}
+.sqd-layout-mobile .sqd-smart-editor-toggle.sqd-collapsed {
+	left: auto;
+	right: 0;
+}
+
+/* .sqd-context-menu */
+
+.sqd-context-menu {
+	position: absolute;
+	z-index: 2000000000;
+	border-radius: 4px;
+	overflow: hidden;
+	padding: 5px;
+}
+.sqd-context-menu-group,
+.sqd-context-menu-item {
+	width: 130px;
+	padding: 8px 10px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.sqd-context-menu-group {
+	font-size: 11px;
+	line-height: 1em;
+}
+.sqd-context-menu-item {
+	border-radius: 5px;
+	cursor: pointer;
+	transition: background 70ms;
+}
+
+/* .sqd-workspace */
+
+.sqd-workspace {
+	flex: 1;
+	position: relative;
+	display: block;
+	user-select: none;
+}
+.sqd-workspace-canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: move;
+}
+
+.sqd-label-text {
+	text-anchor: middle;
+	dominant-baseline: central;
+}
+
+.sqd-placeholder .sqd-placeholder-rect {
+	transition: fill 100ms;
+}
+
+.sqd-step-task-text {
+	text-anchor: left;
+	dominant-baseline: central;
+}