@sapudex/web-components 0.111.0 → 0.117.1

package/src/themes/SecondaryNavigation.css

@@ -1,37 +1,20 @@
 :host {
+  --udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-padding: 0 var(--udexSpacer84);
   --udex-secondary-navigation-height: 72px;
   --udex-secondary-navigation-min-height: 72px;
   --udex-secondary-navigation-z-index: 10;
   --udex-secondary-navigation-background: #FFF;
+
+  --udex-secondary-navigation-title-color-hover: var(--udexColorBlue8,  #0057D2);
   --udex-secondary-navigation-title-color: var(--udexColorGrey9, #223548);
   --udex-secondary-navigation-title-font-size: var(--udexTypographyBodySFontSize, 16px);
   --udex-secondary-navigation-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
   --udex-secondary-navigation-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
-
-  --udex-secondary-navigation-item-color: var(--sapTextColor, #223548);
-  --udex-secondary-navigation-item-hover-color: var(--udexColorBlue7, #0070f2);
-  --udex-secondary-navigation-item-active-color: var(--udexColorBlue9, #0040B0);
-  --udex-secondary-navigation-item-active-border-color: var(--udexColorBlue7, #0070f2);
-  --udex-secondary-navigation-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
-  --udex-secondary-navigation-item-line-height: 1.125rem;
-
   --udex-secondary-navigation-title-border-color: var(--udexColorGrey3, #D5DADD);
-  --udex-secondary-navigation-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-secondary-navigation-title-max-width: 248px;
-  --udex-secondary-navigation-dropdown-shadow: 0 10px 30px 0 #22364940;
-  --udex-secondary-navigation-mobile-dropdown-shadow: 0 2px 8px 0 #2236494D;
-  --udex-secondary-navigation-mobile-heading-shadow: 0 2px 4px 0 #22364933;
   --udex-secondary-navigation-mobile-button-border-color: var(--udexColorGrey3, #D5DADD);
-  --udex-secondary-navigation-dropdown-background: #FFF;
-  --udex-secondary-navigation-dropdown-min-width: 240px;
-  --udex-secondary-navigation-dropdown-max-width: 360px;
 
-  --udex-secondary-navigation-mobile-title-icon-width: 22px;
-  --udex-secondary-navigation-mobile-title-icon-height: 22px;
-}
-
-:host {
   border-bottom: 1px solid var(--udex-secondary-navigation-border-color);
   display: block;
   padding: var(--udex-secondary-navigation-padding);
@@ -64,9 +47,6 @@
   line-height: var(--udex-secondary-navigation-title-line-height);
   font-weight: var(--udex-secondary-navigation-title-font-weight);
   color:  var(--udex-secondary-navigation-title-color);
-  border-inline-end: 1px solid var(--udex-secondary-navigation-title-border-color);
-  margin-inline-end: 20px;
-  padding-inline-end: 20px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -74,6 +54,20 @@
   text-overflow: ellipsis;
 }
 
+a.udex-secondary-navigation__title {
+  text-decoration: none;
+}
+
+a.udex-secondary-navigation__title:hover {
+  color: var(--udex-secondary-navigation-title-color-hover);
+}
+
+a.udex-secondary-navigation__title:focus,
+a.udex-secondary-navigation__title:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+}
+
 .udex-secondary-navigation__list {
   list-style: none;
   margin: 0;
@@ -86,8 +80,8 @@
 .udex-secondary-navigation__buttons {
   display: flex;
   align-items: center;
-  margin-top: -24px;
-  padding-inline-start: var(--udexSpacer16);
+  margin-top:  calc(var(--udexSpacer24) * -1);
+  padding-inline-start: var(--udexSpacer20);
 }
 
 .udex-secondary-navigation__wrap {
@@ -96,187 +90,46 @@
 }
 
 .udex-secondary-navigation__wrap,
-.udex-secondary-navigation__text-wrap,
 .udex-secondary-navigation__heading {
   display: flex;
 }
 
 .udex-secondary-navigation__heading {
+  margin-inline-end: var(--udexSpacer16);
+  padding-inline-end: var(--udexSpacer20);
+  position: relative;
   flex-shrink: 0;
   align-items: flex-start;
 }
 
-.udex-secondary-navigation__mobile-opener,
-.udex-secondary-navigation__active-title {
-  display: none;
-}
-
-.udex-secondary-navigation__active-title {
-  font-family: var(--sapFontFamily);
-  font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
-  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-}
-
-.udex-secondary-navigation__root_centered {
-  padding-top: 0;
-}
-
-.udex-secondary-navigation__root_centered .udex-secondary-navigation__list,
-.udex-secondary-navigation__root_centered .udex-secondary-navigation__heading,
-.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item {
-  align-items: center;
-}
-
-.udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item {
-  height: 100%;
-  display: flex;
-}
-
-.udex-secondary-navigation__root_centered .udex-secondary-navigation__buttons {
-  margin-top: 0;
-}
-
-/* Item styles */
-
-.udex-secondary-navigation__item {
-  color: var(--udex-secondary-navigation-item-color);
-  font-family: var(--sapFontFamily);
-  font-size: var(--udex-secondary-navigation-item-font-size);
-  line-height: var(--udex-secondary-navigation-item-line-height);
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  position: relative;
-  background: none;
-  cursor: pointer;
-  border: none;
-  padding: 0;
-}
-
-.udex-secondary-navigation__dropdown-item,
-.udex-secondary-navigation__mobile-opener,
-.udex-secondary-navigation__item:focus {
-  outline: none;
-}
-
-:host([desktop]) .udex-secondary-navigation__dropdown-item:focus,
-:host([desktop]) .udex-secondary-navigation__item:focus,
-.udex-secondary-navigation__mobile-opener:focus-visible,
-.udex-secondary-navigation__dropdown-item:focus-visible,
-.udex-secondary-navigation__item:focus-visible {
-  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);
-  border-radius: var(--udexRadiusXXS);
-}
-
-:host([desktop]) .udex-secondary-navigation__dropdown-item:focus {
-  outline-offset: -4px;
-}
-
-.udex-secondary-navigation__mobile-opener:focus-visible {
-  outline-offset: -4px;
-}
-
-.udex-secondary-navigation__item-icon {
-  margin-inline-start: var(--udexSpacer4);
-  transition: 0.25s transform;
-}
-
-.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,
-.udex-secondary-navigation__item:hover {
-  color: var(--udex-secondary-navigation-item-hover-color);
-}
-
-
-.udex-secondary-navigation__item:active .udex-secondary-navigation__item-icon,
-.udex-secondary-navigation__item:active {
-  color: var(--udex-secondary-navigation-item-active-color);
-}
-
-.udex-secondary-navigation__list-item {
-  position: relative;
-}
-
-.udex-secondary-navigation__list_measure .udex-secondary-navigation__list-item {
-  display: block;
-  position: absolute;
-  visibility: hidden;
-}
-
-[hidden].udex-secondary-navigation__list-item {
-  display: none;
-}
-
-[active] >.udex-secondary-navigation__dropdown-item:before,
-[active].udex-secondary-navigation__list-item:before {
-  background: var(--udex-secondary-navigation-item-active-border-color);
-  content: "";
+.udex-secondary-navigation__heading:before {
+  height: calc(var(--udex-secondary-navigation-title-font-size)* 1.25);
+  background: var(--udex-secondary-navigation-title-border-color);
+  content: '';
   position: absolute;
-  left: 0;
+  width: 1px;
   right: 0;
-  bottom: 0;
-  height: 3px;
-  border-radius: 2px 2px 0 0;
-}
-
-.udex-secondary-navigation__list-item_open .udex-secondary-navigation__item-icon {
-  transform: rotate3d(1,0,0,180deg);
-}
-
-/* dropdown styles */
-
-.udex-secondary-navigation__dropdown {
-  position: absolute;
-  top: 100%;
-  margin-top: 1px;
-  left: calc(var(--udexSpacer16) * -1);
-  box-shadow: var(--udex-secondary-navigation-dropdown-shadow);
-  min-width: var(--udex-secondary-navigation-dropdown-min-width);
-  max-width: var(--udex-secondary-navigation-dropdown-max-width);
-  background: var(--udex-secondary-navigation-dropdown-background);
+  top: 0;
 }
 
-.udex-secondary-navigation__dropdown-list {
-  padding: var(--udexSpacer12) 0;
-  margin: 0;
-  list-style: none;
+.udex-secondary-navigation__heading:dir(rtl):before {
+  right: auto;
+  left: 0;
 }
 
-.udex-secondary-navigation__dropdown-item {
-  padding: var(--udexSpacer12) var(--udexSpacer16);
-  font-family: var(--sapFontFamily);
-  font-size: var(--udex-secondary-navigation-item-font-size);
-  line-height: var(--udex-secondary-navigation-item-line-height);
-  color: var(--udexColorGrey9, #223548);
-  display: block;
-  text-decoration: none;
+.udex-secondary-navigation__list-item {
   position: relative;
 }
 
-button.udex-secondary-navigation__dropdown-item {
-  background: none;
-  border: 0;
-  text-align: start;
-  width: 100%;
-}
-
-[active] .udex-secondary-navigation__dropdown-item:before {
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  height: 100%;
-}
-
-.udex-secondary-navigation__dropdown-item:hover {
-  background: var(--udexColorGrey1, #F5F6F7);
-}
-
-.udex-secondary-navigation__dropdown-item:active {
-  background: var(--udexColorGrey2, #EAECEE);
+.udex-secondary-navigation__mobile-nav {
+  display: none;
 }
 
-.udex-secondary-navigation__dropdown:dir(rtl) {
-  left: auto;
-  right: calc(var(--udexSpacer16) * -1);
+@media (max-width: 1599px) {
+  :host {
+    padding-left: var(--udexSpacer72);
+    padding-right: var(--udexSpacer72);
+  }
 }
 
 @media (max-width: 979px) {
@@ -285,86 +138,21 @@ button.udex-secondary-navigation__dropdown-item {
     padding: 0;
   }
 
-  .udex-secondary-navigation__title,
-  .udex-secondary-navigation__active-title,
-  .udex-secondary-navigation__mobile-opener,
-  .udex-secondary-navigation__active-title {
-    display: block;
-  }
-
-  .udex-secondary-navigation__mobile-opener {
-    border: none;
-    background: none;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    border: 0;
-    height: 100%;
-    padding-inline-end: var(--udexSpacer48);
-  }
-
-  .udex-secondary-navigation__title-icon {
-    transition: 0.25s transform;
-    width: var(--udex-secondary-navigation-mobile-title-icon-width);
-    height: var(--udex-secondary-navigation-mobile-title-icon-height);
-  }
-
-  .udex-secondary-navigation__root_open .udex-secondary-navigation__title-icon {
-    transform: rotate3d(1,0,0,180deg);
-  }
-
-  .udex-secondary-navigation__wrap,
   .udex-secondary-navigation__breadcrumbs,
-  .udex-secondary-navigation__root_centered .udex-secondary-navigation__list-item_more,
-  .udex-secondary-navigation__list-item_more {
-    display: none;
-  }
-
-  .udex-secondary-navigation__wrap,
-  .udex-secondary-navigation__list,
-  .udex-secondary-navigation__text-wrap {
-    flex-direction: column;
-  }
-
-  .udex-secondary-navigation__wrap {
+  .udex-secondary-navigation__holder {
     display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    box-shadow: var(--udex-secondary-navigation-mobile-dropdown-shadow);
-    padding: var(--udexSpacer16) 0;
-    border-radius: 0 0 var(--udexRadiusM) var(--udexRadiusM);
   }
 
-  .udex-secondary-navigation__root_open .udex-secondary-navigation__wrap {
+  .udex-secondary-navigation__mobile-nav {
     display: block;
   }
 
-  .udex-secondary-navigation__title {
-    border: none;
+  .udex-secondary-navigation__root {
     padding: 0;
-    margin: 0 0 7px;
-    max-width: inherit;
-  }
-
-  .udex-secondary-navigation__text-wrap,
-  .udex-secondary-navigation__heading {
-    width: 100%;
   }
 
-  .udex-secondary-navigation__text-wrap {
-    padding-inline-end: 42px;
-  }
-
-  .udex-secondary-navigation__heading {
-    align-items: center;
+  .udex-secondary-navigation__list {
+    flex-direction: column;
   }
 
   .udex-secondary-navigation__list-item,
@@ -373,24 +161,6 @@ button.udex-secondary-navigation__dropdown-item {
     margin-inline-end: 0;
   }
 
-  .udex-secondary-navigation__item {
-    font-family: var(--sapFontFamily);
-    font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
-    line-height: var(--udexTypographyHeadingLineHeight, 1.1);
-    padding: var(--udexSpacer12) var(--udexSpacer48);
-    text-align: start;
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  [active].udex-secondary-navigation__list-item:before {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    height: auto;
-  }
-
   .udex-secondary-navigation__buttons {
     padding: var(--udexSpacer24) var(--udexSpacer48) var(--udexSpacer8);
     margin-top: var(--udexSpacer16);
@@ -407,29 +177,9 @@ button.udex-secondary-navigation__dropdown-item {
     background: var(--udex-secondary-navigation-mobile-button-border-color);
   }
 
-  .udex-secondary-navigation__root {
-    padding: 0;
-  }
-
   .udex-secondary-navigation__holder {
     border: none;
   }
-
-  .udex-secondary-navigation__heading {
-    padding: var(--udexSpacer12) var(--udexSpacer48);
-    box-shadow: var(--udex-secondary-navigation-mobile-heading-shadow);
-    background: var(--udex-secondary-navigation-background);
-    box-sizing: border-box;
-    z-index: 3;
-  }
-
-  .udex-secondary-navigation__item:focus-visible {
-    outline-offset: -4px;
-  }
-
-  .udex-secondary-navigation__root_centered .udex-secondary-navigation__list {
-    align-items: normal;
-  }
 }
 
 @media (max-width: 639px) {
@@ -437,10 +187,6 @@ button.udex-secondary-navigation__dropdown-item {
     padding: var(--udexSpacer12) var(--udexSpacer24);
   }
 
-  .udex-secondary-navigation__item {
-    padding: var(--udexSpacer12) var(--udexSpacer24);
-  }
-
   .udex-secondary-navigation__buttons {
     padding: var(--udexSpacer24) var(--udexSpacer24) var(--udexSpacer8);
     flex-direction: column;
@@ -451,10 +197,6 @@ button.udex-secondary-navigation__dropdown-item {
     left: var(--udexSpacer24);
     right: var(--udexSpacer24);
   }
-
-  .udex-secondary-navigation__mobile-opener {
-    padding-inline-end: var(--udexSpacer24);
-  }
 }
 
 

package/src/themes/SecondaryNavigationItem.css

@@ -0,0 +1,220 @@
+:host {
+  --udex-secondary-navigation-item-color: var(--sapTextColor, #223548);
+  --udex-secondary-navigation-item-hover-color: var(--udexColorBlue7, #0070f2);
+  --udex-secondary-navigation-item-active-color: var(--udexColorBlue9, #0040B0);
+  --udex-secondary-navigation-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-secondary-navigation-item-mobile-font-size: var(--udexTypographyBodySFontSize, 16px);
+  --udex-secondary-navigation-item-line-height: 1.125rem;
+  --udex-secondary-navigation-item-active-border-color: var(--udexColorBlue7, #0070f2);
+  --udex-secondary-navigation-item-dropdown-shadow: 0 10px 30px 0 #22364940;
+  --udex-secondary-navigation-item-dropdown-background: #FFF;
+  --udex-secondary-navigation-item-dropdown-min-width: 240px;
+  --udex-secondary-navigation-item-dropdown-max-width: 360px;
+  --udex-secondary-navigation-item-mobile-dropdown-shadow: 0 2px 8px 0 #2236494D;
+  --udex-secondary-navigation-item-mobile-heading-shadow: 0 2px 4px 0 #22364933;
+  --udex-secondary-navigation-item-mobile-title-color: var(--udexColorGrey9, #223548);
+  --udex-secondary-navigation-item-mobile-title-font-size: var(--udexTypographyBodySFontSize, 16px);
+  --udex-secondary-navigation-item-mobile-title-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  --udex-secondary-navigation-item-mobile-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
+}
+
+.udex-secondary-navigation__dropdown-list {
+  padding: var(--udexSpacer12) 0;
+  margin: 0;
+  list-style: none;
+}
+
+.udex-secondary-navigation__item {
+  color: var(--udex-secondary-navigation-item-color);
+  font-family: var(--sapFontFamily);
+  font-size: var(--udex-secondary-navigation-item-font-size);
+  line-height: var(--udex-secondary-navigation-item-line-height);
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  background: none;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.udex-secondary-navigation__item:focus {
+  outline: none;
+}
+
+:host([desktop]) .udex-secondary-navigation__item:focus,
+.udex-secondary-navigation__item:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+}
+
+.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,
+.udex-secondary-navigation__item:hover {
+  color: var(--udex-secondary-navigation-item-hover-color);
+}
+
+.udex-secondary-navigation__item:active .udex-secondary-navigation__item-icon,
+.udex-secondary-navigation__item:active {
+  color: var(--udex-secondary-navigation-item-active-color);
+}
+
+[active].udex-secondary-navigation__item:before {
+  border-radius: var(--udexRadiusXXS) var(--udexRadiusXXS) 0 0;
+  background: var(--udex-secondary-navigation-item-active-border-color);
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+}
+
+:host([is-open]) .udex-secondary-navigation__item-icon {
+  transform: rotate3d(1,0,0,180deg);
+}
+
+.udex-secondary-navigation__item-icon {
+  margin-inline-start: var(--udexSpacer4);
+  transition: 0.25s transform;
+  min-width: 14px;
+  height: 14px;
+}
+
+.udex-secondary-navigation__dropdown {
+  position: absolute;
+  top: 100%;
+  margin-top: 1px;
+  left: calc(var(--udexSpacer16) * -1);
+  box-shadow: var(--udex-secondary-navigation-item-dropdown-shadow);
+  min-width: var(--udex-secondary-navigation-item-dropdown-min-width);
+  max-width: var(--udex-secondary-navigation-item-dropdown-max-width);
+  background: var(--udex-secondary-navigation-item-dropdown-background);
+}
+
+.udex-secondary-navigation__dropdown:dir(rtl) {
+  right: calc(var(--udexSpacer16) * -1);
+  left: auto;
+}
+
+.udex-secondary-navigation__item-sub-title {
+  display: none;
+}
+
+.udex-secondary-navigation__item-text-wrap {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+@media (max-width: 979px) {
+  :host {
+    width: 100%;
+    min-height: 100%;
+  }
+
+  .udex-secondary-navigation__item-icon {
+    transform: translateY(-50%);
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+  }
+
+  .udex-secondary-navigation__item-icon:dir(rtl) {
+    right: auto;
+    left: 5px;
+  }
+
+  .udex-secondary-navigation__dropdown {
+    position: relative;
+    box-shadow: none;
+    min-width: initial;
+    max-width: initial;
+    left: initial;
+    margin-top: initial;
+    top: initial;
+  }
+
+  .udex-secondary-navigation__dropdown:dir(rtl) {
+    right: 0;
+  }
+
+  .udex-secondary-navigation__item {
+    font-size: var(--udex-secondary-navigation-item-mobile-font-size);
+    font-weight: var(--udex-secondary-navigation-item-mobile-title-font-weight);
+    color:  var(--udex-secondary-navigation-item-mobile-title-color);
+    box-shadow: var(--udex-secondary-navigation-item-mobile-heading-shadow);
+    background: var(--udex-secondary-navigation-item-dropdown-background);
+    padding: var(--udexSpacer12) var(--udexSpacer48);
+    position: relative;
+    box-sizing: border-box;
+    white-space: normal;
+    min-height: 100%;
+    width: 100%;
+    z-index: 1;
+  }
+
+  .udex-secondary-navigation__item-sub-title {
+    font-family: var(--sapFontFamily);
+    font-size: var(--udexTypographyNavigationRegularMFontSize, 14px);
+    line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+    margin-top: var(--udexSpacer8);
+    font-weight: normal;
+    display: block;
+  }
+
+  .udex-secondary-navigation__dropdown {
+    padding: var(--udexSpacer16) 0;
+    border-radius: 0 0 var(--udexRadiusM) var(--udexRadiusM);
+    box-shadow: var(--udex-secondary-navigation-item-mobile-dropdown-shadow);
+  }
+
+  [active].udex-secondary-navigation__item:before {
+    display: none;
+  }
+
+
+  :host([desktop]) .udex-secondary-navigation__item:focus {
+    outline: none;
+  }
+
+  :host([desktop]) .udex-secondary-navigation__item:focus-visible,
+  .udex-secondary-navigation__item:focus-visible {
+    outline-offset: calc(var(--udexSpacer4) * -1);
+    outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  }
+
+  :host([is-open]) .udex-secondary-navigation__item-icon {
+    transform: translateY(-50%) rotate3d(1,0,0,180deg);
+  }
+
+  .udex-secondary-navigation__item-text-wrap {
+    display: flex;
+    align-items: baseline;
+    flex-direction: column;
+    white-space: normal;
+    position: relative;
+    text-align: left;
+    width: 100%;
+    padding-inline-end: var(--udexSpacer32);
+  }
+
+  .udex-secondary-navigation__item-text-wrap:dir(rtl){
+    align-items: flex-start;
+    text-align: right;
+  }
+
+  .udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,
+  .udex-secondary-navigation__item:hover {
+    color: var(--udex-secondary-navigation-item-color);
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-secondary-navigation__item {
+    padding: var(--udexSpacer12) var(--udexSpacer24);
+  }
+}