@openui5/sap.m 1.133.1 → 1.135.0

package/src/sap/m/themes/base/SuggestionsPopover.less

@@ -1,7 +1,7 @@
-/* ================================ */
+/* ========================================= */
 /* CSS for control sap.m/SuggestionsPopover  */
-/* Base theme                       */
-/* ================================ */
+/* Base theme                                */
+/* ========================================= */
 
 @_sap_m_SuggestionsPopover_ItemMinHeight: 2.5rem;
 @_sap_m_SuggestionsPopover_ItemMinHeightCompact: 2rem;
@@ -14,12 +14,13 @@
 @_sap_m_SuggestionsPopover_TabularGroupItemHeightCompact: 2rem;
 
 .sapMSuggestionsPopover {
+
 	.sapMListUl > .sapMLIB.sapMSLIWrapping {
 		min-height: @_sap_m_SuggestionsPopover_ItemMinHeight;
 	}
 
 	.sapMSLIWrapping > .sapMLIBContent > .sapMSLIDiv {
-		padding: 0.25rem 0rem;
+		padding: 0.25rem 0;
 	}
 
 	.sapMListUl > .sapMLIB.sapMGHLI {
@@ -44,7 +45,7 @@
 
 div.sapMSuggestionsPopover {
 	border: none;
-	box-shadow: @sapUiContentShadow1;
+	box-shadow: var(--sapContent_Shadow1);
 }
 
 .sapMSuggestionsPopover.sapMPopover.sapMSuggestionPopoverDefaultWidth {
@@ -60,6 +61,7 @@ div.sapMSuggestionsPopover {
 }
 
 .sapUiSizeCompact {
+
 	.sapMSuggestionsPopover,
 	&.sapMSuggestionsPopover {
 
@@ -102,12 +104,12 @@ div.sapMSuggestionsPopover {
 
 .sapMSuggestionsPopover .sapMDLIValue {
 	font-size: @sapMFontMediumSize;
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 	padding-right: 1rem;
 }
 
 .sapMSuggestionsPopover .sapMLIBActive .sapMDLIValue {
-	color: @sapUiListActiveTextColor;
+	color: var(--sapList_Active_TextColor);
 }
 
 .sapMSuggestionsPopover .sapMDLILabel {
@@ -119,27 +121,27 @@ div.sapMSuggestionsPopover {
 }
 
 div.sapMSuggestionsPopover .sapMSuggestionsPopoverValueState {
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	line-height: normal;
 	padding: 0.5625rem 1rem;
 
 	&.sapMSuggestionsPopoverErrorState {
-		background: @sapUiErrorBG;
-		color: @sapUiBaseText;
+		background: var(--sapErrorBackground);
+		color: var(--sapTextColor);
 	}
 
 	&.sapMSuggestionsPopoverInformationState {
-		background: @sapUiInformationBG;
+		background: var(--sapInformationBackground);
 	}
 
 	&.sapMSuggestionsPopoverSuccessState {
-		background: @sapUiSuccessBG;
-		color: @sapUiBaseText;
+		background: var(--sapSuccessBackground);
+		color: var(--sapTextColor);
 	}
 
 	&.sapMSuggestionsPopoverWarningState {
-		background: @sapUiWarningBG;
-		color: @sapUiBaseText;
+		background: var(--sapWarningBackground);
+		color: var(--sapTextColor);
 	}
 
 	.sapMSuggestionsPopoverTitle.sapMTitle {
@@ -149,4 +151,4 @@ div.sapMSuggestionsPopover .sapMSuggestionsPopoverValueState {
 
 .sapMSuggestionsPopover .sapMSuggestionsPopoverNoneState {
 	display: none;
-}
+}

package/src/sap/m/themes/base/Switch.less

@@ -3,18 +3,12 @@
 /* Base theme                    */
 /* ============================= */
 
-/* ------------------------------ */
-/* Switch required variables      */
-/* ------------------------------ */
-
+/* Switch required variables */
 @_sap_m_Switch_OnPosition: -32;
 @_sap_m_Switch_OffPosition: 0;
 @_sap_m_Switch_TransitionTime: 175;
 
-/* ------------------------------ */
-/* Switch common styles           */
-/* ------------------------------ */
-
+/* Switch common styles */
 .sapMSwtText,
 .sapMSwtHandle,
 .sapMSwtInner {
@@ -31,10 +25,7 @@
 	box-sizing: border-box;
 }
 
-/* ------------------------------ */
-/* Switch container               */
-/* ------------------------------ */
-
+/* Switch container */
 .sapMSwtCont {
 	display: inline-block;
 	vertical-align: top;
@@ -53,22 +44,15 @@
 	display: none;
 }
 
-/* ------------------------------ */
-/* Switch                         */
-/* ------------------------------ */
-
+/* Switch */
 .sapMSwt {
 	outline: none;
-
 	width: 4rem;
 	height: 2rem;
-
 	/* use px instead of rem, borders sized in "rem" disappear when the page is zoomed out in Chrome. */
 	border: 1px solid;
-
 	/* 1px margin from left and right, so the outline doesn't get cropped when focuses */
 	margin: 0 1px;
-
 	/* note: some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
 	but does support the long-hand properties for each corner like "border-top-left-radius" */
 	border-top-left-radius: 1rem;
@@ -79,25 +63,23 @@
 }
 
 /* background */
-
 .sapMSwtOn:not(.sapMSwtAcceptReject) {
 	background: @sapUiToggleButtonPressedBackground;
 	border-color: @sapUiToggleButtonPressedBorderColor;
 }
 
 .sapMSwtOff:not(.sapMSwtAcceptReject) {
-	background: @sapUiButtonBackground;
-	border-color: @sapUiButtonBorderColor;
+	background: var(--sapButton_Background);
+	border-color: var(--sapButton_BorderColor);
 }
 
 /* hover */
-
 .sapMSwt.sapMSwtHoverable:hover {
-	background: @sapUiButtonHoverBackground;
+	background: var(--sapButton_Hover_Background);
 }
 
 .sapMSwt.sapMSwtHoverable:not(.sapMSwtAcceptReject):hover {
-	border-color: @sapUiButtonHoverBorderColor;
+	border-color: var(--sapButton_Hover_BorderColor);
 }
 
 .sapMSwtHoverable.sapMSwtOn:not(.sapMSwtAcceptReject):hover {
@@ -106,15 +88,11 @@
 }
 
 /* focus */
-
 .sapMSwtDisabled:focus {
 	outline: none;
 }
 
-/* ------------------------------ */
-/* Switch inner                   */
-/* ------------------------------ */
-
+/* Switch inner */
 .sapMSwtInner {
 	width: 100%;
 	height: 100%;
@@ -131,22 +109,17 @@
 /* CSS transitions */
 
 .sapMSwtTrans > .sapMSwtInner {
-	-webkit-transition: left 0.125s ease-in-out;
 	transition: left 0.125s ease-in-out;
 }
 
 html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
-	-webkit-transition-property: right;
 	transition-property: right;
 }
 
-/* ------------------------------ */
-/* Switch text                    */
-/* ------------------------------ */
-
+/* Switch text */
 .sapMSwtText {
 	text-align: center;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 	width: 100%;
 	line-height: 2rem;
 }
@@ -167,7 +140,7 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 }
 
 .sapMSwtOff .sapMSwtText {
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 }
 
 .sapMSwtTextOff {
@@ -179,20 +152,19 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 }
 
 .sapMSwt.sapMSwtDefault {
+
 	&.sapMSwtOff .sapMSwtTextOn,
 	&.sapMSwtOn .sapMSwtTextOff {
+
 		.sapMSwtLabel {
-			// Special case - the currently invisible label should be smaller
-			// so the text won't get in the visible part of the control
+			/* Special case - the currently invisible label should be smaller */
+			/* so the text won't get in the visible part of the control */
 			width: 1.6rem;
 		}
 	}
 }
 
-/* ------------------------------ */
-/* Switch handler                 */
-/* ------------------------------ */
-
+/* Switch handler */
 .sapMSwtHandle {
 	display: block;
 	top: 0;
@@ -202,8 +174,8 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 	height: 1.5rem;
 	left: 2.25rem;
 
-	// note: some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
-	// but does support the long-hand properties for each corner like "border-top-left-radius"
+	/* note: some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property */
+	/* but does support the long-hand properties for each corner like "border-top-left-radius" */
 	border-top-left-radius: 0.75rem;
 	border-top-right-radius: 0.75rem;
 	border-bottom-right-radius: 0.75rem;
@@ -213,7 +185,6 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 }
 
 /* background */
-
 .sapMSwtOn .sapMSwtHandle {
 	background: transparent;
 	box-sizing: border-box;
@@ -223,67 +194,52 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 .sapMSwtOff .sapMSwtHandle {
 	background: transparent;
 	box-sizing: border-box;
-	border: 2px solid @sapUiButtonBorderColor;
+	border: 2px solid var(--sapButton_BorderColor);
 }
 
-/* ====================================================== */
-/* switch type "AcceptReject"                             */
-/* ====================================================== */
 
-/* ----------------------------------------- */
-/* Switch type "AcceptReject" common styles  */
-/* ----------------------------------------- */
+/* Switch type "AcceptReject" */
+/* Switch type "AcceptReject" common styles */
 
 /* background */
-
 .sapMSwtAcceptReject.sapMSwtOn {
-	border-color: @sapUiPositiveElement;
+	border-color: var(--sapPositiveElementColor);
 }
 
 .sapMSwtAcceptReject.sapMSwtOff {
-	border-color: @sapUiNegativeElement;
+	border-color: var(--sapNegativeElementColor);
 }
 
-/* ------------------------------ */
-/* Switch                         */
-/* ------------------------------ */
+/* Switch */
 
 /* background */
-
 .sapMSwtAcceptReject.sapMSwt {
-	background: @sapUiButtonBackground;
+	background: var(--sapButton_Background);
 }
 
-/* ------------------------------ */
-/* Switch text                    */
-/* ------------------------------ */
-
+/* Switch text */
 .sapMSwtAcceptReject .sapMSwtLabelOn::before,
 .sapMSwtAcceptReject .sapMSwtLabelOff::before {
-	font-family: 'SAP-icons';
+	font-family: var(--sapContent_IconFontFamily);
 	speak: none;
 }
 
 /* icon fonts */
-
 .sapMSwtAcceptReject .sapMSwtLabel {
-	font-size: @sapMFontLargeSize;
+	font-size: var(--sapFontLargeSize);
 }
 
 .sapMSwtAcceptReject .sapMSwtLabelOn::before {
-	content: "\e05b";
-	color: @sapUiPositiveElement;
+	content: '\e05b';
+	color: var(--sapPositiveElementColor);
 }
 
 .sapMSwtAcceptReject .sapMSwtLabelOff::before {
-	content: "\e03e";
-	color: @sapUiNegativeElement;
+	content: '\e03e';
+	color: var(--sapNegativeElementColor);
 }
 
-/* ------------------------------ */
-/* Switch handler                 */
-/* ------------------------------ */
-
+/* Switch handler */
 .sapMSwtAcceptReject .sapMSwtHandle {
 	background: transparent;
 	border-style: solid;
@@ -291,47 +247,34 @@ html[dir=rtl] .sapMSwtTrans > .sapMSwtInner {
 }
 
 .sapMSwtAcceptReject.sapMSwtOn .sapMSwtHandle {
-	border-color: @sapUiPositiveElement;
+	border-color: var(--sapPositiveElementColor);
 }
 
 .sapMSwtAcceptReject.sapMSwtOff .sapMSwtHandle {
-	border-color: @sapUiNegativeElement;
+	border-color: var(--sapNegativeElementColor);
 }
 
-/* ============ */
-/* compact size */
-/* ============ */
 
-/* ------------------------------ */
-/* Switch container               */
-/* ------------------------------ */
+/* compact size */
+/* Switch container */
 
 .sapUiSizeCompact .sapMSwtCont {
 	padding-top: 0.125rem;
 	padding-bottom: 0.125rem;
 }
 
-/* ------------------------------ */
-/* Switch                         */
-/* ------------------------------ */
-
+/* Switch */
 .sapUiSizeCompact .sapMSwt {
 	width: 3.5rem;
 	height: 1.625rem;
 }
 
-/* ------------------------------ */
-/* Switch text                    */
-/* ------------------------------ */
-
+/* Switch text */
 .sapUiSizeCompact .sapMSwtText {
 	line-height: 1.625rem;
 }
 
-/* ------------------------------ */
-/* Switch handler                 */
-/* ------------------------------ */
-
+/* Switch handler */
 .sapUiSizeCompact .sapMSwtHandle {
 	height: 1rem;
 	width: 1rem;

package/src/sap/m/themes/base/TabContainer.less

@@ -4,15 +4,14 @@
 /* =================================== */
 
 .sapMTabContainer {
-	display: -webkit-flex;
 	display: flex;
-	-webkit-flex-direction: column;
 	flex-direction: column;
 	height: 100%;
+
 	.sapMTabContainerContent {
 		position: relative;
-		-webkit-flex-grow: 1;
 		flex-grow: 1;
+
 		.sapMTabContainerInnerContent {
 			position: absolute;
 			top: 0;
@@ -28,16 +27,20 @@
 .sapUiContainerContentPadding(~".sapMTabContainer", ~"> .sapMTabContainerContent > .sapMTabContainerInnerContent");
 
 .sapMTabContainer {
-	.sapMTabContainerContentTransparent{
+
+	.sapMTabContainerContentTransparent {
 		background-color: transparent;
 	}
-	.sapMTabContainerContentList{
-		background-color: @sapUiGroupContentBackground;
+
+	.sapMTabContainerContentList {
+		background-color: var(--sapGroup_ContentBackground);
 	}
-	.sapMTabContainerContentSolid{
-		background-color: @sapUiShellBackground;
+
+	.sapMTabContainerContentSolid {
+		background-color: var(--sapShell_Background);
 	}
-	.sapMTabContainerContentStandard{
-		background-color: @sapUiBaseBG;
+
+	.sapMTabContainerContentStandard {
+		background-color: var(--sapBackgroundColor);
 	}
 }