@sapui5/sap.ushell 1.115.1 → 1.116.0

package/src/main/js/sap/ushell/themes/sap_horizon_dark/SearchCEP.less

@@ -2,12 +2,7 @@
 /* CSS for control sap.ushell/ShellHeader  */
 /* Horizon theme                           */
 /* ======================================= */
-.sapUshellCEPListCenter {
-  top: 0.1rem !important;
-  margin: auto;
-  padding: .2rem 0rem 0rem 0rem;
-  margin-bottom: 1rem;
-}
+
 // Placeholder SearchField in CEP
 #PlaceHolderSearchField>.sapMSFF {
   border-radius: 1.125rem;
@@ -61,6 +56,19 @@
     color: @sapButton_Emphasized_Background;
   }
 }
+// keep border on focus on small screen as on desktop
+html.sap-phone #CEPSearchField.sapMFocus>.sapMSFF::before {
+  border: .125rem solid #0070f2;
+  position: absolute;
+  content: " ";
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: inherit;
+  z-index: 2;
+  pointer-events: none
+}
 
 // SearchField in popover - placholder text
 #CEPSearchField-I::placeholder {
@@ -120,7 +128,6 @@
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 6px;
-  line-height: 2;
 
   &:hover {
     background-color: @sapShell_Hover_Background;
@@ -142,7 +149,6 @@
   margin-top: auto;
   margin-bottom: auto;
   margin-right: 6px;
-  line-height: 2;
 
   &:hover {
     background-color: @sapShell_Hover_Background;
@@ -161,126 +167,11 @@
   background-color: @sapButton_Emphasized_Background;
   color: @sapButton_Emphasized_TextColor;
 }
-/**/
-
-#FrequentlyUsedAppsList>.sapMGrowingList {
-  border-bottom: none;
-}
 
 .sapUshellCEPSearchFieldPopover {
   border-radius: 1.125rem;
 }
 
 .sapUshellCEPSearchFieldMargin {
-  margin-top: 0.1rem;
-}
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-/*
- */
-#SearchHistoryList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-}
-
-#FrequentlyUsedAppsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-}
-
-#FrequentlyUsedProuctsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-}
-
-#SearchResultList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-}
-
-#ProductsList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-}
-
-#ExternalSearchAppsList-triggerList {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-}
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-/*
- */
-#FrequentlyUsedAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ProductsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ExternalSearchAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
+  margin-top: 0.1rem !important;
 }

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

@@ -1,11 +1,6 @@
 .sapCepWorkPageCell {
-  .sapMGT.TwoByOne,
-  .sapMGT.TwoByHalf {
+  .sapMGT.TwoByOne:not(.sapMTileSmallPhone),
+  .sapMGT.TwoByHalf:not(.sapMTileSmallPhone) {
     width: 23rem;
   }
-
-  .sapMGT.OneByHalf,
-  .sapMGT.TwoByHalf {
-    height: 5rem;
-  }
 }

package/src/main/js/sap/ushell/themes/sap_horizon_hcb/SearchCEP.less

@@ -2,12 +2,7 @@
 /* CSS for control sap.ushell/ShellHeader  */
 /* Horizon theme                           */
 /* ======================================= */
-.sapUshellCEPListCenter {
-  top: 0.1rem !important;
-  margin: auto;
-  padding: .2rem 0rem 0rem 0rem;
-  margin-bottom: 1rem;
-}
+
 // Placeholder SearchField in CEP
 #PlaceHolderSearchField>.sapMSFF {
   border-radius: initial;
@@ -29,7 +24,7 @@
 }
 
 .sapUshellCEPSearchFieldMargin {
-  margin-top: 0.1rem;
+  margin-top: 0.1rem !important;
 }
 
 // Placeholder SearchField - placholder text
@@ -41,7 +36,6 @@
 // SearchField in popover - CEP
 #CEPSearchField>.sapMSFF {
   border-radius: initial;
-  //height: 2.25rem !important;
   background-color: @sapShellColor;
   border: 0.0625rem solid @sapShell_InteractiveBorderColor;
   color: @sapShell_InteractiveTextColor;
@@ -96,7 +90,6 @@
 
 #CEPSearchField-search {
   border-radius: initial;
-  line-height: 2;
 
   &:hover {
     box-shadow: none;
@@ -111,7 +104,6 @@
 
 #CEPSearchField-reset {
   border-radius: initial;
-  line-height: 2;
 
   &:hover {
     border: 0.0625px solid @sapShell_InteractiveBorderColor;
@@ -127,206 +119,28 @@
   color: @sapShell_InteractiveTextColor;
   border: 0.0625px solid @sapShell_InteractiveBorderColor;
 }
-/**/
-
-#FrequentlyUsedAppsList>.sapMGrowingList {
-  border-bottom: none;
-}
-
-.sapUshellCEPSearchFieldPopover {
-}
-
-//#SearchFieldList>#SearchHistoryList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inset 0 -0.0625rem #fff;
-//}
-
-//#FrequentlyUsedAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inherit;
-//}
-//
-//#SearchResultList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inherit;
-//}
-//
-//#ExternalSearchAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inherit;
-//}
 
 #SearchFieldList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
   box-shadow: inset 0 -0.0625rem transparent;
 }
 
-#SearchFieldList #SearchHistoryList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-}
-
-#SearchFieldList #FrequentlyUsedAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-}
-
-#SearchFieldList #SearchResultList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-}
-
-#SearchFieldList #ExternalSearchAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
+#SearchFieldList .searchCEPList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
   box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
 }
 
 .sapUshellCEPSearchFieldMargin {
-  margin-top: 0.1rem;
-}
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-
-  &:hover {
-    border-bottom: 1px solid @sapUiContentFocusColor;
-    border-radius: initial;
-  }
-}
-
-
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-
-  &:hover {
-    border-bottom: 1px solid @sapUiContentFocusColor;
-    border-radius: initial;
-  }
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-
-  &:hover {
-    border-bottom: 1px solid @sapUiContentFocusColor;
-    border-radius: initial;
-  }
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-
-  &:hover {
-    border-bottom: 1px solid @sapUiContentFocusColor;
-    border-radius: initial;
-  }
+  margin-top: 0.1rem !important;
 }
 
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-
-  &:hover {
-    border-bottom: 1px solid @sapUiContentFocusColor;
-    border-radius: initial;
-  }
-}
-/*
- */
-#SearchHistoryList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#FrequentlyUsedAppsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#SearchResultList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#ProductsList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
+.searchCEPList div[id$="-trigger-content"]>.sapMGrowingListTrigger:hover {
+  border-bottom: 1px solid @sapUiContentFocusColor;
+  border-radius: initial;
 }
 
-#ExternalSearchAppsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
+.searchCEPList span[id$="-triggerText"] {
+  text-decoration: underline !important;
 
   &:hover {
-    text-decoration: none;
+    text-decoration: none !important;
   }
 }
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-/*
- */
-#FrequentlyUsedAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ProductsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ExternalSearchAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}

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

@@ -1,11 +1,6 @@
 .sapCepWorkPageCell {
-  .sapMGT.TwoByOne,
-  .sapMGT.TwoByHalf {
+  .sapMGT.TwoByOne:not(.sapMTileSmallPhone),
+  .sapMGT.TwoByHalf:not(.sapMTileSmallPhone) {
     width: 23rem;
   }
-
-  .sapMGT.OneByHalf,
-  .sapMGT.TwoByHalf {
-    height: 5rem;
-  }
 }

package/src/main/js/sap/ushell/themes/sap_horizon_hcw/SearchCEP.less

@@ -2,12 +2,7 @@
 /* CSS for control sap.ushell/ShellHeader  */
 /* Horizon theme                           */
 /* ======================================= */
-.sapUshellCEPListCenter {
-  top: 0.1rem !important;
-  margin: auto;
-  padding: .2rem 0rem 0rem 0rem;
-  margin-bottom: 1rem;
-}
+
 // Placeholder SearchField in CEP
 #PlaceHolderSearchField>.sapMSFF {
   border-radius: initial;
@@ -29,7 +24,7 @@
 }
 
 .sapUshellCEPSearchFieldMargin {
-  margin-top: 0.1rem;
+  margin-top: 0.1rem !important;
 }
 
 // Placeholder SearchField - placholder text
@@ -96,7 +91,6 @@
 
 #CEPSearchField-search {
   border-radius: initial;
-  line-height: 2;
 
   &:hover {
     box-shadow: none;
@@ -111,7 +105,6 @@
 
 #CEPSearchField-reset {
   border-radius: initial;
-  line-height: 2;
 
   &:hover {
     border: 0.0625px solid @sapShell_InteractiveBorderColor;
@@ -127,64 +120,12 @@
   color: @sapShell_InteractiveTextColor;
   border: 0.0625px solid @sapShell_InteractiveBorderColor;
 }
-/**/
-
-#FrequentlyUsedAppsList>.sapMGrowingList {
-  border-bottom: none;
-}
-
-.sapUshellCEPSearchFieldPopover {
-}
-
-//#SearchHistoryList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:not(:hover) {
-//  box-shadow: none;
-//}
-//
-//#SearchHistoryList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inset 0 -0.0625rem transparent;
-//}
-//
-//#FrequentlyUsedAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inset 0 -0.0625rem transparent;
-//}
-//
-//#SearchResultList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inset 0 -0.0625rem transparent;
-//}
-//
-//#ExternalSearchAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator:hover {
-//  box-shadow: inset 0 -0.0625rem transparent;
-//}
 
 #SearchFieldList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
   box-shadow: inset 0 -0.0625rem transparent;
 }
 
-#SearchFieldList #SearchHistoryList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-
-  &:hover {
-    box-shadow: inset 0 -0.0625rem transparent;
-  }
-}
-
-#SearchFieldList #FrequentlyUsedAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-
-  &:hover {
-    box-shadow: inset 0 -0.0625rem transparent;
-  }
-}
-
-#SearchFieldList #SearchResultList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
-  box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
-
-  &:hover {
-    box-shadow: inset 0 -0.0625rem transparent;
-  }
-}
-
-#SearchFieldList #ExternalSearchAppsList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
+#SearchFieldList .searchCEPList>.sapMListShowSeparatorsNone .sapMLIBShowSeparator {
   box-shadow: inset 0 -0.0625rem @sapUiContentFocusColor;
 
   &:hover {
@@ -193,138 +134,17 @@
 }
 
 .sapUshellCEPSearchFieldMargin {
-  margin-top: 0.1rem;
-}
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
+  margin-top: 0.1rem !important;
 }
 
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger {
-  border-color: transparent;
-}
-/*
- */
-#SearchHistoryList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#FrequentlyUsedAppsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
+.searchCEPList span[id$="-triggerText"] {
+  text-decoration: underline !important;
 
   &:hover {
-    text-decoration: none;
+    text-decoration: none !important;
   }
 }
 
-#SearchResultList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#ProductsList-triggerText {
-  font-weight: normal !important;
-  text-align: left !important;
-  font-size: .9rem !important;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-#ExternalSearchAppsList-triggerText {
-  font-weight: normal;
-  text-align: left;
-  font-size: .9rem;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-/*
- */
-#SearchHistoryList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#FrequentlyUsedAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#FrequentlyUsedProductssList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#SearchResultList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ProductsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-
-#ExternalSearchAppsList-trigger-content>.sapMGrowingListTrigger>.sapMGrowingListDescription {
-  display: none !important;
-}
-/*
- */
-#FrequentlyUsedAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ProductsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
-}
-
-#ExternalSearchAppsList>.sapMListHdrText {
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  padding-bottom: .4rem;
-  height: 1rem;
-  line-height: .6rem;
-  padding: 0 1rem;
-  border-color: transparent;
+.sapUshellCEPListDivider:after {
+  content : none !important;
 }