@openui5/sap.tnt 1.114.2 → 1.114.4

package/src/sap/tnt/themes/base/SideNavigation.less

@@ -5,9 +5,16 @@
 
 @_sap_tnt_SideNavigation_Width: 15rem;
 @_sap_tnt_SideNavigation_CollapsedWidth: 3rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorMargin: 0.25rem 0.875rem 0.25rem 0.875rem;
+@_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed: 0.25rem 0.5rem 0.25rem 0.5rem;
 @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor: @sapUiGroupContentBorderColor;
+@_sap_tnt_SideNavigation_NavigationSeparatorRadius: unset;
 @_sap_tnt_SideNavigation_NavigationSeparatorHeight: 1px;
 @_sap_tnt_SideNavigation_TriangleColor: @sapUiContentIconColor;
+@_sap_tnt_SideNavigation_BorderRadius: 0;
+@_sap_tnt_SideNavigation_PhoneBorderRadius: 0;
+@_sap_tnt_SideNavigation_BoxShadow: none;
+@_sap_tnt_SideNavigation_TriangleDisplay: block;
 
 .sapTntSideNavigation {
   display: flex;
@@ -17,10 +24,16 @@
   overflow: hidden;
   background: @sapUiListBackground;
   border-right: 1px solid @sapUiGroupContentBorderColor;
+	box-shadow: @_sap_tnt_SideNavigation_BoxShadow;
+	border-radius: @_sap_tnt_SideNavigation_BorderRadius;
+	width: @_sap_tnt_SideNavigation_Width;
 }
 
-.sapTntSideNavigation {
-  width: @_sap_tnt_SideNavigation_Width;
+html.sap-phone,
+html.sap-tablet:not(html.sap-combi) {
+	.sapTntSideNavigation {
+		border-radius: @_sap_tnt_SideNavigation_PhoneBorderRadius;
+	}
 }
 
 .sapTntSideNavigation.sapTntSideNavigationNotExpandedWidth {
@@ -33,15 +46,11 @@
 		display: none;
 	}
 	.sapTntSideNavigationSeparator {
-		margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-	}
-
-	.sapTntSideNavigationFlexible {
-		padding-right: @_sap_tnt_SideNavigation_CollapsedWidth;
-		width: 6rem;
+		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
 	}
 
 	.sapTnTNavLINotExpandedTriangle:not(.sapTntNavLIItemDisabled):after {
+		display: @_sap_tnt_SideNavigation_TriangleDisplay;
 		content: "";
 		width: 0;
 		height: 0;
@@ -66,10 +75,11 @@
 }
 
 .sapTntSideNavigationSeparator {
-	margin: 0.25rem 0.875rem 0.25rem 0.875rem;
+	margin: @_sap_tnt_SideNavigation_NavigationSeparatorMargin;
 	height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
 	min-height: @_sap_tnt_SideNavigation_NavigationSeparatorHeight;
 	background-color: @_sap_tnt_SideNavigation_NavigationSeparatorBackgroundColor;
+	border-radius: @_sap_tnt_SideNavigation_NavigationSeparatorRadius;
 }
 
 .sapTntSideNavigationFixed {
@@ -125,18 +135,18 @@
 
 .sapUiSizeCompact {
 
-  .sapTntSideNavigationNotExpanded {
+	.sapTntSideNavigationNotExpanded {
 
-    .sapTntSideNavigationSeparator {
-     	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-    }
-  }
+		.sapTntSideNavigationSeparator {
+			margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
+		}
+	}
 
-  .sapTntSideNavigationSeparator {
-	margin: 0.25rem 0.5rem 0.25rem 0.5rem;
-  }
+	.sapTntSideNavigationSeparator {
+		margin: @_sap_tnt_SideNavigation_NavigationSeparatorMarginCollapsed;
+	}
 
-  .sapTntSideNavigationScrollIcon {
-    padding: 0.5rem 0;
-  }
+	.sapTntSideNavigationScrollIcon {
+		padding: 0.5rem 0;
+	}
 }

package/src/sap/tnt/themes/base/ToolHeader.less

@@ -2,7 +2,10 @@
 /* CSS for control sap.tnt/ToolHeader  */
 /* Base theme                          */
 /* =================================== */
+
 @_sap_tnt_ToolHeader_Height: 3rem;
+@_sap_tnt_ToolHeader_BorderRadius: 0;
+@_sap_tnt_ToolHeader_BoxShadow: none;
 @_sap_tnt_ToolHeader_AvatarBackground: lighten(saturate(spin(@sapUiAccent6, 348), 36), 28);
 @_sap_tnt_ToolHeader_AvatarColor: @sapUiBaseText;
 @_sap_tnt_ToolHeader_BorderColor: contrast(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
@@ -19,6 +22,8 @@
 
 .sapTntToolHeader.sapMTB {
 	height: @_sap_tnt_ToolHeader_Height;
+	border-radius: @_sap_tnt_ToolHeader_BorderRadius;
+	box-shadow: @_sap_tnt_ToolHeader_BoxShadow;
 }
 
 // ==========================================================================

package/src/sap/tnt/themes/base/ToolPage.less

@@ -6,12 +6,24 @@
 /* ==========================================================================
    Variables
    ========================================================================== */
-
-@_sap_tnt_ToolPage_AsideWidth : 15rem;
-@_sap_tnt_ToolPage_AsideWidthOnTablet : 3rem;
-@_sap_tnt_ToolPage_HeaderHeight : 3rem;
 @_sap_tnt_ToolPage_AnimationDuration : 0.3s;
-@_sap_tnt_ToolPage_HeaderShadow: none;
+@_sap_tnt_ToolPage_Paddings: 0;
+@_sap_tnt_ToolPage_PaddingsTablet: 0;
+@_sap_tnt_ToolPage_PaddingsPhone: 0;
+@_sap_tnt_ToolPage_Background: darken(@sapUiBaseBG, 4);
+@_sap_tnt_ToolPage_AsideMargins: 0;
+@_sap_tnt_ToolPage_AsideMarginsPhone: 0;
+@_sap_tnt_ToolPage_ContentMargins: 0;
+@_sap_tnt_ToolPage_ContentMarginsPhone: 0;
+@_sap_tnt_ToolPage_ContentShadow: none;
+@_sap_tnt_ToolPage_ContentBackgroundStandard: none;
+@_sap_tnt_ToolPage_ContentBackgroundSolid: none;
+@_sap_tnt_ToolPage_ContentBackgroundTransparent: none;
+@_sap_tnt_ToolPage_ContentBackgroundList: none;
+@_sap_tnt_ToolPage_ContentBorderRadius: 0;
+@_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone: 0;
+@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform: -100%;
+@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl: 100%;
 
 /* ==========================================================================
    Root element
@@ -28,37 +40,24 @@
 
   box-sizing: border-box;
   overflow: hidden;
+  padding: @_sap_tnt_ToolPage_Paddings;
+  background: @_sap_tnt_ToolPage_Background;
 }
 
 /* ==========================================================================
    Header
    ========================================================================== */
-.sapTntToolPageHeader {
-  height: @_sap_tnt_ToolPage_HeaderHeight;
-}
 
 .sapTntToolPageHeaderWrapper {
-  box-shadow: @_sap_tnt_ToolPage_HeaderShadow;
   z-index: 2; // bring header above content wrapper to draw drop shadow over the content
 }
 
-/* ==========================================================================
-   Subheader
-   ========================================================================== */
-.sapTntToolPage .sapTntToolPageHeader + .sapTntToolPageHeader {
-  height: auto;
-
-  .sapTntToolHeader {
-    height: auto;
-  }
-}
-
 /* ==========================================================================
    Content wrapper
    ========================================================================== */
 .sapTntToolPageContentWrapper {
   display: flex;
-  flex-grow: 1;
+  flex: 1;
   min-height: 0; // fixes flex chrome issue
   position: relative;
 }
@@ -71,6 +70,8 @@
   flex-direction: column;
 
   will-change: transform;
+  margin: @_sap_tnt_ToolPage_AsideMargins;
+  z-index: 2;
 }
 
 .sapTntToolPageAsideContent {
@@ -80,65 +81,45 @@
   height: 100%;
 }
 
-html:not([data-sap-ui-animation='off']) .sapTntToolPageMain {
-  transition: padding-left @_sap_tnt_ToolPage_AnimationDuration, transform @_sap_tnt_ToolPage_AnimationDuration;
-}
-
 html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
   transition: transform @_sap_tnt_ToolPage_AnimationDuration;
 }
 
-.sap-desktop,
-.sap-tablet {
-  .sapTntToolPageAside {
-    width: @_sap_tnt_ToolPage_AsideWidth;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    z-index: 1;
+html.sap-tablet:not(html.sap-combi) {
+  .sapTntToolPage {
+    padding: @_sap_tnt_ToolPage_PaddingsTablet;
   }
 
-  .sapTntToolPageAside + .sapTntToolPageMain {
-    padding-left: @_sap_tnt_ToolPage_AsideWidth;
+  .sapTntToolPageMain {
+    border-radius: @_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone;
   }
 }
 
-.sap-desktop,
-.sap-tablet {
-  .sapTntToolPageAsideCollapsed {
-    & > .sapTntToolPageAside {
-      width: @_sap_tnt_ToolPage_AsideWidthOnTablet;
-    }
-
-    & > .sapTntToolPageAside + .sapTntToolPageMain {
-      padding-left: @_sap_tnt_ToolPage_AsideWidthOnTablet;
-    }
+html.sap-phone {
+  .sapTntToolPage {
+    padding: @_sap_tnt_ToolPage_PaddingsPhone;
   }
-}
 
-.sap-phone {
   .sapTntToolPageAside {
-    width: @_sap_tnt_ToolPage_AsideWidth;
     position: absolute;
     left: 0;
     bottom: 0;
     top: 0;
-    z-index: 1;
-  }
+    z-index: 4;
 
-  .sapTntToolPageMain {
-    transform: translateX(@_sap_tnt_ToolPage_AsideWidth);
+    margin: @_sap_tnt_ToolPage_AsideMarginsPhone;
   }
 
   .sapTntToolPageAsideCollapsed {
     .sapTntToolPageAside {
-      transform: translateX(-@_sap_tnt_ToolPage_AsideWidth);
-    }
-    .sapTntToolPageMain {
-      transform: translateX(0);
+      transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransform);
     }
   }
+
+  .sapTntToolPageMain {
+    border-radius: @_sap_tnt_ToolPage_ContentBorderRadiusTabletPhone;
+    margin: @_sap_tnt_ToolPage_ContentMarginsPhone;
+  }
 }
 
 /* Main container
@@ -149,8 +130,27 @@ html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
   flex-direction: column;
   flex: 1;
   min-width: 0; // fixes flex chrome issue
+  overflow: hidden;
+  z-index: 3;
 
   will-change: transform;
+  margin: @_sap_tnt_ToolPage_ContentMargins;
+  box-shadow: @_sap_tnt_ToolPage_ContentShadow;
+  border-radius: @_sap_tnt_ToolPage_ContentBorderRadius;
+  background: @_sap_tnt_ToolPage_ContentBackgroundStandard;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-Solid {
+  background: @_sap_tnt_ToolPage_ContentBackgroundSolid;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-Transparent {
+  background: @_sap_tnt_ToolPage_ContentBackgroundTransparent;
+  box-shadow: none;
+}
+
+.sapTntToolPageMain.sapTntToolPageMainBackground-List {
+  background: @_sap_tnt_ToolPage_ContentBackgroundList;
 }
 
 .sapTntToolPageMainContent {
@@ -170,16 +170,9 @@ html:not([data-sap-ui-animation='off']) .sapTntToolPageAside {
 
 html[dir=rtl] {
   &.sap-phone {
-    .sapTntToolPageMain {
-      transform: translateX(-@_sap_tnt_ToolPage_AsideWidth);
-    }
-
     .sapTntToolPageAsideCollapsed {
       .sapTntToolPageAside {
-        transform: translateX(@_sap_tnt_ToolPage_AsideWidth);
-      }
-      .sapTntToolPageMain {
-        transform: translateX(0);
+        transform: translateX(@_sap_tnt_ToolPage_AsideCollapsedPhoneTransformRtl);
       }
     }
   }