@openui5/sap.m 1.133.1 → 1.135.0

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

@@ -3,16 +3,14 @@
 /* Base theme                      */
 /* =============================== */
 
-/* ============================================= */
-/* Common style                                  */
-/* ============================================= */
-
+/* Common style */
 .sapMTabStrip {
 	position: relative;
 	height: 3rem;
-	background: @sapUiPageHeaderBackground;
+	background: var(--sapPageHeader_Background);
 	box-shadow: @sapUiShadowHeader;
 	box-sizing: border-box;
+
 	.sapMTSLeftOverflowButtons {
 		position: absolute;
 		margin-left: 0.25rem;
@@ -23,14 +21,16 @@
 		height: 100%;
 		border-bottom: 2px solid transparent;
 	}
+
 	.sapMTSLeftOverflowButtons::after {
-		content: "";
+		content: '';
 		position: absolute;
 		height: 2px;
 		left: 0;
 		right: 0;
 		bottom: -2px;
 	}
+
 	.sapMTSTabsContainer {
 		height: 100%;
 		white-space: nowrap;
@@ -39,10 +39,12 @@
 		right: 7.5rem;
 		overflow: hidden;
 		outline: none;
+
 		.sapMTSTabs {
 			float: left;
 			height: 100%;
 			margin-right: -999em;
+
 			.sapMTabStripItem {
 				position: relative;
 				box-sizing: border-box;
@@ -54,40 +56,48 @@
 				-moz-user-select: none;
 				user-select: none;
 				background: transparent;
-				color: @sapUiGroupTitleTextColor;
+				color: var(--sapGroup_TitleTextColor);
 				border-bottom: solid 0.125rem transparent;
+
 				&.sapMTabStripItemSelected {
-					color: @sapUiGroupTitleTextColor;
-					border-bottom: solid 0.125rem @sapUiSelected;
+					color: var(--sapGroup_TitleTextColor);
+					border-bottom: solid 0.125rem var(--sapSelectedColor);
 				}
+
 				&:focus {
 					outline: none;
 				}
+
 				&:focus::before {
 					pointer-events: none;
-					content: "";
+					content: '';
 					position: absolute;
 					top: 1px;
 					left: 1px;
 					right: 1px;
 					bottom: 1px;
-					border: 1px dotted @sapUiContentFocusColor;
+					border: 1px dotted var(--sapContent_FocusColor);
 				}
+
 				.sapMTabStripItemLabel {
 					vertical-align: middle;
 					font-size: @sapMFontMediumSize;
 				}
+
 				.sapMTSItemCloseBtnCnt {
 					display: inline-block;
 					width: 2rem;
 					text-align: center;
 					vertical-align: middle;
+
 					.sapMBtn {
 						opacity: 1;
 					}
 				}
+
 				&.sapMTabStripItemModified {
-					.sapMTabStripItemModifiedSymbol:after {
+
+					.sapMTabStripItemModifiedSymbol::after {
 						content: '*';
 						vertical-align: middle;
 					}
@@ -95,6 +105,7 @@
 			}
 		}
 	}
+
 	.sapMTSRightOverflowButtons {
 		position: absolute;
 		right: 5.5rem;
@@ -104,22 +115,26 @@
 		box-sizing: border-box;
 		height: 100%;
 		border-bottom: 2px solid transparent;
+
 		& .sapMBtn.sapMBtnBase {
 			padding-left: 1rem;
 		}
 	}
+
 	.sapMTSRightOverflowButtons::after {
-		content: "";
+		content: '';
 		position: absolute;
 		height: 2px;
 		left: 0;
 		right: 0;
 		bottom: -2px;
 	}
+
 	.sapMTSTouchArea {
 		height: 100%;
 		position: absolute;
 		right: 0.25rem;
+
 		.sapMTSAddNewTabBtn {
 			margin-left: 0.5rem;
 		}
@@ -137,14 +152,14 @@
 
 .sapMTSOverflowSelectListItem .sapMTabStripItemAddText,
 .sapMTabStripItem .sapMTabStripItemAddText {
-	color: @sapUiContentLabelColor;
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontSmallSize;
+	color: var(--sapContent_LabelColor);
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
 }
 .sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMTSOverflowSelectListItem .sapMTabStripSelectListItemCloseBtn .sapMBtnIcon,
 .sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMTSOverflowSelectListItem .sapMSelectListItemText .sapMTabContIcon.sapUiIcon,
 .sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMTSOverflowSelectListItem .sapMTabStripItemAddText {
-	color: @sapUiListActiveTextColor;
+	color: var(--sapList_Active_TextColor);
 }
 
 .sapMTSTexts {
@@ -154,7 +169,7 @@
 
 .sapMTabContIcon.sapUiIcon {
 	font-size: 2rem;
-	color: @sapUiSelected;
+	color: var(--sapSelectedColor);
 	vertical-align: middle;
 	padding-right: 0.5rem;
 	cursor: pointer;
@@ -166,12 +181,13 @@
 	vertical-align: middle;
 	padding-right: 0.5rem;
 }
-/* ============================================= */
-/* Phone                                         */
-/* ============================================= */
+
+/* Phone */
 
 html.sap-phone {
+
 	.sapMTabStrip {
+
 		.sapMSltWithArrow {
 			visibility: visible;
 			display: none;
@@ -179,6 +195,7 @@ html.sap-phone {
 
 		.sapMTabStripItem {
 			line-height: 2.5rem;
+
 			.sapMTSItemCloseBtnCnt {
 				position: absolute;
 				right: 0;
@@ -205,21 +222,17 @@ html.sap-phone {
 	}
 
 	.sapMTabContainer .sapMTabStrip .sapMTSTabsContainer {
-		right: 0rem;
+		right: 0;
 	}
 }
 
-/* ============================================= */
-/* Other styles                                  */
-/* ============================================= */
+/* Other styles */
 
 html[data-sap-ui-animation='on'] .sapMTabStrip .sapMTSTabsContainer .sapMTSTabs .sapMTabStripItem {
-	-webkit-transition: padding 0.3s;
 	transition: padding 0.3s;
 }
 
 html[data-sap-ui-animation='on'] .sapMTabStrip .sapMTSTabsContainer .sapMTSTabs .sapMTabStripItem .sapMTSItemCloseBtnCnt .sapMBtn {
-	-webkit-transition: opacity 0.3s;
 	transition: opacity 0.3s;
 }
 
@@ -231,7 +244,6 @@ html[dir=rtl] .sapMTabStrip .sapMTSRightOverflowButtons {
 html[dir=ltr] .sapMTabStrip .sapMTSLeftOverflowButtons::after,
 html[dir=rtl] .sapMTabStrip .sapMTSRightOverflowButtons::after {
 	background: linear-gradient(90deg, @sapUiObjectHeaderBorderColor 0%, @sapUiObjectHeaderBorderColor 75%, fade(@sapUiObjectHeaderBorderColor, 0) 100%);
-
 }
 
 html[dir=ltr] .sapMTabStrip .sapMTSRightOverflowButtons,
@@ -260,43 +272,50 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 	font-size: 1rem;
 }
 
-/* ============================================= */
-/* Form factor cozy                              */
-/* ============================================= */
+/* Form factor cozy */
 
 .sapUiSizeCozy .sapMTabStrip {
 	height: 3rem;
+
 	.sapMTSLeftOverflowButtons {
 		width: 3.5rem;
 	}
+
 	.sapMTSRightOverflowButtons {
 		right: 5.75rem;
 		width: 4rem;
 	}
 }
 
-/* ============================================= */
-/* Form factor compact                           */
-/* ============================================= */
+/* Form factor compact */
 
 .sapUiSizeCompact .sapMTabStrip {
 	height: 2.5rem;
+
 	.sapMTSTabsContainer {
+
 		.sapMTSTabs {
+
 			.sapMTabStripItem {
 				padding: 0 1rem;
 				line-height: 2.5rem;
+
 				.sapMTSItemCloseBtnCnt {
 					width: 1.5rem;
 					position: absolute;
 					right: 0;
+
 					.sapMBtn {
 						opacity: 0;
 					}
 				}
-				&.sapMTabStripItemSelected, &:hover {
+
+				&.sapMTabStripItemSelected,
+				&:hover {
 					padding: 0 1.5rem 0 0.5rem;
+
 					.sapMTSItemCloseBtnCnt {
+
 						.sapMBtn {
 							opacity: 1;
 						}
@@ -305,29 +324,31 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 			}
 		}
 	}
+
 	.sapMTSTouchArea .sapMBtn,
 	.sapMTSLeftOverflowButtons .sapMBtn,
 	.sapMTSRightOverflowButtons .sapMBtn {
 		height: 2.5rem;
 	}
+
 	.sapMTSTouchArea .sapMSlt {
 		margin-top: 0.49375rem;
 	}
 }
 
 .sapUiSizeCompact {
+
 	.sapMTabContIcon.sapUiIcon {
 		font-size: 1.5rem;
 	}
+
 	.sapMTabContIcon.sapMImg {
 		height: 1.5rem;
 		width: 1.5rem;
 	}
 }
 
-/* ============================================= */
-/* Visibility                                    */
-/* ============================================= */
+/* Visibility */
 
 .sapMTSOverflowSelect,
 .sapUiSizeCompact .sapMTSOverflowSelectListItem .sapMTabStripSelectListItemCloseBtn {
@@ -342,27 +363,29 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 	visibility: visible;
 }
 
-/* ============================================= */
-/* Overflow Select                               */
-/* ============================================= */
+/* Overflow Select */
 
-.sapMTSOverflowSelectLabelModified:after {
+.sapMTSOverflowSelectLabelModified::after {
 	content: '*';
 	display: inherit;
 }
 
 .sapMTSOverflowSelectListItem {
 	padding-right: 0.25rem;
+
 	.sapMSelectListItemText {
 		height: 100%;
 		float: left;
 		margin: 0;
 	}
+
 	&.sapMTSOverflowSelectListItemModified {
-		.sapMSelectListItemText:after {
+
+		.sapMSelectListItemText::after {
 			content: '*';
 		}
 	}
+
 	.sapMTabStripSelectListItemCloseBtn {
 		height: 100%;
 		width: 2.25rem;
@@ -372,6 +395,7 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 }
 
 .sapMTSOverflowSelectListItem .sapMTabStripSelectListItemCloseBtn {
+
 	.sapMBtnInner {
 		display: block;
 		height: 1.625rem;
@@ -380,6 +404,7 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 		padding: 0;
 		margin: 0 auto;
 	}
+
 	.sapMBtnIcon {
 		line-height: 1.5rem;
 		width: 100%;
@@ -388,39 +413,46 @@ html .sapMTabStripSelectListItemCloseBtn .sapMBtnInner {
 	}
 }
 
-/* ============================================= */
-/* Overflow Select compact form factor           */
-/* ============================================= */
+/* Overflow Select compact form factor */
 
 .sapUiSizeCompact {
+
 	.sapMTabStripSelectListItemCloseBtn {
 		width: 2rem;
+
 		.sapMBtnContent {
 			line-height: 1.25rem;
 		}
+
 		.sapMBtnInner  {
 			height: 1.25rem;
 			min-width: 1.25rem;
 			width: 1.25rem;
 		}
+
 		.sapMBtnIcon {
 			line-height: 1.15rem;
 			font-size: 0.75rem;
 		}
+
 		.sapMBtnInner.sapMBtnIconFirst {
 			padding: 0;
+
 			.sapMBtnIcon {
 				margin: 0;
 				padding: 0;
 			}
 		}
 	}
+
 	.sapMTSItemCloseBtnCnt .sapMBtn {
 		height: 2.5rem;
 	}
+
 	.sapMTSOverflowSelectListItem.sapMSelectListItemBase {
 		height: 2.5rem;
 	}
+
 	.sapMTSOverflowSelectListItem.sapMSelectListItem {
 		line-height: 2.5rem;
 	}