@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,147 @@
+/* ==================================== */
+/* CSS for control sap.m/MultiComboBox  */
+/* Base theme                           */
+/* ==================================== */
+
+@_sap_m_InputWithTokens_TokenizerMinWidth: 3.25rem;
+
+/*MIN-WIDTH variables*/
+/* rounding values to 2 symbols, because of IE and Edge */
+@_InputBase_Control_Tokens_MinWidth: round((@_InputBase_Control_OneIcon_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_ReadOnly_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_State_MinWidth: round((@_InputBase_Control_Tokens_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);
+
+@_InputBase_Control_Tokens_MinWidth_Compact: round((@_InputBase_Control_OneIcon_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_State_MinWidth_Compact: round((@_InputBase_Control_Tokens_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);
+
+/* hande min-width calculation */
+.sapMMultiComboBox.sapMMultiComboBoxHasToken {
+	.sapMTokenizer {
+		min-width: @_sap_m_InputWithTokens_TokenizerMinWidth;
+	}
+
+	&.sapMFocus .sapMTokenizer {
+		left: 0.125rem;
+	}
+
+	.sapMInputBaseContentWrapper {
+		min-width: @_InputBase_Control_Tokens_MinWidth;
+		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
+			min-width: @_InputBase_Control_Tokens_State_MinWidth;
+		}
+	}
+
+	&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+		min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth;
+	}
+}
+
+.sapMMultiComboBox:not(.sapMMultiComboBoxHasToken) .sapMTokenizer {
+	padding-left: 0;
+}
+
+.sapMMultiComboBox .sapMTokenizer {
+	max-height: 100%;
+}
+
+.sapMMultiComboBoxHasToken .sapMInputBaseInner {
+	padding-left: 0;
+}
+
+.sapMMultiComboBox.sapMInputBaseNoWidth {
+	width: 100%;
+}
+
+li.sapMMultiComboBoxItem .sapMCbBg {
+	top: 0;
+	bottom: 0;
+	margin: auto;
+}
+
+/* Keep placeholder invisible, when at least one token is chosen */
+.sapMMultiComboBoxHasToken .sapMInputBaseInner::-moz-placeholder {
+	color: transparent;
+}
+
+.sapMMultiComboBoxHasToken .sapMInputBaseInner::-webkit-input-placeholder {
+	color: transparent;
+}
+
+.sapMMultiComboBoxHasToken .sapMInputBaseInner:-moz-placeholder {
+	color: transparent;
+}
+
+/* ------------------------------ */
+/* ListItem                       */
+/* ------------------------------ */
+
+.sapMMultiComboBoxItem.sapMSLIWrapping .sapMCb {
+	height: 2.4375rem;
+	line-height: 2.4375rem;
+	margin-top: 0;
+}
+
+.sapMMultiComboBoxPicker {
+	.sapMFocusable:focus {
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		outline-offset: -0.125rem;
+	}
+
+	.sapMSLITitleOnly {
+		font-size: 0.875rem;
+	}
+}
+
+/* Compact size */
+.sapUiSizeCompact {
+	.sapMLIB.sapMMultiComboBoxItem.sapMSLIWrapping > .sapMCb{
+		height: 2rem;
+		line-height: 2rem;
+		margin-top: 0;
+	}
+
+	/* handle min-width calculation */
+	.sapMMultiComboBox.sapMMultiComboBoxHasToken {
+		.sapMInputBaseContentWrapper {
+			min-width: @_InputBase_Control_Tokens_MinWidth_Compact;
+			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
+				min-width: @_InputBase_Control_Tokens_State_MinWidth_Compact;
+				outline-offset: -3px;
+				.sapMToken {
+					margin-top: 0.0625rem;
+					margin-bottom: 0.0625rem;
+				}
+				.sapMTokenizerIndicator {
+					line-height: 1rem;
+				}
+			}
+		}
+
+		&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+			min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact;
+		}
+	}
+
+	.sapMMultiComboBoxSelectAll.sapMTB.sapMIBar,
+	.sapMMultiComboBoxSelectAll.sapMTB-Transparent-CTX.sapMTB.sapMListHdrTBar {
+		padding: 0;
+		.sapMCb {
+			margin-left: 0.5rem;
+			padding-left: 2.25rem;
+		}
+	}
+}
+
+.sapMMultiComboBoxSelectAll.sapMTB.sapMIBar,
+.sapMMultiComboBoxSelectAll.sapMTB-Transparent-CTX.sapMTB.sapMListHdrTBar {
+	padding: 0.125rem;
+	&.sapMMultiComboBoxSelectAllFocused {
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		outline-offset: -0.125rem;
+	}
+
+	& .sapMBarChild.sapMCb.sapMCbHasLabel:focus:before {
+		border: none;
+	}
+}

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

@@ -0,0 +1,155 @@
+/* ================================= */
+/* CSS for control sap.m/MultiInput  */
+/* Base theme                        */
+/* ================================= */
+
+@_sap_m_InputWithTokens_TokenizerMinWidth: 3.25rem;
+
+/*MIN-WIDTH variables*/
+/* rounding values to 2 symbols, because of IE and Edge */
+@_InputBase_Control_Tokens_MinWidth: round((@_InputBase_Control_OneIcon_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_ReadOnly_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_State_MinWidth: round((@_InputBase_Control_Tokens_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);
+
+@_InputBase_Control_Tokens_MinWidth_Compact: round((@_InputBase_Control_OneIcon_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
+@_InputBase_Control_Tokens_State_MinWidth_Compact: round((@_InputBase_Control_Tokens_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);
+
+
+
+.sapMMultiInput:not(.sapMMultiInputHasTokens) {
+	& .sapMTokenizer {
+		padding-left: 0;
+ 	}
+}
+
+.sapMMultiInput.sapMMultiInputHasTokens .sapMTokenizer.sapMTokenizerNoNMore {
+	min-width: 2rem;
+}
+
+/* handle min-width calculation */
+.sapMMultiInput.sapMMultiInputHasTokens {
+	.sapMTokenizer {
+		min-width: @_sap_m_InputWithTokens_TokenizerMinWidth;
+	}
+
+	.sapMInputBaseContentWrapper {
+		min-width: @_InputBase_Control_Tokens_MinWidth;
+		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
+			min-width: @_InputBase_Control_Tokens_State_MinWidth;
+		}
+	}
+
+	&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+		min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth;
+	}
+}
+
+.sapMMultiInput.sapMMultiInputHasTokens {
+	& .sapMInputBaseInner {
+		padding-left: 0;
+	}
+}
+
+.sapMMultiInput .sapMTokenizer {
+	max-height: 100%;
+}
+
+// prevent placing the multiinput over a busy indicator overlay
+.sapUiLocalBusy .sapMMultiInput .sapMTokenizer {
+	z-index: 0;
+}
+
+/* Keep placeholder invisible, when at least one token is chosen */
+.sapMMultiInputHasTokens .sapMInputBaseInner::-moz-placeholder {
+	color: transparent;
+}
+
+.sapMMultiInputHasTokens .sapMInputBaseInner::-webkit-input-placeholder {
+	color: transparent;
+}
+
+.sapMMultiInputHasTokens .sapMInputBaseInner:-moz-placeholder {
+	color: transparent;
+}
+
+.sapUiSizeCompact {
+	/* min-width calculations */
+	.sapMMultiInput.sapMMultiInputHasTokens {
+		.sapMInputBaseContentWrapper {
+			min-width: @_InputBase_Control_Tokens_MinWidth_Compact;
+			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
+				min-width: @_InputBase_Control_Tokens_State_MinWidth_Compact;
+				outline-offset: -3px;
+				.sapMToken {
+					margin-top: 0.0625rem;
+					margin-bottom: 0.0625rem;
+				}
+				.sapMTokenizerIndicator {
+					line-height: 1rem;
+				}
+			}
+		}
+
+		&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+			min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact;
+		}
+	}
+}
+
+.sapUiSizeCondensed .sapUiTableDataCell {
+
+	.sapMTokenizer .sapMToken {
+		height: 1.125rem;
+		margin-top: 0.125rem;
+		margin-bottom: 0.125rem;
+	}
+
+	.sapMTokenText {
+		height: 100%;
+		line-height: 1rem;
+	}
+
+	.sapMToken .sapMTokenIcon {
+		line-height: 1rem;
+	}
+
+	.sapMMultiInput .sapMInputBaseInner {
+		height: 1.25rem;
+	}
+
+	.sapMMultiInputIndicator {
+		line-height: 1.25rem;
+	}
+}
+
+/* MultiInput with description */
+.sapMMultiInput.sapMMultiInputHasTokens {
+	.sapMInputDescriptionWrapper {
+		max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_MinWidth}))";
+		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_State_MinWidth}))";
+		}
+
+		.sapMInputBaseReadonly & {
+			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_ReadOnly_MinWidth}))";
+		}
+	}
+
+	&.sapMInputFocused .sapMTokenizer {
+		left: 0.125rem;
+	}
+
+	.sapUiSizeCompact & {
+		.sapMInputDescriptionWrapper {
+			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_MinWidth_Compact}))";
+			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+				max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_State_MinWidth_Compact}))";
+			}
+
+			.sapMInputBaseReadonly & {
+				max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact}))";
+			}
+		}
+	}
+}

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

@@ -0,0 +1,351 @@
+/* =================================== */
+/* CSS for control sap.m/NavContainer  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMNav {
+	overflow: hidden;
+	position: relative;
+	height: 100%;
+}
+
+.sapMNavFlip {
+	-webkit-perspective: 1000;
+	perspective: 1000px;
+}
+
+.sapMNavItem,
+.sapMNavItem.sapMPage {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	height: 100%;
+}
+
+.sapMNavItem.sapMNavItemRendering {
+	visibility: hidden;
+	left: -4000px;
+}
+
+.sapMNavItem.sapMNavItemHidden {
+	display: none;
+}
+
+/* animations */
+html[data-sap-ui-animation='on'] {
+
+	.sapMNavItem,
+	.sapMNavItem.sapMPage {
+		-webkit-transition-property: -webkit-transform;
+		transition-property: transform;
+	}
+
+	/* for slide animation */
+	.sapMNavItem.sapMNavItemCenter {
+		-webkit-transform: translate3d(0px, 0px, 0px);
+		transform: translate3d(0px, 0px, 0px);
+	}
+
+	.sapMNavItem.sapMNavItemSlideLeft {
+		-webkit-transform: translate3d(1rem, 0px, 0px);
+		transform: translate3d(1rem, 0px, 0px);
+	}
+
+	.sapMNavItem.sapMNavItemSlideRight {
+		-webkit-transform: translate3d(-1rem, 0px, 0px);
+		transform: translate3d(-1rem, 0px, 0px);
+	}
+
+    /* for base slide animation */
+
+	.sapMNavItem.sapMNavItemSlideRightToCenter {
+		-webkit-animation: sapMNavItemAnimationRightToCenter .3s;
+		animation: sapMNavItemAnimationRightToCenter .3s;
+	}
+
+    .sapMNavItem.sapMNavItemSlideCenterToLeft {
+        -webkit-animation: sapMNavItemAnimationCenterToLeft .3s;
+        animation: sapMNavItemAnimationCenterToLeft .3s;
+    }
+
+    @-webkit-keyframes sapMNavItemAnimationRightToCenter {
+        0% {
+            -webkit-transform: translate3d(100%, 0px, 0px);
+        }
+        100% {
+            -webkit-transform: translate3d(0px, 0px, 0px);
+        }
+    }
+
+    @-webkit-keyframes sapMNavItemAnimationCenterToLeft {
+        0% {
+            -webkit-transform: translate3d(0px, 0px, 0px);
+        }
+        100% {
+            -webkit-transform: translate3d(-100%, 0px, 0px);
+        }
+    }
+
+    @keyframes sapMNavItemAnimationRightToCenter {
+        0% {
+            transform: translate3d(100%, 0px, 0px);
+        }
+        100% {
+            transform: translate3d(0px, 0px, 0px);
+        }
+    }
+
+    @keyframes sapMNavItemAnimationCenterToLeft {
+        0% {
+            transform: translate3d(0px, 0px, 0px);
+        }
+        100% {
+            transform: translate3d(-100%, 0px, 0px);
+        }
+    }
+
+	/* for fade animation */
+
+	.sapMNavItem.sapMNavItemTransparent {
+		-webkit-transition-property: opacity, transform;
+		transition-property: opacity, transform;
+		opacity: 0;
+	}
+
+	.sapMNavItem.sapMNavItemOpaque {
+		-webkit-transition-property: opacity, transform;
+		transition-property: opacity, transform;
+		opacity: 1;
+		-webkit-transform: translate3d(0px, 0px, 0px);
+		transform: translate3d(0px, 0px, 0px);
+	}
+
+	.sapMNavItem.sapMNavItemFading {
+		-webkit-transition-duration: .15s;
+		transition-duration: .15s;
+	}
+
+	/* for flip animation */
+
+	.sapMNavItem.sapMNavItemFlipNext {
+		-webkit-transform: rotateY(180deg);
+		transform: rotateY(180deg);
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+	}
+
+	.sapMNavItem.sapMNavItemFlipPrevious {
+		-webkit-transform: rotateY(-180deg);
+		transform: rotateY(-180deg);
+		backface-visibility: hidden;
+	}
+
+	.sapMNavItem.sapMNavItemFlipping {
+		-webkit-transition-duration: .5s;
+		transition-duration: .5s;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+	}
+
+	/* for door animation */
+
+	@-webkit-keyframes sapMNavItemDoorInPrevious {
+		from {
+			-webkit-transform: rotate3d(0, 1, 0, 0deg);
+			visibility: visible;
+			opacity: 1;
+		}
+		40% {
+			-webkit-transform: rotate3d(0, 1, 0, -70deg);
+			visibility: visible;
+			opacity: 0;
+		}
+		41% {
+			-webkit-transform: rotate3d(0, 1, 0, -70deg);
+			visibility: hidden;
+		}
+
+		to {
+			-webkit-transform: rotate3d(0, 1, 0, -70deg);
+		}
+	}
+
+	@keyframes sapMNavItemDoorInPrevious {
+		from {
+			transform: rotate3d(0, 1, 0, 0deg);
+			visibility: visible;
+			opacity: 1;
+		}
+		40% {
+			transform: rotate3d(0, 1, 0, -70deg);
+			visibility: visible;
+			opacity: 0;
+		}
+		41% {
+			transform: rotate3d(0, 1, 0, -70deg);
+			visibility: hidden;
+		}
+
+		to {
+			transform: rotate3d(0, 1, 0, -70deg);
+		}
+	}
+
+	@-webkit-keyframes sapMNavItemDoorInNext {
+		from {
+			-webkit-transform: rotate3d(0, 1, 0, 80deg);
+			opacity: 0;
+		}
+		46% {
+			-webkit-transform: rotate3d(0, 1, 0, 80deg);
+			opacity: 0;
+		}
+		to {
+			-webkit-transform: rotate3d(0, 1, 0, 0deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes sapMNavItemDoorInNext {
+		from {
+			transform: rotate3d(0, 1, 0, 80deg);
+			visibility: hidden;
+			opacity: 0;
+		}
+		45% {
+			transform: rotate3d(0, 1, 0, 80deg);
+			visibility: hidden;
+			opacity: 0;
+		}
+		46% {
+			transform: rotate3d(0, 1, 0, 80deg);
+			visibility: visible;
+			opacity: 0;
+		}
+		to {
+			transform: rotate3d(0, 1, 0, 0deg);
+			opacity: 1;
+		}
+	}
+
+	@-webkit-keyframes sapMNavItemDoorOutPrevious {
+		from {
+			-webkit-transform: rotate3d(0, 1, 0, 0deg);
+			visibility: visible;
+			opacity: 1;
+		}
+		40% {
+			-webkit-transform: rotate3d(0, 1, 0, 80deg);
+			visibility: visible;
+			opacity: 0;
+		}
+		41% {
+			-webkit-transform: rotate3d(0, 1, 0, 80deg);
+			visibility: hidden;
+		}
+		to {
+			-webkit-transform: rotate3d(0, 1, 0, 80deg);
+		}
+	}
+
+	@keyframes sapMNavItemDoorOutPrevious {
+		from {
+			transform: rotate3d(0, 1, 0, 0deg);
+			visibility: visible;
+			opacity: 1;
+		}
+		40% {
+			transform: rotate3d(0, 1, 0, 80deg);
+			visibility: visible;
+			opacity: 0;
+		}
+		41% {
+			transform: rotate3d(0, 1, 0, 80deg);
+			visibility: hidden;
+		}
+		to {
+			transform: rotate3d(0, 1, 0, 80deg);
+		}
+	}
+
+	@-webkit-keyframes sapMNavItemDoorOutNext {
+		from {
+			-webkit-transform: rotate3d(0, 1, 0, -70deg);
+			opacity: 0;
+		}
+		46% {
+			-webkit-transform: rotate3d(0, 1, 0, -70deg);
+			opacity: 0;
+		}
+
+		to {
+			-webkit-transform: rotate3d(0, 1, 0, 0deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes sapMNavItemDoorOutNext {
+		from {
+			transform: rotate3d(0, 1, 0, -70deg);
+			visibility: hidden;
+			opacity: 0;
+		}
+		45% {
+			transform: rotate3d(0, 1, 0, -70deg);
+			visibility: hidden;
+			opacity: 0;
+		}
+		46% {
+			transform: rotate3d(0, 1, 0, -70deg);
+			visibility: visible;
+			opacity: 0;
+		}
+
+		to {
+			transform: rotate3d(0, 1, 0, 0deg);
+			opacity: 1;
+		}
+	}
+
+	.sapMNavDoor {
+		-webkit-perspective: 1000;
+		perspective: 1000px;
+		-webkit-perspective-origin: 0% 50%;
+		perspective-origin: 0% 50%;
+	}
+
+	.sapMNavItem.sapMNavItemDoorInPrevious {
+		-webkit-animation: sapMNavItemDoorInPrevious .8s;
+		animation: sapMNavItemDoorInPrevious .8s;
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	.sapMNavItem.sapMNavItemDoorInNext {
+		-webkit-animation: sapMNavItemDoorInNext .8s;
+		animation: sapMNavItemDoorInNext .8s;
+		visibility: visible;
+	}
+
+	.sapMNavItem.sapMNavItemDoorOutPrevious {
+		-webkit-animation: sapMNavItemDoorOutPrevious .8s;
+		animation: sapMNavItemDoorOutPrevious .8s;
+		visibility: hidden;
+		opacity: 0;
+	}
+
+	.sapMNavItem.sapMNavItemDoorOutNext {
+		-webkit-animation: sapMNavItemDoorOutNext .8s;
+		animation: sapMNavItemDoorOutNext .8s;
+		visibility: visible;
+	}
+
+	.sapMNavItem.sapMNavItemDooring {
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out;
+		-webkit-transform-origin: 0% 50%;
+		transform-origin: 0% 50%;
+	}
+
+}