imm-element-ui 0.0.1

package/src/lib/search/search/search.component.scss

@@ -0,0 +1,70 @@
+@import 'styles';
+.s-main {
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	color: #334155;
+}
+.s-active {
+	border: 1px solid var(--p-form-field-focus-border-color);
+}
+.s-unactive {
+	border: 1px solid var(--p-form-field-border-color);
+}
+.s-container {
+	border-right-width: 0;
+	border-radius: 5px 0 0 5px;
+	padding: 1.25px 0;
+	width: 100%;
+}
+.s-search {
+	color: var(--p-form-field-icon-color);
+	padding: 0 10px;
+}
+.s-input-container {
+	padding: 1.25px 0;
+}
+.s-input {
+	height: 30px;
+	border-width: 0;
+	width: 100%;
+	min-width: 25px;
+}
+.s-input:focus {
+	outline-width: 0;
+}
+.s-dropdown {
+	width: 35px;
+	border-radius: 0 5px 5px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.s-dropdown:hover {
+	background-color: #e7e9ed;
+	cursor: pointer;
+}
+.s-dropdown-icon {
+	color: var(--p-form-field-icon-color);
+}
+
+::ng-deep {
+	.p-popover.p-popover-flipped:before {
+		display: none;
+	}
+	.p-popover.p-popover-flipped:after {
+		display: none;
+	}
+	.p-popover:before {
+		display: none;
+	}
+	.p-popover:after {
+		display: none;
+	}
+	.p-popover {
+		margin-top: 2.5px;
+	}
+	.p-popover-flipped {
+		margin-top: -5px;
+	}
+}

package/src/lib/search/search-tip/search-tip.component.scss

@@ -0,0 +1,47 @@
+@import 'styles';
+.s-search-tip {
+	background-color: #e4e6ea;
+	font-size: 12px;
+	color: #334155;
+	margin: 1.25px;
+	display: flex;
+	flex-wrap: nowrap;
+	border-radius: 5px;
+}
+.s-search-tip-field {
+	padding: 2.5px 5px 1.5px 5px;
+	margin-right: 2.5px;
+	background-color: var(--p-primary-color);
+	border-radius: 5px 0 0 5px;
+	color: #fff;
+}
+.s-search-tip-icon {
+	padding: 6.5px 6px 0 6px;
+	margin-right: 2.5px;
+	font-size: 11px;
+	border-radius: 5px 0 0 5px;
+	color: #fff;
+}
+.s-search-tip-icon-filter {
+	background-color: var(--p-primary-color);
+}
+.s-search-tip-icon-group {
+	background-color: var(--p-primary-color);
+}
+.s-search-tip-title {
+	padding: 2.5px;
+	white-space: nowrap;
+}
+.s-search-tip-opertor {
+	opacity: 0.5;
+	font-style: italic;
+}
+.s-search-tip-close {
+	padding: 6.5px 5px 0 5px;
+	border-radius: 0 5px 5px 0;
+	font-size: 11px;
+}
+.s-search-tip-close:hover {
+	color: var(--p-primary-color);
+	cursor: pointer;
+}

package/src/lib/search/text-panel/text-panel.component.scss

@@ -0,0 +1,16 @@
+@import 'styles';
+.s-str-item {
+	padding: 5px;
+	font-size: 12px;
+}
+.s-str-item:hover {
+	background-color: var(--p-list-option-focus-background);
+	cursor: pointer;
+}
+.s-str-item-field {
+	font-weight: 600;
+	color: var(--p-primary-color);
+}
+.s-str-item-value {
+	font-weight: 600;
+}

package/src/lib/steps/steps.component.scss

@@ -0,0 +1,52 @@
+@import 'styles';
+.step-item {
+	position: relative;
+	height: 32px;
+	padding: 0 5px;
+	background-color: #e7e9ed;
+	span {
+		color: #334155c2;
+	}
+}
+.step-item.step-first {
+	padding-left: 15px;
+}
+.step-item.step-last {
+	padding-right: 15px;
+}
+.step-item:not(.step-first) {
+	border-left: 15px solid transparent;
+	margin-left: 2px;
+}
+.step-item:not(.step-first)::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: -15px;
+	width: 0;
+	height: 0;
+	border-top: 15px solid transparent;
+	border-bottom: 15px solid transparent;
+	border-left: 12px solid white;
+}
+.step-item:not(.step-last)::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: -12px;
+	width: 0;
+	height: 0;
+	border-top: 15px solid transparent;
+	border-bottom: 15px solid transparent;
+	border-left: 12px solid #e7e9ed;
+	z-index: 2;
+}
+.step-item.step-active {
+	background-color: var(--p-primary-200);
+	span {
+		color: #334155;
+	}
+}
+.step-item.step-active::after {
+	border-left: 12px solid var(--p-primary-200);
+}

package/src/lib/styles/styles.scss

@@ -0,0 +1,232 @@
+
+
+:host ::ng-deep {
+	.p-disabled,
+	.p-component:disabled {
+		opacity: 1;
+	}
+	.p-inputtext {
+		border-width: 0;
+		border-radius: 0;
+		box-shadow: none;
+		background: #ffffff;
+		padding: 0;
+	}
+	.p-inputtext:not(.ng-valid).ng-dirty {
+		background: var(--p-red-200) !important;
+		border-bottom: 1px solid var(--p-red-500) !important;
+	}
+	.p-inputtext:not(:disabled):hover {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.p-inputtext:not(:disabled).ng-hovered {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.p-inputtext:focus {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.ng-hovered .p-autocomplete-input:not(.p-disabled) {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.p-select-label {
+		padding: 0;
+	}
+	.p-select {
+		border-width: 0;
+		border-radius: 0;
+		box-shadow: none;
+		background: #ffffff;
+		.p-select-dropdown {
+			display: none;
+		}
+		.p-select-clear-icon {
+			display: none;
+		}
+	}
+	.p-select:not(.ng-valid).ng-dirty {
+		background: var(--p-red-200) !important;
+		border-bottom: 1px solid var(--p-red-500) !important;
+	}
+	.p-select-open {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-select-dropdown {
+			display: flex;
+		}
+		.p-select-clear-icon {
+			display: flex;
+		}
+	}
+	.p-select:hover {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-select-dropdown {
+			display: flex;
+		}
+		.p-select-clear-icon {
+			display: flex;
+		}
+	}
+	.p-select.ng-hovered {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-select-dropdown {
+			display: flex;
+		}
+		.p-select-clear-icon {
+			display: flex;
+		}
+	}
+	.p-multiselect-label {
+		padding: 0;
+	}
+	.p-multiselect {
+		border-width: 0;
+		border-radius: 0;
+		background: #ffffff;
+		box-shadow: none;
+		.p-multiselect-dropdown {
+			display: none;
+		}
+	}
+	.p-multiselect:not(.ng-valid).ng-dirty {
+		background: var(--p-red-200) !important;
+		border-bottom: 1px solid var(--p-red-500) !important;
+	}
+	.p-multiselect-open {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-multiselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-multiselect:not(.p-disabled).p-focus {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-multiselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-multiselect:not(.p-disabled):hover {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-multiselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-multiselect:not(.p-disabled).ng-hovered {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-multiselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-textarea {
+		border-radius: 0;
+		box-shadow: none;
+		padding: 0;
+		background: #ffffff;
+		resize: none;
+	}
+	.p-textarea:not(.ng-valid).ng-dirty {
+		background: var(--p-red-200) !important;
+		border: 1px solid var(--p-red-500) !important;
+	}
+	.p-textarea:not(:disabled):hover {
+		border: 1px solid var(--p-primary-color);
+		resize: vertical;
+	}
+	.p-textarea:not(:disabled).ng-hovered {
+		border: 1px solid var(--p-primary-color);
+		resize: vertical;
+	}
+	.p-textarea:focus {
+		border: 1px solid var(--p-primary-color);
+		resize: vertical;
+	}
+	.p-treeselect-label {
+		padding: 0;
+	}
+	.p-treeselect {
+		border-width: 0;
+		border-radius: 0;
+		box-shadow: none;
+		background: #ffffff;
+		.p-treeselect-dropdown {
+			display: none;
+		}
+	}
+	.ng-invalid.ng-dirty > .p-treeselect {
+		background: var(--p-red-200) !important;
+		border-bottom: 1px solid var(--p-red-500) !important;
+	}
+	.p-treeselect-open {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-treeselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-treeselect:not(.p-disabled).p-focus {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-treeselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-treeselect:not(.p-disabled):hover {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-treeselect-dropdown {
+			display: flex;
+		}
+	}
+	.ng-hovered > .p-treeselect:not(.p-disabled) {
+		border-bottom: 1px solid var(--p-primary-color);
+		.p-treeselect-dropdown {
+			display: flex;
+		}
+	}
+	.p-menubar {
+		border-width: 0;
+		padding: 0;
+	}
+	.p-menubar-submenu {
+		z-index: 3;
+	}
+	.p-fileupload-advanced {
+		border-width: 0;
+		border-radius: 0;
+		background-color: #ffffff;
+	}
+	.p-fileupload-header {
+		padding: 0;
+	}
+	.p-fileupload-content {
+		padding: 0;
+		display: block;
+		border-width: 0;
+	}
+	.p-inputnumber:not(.ng-valid).ng-dirty > .p-inputtext {
+		background: var(--p-red-200) !important;
+		border-bottom: 1px solid var(--p-red-500) !important;
+	}
+	.p-inputnumber.ng-hovered:not(.p-disabled) > .p-inputtext {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.ng-hovered > .p-datepicker:not(.p-disabled) .p-inputtext {
+		border-bottom: 1px solid var(--p-primary-color);
+	}
+	.cm-editor {
+		border: 1px solid #cbd5e1;
+	}
+	.cm-editor.cm-focused {
+		outline: none !important;
+		border: 1px solid var(--p-primary-color);
+	}
+	.cm-editor:hover {
+		border: 1px solid var(--p-primary-color);
+	}
+	.cm-editor.ng-hovered {
+		border: 1px solid var(--p-primary-color);
+	}
+	.cm-gutters {
+		background-color: #fff;
+		border: 'none';
+	}
+	.cm-activeLineGutter {
+		background-color: #fff;
+	}
+}
+
+