@openui5/themelib_sap_belize 1.124.2 → 1.126.0

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

@@ -0,0 +1,412 @@
+/* ================================= */
+/* 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: @sapMFontHeader5Size;
+		color: @sapUiCalendarColorToday;
+	}
+	.sapMTPColumn {
+		.sapMTimePickerLabel {
+			font-size: @sapMFontSmallSize;
+			color: @sapUiContentLabelColor;
+			text-align: center;
+			vertical-align: middle;
+		}
+		.sapMTimePickerSlider {
+			.sapMTimePickerItem {
+				background: @sapUiSelected;
+				border: 1px solid @sapUiListBorderColor;
+				font-size: @sapMFontMediumSize;
+				color: @sapUiContentContrastTextColor;
+				text-align: center;
+				&:hover {
+					background: @sapUiHighlight;
+					color: @sapUiContentContrastTextColor;
+				}
+				&:active {
+					background: @sapUiHighlight;
+					color: @sapUiContentContrastTextColor;
+				}
+				&:focus {
+					outline: 1px dotted @sapUiContentContrastFocusColor;
+					outline-offset: -3px;
+				}
+			}
+		}
+		&.sapMTPSliderExpanded {
+			.sapMTimePickerSlider {
+				.sapMTimePickerItem {
+					background: @sapUiListBackground;
+					color: @sapUiBaseText;
+					border: 1px solid @sapUiListBorderColor;
+					&:hover {
+						background: @sapUiHighlight;
+					}
+					&:active {
+						background: @sapUiHighlight;
+						color: @sapUiContentContrastTextColor;
+					}
+					&:focus {
+						outline: 1px dotted @sapUiContentFocusColor;
+						outline-offset: -3px;
+					}
+				}
+				.sapMTPPickerSelectionFrame {
+					outline: 0.125rem solid @sapUiContentForegroundBorderColor;
+					outline-offset: -0.313rem;
+					&:hover {
+						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
+							background: @sapUiHighlight;
+						}
+					}
+					&:active {
+						& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
+							background: @sapUiSelected;
+							color: @sapUiContentContrastTextColor;
+						}
+					}
+				}
+			}
+		}
+		&: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: @sapMFontHeader5Size;
+			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: @sapMFontSmallSize;
+				color: @sapUiContentLabelColor;
+				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: @sapUiSelected;
+					border: 1px solid @sapUiListBorderColor;
+					font-size: @sapMFontMediumSize;
+					color: @sapUiContentContrastTextColor;
+					text-align: center;
+					&:active {
+						background: @sapUiHighlight;
+						color: @sapUiContentContrastTextColor;
+					}
+					&:focus {
+						outline: 1px dotted @sapUiContentContrastFocusColor;
+						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: @sapUiListBackground;
+						color: @sapUiBaseText;
+						border: 1px solid @sapUiListBorderColor;
+						&:active {
+							background: @sapUiHighlight;
+							color: @sapUiContentContrastTextColor;
+						}
+						&:focus {
+							outline: 1px dotted @sapUiContentFocusColor;
+							outline-offset: -3px;
+						}
+					}
+					.sapMTPPickerSelectionFrame {
+						display: block;
+						outline: 0.125rem solid @sapUiContentForegroundBorderColor;
+						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;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,108 @@
+/* ============================ */
+/* CSS for control sap.m/Title  */
+/* Base theme                   */
+/* ============================ */
+
+.sapMTitle {
+	position: relative;
+	display: inline-block;
+	margin: 0;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
+	-webkit-margin-start: 0;
+	-webkit-margin-end: 0;
+	font-weight: @sapUiFontHeaderWeight;
+	color: @sapUiGroupTitleTextColor;
+	font-family: @sapUiFontHeaderFamily;
+	box-sizing: border-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: text;
+	text-shadow: @sapUiShadowText;
+}
+
+.sapMTitle.sapMTitleWrap {
+	white-space: pre-line;
+	word-wrap: break-word;
+}
+
+.sapMTitle.sapMTitleNoWrap {
+	white-space: nowrap;
+}
+
+.sapMTitleMaxWidth {
+	max-width: 100%;
+}
+
+/* Level Styling */
+
+/* Level Auto*/
+
+.sapMTitleStyleAuto {
+	font-size: @sapMFontHeader5Size;
+}
+
+.sapMTB > .sapMTitleStyleAuto {
+	font-size: @sapUiGroupTitleFontSize;
+}
+
+/* Level H1 */
+
+.sapMTitleStyleH1 {
+	font-size: @sapMFontHeader1Size;
+}
+
+/* Level H2 */
+
+.sapMTitleStyleH2 {
+	font-size: @sapMFontHeader2Size;
+}
+
+/* Level H3 */
+
+.sapMTitleStyleH3 {
+	font-size: @sapMFontHeader3Size;
+}
+
+/* Level H4 */
+
+.sapMTitleStyleH4 {
+	font-size: @sapMFontHeader4Size;
+}
+
+/* Level H5 */
+
+.sapMTitleStyleH5 {
+	font-size: @sapMFontHeader5Size;
+}
+
+/* Level H6 */
+
+.sapMTitleStyleH6 {
+	font-size: @sapMFontHeader6Size;
+}
+
+.sapMIBar-CTX .sapMTitle {
+	color: @sapUiPageHeaderTextColor;
+	text-shadow: @sapUiShadowText;
+}
+
+.sapMTB-Transparent-CTX .sapMTitle {
+	text-shadow: none;
+}
+
+.sapMIBar-CTX.sapMFooter-CTX .sapMTitle {
+	color: @sapUiPageFooterTextColor;
+	text-shadow: @sapUiShadowText;
+}
+
+/* DynamicPageTitle Heading-CTX */
+.sapFDynamicPageTitleHeading-CTX > .sapMTitle {
+	margin-top: 0;
+}
+
+/* Link in Title */
+.sapMTitle .sapMLnk {
+	font-size: inherit;
+	vertical-align: middle;
+}

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

@@ -0,0 +1,95 @@
+/* =================================== */
+/* CSS for control sap.m/ToggleButton  */
+/* Base theme                          */
+/* =================================== */
+
+/************************************/
+/* Common styles        */
+/************************************/
+/* toggled without context */
+html.sap-desktop .sapMToggleBtnPressed,
+.sapMToggleBtnPressed:not(.sapMBtnDisabled),
+/* Bar context*/
+html.sap-desktop .sapMIBar-CTX .sapMToggleBtnPressed,
+.sapMIBar-CTX .sapMToggleBtnPressed:not(.sapMBtnDisabled),
+/* Toolbar transparent context */
+html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed,
+.sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
+	background-image: none;
+	background-color: @sapUiButtonSelectedBackground;
+	border-color: @sapUiButtonSelectedBorderColor;
+	color: @sapUiButtonSelectedTextColor;
+	& .sapUiIcon {
+		color: @sapUiButtonSelectedTextColor;
+	}
+	text-shadow: none;
+	&.sapMBtnReject {
+		background-color: @sapUiButtonRejectSelectedBackground;
+		border-color: @sapUiButtonRejectSelectedBorderColor;
+		color: @sapUiButtonRejectSelectedTextColor;
+		& .sapUiIcon {
+			color: @sapUiButtonRejectSelectedTextColor;
+		}
+	}
+	&.sapMBtnAccept {
+		background-color: @sapUiButtonAcceptSelectedBackground;
+		border-color: @sapUiButtonAcceptSelectedBorderColor;
+		color: @sapUiButtonAcceptSelectedTextColor;
+		& .sapUiIcon {
+			color: @sapUiButtonAcceptSelectedTextColor;
+		}
+	}
+	&.sapMBtnAttention {
+		background-color: @sapUiButtonAttentionSelectedBackground;
+		border-color: @sapUiButtonAttentionSelectedBorderColor;
+		color: @sapUiButtonAttentionSelectedTextColor;
+		& .sapUiIcon {
+			color: @sapUiButtonAttentionSelectedTextColor;
+		}
+	}
+}
+
+/*hover and down on toggled*/
+.sapMBtn:hover .sapMBtnHoverable.sapMToggleBtnPressed, /*in Firefox the button receives the hover state, not it's inner child */
+.sapMBtn .sapMBtnHoverable.sapMToggleBtnPressed:hover,
+/* Toolbar transparent context*/
+.sapMTB-Transparent-CTX .sapMBtnHoverable.sapMToggleBtnPressed:hover {
+	background-image: none;
+	background-color: @sapUiToggleButtonPressedHoverBackground;
+}
+
+/* toggled - icon has to be adapted */
+span.sapMBtnInner.sapMToggleBtnPressed .sapMBtnIcon,
+span.sapMBtnInner.sapMToggleBtnPressed.sapMBtnTransparent > .sapMBtnIcon,
+html.sap-desktop .sapMToggleBtnPressed.sapMBtnTransparent > .sapMBtnIcon {
+	color: @sapUiToggleButtonPressedTextColor;
+}
+
+/* Focus of toggled button */
+.sapMBtn:focus > .sapMBtnInner.sapMToggleBtnPressed.sapMFocusable {
+	outline-color: @sapUiContentContrastFocusColor;
+}
+
+/* hover and down on toggled button part 1*/
+.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive),
+.sapMBtn .sapMBtnHoverable.sapMToggleBtnPressed:hover {
+	background-color: @sapUiButtonSelectedHoverBackground;
+	border-color: @sapUiButtonSelectedHoverBorderColor;
+	color: @sapUiButtonSelectedTextColor;
+	text-shadow: none;
+	&.sapMBtnReject {
+		background-color: darken(@sapUiButtonRejectActiveBackground, 5);
+		border-color: @sapUiButtonRejectActiveBorderColor;
+		color: contrast(lighten(@sapUiButtonRejectActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
+	}
+	&.sapMBtnAccept {
+		background-color: darken(@sapUiButtonAcceptActiveBackground, 5);
+		border-color: @sapUiButtonAcceptActiveBorderColor;
+		color: contrast(lighten(@sapUiButtonAcceptActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
+	}
+	&.sapMBtnAttention {
+		background-color: darken(@sapUiButtonAttentionActiveBackground, 5);
+		border-color: @sapUiButtonAttentionActiveBorderColor;
+		color: contrast(lighten(@sapUiButtonAttentionActiveBackground, 5), @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
+	}
+}