@sapui5/sap.ushell 1.115.1 → 1.117.0

package/src/main/js/sap/ushell/themes/base/ShellAppTitle.less

@@ -1,11 +1,11 @@
-/* =================================================== */
-/* CSS for sap.ui.unfied.ShellAppTitle.control (base)  */
-/* =================================================== */
+/* ================================================== */
+/* CSS for "sap.ushell.ui.shell.ShellAppTitle" (base) */
+/* ================================================== */
 
 /*************** AllMyApps View ***************/
 
 #allMyAppsView--sapUshellAllMyAppsDetailsPage {
-  overflow-x : hidden;
+  overflow-x: hidden;
 }
 
 .sapUshellAllMyAppsBusyIndicator {
@@ -32,7 +32,7 @@
 }
 
 #allMyAppsView--sapUshellDetailsPageHeaderBar {
-  text-align : left;
+  text-align: left;
   height: 2rem;
   background: @sapUiGlobalBackgroundColor;
 }
@@ -90,14 +90,14 @@
 }
 
 .sapUshellAllMyAppsItemSubTitle {
-  margin-top : 0;
+  margin-top: 0;
 }
 
 /* AllMyApp: app item*/
 #allMyAppsView--sapUshellAllMyAppsMasterDetail {
   .sapUshellAllMyAppsListItem {
     height: 3.25rem;
-  /* text vertically aligned in the middle */
+    /* text vertically aligned in the middle */
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.4rem;
@@ -115,14 +115,6 @@
   margin-right: 1rem;
 }
 
-/** --------------------------------------- **/
-/** Styles for Shell Title's Navigation Menu**/
-/** --------------------------------------- **/
-
-#navMenuInnerTitle {
-  width: 18rem;
-}
-
 /** Hierarchy Items - (List Items) Icon Styles **/
 .sapUshellNavigationMenuListItems,
 .sapUshellNavigationMenuTitleItem {
@@ -171,12 +163,13 @@
 /** Shell Application Title control **/
 .sapUshellAppTitle {
   height: 100%;
-  max-width: 100%; /* required for ellipses */
+  /* required for ellipses */
+  max-width: 100%;
+
   box-sizing: border-box;
   padding: 0 0.625rem; // 10px left/right
   line-height: 2.25rem;
   border-radius: 0.25rem;
-
   display: flex;
 }
 
@@ -205,19 +198,6 @@
   border-radius: 0.125rem;
 }
 
-/** Shell Navigation Menu - Popover Header override **/
-.sapUshellAppTitleNavigationMenuPopover .sapMPopoverHeader {
-  width: 100%;
-  height: 0.5rem;
-  box-shadow: none;
-  border-bottom: none;
-}
-
-.sapUshellAppTitleNavigationMenuPopover .sapMPopoverScroll {
-  // prevent a horizontal scroll bar in IE
-  max-width: 100%;
-}
-
 #sapUshellNavRelatedAppsFlexBox {
   flex-wrap: wrap;
 }

package/src/main/js/sap/ushell/themes/base/WorkPage.less

@@ -12,35 +12,18 @@
   }
 
   .sapCepWorkPageTitle {
-    margin: 0 auto;
     padding-top: 2rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
     box-sizing: border-box;
-    padding-bottom: 2rem;
+    padding-bottom: 1rem;
   }
 }
 
+.sapCepWorkPageTitle {
+  margin-left: 2.35rem;
+  margin-right: 2.35rem;
 
-@media (min-width: 600px) and (max-width: 1023px) {
-  .sapCepWorkPageTitle {
-    max-width: 550px;
-  }
-}
-
-@media (min-width: 1024px) and (max-width: 1199px) {
-  .sapCepWorkPageTitle {
-    max-width: 950px;
-  }
-}
-@media (min-width: 1200px) and (max-width: 1499px) {
-  .sapCepWorkPageTitle {
-    max-width: 1008px;
-  }
-}
-
-@media (min-width: 1500px) {
-  .sapCepWorkPageTitle {
-    max-width: 1344px;
+  [data-cep-breakpoint="st-sp-1"] & {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
   }
 }

package/src/main/js/sap/ushell/themes/base/WorkPageCell.less

@@ -2,11 +2,18 @@
   flex: 0;
   display: flex;
   flex-direction: column;
-  border-radius: 1rem;
+  border-radius: @sapUiElementBorderCornerRadius;
   background: @sapUiBaseBG;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 
+  [data-cep-breakpoint="st-sp-1"] &,
+  [data-cep-breakpoint="st-lp-1"] &,
+  [data-cep-breakpoint="lt-sp-1"] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   &.sapCepWorkPageCellEmpty {
     background-color: transparent;
     flex: 1;
@@ -38,6 +45,10 @@
 
   .sapUshellVizInstance {
     position: relative;
+
+    .sapMGT {
+      max-width: 100%;
+    }
   }
 
   .sapCepWorkPageCellControlButtons {
@@ -45,7 +56,6 @@
   }
 
   .sapCepOverflowToolbarCell {
-    border-bottom: none !important;
     border-radius: 1rem 1rem 0 0;
     padding-right: 1rem;
   }
@@ -53,34 +63,56 @@
   &.sapCepWorkPageCellCardMode {
     .sapCepOverflowToolbarCell {
       background: transparent;
+      border-bottom: none;
     }
   }
-
 }
 
-@media (min-width: 600px) and (max-width: 1023px) {
-  .sapCepWorkPageCellEmpty {
-    min-height: 5rem;
+.sapCepWorkPageCell.sapCepWorkPageCellTileMode {
+  box-shadow: @sapUiContentShadow0;
+
+  .sapCepWorkPageGridContainer {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
   }
 }
 
-@media (min-width: 1024px) and (max-width: 1439px) {
-  .sapCepWorkPageCellEmpty {
-    min-height: 10rem;
+.sapCepWorkPageCell.sapCepWorkPageCellTileMode {
+  .sapCepWorkPageGridContainer {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
   }
 }
 
-@media (min-width: 1440px) {
-  .sapCepWorkPageCellEmpty {
-    min-height: 14rem;
+[data-cep-breakpoint="lt-lp-1"],
+[data-cep-breakpoint="st-lp-1"],
+[data-cep-breakpoint="lt-lp-2"],
+[data-cep-breakpoint="st-lp-2"],
+[data-cep-breakpoint="lt-lp-3"],
+[data-cep-breakpoint="st-lp-3"],
+[data-cep-breakpoint="lt-lp-4"],
+[data-cep-breakpoint="st-lp-4"] {
+  .sapCepWorkPageCell.sapCepWorkPageCellTileMode {
+    .sapCepWorkPageGridContainer {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
   }
 }
 
-.sapCepWorkPageCell.sapCepWorkPageCellTileMode {
-  box-shadow: @sapUiContentShadow0;
-
-  .sapCepWorkPageGridContainer {
-    padding: 1rem;
+[data-cep-breakpoint="lt-sp-1"],
+[data-cep-breakpoint="st-sp-1"],
+[data-cep-breakpoint="lt-sp-2"],
+[data-cep-breakpoint="st-sp-2"],
+[data-cep-breakpoint="lt-sp-3"],
+[data-cep-breakpoint="st-sp-3"],
+[data-cep-breakpoint="lt-sp-4"],
+[data-cep-breakpoint="st-sp-4"] {
+  .sapCepWorkPageCell.sapCepWorkPageCellTileMode {
+    .sapCepWorkPageGridContainer {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
   }
 }
 
@@ -90,16 +122,21 @@
   .sapCepWorkPageCell {
     &.sapCepWorkPageCellEmpty {
       background-color: @sapUiShellContainerBackground;
+      min-height: 14rem;
+    }
+
+    &.sapCepWorkPageCellTileMode {
+      &:hover,
+      &.sapCepWorkPageCellFocused {
+        box-shadow: @sapUiContentShadow2;
+      }
     }
 
     &:hover,
     &.sapCepWorkPageCellFocused {
-
-      box-shadow: @sapUiContentShadow2;
       .sapCepWorkPageCellControlButtons {
         opacity: 1;
       }
     }
   }
-
 }

package/src/main/js/sap/ushell/themes/base/WorkPageColumn.less

@@ -5,10 +5,14 @@
   align-items: stretch;
   justify-content: stretch;
   max-width: 100%;
-  min-width: 0;
   box-sizing: border-box;
   padding-top: 1rem;
   padding-bottom: 1rem;
+  min-width: 21rem;
+
+  [data-cep-breakpoint="st-sp-1"] & {
+    min-width: 100%;
+  }
 
   .sapCepWorkPageColumnDeleteButton {
     position: absolute;
@@ -32,14 +36,6 @@
     margin: auto;
   }
 
-  &.sapCepWorkPageColumnFirst {
-    padding-left: 0.5rem;
-  }
-
-  &.sapCepWorkPageColumnLast {
-    padding-right: 0.5rem;
-  }
-
   &.sapCepColumnWidth4 {
     flex: 4;
   }
@@ -67,10 +63,39 @@
   &.sapCepColumnWidth20 {
     flex: 20;
   }
-  &.sapCepColumnWidth22 {
-    flex: 22;
-  }
   &.sapCepColumnWidth24 {
     flex: 24;
   }
 }
+
+[data-cep-breakpoint="st-sp-1"],
+[data-cep-breakpoint="st-lp-1"],
+[data-cep-breakpoint="lt-sp-1"],
+[data-cep-breakpoint="lt-lp-1"],
+[data-cep-breakpoint="st-sp-2"],
+[data-cep-breakpoint="st-lp-2"],
+[data-cep-breakpoint="lt-sp-2"],
+[data-cep-breakpoint="lt-lp-2"],
+[data-cep-breakpoint="st-sp-3"],
+[data-cep-breakpoint="st-lp-3"],
+[data-cep-breakpoint="lt-sp-3"],
+[data-cep-breakpoint="lt-lp-3"] {
+    // No resized columns for 3 columns at these breakpoints
+  .sapCepWorkPageColumn[data-count="3"] {
+    flex: 1;
+  }
+}
+
+[data-cep-breakpoint="st-sp-1"],
+[data-cep-breakpoint="st-lp-1"],
+[data-cep-breakpoint="lt-sp-1"],
+[data-cep-breakpoint="lt-lp-1"],
+[data-cep-breakpoint="st-sp-2"],
+[data-cep-breakpoint="st-lp-2"],
+[data-cep-breakpoint="lt-sp-2"],
+[data-cep-breakpoint="lt-lp-2"] {
+  // No resized columns for 2 columns at these breakpoints
+  .sapCepWorkPageColumn[data-count="2"] {
+    flex: 1;
+  }
+}

package/src/main/js/sap/ushell/themes/base/WorkPageColumnResizer.less

@@ -62,3 +62,62 @@ html[dir=rtl] .sapCepDividerButton {
     transform: translateX(calc(~"0.5rem + 6.5px"));
   }
 }
+
+[data-cep-breakpoint="lt-lp-1"],
+[data-cep-breakpoint="st-lp-1"],
+[data-cep-breakpoint="lt-sp-1"],
+[data-cep-breakpoint="st-sp-1"] {
+  // max. 1 column -> no divider
+  .sapCepDivider {
+    display: none;
+  }
+}
+
+[data-cep-breakpoint="lt-lp-2"],
+[data-cep-breakpoint="st-lp-2"],
+[data-cep-breakpoint="lt-sp-2"],
+[data-cep-breakpoint="st-sp-2"] {
+  // max. 2 columns -> no resizing possible for >= 3 columns
+  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+    pointer-events: none;
+
+    &:hover {
+      cursor: default;
+    }
+  }
+  // max. 2 columns -> no divider for 3rd columns
+  .sapCepWorkPageColumn[data-index="3"][data-count="3"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="3"][data-count="4"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="3"][data-count="5"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="3"][data-count="6"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="5"][data-count="5"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="5"][data-count="6"] .sapCepDivider {
+    display: none;
+  }
+}
+
+
+[data-cep-breakpoint="lt-lp-3"],
+[data-cep-breakpoint="st-lp-3"],
+[data-cep-breakpoint="lt-sp-3"],
+[data-cep-breakpoint="st-sp-3"] {
+  // max. 3 columns -> no resizing possible for >= 4 columns
+  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+    pointer-events: none;
+
+    &:hover {
+      cursor: default;
+    }
+  }
+
+  // max. 3 columns -> no divider for 4th column
+  .sapCepWorkPageColumn[data-index="4"][data-count="4"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="4"][data-count="5"] .sapCepDivider,
+  .sapCepWorkPageColumn[data-index="4"][data-count="6"] .sapCepDivider {
+    display: none;
+  }
+}

package/src/main/js/sap/ushell/themes/base/WorkPageRow.less

@@ -1,6 +1,5 @@
 .sapCepWorkPageRow {
   position: relative;
-  margin: 0 auto;
   margin-top: -2px;
   border: 2px solid transparent;
   border-radius: 0.75rem;
@@ -22,13 +21,13 @@
     border-bottom: none;
   }
 
-  .sapCepRowSectionTitle{
+  .sapCepRowSectionTitle {
     font-weight: bold;
     font-family: @sapUiFontFamily;
     font-size: @sapMFontHeader4Size;
     color: @sapUiShellGroupTitleTextColor;
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
 
   .sapCepWorkPageRowLimiter {
@@ -37,19 +36,10 @@
     margin: 0 auto;
   }
 
-  &.sapCepWorkPageRowFullWidth {
-    max-width: 100%;
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
   .sapCepWorkPageRowInner {
     position: static;
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
   }
 
   .sapCepRowButton {
@@ -99,39 +89,24 @@
   }
 }
 
-.sapCepRowOverflowToolbar>.sapMLabel .sapMLabelColonAndRequired::before {
+.sapCepRowOverflowToolbar > .sapMLabel .sapMLabelColonAndRequired::before {
   content: attr(data-colon);
   white-space: pre;
 }
 
 
-@media (min-width: 600px) and (max-width: 1023px) {
-  .sapCepWorkPageRow,
-  .sapCepWorkPageRow.sapCepWorkPageRowFullWidth .sapCepWorkPageRowLimiter {
-    max-width: 550px;
-  }
-}
-
-@media (min-width: 1024px) and (max-width: 1199px) {
-  .sapCepWorkPageRow,
-  .sapCepWorkPageRow.sapCepWorkPageRowFullWidth .sapCepWorkPageRowLimiter {
-    max-width: 950px;
-  }
+.sapCepWorkPageRow {
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 
-@media (min-width: 1200px) and (max-width: 1499px) {
-  .sapCepWorkPageRow,
-  .sapCepWorkPageRow.sapCepWorkPageRowFullWidth .sapCepWorkPageRowLimiter {
-    max-width: 1016px;
+[data-cep-breakpoint="st-sp-1"] {
+  .sapCepWorkPageRow {
+    margin-left: 0;
+    margin-right: 0;
   }
 }
 
-@media (min-width: 1500px) {
-  .sapCepWorkPageRow,
-  .sapCepWorkPageRow.sapCepWorkPageRowFullWidth .sapCepWorkPageRowLimiter {
-    max-width: 1360px;
-  }
-}
 
 
 /* EDIT MODE */

package/src/main/js/sap/ushell/themes/base/fonts/BusinessSuiteInAppSymbols.json

@@ -379,5 +379,6 @@
     "icon-empty-sequence":  "0xe181",
     "icon-cross-union":  "0xe182",
     "icon-empty-union":  "0xe183",
-    "icon-cross-target":  "0xe184"
+    "icon-cross-target":  "0xe184",
+    "icon-non-stackable":  "0xe185"
 }

package/src/main/js/sap/ushell/themes/sap_belize/ShellHeader.less

@@ -89,7 +89,6 @@
 /** --------------------------------------- **/
 /** Styles for Shell Title's Navigation Menu**/
 /** --------------------------------------- **/
-
 #shellAppTitle, .sapUshellShellHeadSubtitle {
   color: @sapUiShellTextColor;
   text-shadow: @sapUiShadowText;
@@ -104,7 +103,6 @@
   border-radius: 0.2rem;
   color: @sapUiShellActiveTextColor;
 }
-
 #shellAppTitle:focus-within {
   outline-color: @sapUiContentFocusColor;
 }
@@ -122,18 +120,10 @@
   background: @sapUiShellTextColor;
 }
 
-/** Shell Application Title control **/
-
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - related Apps grid (within a flexbox) - override the text-tab-bar content area height **/
 #sapUshellRelatedAppsItems {
   background-color: @sapUiGlobalBackgroundColor;
-  border-top: 1px solid @sapUiListBorderColor ;
-  border-bottom: 1px solid @sapUiListBorderColor;
+  border-top: 1px solid @sapUiListBorderColor;
 }
 
 #sapUshellRelatedAppsItems label {

package/src/main/js/sap/ushell/themes/sap_belize_hcb/ShellHeader.less

@@ -53,10 +53,6 @@
 /** Styles for Shell Title's Navigation Menu**/
 /** --------------------------------------- **/
 
-#sapUshellAppTitlePopover .sapMBar {
-  border-bottom: 0;
-}
-
 #shellAppTitle {
   color: @sapUiShellTextColor;
   border: 0.125rem solid @sapUiHcStandardForeground;
@@ -91,13 +87,6 @@
   background: @sapUiHcStandardForeground;
 }
 
-/** Shell Application Title control **/
-
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - Mini Tiles (of relatedApps)**/
     .sapUshellNavMiniTile {
   background-color: @sapUiListBackground;

package/src/main/js/sap/ushell/themes/sap_belize_hcw/ShellHeader.less

@@ -55,15 +55,10 @@
   color: @_sap_ushell_ShellHeader_TitleColor;
 }
 
-
 /** --------------------------------------- **/
 /** Styles for Shell Title's Navigation Menu**/
 /** --------------------------------------- **/
 
-#sapUshellAppTitlePopover .sapMBar {
-  border-bottom: 0;
-}
-
 #shellAppTitle {
   color: @sapUiShellTextColor;
   border: 0.125rem solid @sapUiHcStandardForeground;
@@ -98,15 +93,8 @@
   background: @sapUiHcStandardForeground;
 }
 
-/** Shell Application Title control **/
-
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - Mini Tiles (of relatedApps)**/
-    .sapUshellNavMiniTile {
+.sapUshellNavMiniTile {
   background-color: @sapUiListBackground;
   box-shadow: 0 0 0 1px @sapUiHcStandardForeground;
 }

package/src/main/js/sap/ushell/themes/sap_fiori_3/ShellHeader.less

@@ -112,18 +112,10 @@ html.sap-desktop .sapUshellShellHeader .sapMSwtCont:focus>.sapMSwt:before {
   background: @sapUiContentNonInteractiveIconColor;
 }
 
-/** Shell Application Title control **/
-
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - related Apps grid (within a flexbox) - override the text-tab-bar content area height **/
 #sapUshellRelatedAppsItems {
   background-color: @sapUiGlobalBackgroundColor;
-  border-top: 1px solid @sapUiListBorderColor ;
-  border-bottom: 1px solid @sapUiListBorderColor;
+  border-top: 1px solid @sapUiListBorderColor;
 }
 
 #sapUshellRelatedAppsItems label {

package/src/main/js/sap/ushell/themes/sap_fiori_3_dark/ShellHeader.less

@@ -103,18 +103,10 @@
   background: @sapUiContentNonInteractiveIconColor;
 }
 
-/** Shell Application Title control **/
-
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - related Apps grid (within a flexbox) - override the text-tab-bar content area height **/
 #sapUshellRelatedAppsItems {
   background-color: @sapUiGlobalBackgroundColor;
-  border-top: 1px solid @sapUiListBorderColor ;
-  border-bottom: 1px solid @sapUiListBorderColor;
+  border-top: 1px solid @sapUiListBorderColor;
 }
 
 #sapUshellRelatedAppsItems label {

package/src/main/js/sap/ushell/themes/sap_fiori_3_hcb/ShellHeader.less

@@ -49,10 +49,6 @@
 /** Styles for Shell Title's Navigation Menu**/
 /** --------------------------------------- **/
 
-#sapUshellAppTitlePopover .sapMBar {
-  border-bottom: 0;
-}
-
 #shellAppTitle {
   color: @sapUiShellTextColor;
   border: 0.125rem solid @sapUiHcStandardForeground;
@@ -89,13 +85,8 @@
 
 /** Shell Application Title control **/
 
-/** Shell Navigation Menu - ResponsivePopover**/
-#sapUshellAppTitlePopover {
-  background-color: @sapUiListBackground;
-}
-
 /** Shell Navigation Menu - Mini Tiles (of relatedApps)**/
-    .sapUshellNavMiniTile {
+.sapUshellNavMiniTile {
   background-color: @sapUiListBackground;
   box-shadow: 0 0 0 1px @sapUiHcStandardForeground;
 }