@sapudex/web-components 2.2.0 → 2.4.0

package/src/themes/Contact.css

@@ -0,0 +1,184 @@
+:host {
+  --udex-contact-popover-width: 360px;
+  --udex-contact-popover-shadow: 0 20px 80px 0 rgba(34, 54, 73, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.00);
+  --udex-contact-call-us-background: var(--udexColorBlue7, #0070F2);
+  --udex-contact-call-us-padding: 28px var(--udexSpacer32);
+  --udex-contact-botton-position: var(--udexSpacer24);
+  --udex-contact-right-position: var(--udexSpacer24);
+
+  position: fixed;
+  bottom: var(--udex-contact-botton-position);
+  right: var(--udex-contact-right-position);
+}
+
+:host(:dir(rtl)) {
+  right: auto;
+  left: var(--udex-contact-right-position);
+}
+
+.udex-contact__button {
+  --udex-button-icon-l-size: 26px;
+  --udex-button-large-size: 58px;
+  --udex-button-icon-text-spacing-large-size: var(--udexSpacer12);
+  --udex-button-padding-large: 8px 18px;
+  box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
+  font-size: var(--udexTypographyHeadingMediumXXXSFontSize, 18px);
+  border: 2px solid var(--udexColorNeutralWhite, #FFF);
+  background: var(--udexColorBlue7, #0070F2);
+}
+
+.udex-contact__opener {
+  padding-top: var(--udexSpacer24);
+}
+
+.udex-contact__button:hover {
+  background: var(--udexColorBlue9, #0040B0);
+}
+
+[open].udex-contact__popover + .udex-contact__opener {
+  pointer-events: none;
+}
+
+[open].udex-contact__popover + .udex-contact__opener .udex-contact__button,
+:host [active].udex-contact__button {
+  background: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorBlue9, #0040B0);
+  border-color: var(--udexColorBlue9, #0040B0);
+  pointer-events: auto;
+}
+
+.udex-contact__popover {
+  width: var(--udex-contact-popover-width);
+  box-shadow: var(--udex-contact-popover-shadow);
+}
+
+.udex-contact__call-us {
+  background: var(--udex-contact-call-us-background);
+  padding: var(--udex-contact-call-us-padding);
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  color: var(--udexColorNeutralWhite);
+  text-align: center;
+}
+
+.udex-contact__close-btn-wrap {
+  text-align: end;
+  height: 0;
+}
+
+.udex-contact__close-btn {
+  --udex-button-focus-border-color: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorNeutralWhite, #FFF);
+  margin-inline-start: auto;
+  display: none;
+}
+
+[on-phone] .udex-contact__call-us-heading,
+[on-phone] .udex-contact__close-btn {
+  display: block;
+}
+
+[on-phone] .udex-contact__call-us-heading {
+  margin-inline-end: var(--udexSpacer8);
+}
+
+.udex-contact__items {
+  padding: var(--udexSpacer12) 0;
+}
+
+.udex-contact__popover::part(content) {
+  padding: 0;
+}
+
+.udex-contact__call-us-heading,
+[on-phone].udex-contact__popover::part(header) {
+  display: none;
+}
+
+.udex-contact__call-us-title {
+  font-size: var(--udexTypographyBodyXLFontSize, 24px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  margin: 0 0 var(--udexSpacer12);
+}
+
+.udex-contact__number-wrapper:first-child .udex-contact__number {
+  font-size: var(--udexTypographyHeadingMediumSFontSize, 28px);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+}
+
+.udex-contact__number-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: var(--udexSpacer12);
+  font-size: var(--udexTypographyBodyLFontSize	, 20px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+}
+
+.udex-contact__complete-list {
+  margin: 28px 0 0 ;
+}
+
+.udex-contact__country {
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  margin-bottom: var(--udexSpacer2);
+}
+
+.udex-contact__local-country-link,
+.udex-contact__number {
+  --sapContent_FocusColor: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorNeutralWhite, #FFF);
+  text-decoration: none;
+}
+
+.udex-contact__local-country-link {
+  --udex-link-hover-text-decoration: none;
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  text-decoration: none;
+}
+
+.udex-contact__number {
+  --udex-link-text-decoration: none;
+  --udex-link-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  font-size: var(--udexTypographyBodyLFontSize, 20px);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+}
+
+.udex-contact__number:hover {
+  text-decoration: underline;
+}
+
+.udex-contact__call-us_empty {
+  height: 16px;
+  padding: 0;
+}
+
+[on-phone] .udex-contact__call-us_empty {
+  font-size: var(--udexTypographyHeadingMediumXXXSFontSize, 18px);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  padding: var(--udexSpacer16);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+}
+
+@media (max-width: 979px) {
+  :host {
+    bottom: var(--udexSpacer16);
+    right: var(--udexSpacer16);
+  }
+
+  :host(:dir(rtl)) {
+    right: auto;
+    left: var(--udexSpacer16);
+  }
+
+  .udex-contact__opener {
+    padding-top: var(--udexSpacer16);
+  }
+}

package/src/themes/ContactItem.css

@@ -0,0 +1,44 @@
+:host {
+  --udex-contact-item-font-family: var(--sapFontFamily, sans-serif);
+  --udex-contact-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-contact-item-line-height: var(--udexTypographyBodyLineHeight, 21px);
+  --udex-contact-item-padding: var(--udexSpacer16) 18px;
+  --udex-contact-item-color: var(--udexColorGrey9, #223548);
+  --udex-contact-item-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-contact-item-icon-size: 26px;
+  --udex-contact-item-icon-padding: 6px;
+}
+
+.udex-contact-item {
+  font-family: var(--udex-contact-item-font-family);
+  font-size: var(--udex-contact-item-font-size);
+  line-height: var(--udex-contact-item-line-height);
+  padding: var(--udex-contact-item-padding);
+  color: var(--udex-contact-item-color);
+  display: flex;
+}
+
+.udex-contact-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.udex-contact-item__description {
+  margin: var(--udexSpacer4) 0 0;
+}
+
+.udex-contact-item__text,
+.udex-contact-item__link {
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+}
+
+.udex-contact-item__icon {
+  color: var(--udex-contact-item-icon-color);
+  margin-inline-end: var(--udexSpacer16);
+  min-width: var(--udex-contact-item-icon-size);
+  width: var(--udex-contact-item-icon-size);
+  height: var(--udex-contact-item-icon-size);
+  padding: var(--udex-contact-item-icon-padding);
+}

package/src/themes/DatePickerPopover.css

@@ -1,12 +1,70 @@
 .udex-date-picker__popover {
   --udex-dropdown-border-width: 0;
   --udex-dropdown-pane-max-width: fit-content;
+  padding: 8px;
 }
 
+::part(year-picker-root),
+::part(month-picker-root) {
+  padding: var(--udexSpacer24, 24px) 0;
+}
+
+::part(month-cell),
+::part(calendar-header-middle-button) {
+  padding: 8px 14px;
+  height: 42px;
+  font-weight: 500;
+}
+
+::part(month-cell) {
+  margin: 0 6px 16px 6px;
+  min-width: calc(33.333% - 8px);
+}
+
+::part(year-cell) {
+  margin: 0 4px 16px 4px;
+  min-width: calc(25% - 6px);
+}
+
+::part(year-range-cell) {
+  width: 50%;
+  margin: 0 4px 16px 4px;
+}
+
+::part(year-range-cell),
+::part(year-cell) {
+  height: 36px;
+  padding: 9px 10px;
+  font-weight: 500;
+}
 
-@media (width < 640px) {
-  .udex-date-picker__popover {
-    --udex-dropdown-pane-min-width-xs: fit-content;
-    --udex-dropdown-pane-max-width-xs: fit-content;
-  }
-}
+::part(calendar-header-middle-button) {
+  width: auto;
+  flex-grow: 0;
+  border: 1px solid var(--udex-button-color-transparent, hsla(0, 0%, 0%, 0));
+}
+
+::part(calendar-header-middle-button):hover {
+  background-color: var(--sapButton_Lite_Hover_Background, var(--udexColorGrey2));
+  border-color: var(--sapButton_Lite_Hover_BorderColor, var(--udexColorGrey7));
+}
+
+::part(day-cell):hover {
+  background-color: var(--udexColorGrey3, #D5DADD);
+}
+
+::part(year-cell-selected):hover,
+::part(month-cell-selected):hover,
+::part(day-cell-selected):hover {
+  background-color: var(--udexColorBlue1, #EBF8FF);
+  border-color: var(--udexColorBlue9, #0040B0);
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+::part(day-cell-selected-between) {
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+::part(day-cell-selected-between):hover {
+  background-color: var(--udexColorBlue2, #D1EFFF);
+}