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

OpenUI5 UI Library sap.m

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

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

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

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

	.sapMWSInner {
		overflow: hidden;
		height: 100%;
		box-sizing: border-box;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;

		.sapMWSItem {
			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;

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

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

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

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

		.sapMWSLabel {
			display: block;
		}

		.sapMWSArrows {
			display: none;
		}

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

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

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

				&:hover {

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

				&:active {

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

		.sapMWSInner.SliderValues3 {
			height: 9rem;
		}

		.sapMWSInner.SliderValues4 {
			height: 12rem;
		}

		.sapMWSInner.SliderValues5 {
			height: 15rem;
		}

		.sapMWSInner.SliderValues6 {
			height: 18rem;
		}

		.sapMWSInner.SliderValues7 {
			height: 21rem;
		}

		.sapMWSInner.SliderValues8 {
			height: 24rem;
		}

		.sapMWSInner.SliderValues9 {
			height: 27rem;
		}

		.sapMWSInner.SliderValues10 {
			height: 30rem;
		}

		.sapMWSInner.SliderValues11 {
			height: 33rem;
		}

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

	&:focus {
		outline: none;
	}
}

.sapUiSizeCompact {

	.sapMWS {
		height: 2rem;

		.sapMWSLabel {
			width: 4rem;
		}

		.sapMWSInner {

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

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

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

			.sapMWSArrows {
				display: block;
			}

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

			.sapMWSInner.SliderValues3 {
				height: 6rem;
			}

			.sapMWSInner.SliderValues4 {
				height: 8rem;
			}

			.sapMWSInner.SliderValues5 {
				height: 10rem;
			}

			.sapMWSInner.SliderValues6 {
				height: 12rem;
			}

			.sapMWSInner.SliderValues7 {
				height: 14rem;
			}

			.sapMWSInner.SliderValues8 {
				height: 16rem;
			}

			.sapMWSInner.SliderValues9 {
				height: 18rem;
			}

			.sapMWSInner.SliderValues10 {
				height: 20rem;
			}

			.sapMWSInner.SliderValues11 {
				height: 22rem;
			}

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

.sap-phone {

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

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

		.sapMWSArrows {
			display: none;
		}

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

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

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

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

			.sapMWSLabel {
				display: block;
			}

			.sapMWSArrows {
				display: none;
			}

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

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

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

			.sapMWSInner.SliderValues3 {
				height: 9rem;
			}

			.sapMWSInner.SliderValues4 {
				height: 12rem;
			}

			.sapMWSInner.SliderValues5 {
				height: 15rem;
			}

			.sapMWSInner.SliderValues6 {
				height: 18rem;
			}

			.sapMWSInner.SliderValues7 {
				height: 21rem;
			}

			.sapMWSInner.SliderValues8 {
				height: 24rem;
			}

			.sapMWSInner.SliderValues9 {
				height: 27rem;
			}

			.sapMWSInner.SliderValues10 {
				height: 30rem;
			}

			.sapMWSInner.SliderValues11 {
				height: 33rem;
			}

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

		&:focus {
			outline: none;
		}
	}
}