@openui5/sap.m/src/sap/m/themes/base/TimePickerSliders.less

OpenUI5 UI Library sap.m

/* ======================================= */
/* CSS for control sap.m/TimePickerSliders */
/* Base Styles                             */
/* ======================================= */

.TPSliderItemHidden {
	display: none;
}

.sapMTimePickerContainer {
	width: 100%;
	height: 100%;
	min-width: 20rem;
	box-sizing: border-box;
	padding: 1rem;
	text-align: center;
	position: relative;

	&::before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.sapMTimePickerContainerLabel {
		display: none;
		box-sizing: border-box;
	}

	.sapMTPDisabled {
		pointer-events: none;
	}

	.sapMTPColumn {
		display: inline-block;
		overflow: hidden;
		height: 3rem;
		vertical-align: middle;
		text-align: center;
		box-sizing: border-box;
		cursor: pointer;
		margin-top: 2rem;

		.sapMTimePickerLabel {
			display: none;
			box-sizing: border-box;
			height: 2rem;
			line-height: 2rem;
			width: 4.5rem;
			text-align: center;
		}

		.sapMTimePickerItemArrows {
			display: none;
			box-sizing: border-box;
		}

		.sapMTimePickerSlider {
			overflow: hidden;
			height: 100%;
			box-sizing: border-box;

			.sapMTimePickerItem {
				height: 3rem;
				line-height: 3rem;
				width: 4.5rem;
				box-sizing: border-box;
			}

			.sapMTPPickerSelectionFrame {
				width: 4.5rem;
				height: 3rem;
				position: absolute;
				box-sizing: border-box;
				display: none;
			}

			& > ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
		}

		&.sapMTPSliderExpanded {
			height: 100%;
			cursor: default;
			margin: 0;

			.sapMTimePickerLabel {
				display: block;
			}

			.sapMTimePickerItemArrows {
				display: none;
			}

			.sapMTimePickerSlider {
				height: calc(100% - 2rem);
				max-height: 100%; /* because of the SliderValuesN classes below */

				.sapMTPPickerSelectionFrame {
					display: block;
				}
			}

			.sapMTimePickerSlider.SliderValues3 {
				height: 9rem;
			}

			.sapMTimePickerSlider.SliderValues4 {
				height: 12rem;
			}

			.sapMTimePickerSlider.SliderValues5 {
				height: 15rem;
			}

			.sapMTimePickerSlider.SliderValues6 {
				height: 18rem;
			}

			.sapMTimePickerSlider.SliderValues7 {
				height: 21rem;
			}

			.sapMTimePickerSlider.SliderValues8 {
				height: 24rem;
			}

			.sapMTimePickerSlider.SliderValues9 {
				height: 27rem;
			}

			.sapMTimePickerSlider.SliderValues10 {
				height: 30rem;
			}

			.sapMTimePickerSlider.SliderValues11 {
				height: 33rem;
			}

			.sapMTimePickerSlider.SliderValues12 {
				height: 36rem;
			}
		}
	}

	.sapMTimePickerContainerLabel {
		font-size: var(--sapFontHeader5Size);
		color: @sapUiCalendarColorToday;
	}

	.sapMTPColumn {

		.sapMTimePickerLabel {
			font-size: var(--sapFontSmallSize);
			color: var(--sapContent_LabelColor);
			text-align: center;
			vertical-align: middle;
		}

		.sapMTimePickerSlider {

			.sapMTimePickerItem {
				background: var(--sapSelectedColor);
				border: 1px solid var(--sapList_BorderColor);
				font-size: @sapMFontMediumSize;
				color: var(--sapContent_ContrastTextColor);
				text-align: center;

				&:hover {
					background: var(--sapHighlightColor);
					color: var(--sapContent_ContrastTextColor);
				}

				&:active {
					background: var(--sapHighlightColor);
					color: var(--sapContent_ContrastTextColor);
				}

				&:focus {
					outline: 1px dotted var(--sapContent_ContrastFocusColor);
					outline-offset: -3px;
				}
			}
		}

		&.sapMTPSliderExpanded {

			.sapMTimePickerSlider {

				.sapMTimePickerItem {
					background: var(--sapList_Background);
					color: var(--sapTextColor);
					border: 1px solid var(--sapList_BorderColor);

					&:hover {
						background: var(--sapHighlightColor);
					}

					&:active {
						background: var(--sapHighlightColor);
						color: var(--sapContent_ContrastTextColor);
					}

					&:focus {
						outline: 1px dotted var(--sapContent_FocusColor);
						outline-offset: -3px;
					}
				}

				.sapMTPPickerSelectionFrame {
					outline: 0.125rem solid var(--sapContent_ForegroundBorderColor);
					outline-offset: -0.313rem;

					&:hover {

						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
							background: var(--sapHighlightColor);
						}
					}

					&:active {

						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
							background: var(--sapSelectedColor);
							color: var(--sapContent_ContrastTextColor);
						}
					}
				}
			}
		}

		&:focus {
			outline: none;
		}
	}
}

.sapUiSizeCompact {

	.sapMTimePickerContainer {
		padding: 0.5rem;
		margin: auto;

		.sapMTPColumn {
			height: 2rem;

			.sapMTimePickerLabel {
				width: 4rem;
			}

			.sapMTimePickerSlider {

				.sapMTimePickerItem {
					height: 2rem;
					line-height: 2rem;
					width: 4rem;
					box-sizing: border-box;
				}

				.sapMTPPickerSelectionFrame {
					width: 4rem;
					height: 2rem;
				}
			}

			&.sapMTPSliderExpanded {
				height: 100%;
				cursor: default;
				margin: 0;

				.sapMTimePickerItemArrows {
					display: block;
				}

				.sapMTimePickerSlider {
					height: ~"calc(100% - 6rem)";
					max-height: ~"calc(100% - 6rem)";
				}

				.sapMTimePickerSlider.SliderValues3 {
					height: 6rem;
				}

				.sapMTimePickerSlider.SliderValues4 {
					height: 8rem;
				}

				.sapMTimePickerSlider.SliderValues5 {
					height: 10rem;
				}

				.sapMTimePickerSlider.SliderValues6 {
					height: 12rem;
				}

				.sapMTimePickerSlider.SliderValues7 {
					height: 14rem;
				}

				.sapMTimePickerSlider.SliderValues8 {
					height: 16rem;
				}

				.sapMTimePickerSlider.SliderValues9 {
					height: 18rem;
				}

				.sapMTimePickerSlider.SliderValues10 {
					height: 20rem;
				}

				.sapMTimePickerSlider.SliderValues11 {
					height: 22rem;
				}

				.sapMTimePickerSlider.SliderValues12 {
					height: 24rem;
				}
			}
		}
	}
}

.sap-phone {

	.sapMTimePickerContainer {
		max-height: 38rem; /* 12 * item height + label's height */
		height: 100%;
		padding: 1rem;
		box-sizing: border-box;
		margin: auto;
		text-align: center;

		&::before {
			display: none;
		}

		.sapMTimePickerContainerLabel {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0);
			display: block;
			height: 2rem;
			line-height: 2rem;
			font-size: var(--sapFontHeader5Size);
			color: @sapUiCalendarColorToday;
		}

		.sapMTPColumn {
			display: inline-block;
			height: 3rem;
			text-align: center;
			overflow: hidden;
			cursor: pointer;
			vertical-align: middle;
			box-sizing: border-box;

			.sapMTimePickerLabel {
				height: 2rem;
				width: 4.5rem;
				display: none;
				font-size: var(--sapFontSmallSize);
				color: var(--sapContent_LabelColor);
				text-align: center;
				vertical-align: middle;
			}

			.sapMTimePickerItemArrows {
				display: none;
			}

			.sapMTimePickerSlider {
				height: 100%;
				/* for Android 4.1 - 4.3 calc is not supported, so use 100% instead */
				max-height: 100%;
				overflow: hidden;

				.sapMTimePickerItem {
					height: 3rem;
					line-height: 3rem;
					width: 4.5rem;
					box-sizing: border-box;
					background: var(--sapSelectedColor);
					border: 1px solid var(--sapList_BorderColor);
					font-size: @sapMFontMediumSize;
					color: var(--sapContent_ContrastTextColor);
					text-align: center;

					&:active {
						background: var(--sapHighlightColor);
						color: var(--sapContent_ContrastTextColor);
					}

					&:focus {
						outline: 1px dotted var(--sapContent_ContrastFocusColor);
						outline-offset: -3px;
					}
				}

				.sapMTPPickerSelectionFrame {
					width: 4.5rem;
					height: 3rem;
					position: absolute;
					display: none;
					box-sizing: border-box;
				}
			}

			&.sapMTPSliderExpanded {
				height: 100%;
				cursor: default;

				.sapMTimePickerLabel {
					display: block;
				}

				.sapMTimePickerItemArrows {
					display: none;
				}

				.sapMTimePickerSlider {
					height: calc(100% - 2rem);
					/* for Android 4.1 - 4.3 calc is not supported, so use 100% instead */
					max-height: 100%;
					overflow: hidden;

					.sapMTimePickerItem {
						height: 3rem;
						line-height: 3rem;
						width: 4.5rem;
						box-sizing: border-box;
						background: var(--sapList_Background);
						color: var(--sapTextColor);
						border: 1px solid var(--sapList_BorderColor);

						&:active {
							background: var(--sapHighlightColor);
							color: var(--sapContent_ContrastTextColor);
						}

						&:focus {
							outline: 1px dotted var(--sapContent_FocusColor);
							outline-offset: -3px;
						}
					}

					.sapMTPPickerSelectionFrame {
						display: block;
						outline: 0.125rem solid var(--sapContent_ForegroundBorderColor);
						outline-offset: -0.313rem;
					}
				}

				.sapMTimePickerSlider.SliderValues3 {
					height: 9rem;
				}

				.sapMTimePickerSlider.SliderValues4 {
					height: 12rem;
				}

				.sapMTimePickerSlider.SliderValues5 {
					height: 15rem;
				}

				.sapMTimePickerSlider.SliderValues6 {
					height: 18rem;
				}

				.sapMTimePickerSlider.SliderValues7 {
					height: 21rem;
				}

				.sapMTimePickerSlider.SliderValues8 {
					height: 24rem;
				}

				.sapMTimePickerSlider.SliderValues9 {
					height: 27rem;
				}

				.sapMTimePickerSlider.SliderValues10 {
					height: 30rem;
				}

				.sapMTimePickerSlider.SliderValues11 {
					height: 33rem;
				}

				.sapMTimePickerSlider.SliderValues12 {
					height: 36rem;
				}
			}

			&:focus {
				outline: none;
			}
		}
	}
}