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

OpenUI5 UI Library sap.m

/* ====================================== */
/* CSS for control sap.m/TimePickerClock  */
/* Base theme                             */
/* ====================================== */

/* clock dial related classes */

.sapMTPClock {
	position: relative;
	width: auto;
	padding: 0.5625rem;
	outline: none;
	display: none;
}

.sapMTPClock.sapMTPCFadeIn {
	display: block;
}

.sapMTPCDial {
	position: relative;
	width: auto;
	display: block;
	border-radius: 100%;
	background-color: var(--sapLegend_WorkingBackground);
	text-align: center;
	z-index: 1;
}

.sapMTPCDial::before {
	content: attr(data-label);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	font-family: var(--sapFontFamily);
	font-size: @sapMFontMediumSize;
	color: var(--sapContent_LabelColor);
	top: 2.75rem;
	left: 2.75rem;
	bottom: 2.75rem;
	right: 2.75rem;
	border-radius: 100%;
	z-index: 2;
}

.sapMTPCInner .sapMTPCDial::before {
	background-color: var(--sapLegend_WorkingBackground);
}

.sapMTPCDial::after {
	content: '';
	display: block;
	padding-bottom: 100%;
}

.sapMTPClockCover {
	position: absolute;
	top: -0.25rem;
	left: -0.25rem;
	bottom: -0.25rem;
	right: -0.25rem;
	border-radius: 100%;
	z-index: 10;
	touch-action: none;
}

/* units related classes */
.sapMTPCMidDot {
	display: block;
	box-sizing: border-box;
	width: 0.125rem;
	height: 0.1875rem;
	margin: 0 auto 0.375rem auto;
	border-radius: 100%;
	background-color: var(--sapField_BorderColor);
}

.sapMTPCDot {
	display: block;
	box-sizing: border-box;
	width: 0.25rem;
	height: 0.3125rem;
	margin: 0 auto 0.25rem auto;
	border-radius: 100%;
	background-color: var(--sapField_BorderColor);
}

.sapMTPCMarker {
	box-sizing: border-box;
	width: 0.25rem;
	height: 0.5625rem;
	margin: 0 auto;
	border-radius: 100%;
	background-color: var(--sapButton_Selected_Background);
	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
}

.sapMTPCHoverMarker {
	box-sizing: border-box;
	width: 0.25rem;
	height: 0.5625rem;
	margin: 0 auto;
	border-radius: 100%;
	background-color: var(--sapList_Hover_Background);
	border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
}

.sapMTPCHoveredItem {
	display: block;
}

.sapMTPCHoveredItem.sapMTPCItem {
	cursor: pointer;
	z-index: 15;
}

.sapMTPCItem {
	position: absolute;
	top: 0px;
	left: 50%;
	display: inline-block;
	width: 2.75rem;
	height: 100%;
	z-index: 3;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Chrome, Edge, Opera and Firefox */

	&.sapMTPCMarker {
		z-index: 4;
	}

	&.sapMTPCHoverMarker {
		z-index: 5;
	}
}

.sapMTPCNumber {
	box-sizing: border-box;
	display: inline-block;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 100%;
	line-height: 2.75rem;
	text-align: center;
	vertical-align: top;
	font-family: var(--sapFontFamily);
	font-size:@sapMFontMediumSize;
	color: var(--sapTextColor);
	border: 0.0625rem solid transparent;

	&.sapMTPCNumberHover:not(.sapMTPCSelected) {
		background-color: var(--sapList_Hover_Background);
	}
}

.sapMTPCInvisible {
	visibility: hidden;
}

.sapMTPCSelected {
	box-sizing: border-box;
	color: var(--sapButton_Selected_TextColor);
	background-color: var(--sapButton_Selected_Background);
	border: 0.0625rem solid var(--sapButton_Selected_BorderColor);
}

.sapMTPCHovered {
	box-sizing: border-box;
	background-color: var(--sapList_Hover_Background);
	border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
}

/* Degree related classes */
.degreeMixIn(@class, @angle) {
	.@{class} {
		transform: translate(-50%) rotate(@angle);

		.sapMTPCNumber {
			transform: rotate(-@angle);
		}
	}

	html[dir=rtl] .@{class} {
		transform: translate(-50%) rotate(-@angle);

		.sapMTPCNumber {
			transform: rotate(@angle);
		}
	}
}

.sapMTPNow {
	margin-left: 0.5rem;
}

.sapUiSizeCompact {

	.sapMTPCItem {
		width: 2rem;
	}

	.sapMTPCNumber {
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
	}
}

.degreeMixIn(sapMTPCDeg6, 6deg);
.degreeMixIn(sapMTPCDeg12, 12deg);
.degreeMixIn(sapMTPCDeg15, 15deg);
.degreeMixIn(sapMTPCDeg18, 18deg);
.degreeMixIn(sapMTPCDeg24, 24deg);
.degreeMixIn(sapMTPCDeg30, 30deg);
.degreeMixIn(sapMTPCDeg36, 36deg);
.degreeMixIn(sapMTPCDeg42, 42deg);
.degreeMixIn(sapMTPCDeg45, 45deg);
.degreeMixIn(sapMTPCDeg48, 48deg);
.degreeMixIn(sapMTPCDeg54, 54deg);
.degreeMixIn(sapMTPCDeg60, 60deg);
.degreeMixIn(sapMTPCDeg66, 66deg);
.degreeMixIn(sapMTPCDeg72, 72deg);
.degreeMixIn(sapMTPCDeg75, 75deg);
.degreeMixIn(sapMTPCDeg78, 78deg);
.degreeMixIn(sapMTPCDeg84, 84deg);
.degreeMixIn(sapMTPCDeg90, 90deg);
.degreeMixIn(sapMTPCDeg96, 96deg);
.degreeMixIn(sapMTPCDeg102, 102deg);
.degreeMixIn(sapMTPCDeg105, 105deg);
.degreeMixIn(sapMTPCDeg108, 108deg);
.degreeMixIn(sapMTPCDeg114, 114deg);
.degreeMixIn(sapMTPCDeg120, 120deg);
.degreeMixIn(sapMTPCDeg126, 126deg);
.degreeMixIn(sapMTPCDeg132, 132deg);
.degreeMixIn(sapMTPCDeg135, 135deg);
.degreeMixIn(sapMTPCDeg138, 138deg);
.degreeMixIn(sapMTPCDeg144, 144deg);
.degreeMixIn(sapMTPCDeg150, 150deg);
.degreeMixIn(sapMTPCDeg156, 156deg);
.degreeMixIn(sapMTPCDeg162, 162deg);
.degreeMixIn(sapMTPCDeg165, 165deg);
.degreeMixIn(sapMTPCDeg168, 168deg);
.degreeMixIn(sapMTPCDeg174, 174deg);
.degreeMixIn(sapMTPCDeg180, 180deg);
.degreeMixIn(sapMTPCDeg186, 186deg);
.degreeMixIn(sapMTPCDeg192, 192deg);
.degreeMixIn(sapMTPCDeg195, 195deg);
.degreeMixIn(sapMTPCDeg198, 198deg);
.degreeMixIn(sapMTPCDeg204, 204deg);
.degreeMixIn(sapMTPCDeg210, 210deg);
.degreeMixIn(sapMTPCDeg216, 216deg);
.degreeMixIn(sapMTPCDeg222, 222deg);
.degreeMixIn(sapMTPCDeg225, 225deg);
.degreeMixIn(sapMTPCDeg228, 228deg);
.degreeMixIn(sapMTPCDeg234, 234deg);
.degreeMixIn(sapMTPCDeg240, 240deg);
.degreeMixIn(sapMTPCDeg246, 246deg);
.degreeMixIn(sapMTPCDeg252, 252deg);
.degreeMixIn(sapMTPCDeg255, 255deg);
.degreeMixIn(sapMTPCDeg258, 258deg);
.degreeMixIn(sapMTPCDeg264, 264deg);
.degreeMixIn(sapMTPCDeg270, 270deg);
.degreeMixIn(sapMTPCDeg276, 276deg);
.degreeMixIn(sapMTPCDeg282, 282deg);
.degreeMixIn(sapMTPCDeg285, 285deg);
.degreeMixIn(sapMTPCDeg288, 288deg);
.degreeMixIn(sapMTPCDeg294, 294deg);
.degreeMixIn(sapMTPCDeg300, 300deg);
.degreeMixIn(sapMTPCDeg306, 306deg);
.degreeMixIn(sapMTPCDeg312, 312deg);
.degreeMixIn(sapMTPCDeg315, 315deg);
.degreeMixIn(sapMTPCDeg318, 318deg);
.degreeMixIn(sapMTPCDeg324, 324deg);
.degreeMixIn(sapMTPCDeg330, 330deg);
.degreeMixIn(sapMTPCDeg336, 336deg);
.degreeMixIn(sapMTPCDeg342, 342deg);
.degreeMixIn(sapMTPCDeg345, 345deg);
.degreeMixIn(sapMTPCDeg348, 348deg);
.degreeMixIn(sapMTPCDeg354, 354deg);
.degreeMixIn(sapMTPCDeg360, 360deg);

/* animation CSS classes */

.sapMTPClock.sapMTPCDisplay {
	display: block;
}

.sapMTPCFadeIn:not(.sapMTPCSkipAnimation):not(.sapMTPCFadeOut) {

	.sapMTPCItems .sapMTPCNumber,
	.sapMTPCDial::before,
	.sapMTPCItems .sapMTPCMidDot,
	.sapMTPCSelectedItem .sapMTPCNumber,
	.sapMTPCMarker {
		opacity: 0;
	}
}

.sapMTPCFadeIn.sapMTPCFadeOut:not(.sapMTPCSkipAnimation) {

	.sapMTPCHoveredItem {
		display: none;
	}

	.sapMTPCItems .sapMTPCNumber {
		animation-name: fadeOutClockItems;
		animation-delay: 0.15s;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	.sapMTPCDial::before {
		animation-name: fadeOutClockLabel;
		animation-duration: 0.35s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	.sapMTPCSelectedItem .sapMTPCNumber,
	.sapMTPCMarker {
		animation-name: fadeOutSelectedItem;
		animation-delay: 0.1s;
		animation-duration: 0.15s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	.sapMTPCItems .sapMTPCMidDot {
		animation-name: fadeOutSelectedItem;
		animation-delay: 0.15s;
		animation-duration: 0.2s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
}

.sapMTPCFadeIn:not(.sapMTPCSkipAnimation) {

	.sapMTPCItems .sapMTPCNumber {
		animation-name: fadeInClockItems;
		animation-delay: 0.15s;
		animation-duration: 0.2s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}

	.sapMTPCDial::before {
		animation-name: fadeInClockLabel;
		animation-duration: 0.35s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}

	.sapMTPCSelectedItem .sapMTPCNumber,
	.sapMTPCMarker {
		animation-name: fadeInSelectedItem;
		animation-delay: 0.1s;
		animation-duration: 0.15s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}

	.sapMTPCItems .sapMTPCMidDot {
		animation-name: fadeInSelectedItem;
		animation-delay: 0.15s;
		animation-duration: 0.2s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}
}

/* @keyframes */

@keyframes fadeOutClockItems {

	from {
		opacity: 1;
		display: block;
	}

	to {
		opacity: 0;
		display: block;
	}
}

@keyframes fadeOutClockLabel {

	from {
		opacity: 1;
		display: flex;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		display: flex;
		transform: translateY(-16px);
	}
}

@keyframes fadeOutSelectedItem {

	from {
		opacity: 1;
		display: block;
	}

	to {
		opacity: 0;
		display: block;
	}
}

@keyframes fadeInClockItems {

	from {
		opacity: 0;
		display: block;
	}

	to {
		opacity: 1;
		display: block;
	}
}

@keyframes fadeInClockLabel {

	from {
		opacity: 0;
		display: flex;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		display: flex;
		transform: translateY(0px);
	}
}

@keyframes fadeInSelectedItem {

	from {
		opacity: 0;
		display: block;
	}

	50% {
		opacity: 0.5;
		display: block;
	}

	to {
		opacity: 1;
		display: block;
	}
}