Add paletx assets files.

Add paletx assets files.

Issue-ID: SDC-1130,SDC-1131

Change-Id: Ic31c668fd89728d2ff7a00dc2877a86785870724
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>

8 files changed, 954 insertions, 0 deletions

diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/common.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/common.less
new file mode 100644
index 00000000..e53ef3d5
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/common.less
@@ -0,0 +1,27 @@
+html{
+  //font-size:@font-size-spacing;
+}// 定义间距使用
+body{
+  font-size:@font-size;
+}
+.shadow {
+-webkit-box-shadow: 0 1px 6px @shadow-color;
+-moz-box-shadow: 0 1px 6px @shadow-color;
+box-shadow: 0 1px 6px @shadow-color;
+} //阴影样式（包含跨浏览器），可以直接引用.shadow
+
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color: @disabled-text-color;
+}
+
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color: @disabled-text-color;
+}
+
+input:-ms-input-placeholder{
+  color: @disabled-text-color;
+}
+
+input::-webkit-input-placeholder{
+  color: @disabled-text-color;
+}
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less
new file mode 100644
index 00000000..a1421c81
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less
@@ -0,0 +1,272 @@
+@import "../default/theme.less";

+

+@padding-normal: 0px 16px;

+@padding-sm: 0px 14px;

+@padding-xs: 0px 12px;

+@min-width-normal: 80px;

+@min-width-sm: 60px;

+@min-width-xs: 60px;

+@btn-margin-right: 10px;

+@btn-margin-right-sm: 5px;

+@btn-margin-right-xs: 5px;

+@btn-border-height: 1px;

+

+.border-min-width(@min-width, 14px) {

+	min-width: @min-width + 8px;

+}

+

+.border-min-width(@min-width, 12px) {

+	min-width: @min-width;

+}

+

+.background-color-white-color-disabled (@color) when (@color = #fff) {

+	color: @disabled-text-color;

+  background-color: @common-color;

+	border-color: #e9e9e9;

+}

+

+.background-color-white-color-disabled (@color) when not (@color = #fff) {

+	border-color: @color;

+	background-color: @color;

+	opacity: @opacity-disable;

+}

+

+.plx-btn {

+	font-family: @font-family;

+	color: @common-textcolor;

+	.border-min-width(@min-width-normal, @font-size);

+	letter-spacing: 1px;

+	padding: @padding-normal;

+	height: @btn-height;

+	font-size: @font-size;

+	cursor: pointer;

+	text-align: center;

+	white-space: nowrap;

+	margin-right: @btn-margin-right;

+	vertical-align: middle;

+	border: @btn-border-height solid @border-color-base;

+	background-color: @common-color;

+	border-radius: @radius;

+	line-height: @btn-height - @btn-border-height * 2;

+	&:hover,

+	&:disabled,

+	&[disabled],

+	&:focus,

+	&:active {

+		outline: none;

+		background-image: none;

+		filter: none;

+		-webkit-box-shadow: none;

+		-moz-box-shadow: none;

+		box-shadow: none;

+		text-shadow: none;

+	}

+	&:hover,

+	&:focus {

+    color: @btn-common-color-text-hover;

+    border-color: @btn-common-color-border-hover;

+		background-color: @common-color-hover;

+	}

+	&:active {

+    color: @btn-common-color-text-click;

+    border-color: @btn-common-color-border-click;

+		background-color: @common-color-click;

+	}

+	&:disabled,

+	&[disabled] {

+		.background-color-white-color-disabled(@common-color);

+	}

+	&:disabled:hover,

+	&[disabled]:hover,

+	&:disabled:focus,

+	&[disabled]:focus {

+		.background-color-white-color-disabled(@common-color);

+		cursor: not-allowed;

+	}

+	& .plx-btn-icon {

+			font-size: 16px;

+			vertical-align: text-top;

+			margin-right: 3px;

+	}

+}

+

+.plx-btn-primary {

+	background-color: @primary-color;

+	color: @scene-textcolor;

+	border-color: @primary-color;

+	&:hover,

+	&:focus {

+    color: @scene-textcolor;

+		background-color: @primary-color-hover;

+		border-color: @primary-color-hover;

+	}

+	&:active {

+    color: @scene-textcolor;

+		background-color: @primary-color-click;

+		border-color: @primary-color-click;

+	}

+	&:disabled,

+	&[disabled],

+	&:disabled:hover,

+	&[disabled]:hover,

+	&:disabled:focus,

+	&[disabled]:focus {

+		color: @scene-textcolor;

+		.background-color-white-color-disabled(@primary-color);

+	}

+}

+

+.plx-btn-guide {

+	background-color: @guide-color;

+	color: @scene-textcolor;

+	border-color: @guide-color;

+	&:hover,

+	&:focus {

+    color: @scene-textcolor;

+		background-color: @primary-color-guide-hover;

+		border-color: @primary-color-guide-hover;

+	}

+	&:active {

+    color: @scene-textcolor;

+		background-color: @primary-color-guide-click;

+		border-color: @primary-color-guide-click;

+	}

+	&:disabled,

+	&[disabled],

+	&:disabled:hover,

+	&[disabled]:hover,

+	&:disabled:focus,

+	&[disabled]:focus {

+		color: @scene-textcolor;

+		.background-color-white-color-disabled(@guide-color);

+	}

+}

+

+.plx-btn-table {

+	color: @text-color;

+}

+

+.plx-btn-error {

+	background-color: @error-color;

+	color: @scene-textcolor;

+	border-color: @error-color;

+	&:hover,

+	&:focus {

+    color: @scene-textcolor;

+		background-color: @error-color-hover;

+		border-color: @error-color-hover;

+	}

+	&:active {

+    color: @scene-textcolor;

+		background-color: @error-color-click;

+		border-color: @error-color-click;

+	}

+	&:disabled,

+	&[disabled],

+	&:disabled:hover,

+	&[disabled]:hover,

+	&:disabled:focus,

+	&[disabled]:focus {

+		color: @scene-textcolor;

+		.background-color-white-color-disabled(@error-color);

+	}

+}

+

+.plx-btn-sm {

+	height: @btn-height-sm;

+	padding: @padding-sm;

+	.border-min-width(@min-width-sm, @font-size);

+	margin-right: @btn-margin-right-sm;

+	line-height: @btn-height-sm - @btn-border-height * 2;

+}

+

+.plx-btn-xs{

+	height: @btn-height-xs;

+	padding: @padding-xs;

+	.border-min-width(@min-width-xs, @font-size);

+	margin-right: @btn-margin-right-xs;

+	line-height: @btn-height-xs - @btn-border-height * 2;

+}

+

+.plx-btn.dropdown-toggle {

+	margin-right: 0;

+	outline: none !important;

+	background-image: none !important;

+	filter: none;

+	-webkit-box-shadow: none;

+	-moz-box-shadow: none;

+	box-shadow: none;

+	text-shadow: none;

+}

+

+.plx-btn.dropdown-toggle::after {

+	margin-left: 16px;

+	border-top: 4px solid;

+	border-right: 4px solid transparent;

+	border-left: 4px solid transparent;

+	color: darken(@border-color-base, 10%);

+	margin-bottom: 1px;

+}

+

+.plx-btn-sm.dropdown-toggle::after {

+	margin-left: 14px;

+}

+

+.plx-btn-xs.dropdown-toggle::after {

+	margin-left: 12px;

+}

+

+.plx-btn+.dropdown-menu {

+	margin: 0;

+	padding: 0;

+	border: 0;

+	min-width: 100%;

+	font-size: @font-size;

+	border-radius: @radius;

+	.shadow;

+	& .dropdown-item {

+		background-color: @component-bg;

+		color: @text-color;

+		font-size: @font-size;

+		padding: @padding-normal;

+		height: 30px;

+		cursor: pointer;

+		&:hover,

+		&:focus,

+		&:active{

+			outline: none;

+			background-color: @hover-bg-color;

+		}

+		&:disabled,

+		&[disabled] {

+			color: @disabled-text-color;

+		}

+		&:disabled:hover,

+		&[disabled]:hover,

+		&:disabled:focus,

+		&[disabled]:focus {

+			cursor: not-allowed;

+			background-color: @component-bg;

+		}

+	}

+}

+

+.plx-btn-sm+.dropdown-menu .dropdown-item {

+	padding: @padding-sm;

+}

+.plx-btn-xs+.dropdown-menu .dropdown-item {

+	padding: @padding-xs;

+}

+

+.plx-btn-more {

+	display: inline-block;

+	margin-right: @btn-margin-right;

+}

+

+.plx-btn-more-sm {

+	margin-right: @btn-margin-right-sm;

+}

+

+.plx-btn-more-xs {

+	margin-right: @btn-margin-right-xs;

+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-checkbox.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-checkbox.less
new file mode 100644
index 00000000..e0742f61
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-checkbox.less
@@ -0,0 +1,105 @@
+@import "../default/theme.less";

+

+@checkbox-border-size: 1px;

+

+.plx-checkbox-container {

+	font-size: 0;

+	position: relative;

+}

+

+.plx-checkbox {

+	position: absolute;

+	z-index: -1;

+	opacity: 0;

+	& + .checkbox-substitute {

+		position: relative;

+		display: inline-block;

+		cursor: pointer;

+		height: @checkbox-size;

+		width: @checkbox-size;

+		border: @checkbox-border-size solid @border-color-base;

+		border-radius: @radius-sm;

+		vertical-align: middle;

+	}

+	& + .checkbox-substitute + span {

+		font-weight: normal;

+		font-size: @font-size;

+		cursor: pointer;

+		vertical-align: middle;

+		.font-padding(@font-size);

+	}

+	&:hover + .checkbox-substitute {

+		border-color: @primary-color;

+		outline: none;

+		background-image: none;

+		-webkit-box-shadow: none;

+		-moz-box-shadow: none;

+		box-shadow: none;

+		text-shadow: none;

+	}

+	&:checked + .checkbox-substitute {

+		border-color: @primary-color;

+		background-color: @primary-color;

+		&::after {

+			.checkbox-check(@component-bg);

+		}

+	}

+	&.portion + .checkbox-substitute {

+		background-color: @primary-color;

+		border-color: @primary-color;

+		opacity: 0.5;

+		&::after {

+			.checkbox-check(@component-bg);

+		}

+	}

+	&:disabled + .checkbox-substitute,

+	&[disabled] + .checkbox-substitute {

+		border-color: @border-color-base;

+		background-color: @input-bg-color-disabled;

+		cursor: not-allowed;

+	}

+	&:disabled + .checkbox-substitute + span,

+	&[disabled] + .checkbox-substitute + span {

+		cursor: not-allowed;

+	}

+	&.portion[disabled] + .checkbox-substitute {

+		background-color: @border-color-base;

+		border-color: @border-color-base;

+		&::after {

+			.checkbox-check(@fonticon-color);

+		}

+	}

+	&:checked[disabled] + .checkbox-substitute {

+		border-color: @border-color-base;

+		background-color: @border-color-base;

+	}

+}

+

+.checkbox-check(@color) {

+	content: '';

+	position: absolute;

+	display: block;

+	width: 6px;

+	height: 10px;

+	border: solid @color;

+	border-width: 0 2px 2px 0;

+	transform: rotate(45deg);

+	.checkbox-check-left(@font-size);

+	top: 0;

+}

+

+.checkbox-check-left(12px) {

+	left: 3px;

+}

+

+.checkbox-check-left(14px) {

+	left: 4px;

+}

+

+.font-padding(12px) {

+	padding-left: 6px;

+}

+

+.font-padding(14px) {

+	padding-left: 10px;

+}

diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-form.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-form.less
new file mode 100644
index 00000000..600898a3
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-form.less
@@ -0,0 +1,233 @@
+@import "../default/theme.less";
+@import "./plx-button.less";
+@import "./plx-radio.less";
+@import "./plx-checkbox.less";
+@import "./plx-input.less";
+
+.plx-form {
+    font-family: @font-family;
+    font-size: @font-size;
+    background: @component-bg;
+    color: @text-color;
+    .ng-invalid:not(form).ng-invalid:not(fieldset).ng-invalid:not(plx-select) {
+        border: 1px solid @error-color; /* red */
+    }
+    .ng-untouched:not(form).ng-untouched:not(fieldset).ng-untouched:not(plx-select) {
+        border: 1px solid @border-color-base ;
+    }
+    // 标签和通用组件样式
+    label {
+        font-size: @font-size;
+        text-align: right;
+        color: @form-label;
+        background: @component-bg;
+        .label-span {
+            color: @text-color;
+        }
+    }
+
+    //分组的样式
+    .forms-group(@cursor, @bgcolor) {
+        margin-bottom: 10px;  
+        padding-left: 15px;
+        color: @title-text-color;
+        font-size: @font-size-title-group;
+        height: @input-height;
+        line-height: @input-height;
+        cursor: @cursor;
+        &:hover {
+            background: @bgcolor;
+        }
+        span {
+            margin-left: 24px;
+            border-left: 3px solid @primary-color;
+            padding-left: 5px;
+        }
+        // 分组的展开和隐藏
+        .group-icon {
+            float:left;
+            font-size: @font-size-title-group;
+            color: @primary-color !important;
+            line-height:@input-height; 
+            margin-right:8px;    
+            transform: scale(0.7,0.7);
+            font-weight: bold;
+        }
+    }
+	
+	.text-autocut {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		display: block;
+	}
+
+    .forms-group-pointer {
+        .forms-group(pointer, @hover-bg-color);
+    }
+
+    .forms-group-default {
+        .forms-group(default, @component-bg);
+        line-height: @input-height / 2;
+    }
+    // 紧凑型表单input高度
+    .input-sm {
+        height: @input-height-sm !important;
+    }
+    // 必选的*号颜色
+    .px-red {
+        color: @error-color;
+    }
+
+    input:focus {
+        border: 1px solid @primary-color !important;
+    }
+    // 错误信息
+    .error-div {
+        height: @font-size;
+        margin-top: -4px;
+        margin-bottom: 5px;
+        .error-msg {
+            color: @error-color;
+        }
+    }
+    // 输入提示信息的样式
+    .help-div {
+        color: @disabled-text-color;
+        height: @font-size;
+        margin-top: -5px;
+        margin-bottom: 6px;
+    }
+    // 标题样式
+    .forms-header {
+        margin-left: 15px;
+        margin-bottom: 25px;
+        padding-bottom: 5px;
+        border-bottom:1px solid @border-color-split;
+        span {
+        font-size: @font-size-title-level2;
+        color: @title-text-color;
+        }
+    }
+
+    .plx-input{
+		width: 100%;
+		color: @text-color;
+		background: @component-bg;
+		text-align: left;
+    }
+    //radio、checkbox、tail的样式
+    .field-radio {
+        padding-right:10px;
+        line-height:@input-height - 5px;
+        &.field-radio-tight {
+        line-height:@input-height-sm - 5px;
+        }
+    }
+    .field-tail {
+        padding-right:10px;
+        line-height:@input-height;
+        &.field-tail-tight {
+        line-height:@input-height-sm;
+        }
+        .tip {
+            color: @fonticon-color;
+            font-size: 16px;
+        }
+    }
+    .field-info {
+        font-size: @font-size;
+        color: @primary-color;
+        margin-left: -15px;
+        &.field-info-group {
+        margin-left: 15px;
+        }
+    }
+    //field的样式
+    .form-field:not(select-dropdown) {
+        color: @text-color;
+        font-size: @font-size;
+        line-height: @input-height;
+        &.form-field-tight {
+        line-height:@input-height-sm;
+        }
+        &.form-filed-hint {
+            margin-bottom: 15px; 
+        }
+    }
+    .field-div {
+        margin-bottom: 15px;
+        padding-left: 0;
+        &.field-div-tight {
+            margin-bottom: 10px;
+        }
+        // 输入值改变后的样式变化
+        &.inputchanged > input{
+            font-weight:bold;
+        }
+        &.inputchanged > select{
+            font-weight:bold;
+        }
+    }
+
+    .button-div {
+        padding: 15px 0 0 0;
+        color: @text-color;
+        font-size: @font-size-title-group;
+        text-align: left;
+        button {
+            margin-right: 10px;
+        }
+    }
+
+    .button-r-submit {
+        float: right;
+        margin-right: -20px !important;
+    }
+
+    .button-r-cancel {
+        float: right;
+    }
+
+    .content {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    //滚动条
+    .plx-scrollbar::-webkit-scrollbar {
+        width: 4px;
+        height: 6px;
+    }
+    .plx-scrollbar::-webkit-scrollbar-thumb {
+        background-color: rgba(0,0,0,.2);
+        border-radius: 2em;
+        min-height: 50px;
+        max-height: 100px;
+    }
+    .plx-scrollbar::-webkit-scrollbar-corner{
+        background-color: transparent;
+    }
+    // placeholder
+    input:-ms-input-placeholder {
+        color: @unselected-text-color !important;
+    }
+    input::-webkit-input-placeholder {
+        color: @unselected-text-color !important;
+    }
+	plx-info .icon {
+		margin-left: -10px;
+		line-height: 28px !important;
+	} 
+
+}
+.para-content {
+	.icon-active {
+		fill:@primary-color;
+	}
+	.icon-disactive {
+		fill: @disabled-text-color;
+		cursor: default;
+	}
+}
+
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-input.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-input.less
new file mode 100644
index 00000000..a83dd19c
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-input.less
@@ -0,0 +1,29 @@
+@import "../default/theme.less";

+

+.plx-input {

+	font-size: @font-size;

+	height: @input-height;

+	padding-left: 10px;

+	padding-right: 10px;

+	outline: 0;

+	border: 1px solid @border-color-base;

+	border-radius: @radius;

+	vertical-align: middle;

+	&:focus {

+		border: 1px solid @primary-color;

+	}

+	&:disabled,

+	&[disabled] {

+		cursor: not-allowed;

+		background-color: @input-bg-color-disabled;

+	}

+}

+

+.plx-input-sm {

+	height: @input-height-sm;

+}

+

+.plx-input-right-no-radius {

+	border-bottom-right-radius: 0;

+	border-top-right-radius: 0;

+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-radio.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-radio.less
new file mode 100644
index 00000000..23ddd177
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-radio.less
@@ -0,0 +1,159 @@
+@import "../default/theme.less";

+

+.plx-radio-container {

+	font-size: 0;

+	position: relative;

+}

+

+.plx-radio {

+	position: absolute;

+	z-index: -1;

+	opacity: 0;

+	& + .radio-substitute {

+		position: relative;

+		display: inline-block;

+		cursor: pointer;

+		height: @checkbox-size;

+		width: @checkbox-size;

+		border: 1px solid @border-color-base;

+		border-radius: @checkbox-size;

+		vertical-align: middle;

+	}

+	&:hover + .radio-substitute,

+	&:focus + .radio-substitute {

+		border-color: @primary-color;

+		outline: none;

+		background-image: none;

+		-webkit-box-shadow: none;

+		-moz-box-shadow: none;

+		box-shadow: none;

+		text-shadow: none;

+	}

+	&:checked + .radio-substitute {

+		.radio-boder-checked-width(@font-size);

+	}

+	&:disabled + .radio-substitute,

+	&[disabled] + .radio-substitute {

+		border-color: @border-color-base;

+		background-color: @input-bg-color-disabled;

+		cursor: not-allowed;

+	}

+	&:checked [disabled] + .radio-substitute {

+		border-color: @border-color-split;

+		background-color: @border-color-split;

+		cursor: not-allowed;

+	}

+	& + .radio-substitute + span {

+		font-weight: normal;

+		font-size: @font-size;

+		cursor: pointer;

+		vertical-align: middle;

+		.font-padding(@font-size);

+	}

+	&:disabled + .radio-substitute + span,

+	&[disabled] + .radio-substitute + span {

+		cursor: not-allowed;

+	}

+}

+

+.radio-boder-checked-width(12px) {

+	border: 4px solid @primary-color;

+}

+

+.radio-boder-checked-width(14px) {

+	border: 5px solid @primary-color;

+}

+

+.font-padding(12px) {

+	padding-left: 6px;

+}

+

+.font-padding(14px) {

+	padding-left: 10px;

+}

+

+/*radio-group*/

+

+@radio-group-border-height: 1px;

+@padding-normal: 0px 16px;

+@padding-sm: 0px 14px;

+@min-width-normal: 80px;

+@min-width-sm: 60px;

+

+.border-min-width(@min-width, 14px) {

+	min-width: @min-width + 8px;

+}

+

+.border-min-width(@min-width, 12px) {

+	min-width: @min-width;

+}

+

+.btn.dropdown-toggle,

+.btn-group .btn.dropdown-toggle,

+.btn:hover,

+.btn:disabled,

+.btn[disabled],

+.btn:focus,

+.btn:active,

+.btn.active {

+	outline: none !important;

+	background-image: none !important;

+	filter: none;

+	-webkit-box-shadow: none;

+	-moz-box-shadow: none;

+	box-shadow: none;

+	text-shadow: none;

+}

+

+.plx-radio-group {

+	cursor: pointer;

+	font-size: @font-size;

+	height: @btn-height;

+	background-color: @common-color;

+	border: @radio-group-border-height solid @border-color-base;

+	color: @text-color;

+	border-radius: @radius;

+	padding: @padding-normal;

+	.border-min-width(@min-width-normal, @font-size);

+	transition: none;

+	&:hover,

+	&:focus,

+	&:active {

+		outline: none;

+		background-image: none;

+		filter: none;

+		-webkit-box-shadow: none;

+		-moz-box-shadow: none;

+		box-shadow: none;

+		text-shadow: none;

+	}

+

+  &:hover,

+  &:focus {

+    color: @btn-common-color-text-hover;

+    border-color: @btn-common-color-border-hover;

+    background-color: @common-color-hover;

+  }

+  &:active {

+    color: @btn-common-color-text-click;

+    border-color: @btn-common-color-border-click;

+    background-color: @common-color-click;

+  }

+	&.active {

+		background-color: @primary-color;

+		color: @scene-textcolor;

+		border-color: @primary-color;

+	}

+	& > span {

+		line-height: @btn-height - @radio-group-border-height * 2;

+	}

+}

+

+.plx-radio-group-sm {

+	height: @btn-height-sm;

+	padding: @padding-sm;

+	.border-min-width(@min-width-sm, @font-size);

+	& > span {

+		line-height: @btn-height-sm - @radio-group-border-height * 2;

+	}

+}

diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-step.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-step.less
new file mode 100644
index 00000000..c9b047d0
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-step.less
@@ -0,0 +1,79 @@
+@import "../default/NIV-theme.less";
+
+.plx-ui-steps-number-active {
+	background: @default-blue;
+	color: @default-white;
+}
+
+.plx-ui-steps-number-passive {
+	background: @gray-grade-7;
+	color: @default-white;
+}
+
+.plx-ui-steps-number-visited {
+	color: @default-white;
+	border: 2px @default-blue solid;
+}
+
+.plx-ui-underline-active {
+	background: @default-blue;
+}
+
+.plx-ui-underline-passive {
+	background: @gray-grade-8;
+}
+
+.plx-ui-steps-title-active {
+	color: @font-gray-normal;
+}
+
+.plx-ui-steps-title-passive {
+	color: @font-gray-light;
+}
+
+.plx-ui-steps-title-visited {
+	color: @font-gray-light;
+}
+
+.plx-ui-steps-number-visited-tick {
+	border-bottom: 2px solid @default-blue;
+	border-right: 2px solid @default-blue;
+}
+
+.plx-ui-underline-active-vertical {
+	border-right: 2px solid @gray-grade-7;
+}
+
+.plx-ui-underline-visited-vertical {
+	border-right: 2px solid @default-blue;
+}
+
+.plx-ui-underline-passive-vertical {
+	border-right: 2px solid @gray-grade-7;
+}
+
+.plx-ui-steps-title-active-vertical {
+	color: @font-gray-normal;
+}
+
+.plx-ui-steps-title-visited-vertical {
+	color: @font-gray-light;
+}
+
+.plx-ui-steps-title-passive-vertical {
+	color: @font-gray-light;
+}
+
+.plx-ui-steps-number-active-vertical {
+	background: @default-blue;
+	color: @default-white;
+}
+
+.plx-ui-steps-number-passive-vertical {
+	background: @gray-grade-7;
+	color: @default-white;
+}
+
+.plx-ui-steps-number-visited-vertical {
+	color: @default-white;
+}
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-text-input.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-text-input.less
new file mode 100644
index 00000000..fe1c7d57
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-text-input.less
@@ -0,0 +1,50 @@
+@import "../default/NIV-theme.less";
+
+//input[type='text'],
+//input[type='password'],
+//input[type='email'],
+//input[type='tel'] {
+//	color: @font-gray-normal !important;
+//	font-weight: @font-weight-bold !important;
+//	border: @border-base;
+//	&:focus {
+//		border-color: @default-blue !important;
+//	}
+//}
+//
+//@media screen and (-webkit-min-device-pixel-ratio: 0) {
+//	input[type='text'],
+//	input[type='password'],
+//	input[type='email'],
+//	input[type='tel'] {
+//		&:focus {
+//			border-color: @default-blue;
+//			color: @default-blue;
+//			text-shadow: 0 0 0 @font-gray-normal;
+//			-webkit-text-fill-color: transparent;
+//		}
+//		&::-webkit-input-placeholder {
+//			font-weight: @font-weight-normal;
+//			text-shadow: none;
+//			-webkit-text-fill-color: @font-gray-lightest;
+//		}
+//	}
+//}
+//
+//input[disabled] {
+//	background: @gray-grade-9;
+//	color: @font-gray-lightest !important;
+//	border-color: rgba(191, 191, 191, 0.5) !important;
+//	cursor: not-allowed;
+//}
+//
+//
+//input[type='text'],
+//input[type='password'],
+//input[type='email'],
+//input[type='tel'] {
+//	.input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur &,
+//	&.ng-dirty.ng-invalid.ng-touched.input-blur {
+//		border-color: @default-red;
+//	}
+//}