com.phloxui/styles/lib/theme/material/component/dataview/input/MaterialAutocomplete.less

PhloxUI Ng2+ Framework

material-autocomplete {
	display: inline-block;

	.material-autocomplete {
		position: relative;
		margin-top: -@MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN_ACTIVE;
		width: @DEFAULT_MATERIAL_TEXT_BOX_WIDTH;

		.label-wrapper {
			.phlox-transition();
			position: absolute;
			top: 0;
			left: 0;
			pointer-events: none;
			margin-top: @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN;

			> .label {
				.phlox-transition();
				.FC1L();
				color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
				padding: 0;
				border-radius: 0;
			}

			&.active {
				margin-top: @MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN_ACTIVE;

				> .label {
					.FC0L();
					font-size: @MATERIAL_TEXT_BOX_LABEL_FONT_SIZE_ACTIVE;
					color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
				}
			}
		}

		input.form-control {
			width: 100%;
			box-shadow: unset;
			height: unset;
			line-height: unset;
		}

		input[type="color"] {
			height: 23px; // fix
		}

		.description,
		.validation {
			width: 100%;
			padding-top: @MATERIAL_TEXT_BOX_DESC_PADDING;
		}

		.help {
			width: 100%;
			padding-top: @MATERIAL_TEXT_BOX_HELP_PADDING;
		}

		.mat-form-field {
			width: 100%;
		}

		.mat-form-field-appearance-legacy {
			.mat-form-field-wrapper {
				padding-bottom: unset;
			}
			.mat-form-field-underline {
				bottom: 0;
			}
			.mat-form-field-subscript-wrapper {
				margin-top: unset;
				top: unset;
			}
			.mat-form-field-infix {
				// padding: 0;
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
				}
			}
		}
	}

	&.normal {
		.label-wrapper {
			> .label {
				color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
			}

			&.active {
				> .label {
					color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
				}
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
		}

		// .mat-form-field-appearance-legacy .mat-form-field-underline {
		// 	background-color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
		// }

		.mat-button-wrapper .mat-icon {
			color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_TEXT_BOX_LABEL_COLOR_ACTIVE;
				}
			}
		}
	}

	&.warning {
		.label-wrapper {
			> .label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
			}

			&.active {
				> .label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
				}
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
		}

		.mat-form-field-appearance-legacy .mat-form-field-underline {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
		}

		.mat-button-wrapper .mat-icon {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
				}
			}
		}
	}

	&.error {
		.label-wrapper {
			> .label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
			}

			&.active {
				> .label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
				}
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
		}

		.mat-form-field-appearance-legacy .mat-form-field-underline {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
		}

		.mat-button-wrapper .mat-icon {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
				}
			}
		}
	}

	&.success {
		.label-wrapper {
			> .label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
			}

			&.active {
				> .label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
				}
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
		}

		.mat-form-field-appearance-legacy .mat-form-field-underline {
			background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
		}

		.mat-button-wrapper .mat-icon {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
				}
			}
		}
	}

	&.disabled {
		.label-wrapper {
			> .label {
				color: @MATERIAL_DISABLED_FONT;
			}

			&.active {
				> .label {
					color: @MATERIAL_DISABLED_FONT;
				}
			}
		}

		.mat-form-field.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_DISABLED_FONT;
		}

		.mat-form-field-appearance-legacy .mat-form-field-underline {
			background-color: @MATERIAL_DISABLED_FONT;
		}

		.mat-button-wrapper .mat-icon {
			color: @MATERIAL_DISABLED_FONT;
		}

		.mat-form-field-label-wrapper {
			> .mat-form-field-label {
				color: @MATERIAL_DISABLED_FONT;
			}

			&.active {
				> .mat-form-field-label {
					color: @MATERIAL_DISABLED_FONT;
				}
			}
		}
	}
}