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

PhloxUI Ng2+ Framework

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

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

		& > .underline {
			.phlox-transition();
			position: absolute;
			left: 0;
			top: @MATERIAL_TELNO_TEXT_BOX_UNDERLINE_TOP;
			width: 100%;
			height: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH;
			border: 0;
			border-bottom-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH;
			border-style: solid;
			border-color: @MATERIAL_BORDER_COLOR;
		}

		& > .table-row {
			.phlox-transition();
			display: table-row;
			height: @MATERIAL_TELNO_TEXT_BOX_HEIGHT;

			& > * {
				position: relative;
				display: table-cell;

				> .component-wrapper {
					position: absolute;
					height: 100%;
					width: 100%;
					padding-right: @MATERIAL_TELNO_TEXT_BOX_PADDING_H;
				}

				&:last-child {
					> .component-wrapper {
						padding-right: 0;
					}
				}
			}

			& > .label {
				.FC1L();
				vertical-align: middle;
				color: @MATERIAL_TELNO_TEXT_BOX_LABEL_COLOR;
				padding: @MATERIAL_TELNO_TEXT_BOX_LABEL_PADDING_TOP @MATERIAL_TELNO_TEXT_BOX_PADDING_H 0 0;
				border-radius: 0;

				&.ext-label {
					color: @MATERIAL_TELNO_TEXT_BOX_EXT_LABEL_COLOR;
				}
			}

			& > .country-code-container {
				// Set default width. This value should be overriden by element's style specifed by @Input() / @Option().
				width: @DEFAULT_MATERIAL_TELNO_TEXT_BOX_COUNTRY_CODE_WIDTH;

				material-simple-dropdown {
					width: 100%;

					.material-simple-dropdown {
						// Reset component's margin to use this component's margin instead.
						margin: 0;
						// Adjust dropdown position.
						margin-top: 1pt;
						width: 100%;
						height: 100%;

						.menu {
							// Set default dropdown width. This value should be overriden by element's style specifed by @Input() / @Option().
							width: @DEFAULT_MATERIAL_TELNO_TEXT_BOX_COUNTRY_CODE_DROPDOWN_WIDTH;
						}
						// Note: we do not hide dropdown's label here since we want to show the selected item (country code) label.
						.description,
						.validation {
							// Hide text display to use this component's text instead.
							display: none;
						}

						.dropdown-container {
							// Fix height to adjust its vertical position.
							height: 26pt;
							// Hide borders
							border: 0;
						}
					}
				}
			}

			& > .subscriber-no-container {
				// Set default width. This value should be overriden by element's style specifed by @Input() / @Option().
				width: @DEFAULT_MATERIAL_TELNO_TEXT_BOX_SUBSCRIBER_NO_WIDTH;

				material-text-box {
					width: 100%;

					.material-text-box {
						// Reset component's margin to use this component's margin instead.
						margin: 0;
						width: 100%;
						height: 100%;

						.description,
						.label,
						.validation {
							// Hide text display to use this component's text instead.
							display: none;
						}

						input[type="text"] {
							// Hide borders
							border: 0;
						}
					}
				}
			}

			& > .ext-no-container {
				// Set default width. This value should be overriden by element's style specifed by @Input() / @Option().
				width: @DEFAULT_MATERIAL_TELNO_TEXT_BOX_EXT_NO_WIDTH;

				material-text-box {
					width: 100%;

					.material-text-box {
						// Reset component's margin to use this component's margin instead.
						margin: 0;
						width: 100%;
						height: 100%;

						.description,
						.label,
						.validation {
							// Hide text display to use this component's text instead.
							display: none;
						}

						input[type="text"] {
							// Hide borders
							border: 0;
						}
					}
				}
			}
		}

		.description,
		.validation {
			margin-top: @MATERIAL_TELNO_TEXT_BOX_DESC_PADDING;
			width: 100%;
		}

		&.active {
			& > .underline {
				margin-top: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH - @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS;
				height: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS;
				border-bottom-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS;
				border-color: @MATERIAL_BORDER_COLOR_FOCUS;
			}
		}
	}

	&.success {
		.material-telno-text-box {
			& > .underline {
				border-color: @MATERIAL_BORDER_COLOR_SUCCESS;
			}

			&.active {
				& > .underline {
					border-color: @MATERIAL_BORDER_COLOR_SUCCESS;
				}
			}
		}
	}

	&.warning {
		.material-telno-text-box {
			& > .underline {
				border-color: @MATERIAL_BORDER_COLOR_WARNING;
			}

			&.active {
				& > .underline {
					border-color: @MATERIAL_BORDER_COLOR_WARNING;
				}
			}
		}
	}

	&.error {
		.material-telno-text-box {
			& > .underline {
				border-color: @MATERIAL_BORDER_COLOR_ERROR;
			}

			&.active {
				& > .underline {
					border-color: @MATERIAL_BORDER_COLOR_ERROR;
				}
			}
		}
	}

	&.disabled,
	&.read-only {
		.material-telno-text-box {
			& > .table-row {
				background-color: @MATERIAL_DISABLED_BG_COLOR;
			}

			& > .underline {
				border-style: dotted;
			}
		}
	}
}