@sapui5/sap.ushell 1.124.3 → 1.126.0

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

@@ -0,0 +1,62 @@
+
+/* ============================================= */
+/* CSS for control sap.ushell.ui.launchpad/TileState.control */
+/* ============================================= */
+
+.sapUshellGT {
+    display: inline-block;
+    overflow: hidden;
+    border-radius: 0.25rem;
+    outline: none;
+    width: 100%;
+    height: 100%;
+    border: 1px solid @sapUiTileBorderColor;
+    box-shadow: @sapUiShadowLevel0;
+    box-sizing: border-box;
+}
+
+.sapUshellOverlay {
+    height: 100%;
+    width: 100%;
+}
+
+.sapUshellTileStateLoading {
+    margin-top: 50%;
+}
+
+.sapUshellLong .sapUshellTileStateLoading {
+    margin-top: 25%; // % is calcuated from container widths, 25% is in the middle vertically
+}
+
+.sapUshellTileStateFtrFld {
+    left: 0.5rem;
+    bottom: 0.5rem;
+    display: table;
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.sapUshellTileStateFtrFldTxt {
+    display:table-cell;
+    padding-left: 0.5rem;
+    vertical-align: bottom;
+}
+
+.sapUiMedia-Std-Phone .sapUshellTileStateFtrFldTxt {
+    padding-left: 0;
+}
+
+.sapUshellSmall .sapUshellTileStateFtrFldTxt {
+    padding-left: 0;
+}
+
+.sapUshellTileStateFtrFldIcn {
+    margin-right: 0.5rem;
+    display: table-cell;
+    vertical-align: bottom;
+}
+
+.sapUshellTileStateFtrFldIcn>.sapUshellGTFtrFldIcnMrk {
+    vertical-align: bottom;
+}

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

@@ -0,0 +1,85 @@
+/* ========================================================= */
+/* CSS for control "sap.ushell.ui.shell.ToolAreaItem" (base) */
+/* ========================================================= */
+
+.sapUiMedia-Std-Phone .sapUshellToolArea {
+  width: 13rem;
+}
+
+.sapUshellToolArea {
+  height: 100%;
+  width: 15rem;
+  z-index: 1;
+  overflow: hidden;
+  transition: left 500ms ease;
+
+  &.sapUshellToolAreaTextHidden {
+    width: 3.0625rem;
+
+    .sapUshellToolAreaItemText {
+      display: none;
+    }
+  }
+
+  .sapUshellToolAreaItemIcon {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    width: 1.25rem;
+  }
+}
+
+.sapUshellToolAreaFooterContent {
+  padding-left: 0.7rem;
+  height: 3.0625rem;
+  position: fixed;
+  bottom: 0;
+}
+
+.sapUshellToolAreaFooterContentSeparator {
+  position: fixed;
+  bottom: 3.0625rem;
+}
+
+.sapUshellToolAreaItemText {
+  margin-left: 0.8rem;
+}
+
+.sapUshellToolAreaTextContainer {
+  width: 11.9375rem;
+  height: 3.0625rem
+}
+
+.sapUshellToolAreaItemExpandable:after {
+  content: "\e1f8";
+  position: relative;
+  top: 0.48rem;
+  left: 0.2rem;
+  font-family: "SAP-icons";
+  font-size: 1.5rem;
+}
+
+.sapUshellToolAreaContent {
+  padding-left: 0.7rem;
+  height: 3.0625rem;
+  cursor: pointer;
+}
+
+.sapUshellToolAreaItm,
+.sapUshellToolAreaItmTextOnly {
+  height: 3.0625rem;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sapUshellToolAreaItmTextOnly {
+  width: 15rem;
+  padding-top: 1rem;
+}
+
+.sapUshellToolArea.sapUshellShellHidden {
+  display: block;
+  left: -16rem;
+}

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

@@ -0,0 +1,23 @@
+/* BASE */
+
+/* =============================================================== */
+/* Styles for the "ME area" theme base                             */
+/* =============================================================== */
+
+/* Styles */
+/* ============================================= */
+
+
+.sap-tablet #userActionsMenu  {
+    width: 36rem;
+}
+
+
+.sapUshellUserArea {
+  padding: 0.5rem 1.5rem;
+}
+
+
+.sapUshellUserSetting .sapMITBContent {
+  border-bottom: none;
+}

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

@@ -0,0 +1,52 @@
+/* BASE */
+
+/* ============================================= */
+/* CSS for User Image Consent Dialog */
+/* ============================================= */
+
+/* LESS Variables */
+/* ============================================= */
+
+
+
+/* Styles */
+/* ============================================= */
+
+.sapUshellUserConsentDialogText {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+}
+
+.sapUshellUserConsentDialogLink {
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-bottom: 1rem;
+}
+
+.sapUshellUserConsentDialogTerms {
+  padding-bottom: 1rem;
+  padding-top: 0.625rem;
+  border-top : @sapUiGroupContentBorderColor 2px solid;
+  font-style :italic;
+  font-family: @sapUiFontFamily;
+  font-size: @sapMFontSmallSize;
+  line-height: 1.2rem;
+  color: @sapUiContentLabelColor;
+  text-align: left;
+}
+
+.sapUshellUserConsentDialog {
+  margin: 1rem;
+  width:  25rem;
+}
+
+#userConsentDialogLayout {
+  width: 100%;
+}
+
+.ushellUserImgConsentTermsOfUseFlexBox{
+  margin-left: 1rem;
+  margin-right: 1rem;
+}

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

@@ -0,0 +1,113 @@
+/* ========================================================================== */
+/* CSS for control "sap.ushell.components.shell.Settings.UserSettings" (base) */
+/* ========================================================================== */
+
+.sapMBar .sapMText {
+  font-size: 1rem;
+}
+
+.sapUshellUserSettingMaster {
+  width: 100%;
+  overflow-y: auto;
+}
+
+.sapUshellUserSettingMaster .sapMLIBContent .sapMSLIImg {
+  border-radius: 100%;
+}
+
+.sapUshellUserSettingMaster .sapMSF {
+  padding: 0.25rem;
+}
+
+.sapUiSizeCompact .sapUshellUserSettingMaster .sapMSF {
+  padding: 0.1875rem;
+}
+
+.sapUshellUserSettingDetailHeader .sapMImg {
+  border-radius: 100%
+}
+
+.sapUshellUserSettingDetailContent {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+
+  @media (min-width: 600px) {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+#defaultParametersSelector .sapUiRGLContainerCont {
+  padding-bottom: 2rem;
+}
+
+#defaultParametersSelector .sapUiRespGridBreak {
+  display: none;
+}
+
+#defaultParametersSelector {
+  overflow-y: auto;
+
+  .sapUshellExtendedDefaultParamsButton {
+    margin-left: 0.5rem;
+  }
+
+  .sapUiFormResGrid.sapUiFormBackgrTranslucent > div {
+    background: none;
+  }
+
+  /* fix form behavior with groups in two columns */
+  .sapUshellShellDefaultValuesForm > .sapUiForm > .sapUiFormResGrid .sapUiRespGrid > div {
+    width: 100%;
+  }
+
+  .sapUshellDefaultValuesSmartField {
+    width: 12rem !important;
+  }
+
+  .sapUshellDefaultValuesDirtyState {
+    font-style: italic;
+  }
+
+  .sapUshellSystemContextsSelection,
+  .sapUshellSmartVariantManagement,
+  .sapUshellDefaultValuesDirtyState {
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    @media (min-width: 600px) {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+}
+
+#detailuserPrefThemeSelector .sapUshellUserSettingDetailHeader {
+  border-bottom: none !important;
+}
+
+.sapUshellUserSettingMaster .sapUshellUserSettingMasterListItem {
+  height: 4rem;
+}
+
+.sapUshellUserSettingDetailHeader .sapMOHIcon {
+  margin-top: 0rem;
+}
+
+.sapUshellSettingsPage section {
+  background-color: lighten(@sapUiListBackground, 2);
+  box-sizing: border-box;
+}
+
+.sapUshellSettingsPage > section {
+  padding-bottom: 2.5rem;
+}
+
+.sapUshellUserAccountLabel {
+  padding-top: 0.25rem;
+  margin-right: 0.25rem;
+}
+.sapUshellCalendarWeek > .sapMRb {
+  overflow: inherit;
+}

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

@@ -0,0 +1,28 @@
+#viewPortContainer {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  /* flex-grow does not work here (iOS Safari) */
+  /* force container to fill all available space */
+  flex-basis: 100%;
+  flex-shrink: 1;
+  max-height: 100%;
+
+  & > .sapUiComponentContainer {
+    overflow-y: clip;
+  }
+}
+
+@media print {
+  #shell-shapes {
+    display: none;
+  }
+
+  .sapUShellApplicationContainer {
+    display: block;
+
+    .sapUiView {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+.workPage {
+  width: 100%;
+  padding-bottom: 2rem;
+
+  &.workPageEditMode {
+    margin-top: 2rem;
+    margin-bottom: 4rem;
+
+    .workPageTitle {
+      padding-top: 0;
+    }
+  }
+
+  .workPageTitle {
+    padding-top: 1rem;
+    box-sizing: border-box;
+  }
+}
+
+[data-wp-breakpoint="lt-lp-4"],
+[data-wp-breakpoint="lt-sp-4"],
+[data-wp-breakpoint="st-lp-4"],
+[data-wp-breakpoint="st-sp-4"] {
+  .workPageTitle {
+    margin-left: 2.375rem;
+    margin-right: 2.375rem;
+  }
+}
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="st-sp-3"],
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="st-sp-2"] {
+  .workPageTitle {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="st-sp-1"] {
+  .workPageTitle {
+    margin-left: 1.75rem;
+    margin-right: 1.75rem;
+  }
+}
+
+[data-wp-breakpoint="st-sp-0"] {
+  .workPageTitle {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}

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

@@ -0,0 +1,60 @@
+.workPageButton {
+  border: none;
+  background: transparent;
+  outline: none;
+  border-radius: 100%;
+  padding: 0.1875rem 0;
+  color: @sapUiButtonIconColor;
+  max-height: 2.25rem;
+  max-width: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    .workPageButtonInner {
+      background: @sapUiButtonNeutralHoverBackground;
+      outline-color: @sapUiButtonNeutralHoverBorderColor;
+    }
+
+    .workPageButtonIcon {
+      color: @sapUiButtonNeutralHoverTextColor;
+    }
+  }
+
+  &:focus {
+    .workPageButtonInner {
+      background: @sapUiButtonNeutralActiveBackground;
+      outline: 0.125rem solid @sapUiButtonNeutralActiveBorderColor;
+    }
+
+    .workPageButtonIcon {
+      color: @sapUiButtonNeutralActiveTextColor;
+    }
+  }
+
+  .workPageButtonInner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: @sapUiButtonNeutralBackground;
+    border-radius: 100%;
+    border: 1px solid @sapUiButtonNeutralBorderColor;
+    width: 1.625rem;
+    height: 1.625rem;
+    cursor: pointer;
+  }
+
+  .workPageButtonIcon {
+    cursor: pointer;
+    text-align: center;
+    display: inline-block;
+    vertical-align: baseline;
+    line-height: 1.5rem;
+    position: relative;
+    font-size: 1rem;
+    max-height: 1.5rem;
+    width: 1rem;
+    color: @sapUiButtonNeutralTextColor;
+  }
+}

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

@@ -0,0 +1,144 @@
+.workPageCell {
+  flex: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: @sapUiElementBorderCornerRadius;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+
+  [data-wp-breakpoint="st-sp-0"] &,
+  [data-wp-breakpoint="st-sp-1"] &,
+  [data-wp-breakpoint="st-lp-1"] &,
+  [data-wp-breakpoint="lt-sp-1"] & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &.workPageCellEmpty {
+    background-color: transparent;
+    flex: 1;
+  }
+
+  &+.workPageCell {
+    margin-top: 1rem;
+  }
+
+  .workPageEditMode .workpageCellWidget {
+    pointer-events: none;
+  }
+
+  .workpageCellWidget {
+    flex: 1 1 auto;
+  }
+
+  .workpageCellWidgetToolbar {
+    position: relative;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    border-radius: 1rem;
+    z-index: 1;
+  }
+
+  .workPageGridContainer {
+    z-index: 0;
+  }
+
+  .sapUshellVizInstance {
+    position: relative;
+
+    .sapMGT {
+      max-width: 100%;
+    }
+  }
+
+  .workPageCellControlButtons {
+    opacity: 0;
+  }
+
+  .workPageCellOverflowToolbar {
+    border-radius: 1rem 1rem 0 0;
+    padding-right: 1rem;
+  }
+
+  &.workPageCellCardMode {
+    .workPageCellOverflowToolbar {
+      background: transparent;
+      border-bottom: none;
+    }
+  }
+}
+
+.workPageCell.workPageCellTileMode {
+  box-shadow: @sapUiContentShadow0;
+
+  .workPageGridContainer {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
+.workPageCell.workPageCellTileMode {
+  .workPageGridContainer {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+}
+
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="lt-lp-4"],
+[data-wp-breakpoint="st-lp-4"] {
+  .workPageCell.workPageCellTileMode {
+    .workPageGridContainer {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
+}
+
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-sp-0"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-sp-2"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-sp-3"],
+[data-wp-breakpoint="lt-sp-4"],
+[data-wp-breakpoint="st-sp-4"] {
+  .workPageCell.workPageCellTileMode {
+    .workPageGridContainer {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+  }
+}
+
+/* EDIT MODE */
+.workPageEditMode {
+
+  .workPageCell {
+    &.workPageCellEmpty {
+      background-color: @sapUiShellContainerBackground;
+      min-height: 14rem;
+    }
+
+    &.workPageCellTileMode {
+
+      &:hover,
+      &.workPageCellFocused {
+        box-shadow: @sapUiContentShadow2;
+      }
+    }
+
+    &:hover,
+    &.workPageCellFocused {
+      .workPageCellControlButtons {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+.workPageColumn {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  min-width: 0;
+
+  [data-wp-breakpoint="st-sp-1"] &,
+  [data-wp-breakpoint="st-sp-0"] & {
+    min-width: 100%;
+  }
+
+  .workPageColumnDeleteButton {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.25rem;
+  }
+
+  .workPageColumnToolbar {
+    margin-top: 0.5rem;
+    display: flex;
+    gap: 0 0.5rem;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &.workPageColumnEmpty .workPageAddWidgetButton {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+}