@sapui5/sap.ushell 1.124.3 → 1.126.0

package/src/main/js/sap/ushell/themes/sap_belize_base/ShellLayout.less

@@ -0,0 +1,168 @@
+/* =================================== */
+/* CSS for the layout of the ShellView */
+/* =================================== */
+
+// ==================================================== Generic Styles ==================================================================
+
+.sapUshellFlexGrowShrink {
+    flex: 1 1;
+    min-width: 0;
+    min-height: 0;
+}
+
+.sapUshellFlexRow {
+    display: flex;
+    flex-direction: row;
+}
+
+.sapUshellFlexRow > * {
+    height: 100%;
+}
+
+.sapUshellFlexColumn {
+    display: flex;
+    flex-direction: column;
+}
+
+.sapUshellFlexColumn > * {
+    width: 100%;
+}
+
+.sapUshellPositionRelative {
+    position: relative;
+}
+
+.sapUshellPositionStatic {
+    position: static;
+}
+
+.sapUshellOverflowHidden {
+    overflow: hidden;
+}
+
+.sapUshellShellHidden {
+    display: none !important;
+}
+
+// ==================================================== UI Areas ==================================================================
+
+body {
+    // todo legacy overwrite check if still necessary (I776cdd3db089739d6b8aa7f8f775c7fbd2053efe)
+    .sapMBar.sapMPageHeader:before, .sapMShellBrandingBar {
+        display: none;
+    }
+}
+
+#shellLayout {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+.sapUshellRenderer {
+    display: flex;
+    flex-direction: column;
+}
+
+.sapUshellShellBG {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+#header-shellArea {
+    position: relative;
+}
+
+#shapes-shellArea, #backgroundImage-shellArea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
+
+#rightFloatingContainer-shellArea {
+    position: absolute;
+    height: unset;
+    top: 0;
+    right: 0;
+}
+
+#floatingActions-shellArea {
+    position: absolute;
+    height: unset;
+    bottom: 0;
+    right: 0;
+}
+
+.sapUshellFloatingContainerDock {
+    flex: 0 0;
+    z-index: 2; // border of left dock has to be on top of center elements and helpContent
+}
+
+.sapUshellFloatingContainerDock > .sapUshellFloatingContainerWrapper {
+    position: static !important; // overwrite element styles
+    .sapUshellFloatingContainer  {
+    position: relative;
+    }
+}
+
+#helpContent-shellArea {
+    flex: 0 0;
+    position: relative;
+    z-index: 1; // border of left dock has to be on top of center elements, but below the FloatingContainer
+}
+
+// ==================================================== Search Overlay ==================================================================
+
+.sapUshellShellShowSearchOverlay #header-shellArea {
+    z-index: 10;
+}
+
+body.sapUshellShellShowSearchOverlay:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: fade(@sapUiBlockLayerBackground, 40);
+    opacity: 0.4;
+    z-index: 9;
+}
+
+// ==================================================== LogonFrameProvider ==================================================================
+
+.sapUshellSamlDialogHidden {
+    visibility: hidden !important;
+}
+
+#SAMLDialog #SAMLDialog-scrollCont {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#SAMLDialogFrame {
+    min-height:100%;
+    width:100%;
+    position: absolute;
+}
+
+// ==================================================== Unused Styles ? ==================================================================
+
+#ContentPage{
+    background: white;
+}

package/src/main/js/sap/ushell/themes/sap_belize_base/SidePane.less

@@ -0,0 +1,8 @@
+/* ============================================== */
+/* CSS for control "sap.ushell.ui.shell.SidePane" */
+/* ============================================== */
+
+.sapUshellSidePane {
+    height: 100%;
+    border-right: 1px solid @sapUiMediumBorder;
+}

package/src/main/js/sap/ushell/themes/sap_belize_base/StaticTile.less

@@ -0,0 +1,9 @@
+
+/* ============================================= */
+/* CSS for control sap.ushell/StaticTile.control */
+/* ============================================= */
+
+
+.sapUshellStaticTile~span.sapUshellTileBaseIcon {
+	left: auto;
+}

package/src/main/js/sap/ushell/themes/sap_belize_base/SubHeader.less

@@ -0,0 +1,3 @@
+/* ======================================================== */
+/* CSS for control "sap.ushell.ui.shell.SubHeader" (base) */
+/* ======================================================== */

package/src/main/js/sap/ushell/themes/sap_belize_base/SysInfoBar.less

@@ -0,0 +1,164 @@
+/* ===================================================== */
+/* CSS for control "sap.ushell.ui.shell.SysInfoBar" (base) */
+/* ======================================================*/
+
+.sapUiSizeCompact .sapUshellSysInfoBar {
+  height: 1.625rem;
+
+  .sapMBar {
+    box-shadow: none;
+  }
+
+  .sapMBarLeft, .sapMBarRight, .sapMBarPH {
+    height: 1.625rem;
+  }
+}
+
+.sapUshellSysInfoBar {
+  height: 2.25rem;
+
+  .sapMBar {
+    box-shadow: none;
+  }
+
+  .sapMBar:not(.sapUshellSysInfoBarOrange, .sapUshellSysInfoBarRed, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarBlue, .sapUshellSysInfoBarGreen, .sapUshellSysInfoBarGrey, .sapUshellSysInfoBarPink2, .sapUshellSysInfoBarViolet2, .sapUshellSysInfoBarBlue2, .sapUshellSysInfoBarGreen2, .sapUshellSysInfoBarGrey2) {
+    background-color: transparent;
+  }
+
+  .sapUshellSysInfoBarText:not(.sapUshellSysInfoBarOrange, .sapUshellSysInfoBarRed, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarBlue, .sapUshellSysInfoBarGreen, .sapUshellSysInfoBarGrey, .sapUshellSysInfoBarPink2, .sapUshellSysInfoBarViolet2, .sapUshellSysInfoBarBlue2, .sapUshellSysInfoBarGreen2, .sapUshellSysInfoBarGrey2), .sapMLabelTextWrapper {
+    text-shadow: none;
+  }
+
+  .sapMBarLeft, .sapMBarRight, .sapMBarPH {
+    height: 2.25rem;
+  }
+}
+
+/*
+  If a custom color is used, the labels should have the same color as the icon.
+ */
+.sapUshellSysInfoBarCustom {
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiContentIconColor;
+  }
+}
+
+.sapUshellSysInfoBarOrange {
+  background-color: @sapUiShellCategory31Background;
+  border-color: @sapUiShellCategory3BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory3TextColor;
+    text-shadow: @sapUiShellCategory3TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarRed {
+  background-color: @sapUiShellCategory11Background;
+  border-color: @sapUiShellCategory11BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory11TextColor;
+    text-shadow: @sapUiShellCategory11TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarPink {
+  background-color: @sapUiShellCategory13Background;
+  border-color: @sapUiShellCategory13BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory13TextColor;
+    text-shadow: @sapUiShellCategory13TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarViolet {
+  background-color: @sapUiShellCategory12Background;
+  border-color: @sapUiShellCategory12BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory12TextColor;
+    text-shadow: @sapUiShellCategory12TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarBlue {
+  background-color: @sapUiShellCategory9Background;
+  border-color: @sapUiShellCategory9BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory9TextColor;
+    text-shadow: @sapUiShellCategory9TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGreen {
+  background-color: @sapUiShellCategory16Background;
+  border-color: @sapUiShellCategory16BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory16TextColor;
+    text-shadow: @sapUiShellCategory16TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGrey {
+  background-color: @sapUiShellCategory15Background;
+  border-color: @sapUiShellCategory15BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory15TextColor;
+    text-shadow: @sapUiShellCategory15TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarPink2 {
+  background-color: @sapUiShellCategory7Background;
+  border-color: @sapUiShellCategory7BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory7TextColor;
+    text-shadow: @sapUiShellCategory7TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarViolet2 {
+  background-color: @sapUiShellCategory4Background;
+  border-color: @sapUiShellCategory4BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory4TextColor;
+    text-shadow: @sapUiShellCategory4TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarBlue2 {
+  background-color: @sapUiShellCategory1Background;
+  border-color: @sapUiShellCategory1BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory1TextColor;
+    text-shadow: @sapUiShellCategory1TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGreen2 {
+  background-color: @sapUiShellCategory8Background;
+  border-color: @sapUiShellCategory8BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory8TextColor;
+    text-shadow: @sapUiShellCategory8TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGrey2 {
+  background-color: @sapUiShellCategory10Background;
+  border-color: @sapUiShellCategory10BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory10TextColor;
+    text-shadow: @sapUiShellCategory10TextShadow;
+  }
+}

package/src/main/js/sap/ushell/themes/sap_belize_base/TargetMappingConfiguration.less

@@ -0,0 +1,8 @@
+/* ============================================= */
+/* CSS for Target Mapping                        */
+/* ushell/components/tiles/action/Configuration  */
+/* ============================================= */
+
+.sapUshellTargetMappingToUpperCase > .sapMInputBaseInner {
+    text-transform: uppercase;
+}

package/src/main/js/sap/ushell/themes/sap_belize_base/Tile.less

@@ -0,0 +1,223 @@
+/* ===================================================== */
+/* CSS for control "sap.ushell.ui.launchpad.Tile" (base) */
+/* ===================================================== */
+
+@_sap_ushell_Tile_WidthDesktop: 11rem;
+@_sap_ushell_Tile_HeightDesktop: 11rem;
+@_sap_ushell_Tile_LongWidthDesktop: (2 * @_sap_ushell_Tile_WidthDesktop) + @_sap_ushell_Tile_Spacing;
+
+@_sap_ushell_Tile_WidthPhone: 9.25rem;
+@_sap_ushell_Tile_HeightPhone: 9.25rem;
+@_sap_ushell_Tile_LongWidthPhone: (2 * @_sap_ushell_Tile_WidthPhone) + @_sap_ushell_Tile_Spacing;
+@_sap_ushell_Tile_LongHeightPhone: 9.25rem;
+
+@_sap_ushell_Tile_ShadowWidth: 0.25rem;
+
+/* BCP 1870411969: keep in mind two standard Tiles should fit in the same row on 320px width; see also "(min-width: 375px)" */
+@_sap_ushell_Tile_Spacing: 0.5rem;
+
+// use 0.475rem to make 2 tiles appear in the same row for 375px
+@_sap_ushell_Tile_SpacingXS: 0.475rem;
+@_sap_ushell_Tile_SpacingS: 0.475rem;
+@_sap_ushell_Tile_Spacing: 0.5rem;
+@_sap_ushell_Tile_WidthXS: 4.375rem;
+@_sap_ushell_Tile_WidthS: 5.25rem;
+@_sap_ushell_Tile_Width: 5.25rem;
+
+/* Tile footer (plus button in tile catalog) */
+@_sap_ushell_Tile_FooterCornerRadius: 0.25rem;
+@_sap_ushell_Tile_FooterPosition: relative;
+@_sap_ushell_Tile_FooterPositionTop: 0.44rem;
+@_sap_ushell_Tile_FooterTextAlignment: center;
+@_sap_ushell_Tile_FooterLineHeight: inherit;
+
+.sapUshellTile:hover .sapUshellTileFooterElement {
+  z-index: auto;
+}
+
+#catalogTiles .sapUshellTile {
+  overflow: visible;
+}
+
+#catalogTiles.sapUshellTileContainer .sapUshellTileInner {
+  position: relative;
+}
+
+.sapUshellTileEntrance {
+  -webkit-animation: sapUshellTileEntranceAnimation 0.3s;
+  animation: sapUshellTileEntranceAnimation 0.3s;
+}
+
+.sapUshellTileActionDivCenter {
+  border-radius: @sapUiTileBorderCornerRadius;
+}
+
+@-webkit-keyframes sapUshellTileEntranceAnimation {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes sapUshellTileEntranceAnimation {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.sapUshellTile,
+.sapUshellTileInner {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.sapUshellTile {
+  float: left;
+  cursor: pointer;
+  position: relative;
+  margin: 0 @_sap_ushell_Tile_Spacing @_sap_ushell_Tile_Spacing 0;
+
+  .sap-phone & {
+    margin: 0; /* flex is used on phones, see "TileContainer.less" (base) */
+  }
+
+  &.sapUshellHidden,
+  .sapUshellTileActionsIconClass {
+    display: none;
+  }
+
+  .sapUshellTileInner {
+    display: block;
+  }
+
+  /* no link decorations for inner controls */
+  a.sapUshellTileInner {
+    text-decoration: none;
+  }
+}
+
+.sapUshellCatalogsContainer .sapUshellTile:not(.sapUshellTileWrapper) {
+  /* allows real custom Tiles (i.e. not "sapUshellAppBox") to be taller in the AppFinder (i.e. due to "sapUshellTilePinButtonOverlay") */
+  height: revert;
+}
+
+/* DOM hierarchy: .sapUshellTile[ > ].sapUshellTileWrapper > sapUshellTileInner > sapUshellTileBase */
+.sapUshellTile,
+.sapUshellTileWrapper,
+.sapUshellTileInner,
+.sapUshellTileBase,
+.sapUshellInner .sapUshellTile-placeholder,
+.sapUshellInner .sapUshellLinkTile-placeholder {
+  outline: none;
+  box-sizing: border-box;
+  border-radius: @sapUiTileBorderCornerRadius;
+  width: @_sap_ushell_Tile_WidthPhone;
+  height: @_sap_ushell_Tile_HeightPhone;
+
+  &.sapUshellLong,
+  .sapUshellLong & {
+    width: @_sap_ushell_Tile_LongWidthPhone;
+    height: @_sap_ushell_Tile_LongHeightPhone;
+  }
+
+  @media (min-width: 375px) {
+    width: @_sap_ushell_Tile_WidthDesktop;
+    height: @_sap_ushell_Tile_HeightDesktop;
+
+    &.sapUshellSmall,
+    .sapUshellSmall & {
+      width: @_sap_ushell_Tile_WidthPhone;
+      height: @_sap_ushell_Tile_HeightPhone;
+    }
+
+    &.sapUshellLong,
+    .sapUshellLong & {
+      width: @_sap_ushell_Tile_LongWidthDesktop;
+      height: @_sap_ushell_Tile_HeightDesktop;
+
+      &.sapUshellSmall,
+      .sapUshellSmall & {
+        width: @_sap_ushell_Tile_LongWidthPhone;
+        height: @_sap_ushell_Tile_LongHeightPhone;
+      }
+    }
+  }
+}
+
+#shellPage .sapUshellLinkTile-clone {
+  vertical-align: middle;
+  line-height: normal !important;
+  background-color: lighten(@sapBrandColor, 48) !important;
+  height: initial;
+  padding: 0px;
+
+  br,
+  .sapMGTLineStyleHelper,
+  .sapMGTActionsContainer {
+    display: none;
+  }
+}
+
+#shellPage .sapUshellTile-clone {
+  box-shadow: @sapUiShadowLevel2;
+
+  .sapUshellTileActionIconDivBottom,
+  .sapUshellTileDeleteClickArea {
+    display: none;
+  }
+}
+
+.sap-desktop {
+  .sapUshellTileContainerLocked,
+  .sapUshellTileContainerEditMode {
+    .sapUshellTile .sapUshellTileActionsIconClass{
+      display: none;
+    }
+  }
+
+  .sapUshellTile {
+    &.showTileActionsIcon,
+    &:hover {
+      .sapUshellTileActionsIconClass.sapUiIcon {
+        opacity: 1;
+        transition: opacity 0.3s ease-in-out;
+      }
+    }
+
+    .sapUshellTileActionsIconClass.sapUiIcon {
+      position: relative;
+      float: right;
+      display: block;
+      cursor: pointer;
+      height: 2rem;
+      width: 2rem;
+      border-bottom-right-radius: 0.25rem;
+      z-index: 1;
+      transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+      transition: opacity 0.3s ease-in-out;
+      opacity: 0;
+      margin-top: -@_sap_ushell_Tile_HeightDesktop;
+    }
+  }
+}
+
+.sapUshellTile:focus::after {
+  content: "";
+  position: absolute;
+  top: 0.1875rem;
+  bottom: 0.1875rem;
+  left: 0.1875rem;
+  right: 0.1875rem;
+  z-index: 2;
+  pointer-events: none;
+  border-radius: @sapUiTileBorderCornerRadius;
+}
+
+.sapUshellTile .sapUiIcon {
+  cursor: pointer;
+}
+
+#catalogTiles .sapUshellTile:focus .sapMGT {
+  border-color: transparent;
+}