com.phloxui/styles/theme/material/component/dataview/input/MaterialTextBox.less

PhloxUI Ng2+ Framework

material-text-box {
	display: inline-block;

	.material-text-box {
		position: relative;
		margin-top: -@MATERIAL_TEXT_BOX_LABEL_TOP_MARGIN_ACTIVE;

		.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[type="text"].form-control {
			width: 100%;
		}

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

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

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

			&.active {
				> .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;
				}
			}
		}
	}

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

			&.active {
				> .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;
				}
			}
		}
	}

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

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