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

PhloxUI Ng2+ Framework

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

	.material-date-picker {
		position: relative;
		width: @DEFAULT_MATERIAL_DATE_PICKER_WIDTH;
		height: @DEFAULT_MATERIAL_DATE_PICKER_HEIGHT;
		margin-top: @MATERIAL_DATE_PICKER_TOP_MARGIN;

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

			> .date-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_DATE_PICKER_ICON_PADDING;
						vertical-align: middle;

						.icon-calendar {
							font-size: @MATERIAL_DATE_PICKER_ICON_SIZE;
							font-family: @MATERIAL_DATE_PICKER_ICON_FONT_FAMILY;

							&:before {
								content: @MATERIAL_DATE_PICKER_ICON;
							}

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

					> div > input[type="text"] {
						text-align: @MATERIAL_DATE_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_DATE_PICKER_DESC_PADDING;
						}

						.help {
							padding-top: @MATERIAL_DATE_PICKER_HELP_PADDING;
						}

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

		> .date-picker-view {
			.no-select();
			.material-popup-box-shadow();
			position: absolute;
			display: none;
			width: @DEFAULT_MATERIAL_DATE_PICKER_POPUP_WIDTH;
			height: @DEFAULT_MATERIAL_DATE_PICKER_POPUP_HEIGHT;
			z-index: 2;
			background-color: @MATERIAL_DATE_PICKER_POPUP_BG_COLOR;
			padding: @MATERIAL_DATE_PICKER_POPUP_PADDING;
			margin: @MATERIAL_DATE_PICKER_POPUP_MARGIN_TOP 0 0 @MATERIAL_DATE_PICKER_POPUP_MARGIN_LEFT;

			.icon-arrow-left {
				padding-top: @MATERIAL_DATE_PICKER_ARROW_PADDING_TOP;
				font-family: @MATERIAL_DATE_PICKER_ARROW_ICON_FONT_FAMILY;

				&:before {
					content: @MATERIAL_DATE_PICKER_ARROW_ICON_LEFT;
				}
			}

			.icon-arrow-right {
				padding-top: @MATERIAL_DATE_PICKER_ARROW_PADDING_TOP;
				font-family: @MATERIAL_DATE_PICKER_ARROW_ICON_FONT_FAMILY;

				&:before {
					content: @MATERIAL_DATE_PICKER_ARROW_ICON_RIGHT;
				}
			}

			&.show {
				display: inline-block;
			}

			> .date-picker-header {
				padding-left: 0;
				padding-right: 0;
				display: table;
				width: 100%;
				height: 30px;

				> .date-picker-center {
					min-width: 200px;
					position: relative;
					text-align: center;
					display: table-cell;
					vertical-align: bottom;

					> div:first-child {
						position: absolute;
						width: 25%;
						left: 0;
						cursor: pointer;
					}

					> div:nth-child(2) {
						position: absolute;
						width: 25%;
						right: 0;
						cursor: pointer;
					}

					> div:last-child {
						text-align: center;
						line-height: 2.15em;
						cursor: pointer;
					}
				}

				.left-angle,
				.right-angle {
					color: @CLR_FIXED_FONT;
				}
			}

			> .date-picker-body {
				padding-left: 0;
				padding-right: 0;

				> .month-view {
					> .day-header {
						position: relative;
					}

					> .day-body {
						cursor: pointer;
					}

					.col-md-1 {
						padding: 0;
						line-height: @DATE_PICKER_LINE_HEIGHT;

						> .day-label {
							text-align: center;

							&.header-text {
								font-weight: bold;
							}

							&.day-bg-color {}
						}

						&.day {
							color: @CLR_FIXED_FONT;

							&.disable {
								color: extract(@CLR_1, 7);
							}

							&.today {
								color: @CLR_BRAND_FONT;
								background-color: extract(@CLR_BRAND_HUE, 6);
								border-radius: @DATE_PICKER_BORDER_RADIUS;
							}

							&.selected {
								color: @CLR_BRAND_FONT;
								background-color: @CLR_BRAND;
								border-radius: @DATE_PICKER_BORDER_RADIUS;
							}

							&.minmax-date {
								cursor: default;
								color: extract(@CLR_1, 7);
								border-radius: @DATE_PICKER_BORDER_RADIUS;
							}
						}
					}
				}
			}
		}
	}
}