@sapudex/web-components 0.114.2 → 0.127.6

package/src/themes/Footer.css

@@ -1,52 +1,62 @@
 :host {
+  --udex-footer-container-xl-max-width: 1432px;
+  --udex-footer-container-l-max-width: 1456px;
+  --udex-footer-background-color: var(--udexCoreSurfaceHigher, #EAECEE);
+  --udex-footer-icon-color: var(--sapShell_InteractiveTextColor, #354A5F);
+  --udex-footer-text-color: var(--sapShell_NeutralColor, #475E75);
+  --udex-footer-expandable-link-text-color: var(--sapTitleColor, #000);
+  --udex-footer-expandable-link-underline-border: var(--sapNeutralBorderColor, #A9B4BE);
+  --udex-footer-link-color-heading: var(--sapShell_GroupTitleTextColor, #354A5F);
+  --udex-footer-link-color: var(--sapShell_InteractiveTextColor, #354A5F);
+
   display: block;
-  width: 100%;
   container-type: inline-size;
+  width: 100%;
 }
 
 :host a {
   text-decoration: none;
+  color: var(--udex-footer-link-color);
+}
+
+:host a:hover,
+.udex-footer__remark a {
+  text-decoration: underline;
 }
 
 .udex-footer {
-  background: var(--udexCoreSurfaceHigher);
-  padding: var(--udexSpacer72) var(--udexSpacer84);
-  padding-bottom: calc(var(--udexSpacer72) + 64px);
+  background: var(--udex-footer-background-color);
+  padding: var(--udexSpacer84);
   font-family: var(--sapFontFamily);
+  color: var(--udex-footer-text-color);
   position: relative;
 }
 
 .udex-footer__content {
   display: flex;
+  flex-wrap: wrap;
   position: relative;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: 1428px;
-  gap: var(--udexSpacer48);
+  max-width: var(--udex-footer-container-xl-max-width);
+  column-gap: var(--udexSpacer48);
 }
 
 .udex-footer__contact-social {
-  display: flex;
-  flex-direction: column;
   position: relative;
-  flex: 1 0 28%;
+  flex: 1 0 24.8%;
 }
 
-.udex-footer .udex-footer__back-to-top-button {
+.udex-footer__back-to-top-button {
   position: absolute;
-}
-
-.udex-footer:dir(ltr) .udex-footer__back-to-top-button {
   top: var(--udexSpacer40);
   right: var(--udexSpacer24);
   left: auto;
   bottom: auto;
 }
 
-.udex-footer:dir(rtl) .udex-footer__back-to-top-button {
-  top: var(--udexSpacer40);
+.udex-footer__back-to-top-button:dir(rtl) {
   left: var(--udexSpacer24);
-  bottom: auto;
   right: auto;
 }
 
@@ -59,33 +69,23 @@
   width: 65.6px;
 }
 
-.udex-footer__contact, .udex-footer__contact > div {
+.udex-footer__contact-social,
+.udex-footer__numbers-wrapper,
+.udex-footer__contact {
   display: flex;
   flex-direction: column;
 }
 
 .udex-footer__contact > div {
-  margin-bottom: var(--udexSpacer20);
-}
-
-.udex-footer__contact > div > div {
-  display: flex;
-}
-
-.udex-footer__contact .udex-footer__contact-us,
-.udex-footer__contact .udex-footer__chat-with-us {
-  height: 26px;
   display: flex;
-  align-items: center;
+  margin-bottom: var(--udexSpacer20);
 }
 
-.udex-footer__contact .udex-footer__numbers-wrapper {
-  display: flex;
-  flex-direction: column;
+.udex-footer__numbers-wrapper {
   gap: var(--udexSpacer20);
 }
 
-.udex-footer__contact .udex-footer__icon-container {
+.udex-footer__icon-container {
   box-sizing: border-box;
   display: flex;
   justify-content: center;
@@ -93,92 +93,67 @@
   width: 26px;
   height: 26px;
   padding: var(--udexSpacer4);
+  margin-inline-end: var(--udexSpacer16);
 }
 
 .udex-footer__contact .udex-footer__icon {
   width: 18px;
   height: 18px;
-  color: var(--udexColorGrey8, #354A5F);
+  color: var(--udex-footer-icon-color);
 }
 
-.udex-footer__contact:dir(ltr) .udex-footer__icon-container {
-  margin-right: var(--udexSpacer16);
-}
-
-.udex-footer__contact:dir(rtl) .udex-footer__icon-container {
-  margin-left: var(--udexSpacer16);
-}
-
-.udex-footer__contact .udex-footer__country,
-.udex-footer__contact .udex-footer__chat-with-us-link,
-.udex-footer__contact .udex-footer__contact-us-link {
+.udex-footer__country,
+.udex-footer__chat-with-us-link,
+.udex-footer__contact-us-link {
   font-size: var(--udexTypographyBodyXSFontSize);
   line-height: 21px;
-  color: var(--udexColorGrey8);
 }
 
-.udex-footer__contact .udex-footer__number {
+.udex-footer__number {
   font-size: var(--udexTypographyHeadingMediumXXSFontSize);
   font-weight: var(--udexTypographyFontWeightMedium);
   line-height: 22px;
-  color: var(--udexColorGrey8);
-}
-
-.udex-footer__contact .udex-footer__chat-with-us-link:hover,
-.udex-footer__contact .udex-footer__contact-us-link:hover,
-.udex-footer__contact .udex-footer__number:hover {
-  text-decoration: underline;
 }
 
-.udex-footer__contact .udex-footer__remark {
+.udex-footer__remark {
   font-size: var(--udexTypographyBodyXXSFontSize);
   line-height: 18px;
-  color: var(--udexColorGrey8);
 }
 
-.udex-footer__contact .udex-footer__remark a {
-  color: var(--udexColorGrey8);
-}
-
-.udex-footer__contact .udex-footer__remark a {
-  text-decoration: underline;
-}
-
-.udex-footer__contact .udex-footer__remark a:hover {
+.udex-footer__remark a:hover {
   color: var(--udexColorGrey11);
 }
 
-.udex-footer__contact .udex-footer__remark a:active {
+.udex-footer__remark a:active {
   color: var(--udexColorBlue9);
 }
 
-.udex-footer__contact .udex-footer__country {
-  margin: 0 0 var(--udexSpacer2) 0;
+.udex-footer__country {
+  margin: 0 0 var(--udexSpacer2);
 }
 
-.udex-footer__contact .udex-footer__remark,
-.udex-footer__contact .udex-footer__number {
-  margin: var(--udexSpacer2) 0 0 0;
+.udex-footer__remark,
+.udex-footer__number {
+  margin: var(--udexSpacer2) 0 0;
 }
 
+.hidden,
 .udex-footer__divider,
 .udex-footer__action-item,
-.udex-footer__content > .udex-footer__social {
+.udex-footer__accordion::part(head) {
   display: none;
-  visibility: hidden;
-}
-
-.udex-footer__contact-social > .udex-footer__social {
-  margin-top: auto;
-  margin-bottom: calc(-1 * var(--udexSpacer64));
 }
 
 .udex-footer__social-container {
   display: flex;
-  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  padding-top: var(--udexSpacer32);
+  row-gap: var(--udexSpacer12);
+  column-gap: var(--udexSpacer12);
 }
 
-.udex-footer__social-container .udex-footer__social-icon {
+.udex-footer__social-icon {
   display: flex;
   width: 32px;
   height: 32px;
@@ -186,16 +161,7 @@
   background-color: var(--udexColorNeutralWhite);
 }
 
-
-.udex-footer__social-container:dir(ltr) .udex-footer__social-icon {
-  margin-right: var(--udexSpacer12);
-}
-
-.udex-footer__social-container:dir(rtl) .udex-footer__social-icon {
-  margin-left: var(--udexSpacer12);
-}
-
-.udex-footer__social-container .udex-footer__social-icon > img {
+.udex-footer__social-icon > img {
   margin: auto;
   align-items: center;
   max-width: 100%;
@@ -205,7 +171,7 @@
 .udex-footer__links {
   display: flex;
   gap: var(--udexSpacer48);
-  flex: 2 1 59%;
+  flex: 1 1 59%;
 }
 
 .udex-footer__links-group {
@@ -226,7 +192,7 @@ h3 {
   font-size: var(--udexTypographyNavigationMediumXLFontSize);
   line-height: 18px;
   font-weight: var(--udexTypographyFontWeightMedium);
-  color: var(--udexColorGrey8);
+  color: var(--udex-footer-link-color-heading);
   margin: 0 0 var(--udexSpacer20);
 }
 
@@ -235,96 +201,70 @@ h3 {
 }
 
 .udex-footer__links-list li a {
-  color: var(--udexColorGrey8);
   font-size: var(--udexTypographyBodyXSFontSize);
   line-height: 21px;
 }
 
-.udex-footer__links-list li a:hover {
-  text-decoration: underline;
-}
-
-.udex-footer__accordion::part(head) {
-  display: none;
-}
-
-:host([desktop]) .udex-footer  a:focus,
+:host([desktop]) .udex-footer a:focus,
 .udex-footer a:focus-visible {
   outline: solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);
-  border-radius: 2px;
+  border-radius: var(--udexRadiusXXS, 2px);
 }
 
-.hidden {
-  display: none;
+.udex-footer__contact-us,
+.udex-footer__chat-with-us {
+  align-items: center;
 }
 
 @media (max-width: 1599px) {
   .udex-footer {
-    padding-left: var(--udexSpacer72);
-    padding-right: var(--udexSpacer72);
+    padding: var(--udexSpacer40) var(--udexSpacer72);
+  }
+  .udex-footer__content {
+    max-width: var(--udex-footer-container-l-max-width);
   }
 }
 
 @media (max-width: 1279px) {
   .udex-footer__content {
     flex-direction: column;
-    margin-bottom: 0;
+    flex-wrap: nowrap;
     gap: var(--udexSpacer20);
   }
 
-  .udex-footer:dir(ltr) .udex-footer__back-to-top-button {
-    right: var(--udexSpacer16);
-    left: auto;
+  .udex-footer__logo {
+    margin-bottom: var(--udexSpacer32);
   }
 
-  .udex-footer:dir(rtl) .udex-footer__back-to-top-button {
-    left: var(--udexSpacer16);
-    right: auto;
+  .udex-footer__contact-us,
+  .udex-footer__chat-with-us,
+  .udex-footer__contact > div {
+    margin-bottom: auto;
   }
 
-  .udex-footer__contact-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: var(--udexSpacer32);
+  .udex-footer__social-container {
+    padding-top: 0;
   }
 
-  .udex-footer__logo {
-    margin-bottom: 0;
+  .udex-footer__back-to-top-button {
+    right: var(--udexSpacer16);
   }
 
-  .udex-footer__contact, .udex-footer__contact > div {
-    flex-direction: row;
-    margin-bottom: 0;
+  .udex-footer__back-to-top-button:dir(rtl) {
+    left: var(--udexSpacer16);
   }
 
   .udex-footer__contact {
     gap: var(--udexSpacer48);
-  }
-
-  .udex-footer__contact > div {
-    flex: 1;
-  }
-
-  .udex-footer__contact .udex-footer__contact-us,
-  .udex-footer__contact .udex-footer__chat-with-us {
-    align-items: center;
-  }
-
-  .udex-footer__contact-social > .udex-footer__social {
-    display: none;
-  }
-
-  .udex-footer__divider,
-  .udex-footer__content > .udex-footer__social {
-    display: block;
-    visibility: visible
+    flex-direction: row;
   }
 
   .udex-footer__divider {
     display: block;
-    margin: var(--udexSpacer20) 0 var(--udexSpacer20) 0;
+    margin: var(--udexSpacer20) 0;
   }
 
+  .udex-footer__contact > div,
   .udex-footer__links-group {
     flex: 1;
   }
@@ -339,54 +279,41 @@ h3 {
     padding: var(--udexSpacer40) var(--udexSpacer48) var(--udexSpacer120) var(--udexSpacer48);
   }
 
-  .udex-footer:dir(ltr) .udex-footer__back-to-top-button {
-    top: auto;
+  .udex-footer__back-to-top-button {
     bottom: var(--udexSpacer40);
     left: var(--udexSpacer48);
+    top: auto;
     right: auto;
   }
 
-  .udex-footer:dir(rtl) .udex-footer__back-to-top-button {
-    top: auto;
+  .udex-footer__back-to-top-button:dir(rtl) {
     bottom: var(--udexSpacer40);
     right: var(--udexSpacer48);
+    top: auto;
     left: auto;
   }
 
   .udex-footer__content {
-    flex-direction: column;
     gap: var(--udexSpacer16);
   }
 
   .udex-footer__contact {
-    flex-direction: column;
     gap: var(--udexSpacer20);
-  }
-
-  .udex-footer__content > .udex-footer__social {
-    display: block;
-  }
-
-  .udex-footer__links {
     flex-direction: column;
-    gap: 0;
   }
 
-
   .udex-footer__action-item {
     --udex-accordion-border-width: 1px;
     --udex-accordion-title-font-weight: var(--udexTypographyFontWeightRegular);
-    --udex-accordion-headline-font-size: var(--udexTypographyHeadingRegularXXXXSFontSize);
+    --udex-accordion-item-headline-font-size: var(--udexTypographyHeadingRegularXXXXSFontSize);
     --udex-accordion-item-header-padding: var(--udexSpacer4) var(--udexSpacer12) var(--udexSpacer4) var(--udexSpacer8);
+    --udex-accordion-item-headline-color: var(--udex-footer-expandable-link-text-color);
+    --udex-accordion-item-border-color: var(--udex-footer-expandable-link-underline-border);
     display: block;
     width: 100%;
-    visibility: visible;
-  }
-
-  .udex-footer__links-item  {
-    margin-bottom: 0;
   }
 
+  .udex-footer__links,
   .udex-footer__divider {
     display: none;
   }
@@ -394,16 +321,14 @@ h3 {
 
 @media (max-width: 639px) {
   .udex-footer {
-    padding: var(--udexSpacer40) var(--udexSpacer24) var(--udexSpacer120) var(--udexSpacer24);
+    padding: var(--udexSpacer40) var(--udexSpacer24) var(--udexSpacer120);
   }
 
-  .udex-footer:dir(ltr) .udex-footer__back-to-top-button {
+  .udex-footer__back-to-top-button {
     left: var(--udexSpacer24);
-    right: auto;
   }
 
-  .udex-footer:dir(rtl) .udex-footer__back-to-top-button {
+  .udex-footer__back-to-top-button:dir(rtl) {
     right: var(--udexSpacer24);
-    left: auto;
   }
 }

package/src/themes/HeroBanner.css

@@ -10,25 +10,32 @@
   --udexHeroBannerContentZIndex: 2;
   --udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);
   --udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);
+  --udexHeroBannerContentPaddingVerticalXLtoM: var(--udexSpacer56, 56px);
+  --udexHeroBannerPaddingHorizontalLandM: var(--udexSpacer72);
+  --udexHeroBannerPaddingHorizontalS: var(--udexSpacer48);
+  --udexHeroBannerPaddingHorizontalXS: var(--udexSpacer24);
+  --udexHeroBannerBackgroundVideoColor: trasparent;
 
-  --udexHeroBannerBackgroundVideoColor: var(--udexColorNeutralBlack);
-
-  --udexHeroBannerSlotMaxWidth: calc(
-    50% - (2 * var(--udexHeroBannerContentPaddingVertical))
-  );
   --udexHeroBannerSlotMaxHeight: calc(
     100% - (2 * var(--udexHeroBannerContentPaddingHorizontal))
   );
+  --udex-hero-banner-container-xl-max-width: 1432px;
+  --udex-hero-banner-container-l-max-width: 1456px;
 }
 
 .udex-hero-banner {
   container-type: inline-size;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
   min-height: var(--udexHeroBannerMinHeight, 200px);
 }
 
+.udex-hero-banner__container {
+  position: relative;
+  max-width: var(--udex-hero-banner-container-xl-max-width);
+  padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
+  margin: 0 auto;
+  height: 100%;
+}
+
 .udex-hero-banner--video {
   color: var(--udexColorNeutralWhite);
   justify-content: center;
@@ -44,13 +51,20 @@
     bottom right
   );
   z-index: var(--udexHeroBannerBackroundImageZIndex, 1);
+  top: 0;
+  left: 0;
 }
 
 .udex-hero-banner__background-video-wrapper {
   position: relative;
   width: 100%;
-  max-width: 100rem;
+  padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
   height: 100%;
+  box-sizing: border-box;
+
+  .udex-hero-banner__background-image {
+    display: none;
+  }
 }
 
 .udex-hero-banner__media-button:dir(rtl) {
@@ -84,19 +98,71 @@
 
 #udex-hero-banner__content,
 #udex-hero-banner__additionalContent {
+  position: relative;
   display: flex;
   max-height: var(--udexHeroBannerSlotMaxHeight);
   flex-basis: 100%;
   flex-grow: 1;
   z-index: var(--udexHeroBannerContentZIndex, 2);
-  padding: var(--udexHeroBannerContentPaddingVertical)
-    var(--udexHeroBannerContentPaddingHorizontal);
+  padding: 0;
 }
 
-@container (min-width: 980px) {
+.udex-hero-banner__content-container {
+  display: flex;
+  gap: var(--udexSpacer48, 48px);
+  padding: 0;
+}
+
+@media (max-width: 1599px) {
+  .udex-hero-banner__container {
+    padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
+    max-width: var(--udex-hero-banner-container-l-max-width);
+  }
+
+  .udex-hero-banner__background-video-wrapper {
+    padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-hero-banner__container {
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
+    max-width: 100%;
+  }
+  .udex-hero-banner__content-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--udexSpacer32, 32px);
+  }
+
+  .udex-hero-banner__background-video-wrapper{
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
+    background-color: var(--udexHeroBannerBackgroundVideoColor);
+
+    .udex-hero-banner__background-image {
+      display: block;
+    }
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-hero-banner__container {
+    max-width: 100%;
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);
+  }
+
+  .udex-hero-banner__background-video-wrapper {
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);
+    
+    .udex-hero-banner__background-image {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 980px) {
   .udex-hero-banner--video {
     height: 28.125rem; /* 450px */
-    background-color: var(--udexHeroBannerBackgroundVideoColor) !important;
   }
 
   .udex-hero-banner__media-button {
@@ -124,6 +190,8 @@
     object-fit: cover;
     object-position: center;
     height: 100%;
+    top: 0;
+    left: 0;
   }
 
   .udex-hero-banner__background-video-overlay {
@@ -136,6 +204,8 @@
       rgba(18, 23, 28, 0.765) 0%,
       rgba(18, 23, 28, 0.09) 100%
     );
+    top: 0;
+    left: 0;
   }
 
   .udex-hero-banner__background-image {
@@ -144,10 +214,4 @@
       top right
     );
   }
-
-  #udex-hero-banner__content,
-  #udex-hero-banner__additionalContent {
-    max-width: var(--udexHeroBannerSlotMaxWidth);
-    flex-basis: var(--udexHeroBannerSlotMaxWidth);
-  }
-}
+}