com.phloxui/styles/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;

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

					> div > input[type="text"] {
						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;
						}
					}

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