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

PhloxUI Ng2+ Framework

material-time-picker {
	display: inline-block;

	.material-time-picker {
		position: relative;
		width: @DEFAULT_MATERIAL_TIME_PICKER_WIDTH;
		height: @DEFAULT_MATERIAL_TIME_PICKER_HEIGHT;
		margin-top: @MATERIAL_TIME_PICKER_TOP_MARGIN;


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

		.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.mat-focused .mat-form-field-ripple {
			background-color: @MATERIAL_TEXT_BOX_LABEL_COLOR;
		}

		.mat-button-wrapper .mat-icon {
			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;
				}
			}
		}

		> .time-picker-wrapper {
			height: 100%;

			> .time-picker-table {
				display: table;
				height: 100%;

				> div {
					display: table-row;

					> div {
						display: table-cell;
						height: 100%;
						vertical-align: middle;
					}

					> .view-material-img {
						padding-right: @MATERIAL_TIME_PICKER_ICON_PADDING;
						vertical-align: middle;

						.icon-time {
							font-size: @MATERIAL_TIME_PICKER_ICON_SIZE;
							font-family: @MATERIAL_TIME_PICKER_ICON_FONT_FAMILY;

							&:before {
								content: @MATERIAL_TIME_PICKER_ICON;
							}

							&.disabled {
								color: @MATERIAL_DISABLED_FONT;
							}
						}
					}

					input[type="text"].mat-input-element {
						text-align: @MATERIAL_TIME_PICKER_TEXT_ALIGN;
						height: 100%;
						// Add padding here to prevent text position change when focused.
						// padding-bottom: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS - @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH;

						&:focus {
							padding: 0;
						}
					}

				}

				.table-wrapper {
					position: relative;
					width: 100%;

					.description,
					.validation {
						padding-top: @MATERIAL_TIME_PICKER_DESC_PADDING;
					}

					.help {
						padding-top: @MATERIAL_TIME_PICKER_HELP_PADDING;
					}

					.time-picker-view {
						.no-select();
						.material-popup-box-shadow();
						position: absolute;
						width: 100%;
						display: none;
						z-index: 2;
						background-color: @MATERIAL_TIME_PICKER_POPUP_BG_COLOR;
						padding: @MATERIAL_TIME_PICKER_POPUP_PADDING_V @MATERIAL_TIME_PICKER_POPUP_PADDING_H;
						cursor: pointer;
						
						> .time-view-wrapper {
							position: relative;
							width: 100%;

							> .time-view {
								text-align: center;
								display: inline-block;
								vertical-align: middle;
								width: 33.33%;
								padding: 0 @MATERIAL_TIME_PICKER_POPUP_COL_PADDING;

								&.not-open-sec {
									width: 50%;

									&:last-child {
										display: none;
									}
								}

								> .icon-arrow-up {
									font-family: @MATERIAL_TIME_PICKER_ARROW_ICON_FONT_FAMILY;

									&:before {
										content: @MATERIAL_TIME_PICKER_ARROW_ICON_UP;
									}
								}

								> .icon-arrow-down {
									font-family: @MATERIAL_TIME_PICKER_ARROW_ICON_FONT_FAMILY;

									&:before {
										content: @MATERIAL_TIME_PICKER_ARROW_ICON_DOWN;
									}
								}

								> .time-number {
									border-radius: @MATERIAL_TIME_PICKER_NUMBER_BORDER_RADIUS;
									width: 100%;
									min-width: @MATERIAL_TIME_PICKER_NUMBER_MIN_WIDTH;
									padding: @MATERIAL_TIME_PICKER_NUMBER_PADDING_V 0;
									color: @MATERIAL_TIME_PICKER_NUMBER_COLOR;
									margin: auto;

									&.selected {
										background-color: @MATERIAL_TIME_PICKER_NUMBER_SELECTED_BG_COLOR;
										color: @MATERIAL_TIME_PICKER_NUMBER_SELECTED_COLOR;
									}
								}
							}
						}

						&.show {
							display: inline-block;
							margin-top: 9pt;
						}
					}

					&.help-wrapper {
						height: @DEFAULT_MATERIAL_DESCRIPTION_HEIGHT;
					}
				}
			}
		}
	}

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