@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/m/themes/sap_belize_base/TileContent.less

@@ -0,0 +1,250 @@
+/* ================================== */
+/* CSS for control sap.m/TileContent  */
+/* Base theme                         */
+/* ================================== */
+
+.sapMTileCnt {
+	display: inline-block;
+	box-sizing: border-box;
+	position: relative;
+	height: 6.375rem;
+    vertical-align: top;
+
+	/* FrameType: Auto */
+	&.sapMFrameTypeAuto {
+		min-width: 9rem;
+	}
+
+	/* FrameType: TwoByOne */
+	&.sapMFrameTypeTwoByOne {
+		width: 100%;
+	}
+
+	/* FrameType: OneByOne */
+	&.sapMFrameTypeOneByOne {
+		width: 100%;
+	}
+}
+
+/* Improved behaviour for TileContent in GenericTile */
+.sapMGT .sapMTileCnt.sapMFrameTypeAuto:only-of-type {
+	width: 100%;
+}
+
+.sapMGT .sapMTileCnt.sapMFrameTypeAuto:not(:only-of-type) {
+	width: ~"calc(50% - 0.25rem)"; //0.5rem margin between the contents
+}
+
+/* Footer CSS */
+.sapMTileCntFtrTxt {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-align: right;
+	position: absolute;
+	right: 0;
+	left: 0;
+	box-sizing: border-box;
+	height: 1rem;
+	bottom: 1rem;
+	margin-left: 1rem;
+	margin-right: 1rem;
+	line-height: normal;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	font-weight: normal;
+}
+
+.sapMGT .sapMTileCntFtrTxt {
+	text-align: left;
+}
+
+html[dir=rtl] .sapMGT .sapMTileCntFtrTxt {
+	text-align: right;
+}
+
+.sapMTileCntFooterTextColorNeutral {
+	color: @sapUiTileTextColor;
+}
+
+.sapMTileCntFooterTextColorGood {
+	color: @sapUiPositiveText;
+}
+
+.sapMTileCntFooterTextColorError {
+	color: @sapUiNegativeText;
+}
+
+.sapMTileCntFooterTextColorCritical {
+	color: @sapUiCriticalText;
+}
+
+html[dir=rtl] .sapMTileCntFtrTxt {
+	text-align: left;
+}
+
+/* Content */
+.sapMTileCntContent {
+	overflow: visible;
+	display: inline-block;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.sapMTileCntContent > .sapMTcInnerMarker {
+	vertical-align: bottom;
+	line-height: normal;
+}
+
+.sapMTileCntContent {
+	height: 3.875rem;
+	margin-bottom: 0.25rem;
+	margin-top: 0.25rem;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.sapMTileCnt + .sapMTileCnt {
+	margin-left: 0.5rem;
+}
+
+.sapMTileCntContent > .sapMNwC {
+	background-color: inherit;
+}
+
+.sapMTileCnt.News {
+	height: 6.125rem;
+	margin-top: 0.125rem;
+	background-color: @sapUiTileBackground;
+
+	.sapMTileCntContent {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.sapMTileCntFtrTxt {
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+
+	.sapMTileCntContent > .sapMTcInnerMarker {
+		vertical-align: top;
+	}
+}
+
+.Stretch {
+	.sapMTileCnt.News{
+		height: 100%;
+
+		.sapMTileCntContent {
+			margin-top: 1rem;
+		}
+
+		.sapMTileCntFtrTxt {
+			font-size: @sapMFontSmallSize;
+		}
+	}
+}
+
+.sapMTileSmallPhone {
+	.sapMTileCnt {
+		height: 5.5rem;
+	}
+
+	.sapMTileCntFtrTxt {
+		height: 1.063rem;
+		line-height: normal;
+		bottom: 0.5rem;
+		margin-left: 0.5rem;
+		margin-right: 0.5rem;
+		font-size: @sapMFontSmallSize;
+	}
+
+	.sapMTileCntContent {
+		margin-bottom: 0.25rem;
+		margin-top: 0.25rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+
+	.sapMTileCnt.News {
+		height: 5.25rem;
+
+		.sapMTileCntContent {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			margin-top: 0.25rem;
+		}
+
+		.sapMTileCntFtrTxt {
+			margin-left: 0.5rem;
+			margin-right: 0.5rem;
+		}
+	}
+
+	.sapMTileSmallPhone.Stretch {
+		.sapMTileCnt.News {
+			height: 100%;
+		}
+		.sapMTileFtrCnt > .sapMTileNavContainer {
+			padding-bottom: 1rem;
+		}	
+	}
+}
+.sapMGTStateLoading {
+	&.sapMTileSmallPhone:not(.sapMGTActionMode) {
+		.sapMTileCntContentShimmerPlaceholderWithDescription{
+			padding-top: 0;
+		}
+		.sapMTileCntContentShimmerPlaceholderItem {
+			.sapMTileCntContentShimmerPlaceholderRows {
+				.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+					top:0rem;
+				}
+			}
+		}
+	}
+	.sapMTileCntContentShimmerPlaceholderItem {
+		.sapMTileCntContentShimmerPlaceholderRows {
+			.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+				top:1rem;
+			}
+		}
+	}
+	.sapMTileCntContentShimmerPlaceholderWithDescription {
+		padding: 1rem 0rem 0rem 0rem;
+	}
+}
+.sapMGT.sapMTileSmallPhone.sapMGTStateLoading.OneByOne {
+	.sapMTileCntContentShimmerPlaceholderItemTextFooter{
+		width: 5.875rem;
+	}
+}
+.sapMTileCntContentShimmerPlaceholderItem {
+	.sapMTileCntContentShimmerPlaceholderRows {
+		.sapMTileCntContentShimmerPlaceholderItemTextFooter, .sapMTileCntContentShimmerPlaceholderItemBox {
+			top:0.85rem;
+		}
+	}
+}
+
+.sapMGTStateLoaded.TwoByHalf, .sapMGTStateLoaded.OneByHalf,
+.sapMGTStateDisabled.TwoByHalf, .sapMGTStateDisabled.OneByHalf,
+.sapMGTStateFailed.TwoByHalf, .sapMGTStateFailed.OneByHalf  {
+	.sapMTileCntContentShimmerPlaceholderItem.sapMTileCntContentShimmerPlaceholderWithDescription {
+		padding: 0rem 1rem 0rem 1rem;
+	}
+
+}
+
+
+.sapMTileCnt.sapMTileCntDisabled {
+	position: relative;
+
+	&:after {
+		.sapMGTOverlayMixin();
+		display: block;
+		content: "";
+		background-color: fade(@sapUiTileBackground, 80);
+	}
+}

package/src/sap/m/themes/sap_belize_base/TimePicker.less

@@ -0,0 +1,61 @@
+/* ================================= */
+/* CSS for control sap.m/TimePicker  */
+/* Base theme                        */
+/* ================================= */
+
+/* ======================================== */
+/* TimePicker Input Field                   */
+/* ======================================== */
+
+.sapMInputBase.sapMTimePickerHiddenInput {
+	display: none;
+}
+
+/* ======================================== */
+/* TimePicker Dropdown                      */
+/* ======================================== */
+
+.sapMTimePickerDropDown {
+	overflow: hidden !important;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
+}
+
+/* ======================================== */
+/* COMPACT MODE STYLES                      */
+/* ======================================== */
+
+.sapUiSizeCompact {
+
+	/* ======================================== */
+	/* TimePicker Dropdown                      */
+	/* ======================================== */
+
+	.sapMTimePickerDropDown {
+		box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
+	}
+}
+
+/* PHONE STYLES */
+html.sap-phone {
+
+	/* ======================================== */
+	/* TimePicker Dropdown                      */
+	/* ======================================== */
+
+	.sapMTimePickerDropDown {
+		/* This centers content in landscape & portrait mode */
+		.sapMDialogScrollCont {
+			height: 100%;
+			padding: 0;
+		}
+	}
+}
+
+/* DESKTOP STYLES */
+html.sap-desktop .sapMValueStateHeaderRoot {
+	margin-right: -12px; // fixing a right margin set from popover
+	max-width: 100%;
+}

package/src/sap/m/themes/sap_belize_base/TimePickerClock.less

@@ -0,0 +1,241 @@
+/* ====================================== */
+/* 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.sapMTPCActive {
+	display: block;
+}
+
+.sapMTPCDial {
+	position: relative;
+	width: auto;
+	display: block;
+	border-radius: 100%;
+	background-color: @sapUiLegendWorkingBackground;
+	text-align: center;
+	z-index: 1;
+}
+
+.sapMTPCDial::before {
+	content: attr(data-label);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	color: @sapUiContentLabelColor;
+	top: 2.75rem;
+	left: 2.75rem;
+	bottom: 2.75rem;
+	right: 2.75rem;
+	border-radius: 100%;
+	z-index: 2;
+}
+
+.sapMTPCInner .sapMTPCDial::before {
+	background-color: @sapUiLegendWorkingBackground;
+}
+
+.sapMTPCDial::after {
+	content: "";
+	display: block;
+	padding-bottom: 100%;
+}
+
+.sapMTPClockCover {
+	position: absolute;
+	top: 0.5625rem;
+	left: 0.5625rem;
+	bottom: 0.5625rem;
+	right: 0.5625rem;
+	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: @sapUiFieldBorderColor;
+}
+
+.sapMTPCDot {
+	display: block;
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.3125rem;
+	margin: 0 auto 0.25rem auto;
+	border-radius: 100%;
+	background-color: @sapUiFieldBorderColor;
+}
+
+.sapMTPCMarker {
+	box-sizing: border-box;
+	width: 0.25rem;
+	height: 0.5625rem;
+	margin: 0 auto;
+	border-radius: 100%;
+	background-color: @sapUiButtonSelectedBackground;
+	border: 0.0625rem solid @sapUiButtonSelectedBorderColor;
+}
+
+.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
+	-khtml-user-select: none; // Konqueror HTML
+	-moz-user-select: none; // Old versions of Firefox
+	-ms-user-select: none; // Internet Explorer/Edge
+	user-select: none; // Chrome, Edge, Opera and Firefox
+
+	&.sapMTPCMarker {
+		z-index: 4;
+	}
+}
+
+.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: @sapUiFontFamily;
+	font-size:@sapMFontMediumSize;
+	color: @sapUiBaseText;
+
+	&.sapMTPCNumberHover:not(.sapMTPCSelected) {
+		background-color: @sapUiListHoverBackground;
+	}
+}
+
+.sapMTPCInvisible {
+	visibility: hidden;
+}
+
+.sapMTPCSelected {
+	color: @sapUiButtonSelectedTextColor;
+	background-color: @sapUiButtonSelectedBackground;
+	border: 0.0625rem solid @sapUiButtonSelectedBorderColor;
+}
+
+// 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(sapMTPCDeg18, 18deg);
+.degreeMixIn(sapMTPCDeg24, 24deg);
+.degreeMixIn(sapMTPCDeg30, 30deg);
+.degreeMixIn(sapMTPCDeg36, 36deg);
+.degreeMixIn(sapMTPCDeg42, 42deg);
+.degreeMixIn(sapMTPCDeg48, 48deg);
+.degreeMixIn(sapMTPCDeg54, 54deg);
+.degreeMixIn(sapMTPCDeg60, 60deg);
+.degreeMixIn(sapMTPCDeg66, 66deg);
+.degreeMixIn(sapMTPCDeg72, 72deg);
+.degreeMixIn(sapMTPCDeg78, 78deg);
+.degreeMixIn(sapMTPCDeg84, 84deg);
+.degreeMixIn(sapMTPCDeg90, 90deg);
+.degreeMixIn(sapMTPCDeg96, 96deg);
+.degreeMixIn(sapMTPCDeg102, 102deg);
+.degreeMixIn(sapMTPCDeg108, 108deg);
+.degreeMixIn(sapMTPCDeg114, 114deg);
+.degreeMixIn(sapMTPCDeg120, 120deg);
+.degreeMixIn(sapMTPCDeg126, 126deg);
+.degreeMixIn(sapMTPCDeg132, 132deg);
+.degreeMixIn(sapMTPCDeg138, 138deg);
+.degreeMixIn(sapMTPCDeg144, 144deg);
+.degreeMixIn(sapMTPCDeg150, 150deg);
+.degreeMixIn(sapMTPCDeg156, 156deg);
+.degreeMixIn(sapMTPCDeg162, 162deg);
+.degreeMixIn(sapMTPCDeg168, 168deg);
+.degreeMixIn(sapMTPCDeg174, 174deg);
+.degreeMixIn(sapMTPCDeg180, 180deg);
+.degreeMixIn(sapMTPCDeg186, 186deg);
+.degreeMixIn(sapMTPCDeg192, 192deg);
+.degreeMixIn(sapMTPCDeg198, 198deg);
+.degreeMixIn(sapMTPCDeg204, 204deg);
+.degreeMixIn(sapMTPCDeg210, 210deg);
+.degreeMixIn(sapMTPCDeg216, 216deg);
+.degreeMixIn(sapMTPCDeg222, 222deg);
+.degreeMixIn(sapMTPCDeg228, 228deg);
+.degreeMixIn(sapMTPCDeg234, 234deg);
+.degreeMixIn(sapMTPCDeg240, 240deg);
+.degreeMixIn(sapMTPCDeg246, 246deg);
+.degreeMixIn(sapMTPCDeg252, 252deg);
+.degreeMixIn(sapMTPCDeg258, 258deg);
+.degreeMixIn(sapMTPCDeg264, 264deg);
+.degreeMixIn(sapMTPCDeg270, 270deg);
+.degreeMixIn(sapMTPCDeg276, 276deg);
+.degreeMixIn(sapMTPCDeg282, 282deg);
+.degreeMixIn(sapMTPCDeg288, 288deg);
+.degreeMixIn(sapMTPCDeg294, 294deg);
+.degreeMixIn(sapMTPCDeg300, 300deg);
+.degreeMixIn(sapMTPCDeg306, 306deg);
+.degreeMixIn(sapMTPCDeg312, 312deg);
+.degreeMixIn(sapMTPCDeg318, 318deg);
+.degreeMixIn(sapMTPCDeg324, 324deg);
+.degreeMixIn(sapMTPCDeg330, 330deg);
+.degreeMixIn(sapMTPCDeg336, 336deg);
+.degreeMixIn(sapMTPCDeg342, 342deg);
+.degreeMixIn(sapMTPCDeg348, 348deg);
+.degreeMixIn(sapMTPCDeg354, 354deg);
+.degreeMixIn(sapMTPCDeg360, 360deg);

package/src/sap/m/themes/sap_belize_base/TimePickerClocks.less

@@ -0,0 +1,73 @@
+/* ====================================== */
+/* CSS for control sap.m/TimePickerClocks */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMTPClocksContainer {
+	margin: 0 auto;
+	box-sizing: border-box;
+	width: 20rem;
+	height: 23.75rem;
+	padding: 1rem;
+	text-align: center;
+}
+
+.sapMTPCButtons {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding-bottom: 1rem;
+	width: 18rem;
+
+	& .sapMBtn {
+		width: 2.5625rem;
+	}
+
+	& .sapMTPNow {
+		margin-left: 0.75rem;
+	}
+
+	& > span {
+		min-width: 0.5rem;
+		padding: 0 0.125rem;
+		text-align: center;
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontMediumSize;
+		color: @sapUiBaseText;
+	}
+}
+
+.sapMTPCClocks {
+	display: block;
+	text-align: center;
+	width: 18rem;
+	height: 18rem;
+	touch-action: none;
+}
+
+.sapMTPClocksContainer > .sapMTPCButtons > div.sapMBtnBase.sapMBtn {
+	box-sizing: border-box;
+	display: inline-block;
+}
+
+.sapUiSizeCompact {
+
+	.sapMTPClocksContainer {
+		width: 18.5rem;
+		height: 21.5rem;
+	}
+
+	.sapMTPCButtons {
+		width: 17rem;
+
+		& .sapMBtn {
+			width: 2.3125rem;
+		}
+	}
+
+	.sapMTPCClocks {
+		width: 17rem;
+		height: 17rem;
+	}
+
+}

package/src/sap/m/themes/sap_belize_base/TimePickerInputs.less

@@ -0,0 +1,26 @@
+/* ====================================== */
+/* CSS for control sap.m/TimePickerInputs */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMTPInputsContainer {
+	min-width: 12.5rem;
+	padding: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	& > span {
+		min-width: 0.5rem;
+		padding: 0 0.125rem;
+		text-align: center;
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontMediumSize;
+		color: @sapUiBaseText;
+	}
+
+}
+
+.sapMTPNow {
+	margin-left: 0.5rem;
+}