@sapudex/web-components 0.114.2 → 0.127.6

package/src/themes/SecondaryNavigationSubItem.css

@@ -0,0 +1,118 @@
+:host {
+  --udex-secondary-navigation-sub-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-secondary-navigation-sub-item-line-height: 1.125rem;
+  --udex-secondary-navigation-sub-item-color: var(--udexColorGrey9, #223548);
+  --udex-secondary-navigation-sub-item-hover-color: var(--udexColorBlue7, #0070f2);
+  --udex-secondary-navigation-sub-item-hover-bakground: var(--udexColorGrey1, #F5F6F7);
+  --udex-secondary-navigation-sub-item-active-bakground: var(--udexColorGrey2, #EAECEE);
+  --udex-secondary-navigation-sub-item-active-border-color: var(--udexColorBlue7, #0070f2);
+}
+
+.udex-secondary-navigation__dropdown-item {
+  padding: var(--udexSpacer12) var(--udexSpacer16);
+  font-family: var(--sapFontFamily);
+  font-size: var(--udex-secondary-navigation-sub-item-font-size);
+  line-height: var(--udex-secondary-navigation-sub-item-line-height);
+  color: var(--udex-secondary-navigation-sub-item-color);
+  display: flex;
+  text-decoration: none;
+  position: relative;
+  cursor: pointer;
+}
+
+button.udex-secondary-navigation__dropdown-item {
+  border: 0;
+  width: 100%;
+  background: none;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.udex-secondary-navigation__dropdown-item:focus {
+  outline: none;
+}
+
+:host([desktop]) .udex-secondary-navigation__dropdown-item:focus,
+.udex-secondary-navigation__dropdown-item:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+  outline-offset:  calc(var(--udexSpacer4) * -1);
+}
+
+[active].udex-secondary-navigation__dropdown-item:before,
+[sub-active].udex-secondary-navigation__dropdown-item:before {
+  background: var(--udex-secondary-navigation-sub-item-active-border-color);
+  border-radius: 0 var(--udexRadiusXXS) var(--udexRadiusXXS) 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+}
+
+[active].udex-secondary-navigation__dropdown-item:dir(rtl):before,
+[sub-active].udex-secondary-navigation__dropdown-item:dir(rtl):before {
+  left: auto;
+  right: 0;
+}
+
+[is-back].udex-secondary-navigation__dropdown-item {
+  justify-content: normal;
+}
+
+.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,
+.udex-secondary-navigation__item:hover {
+  color: var(--udex-secondary-navigation-sub-item-hover-color);
+}
+
+.udex-secondary-navigation__dropdown-item:hover {
+  background: var(--udex-secondary-navigation-sub-item-hover-bakground);
+}
+
+.udex-secondary-navigation__dropdown-item:active {
+  background: var(--udex-secondary-navigation-sub-item-active-bakground);
+}
+
+.udex-secondary-navigation__dropdown:dir(rtl) {
+  left: auto;
+  right: calc(var(--udexSpacer16) * -1);
+}
+
+.udex-secondary-navigation__dropdown-icon {
+  min-width: 14px;
+  height: 14px;
+}
+
+.udex-secondary-navigation__dropdown-icon_back {
+  margin-inline-end: var(--udexSpacer4);
+}
+
+@media (max-width: 979px) {
+  .udex-secondary-navigation__dropdown-item {
+    padding: var(--udexSpacer12) var(--udexSpacer48);
+    text-align: left;
+  }
+
+  .udex-secondary-navigation__dropdown-item:hover .udex-secondary-navigation__dropdown-icon,
+  .udex-secondary-navigation__dropdown-item:hover {
+    background: none;
+  }
+
+  :host([desktop]) .udex-secondary-navigation__dropdown-item:focus {
+    outline: none;
+  }
+
+  :host([desktop]) .udex-secondary-navigation__dropdown-item:focus-visible {
+    outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+    border-radius: var(--udexRadiusXXS);
+    outline-offset:  calc(var(--udexSpacer4) * -1);
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-secondary-navigation__dropdown-item {
+    padding: var(--udexSpacer12) var(--udexSpacer24);
+  }
+}

package/src/themes/SelectBox.css

@@ -57,45 +57,39 @@
   right: 0;
 }
 
-:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color:  var(--udexCoreSemanticError9, #840606);
-}
-
 :host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
 }
 
 :host([value-state="Error"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
   border-left: none;
 }
 
-:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color: var(--udexCoreSemanticSuccess9, #1E592F);
-}
-
 :host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
 }
 
 :host([value-state="Success"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
   border-left: none;
 }
 
-:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__icon {
-  color: var(--udexCoreSemanticWarning9, #8D2A00);
-}
-
 :host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
 :host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger {
   border-left: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
 }
 
 :host([value-state="Warning"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
   border-right: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
   border-left: none;
 }
 
@@ -123,15 +117,19 @@
 }
 
 .udex-text-field__trigger {
-  cursor: pointer;
-  height: 42px;
-  min-width: 42px;
+  --udex-control-button-large-height: 42px;
+  --udex-control-button-large-width: 42px;
+  
+  width: 38px;
+  background: none;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
   border-radius: var(--udexRadiusXS);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   margin-inline-start: auto;
+  padding: var(--udexSpacer4, 4px);
   z-index: 1;
+  color: var(--udexColorGrey7, #475E75);
 }
 
 .udex-text-field__text-holder {
@@ -184,12 +182,7 @@
   margin-inline-start: -20px;
 }
 
-:host .udex-text-field__icon {
-  margin-inline-end: 0;
-  color: var(--udexColorGrey7, #475E75);
-}
-
-:host .udex-text-field__input[open] .udex-text-field__icon {
+:host .udex-text-field__input[open] .udex-text-field__trigger {
   color: var(--udexColorBlue9, #0040B0);
 }
 

package/src/themes/StatusBadge.css

@@ -0,0 +1,135 @@
+:host {
+  --udex-status-badge-icon-color-error: var(--udexColorRed8);
+  --udex-status-badge-background-color-error: var(--udexColorRed2);
+  --udex-status-badge-border-color-error: var(--udexColorRed7);
+
+  --udex-status-badge-icon-color-success: var(--udexColorGreen8);
+  --udex-status-badge-background-color-success: var(--udexColorGreen2);
+  --udex-status-badge-border-color-success: var(--udexColorGreen7);
+
+  --udex-status-badge-icon-color-warning: var(--udexColorMango8);
+  --udex-status-badge-background-color-warning: var(--udexColorMango2);
+  --udex-status-badge-border-color-warning: var(--udexColorMango7);
+
+  --udex-status-badge-icon-color-information: var(--udexColorBlue8);
+  --udex-status-badge-background-color-information: var(--udexColorBlue2);
+  --udex-status-badge-border-color-information: var(--udexColorBlue7);
+
+  --udex-status-badge-icon-color-edit: white;
+  --udex-status-badge-background-color-edit: var(--udexColorBlue7);
+
+  --udex-status-badge-size-background-xs-and-s-and-m: 18px;
+  --udex-status-badge-size-background-l: 20px;
+  --udex-status-badge-size-background-xl: 28px;
+
+  --udex-status-badge-size-icon-xs-and-s-and-m: 12px;
+  --udex-status-badge-size-icon-l: 14px;
+  --udex-status-badge-size-icon-xl: 16px;
+
+  display: inline-block;
+  box-sizing: border-box;
+	position: relative;
+}
+
+.udex-status-badge__icon {
+  color: inherit;
+  display: inline-block;
+  border-radius: 50%;
+  outline: 1px solid;
+  vertical-align: top;
+}
+
+/* Value state design styles */
+
+.udex-status-badge__icon,
+:host([value-state="Information"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-information);
+  border-color: var(--udex-status-badge-border-color-information);
+  background: var(--udex-status-badge-background-color-information);
+}
+
+:host([value-state="Error"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-error);
+  border-color: var(--udex-status-badge-border-color-error);
+  background: var(--udex-status-badge-background-color-error);
+}
+
+:host([value-state="Success"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-success);
+  border-color: var(--udex-status-badge-border-color-success);
+  background: var(--udex-status-badge-background-color-success);
+}
+
+:host([value-state="Warning"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-warning);
+  border-color: var(--udex-status-badge-border-color-warning);
+  background: var(--udex-status-badge-background-color-warning);
+}
+
+:host([value-state="Edit"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-edit);
+  background: var(--udex-status-badge-background-color-edit);
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+}
+
+/* Size styles */
+
+.udex-status-badge__icon,
+:host([size="XS"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="S"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="M"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="L"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-l);
+  height: var(--udex-status-badge-size-icon-l);
+  padding: 3px;
+}
+
+:host([size="XL"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xl);
+  height: var(--udex-status-badge-size-icon-xl);
+  padding: 6px;
+}
+
+.udex-status-badge,
+:host([size="XS"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+:host([size="S"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+
+:host([size="M"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+:host([size="L"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-l);
+  height: var(--udex-status-badge-size-background-l);
+}
+
+:host([size="XL"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xl);
+  height: var(--udex-status-badge-size-background-xl);
+}

package/src/themes/StepInput.css

@@ -39,7 +39,10 @@
     --udex-control-button-large-height: var(--udex-step-input-button-size);
     --udex-control-button-large-width: var(--udex-step-input-button-size);
 
-    z-index: 2;
+    position: relative;
+    padding: var(--udexSpacer4, 4px);
+    width: 38px;
+    z-index: 3;
     background: none;
     flex-shrink: 0;
 }
@@ -121,4 +124,4 @@
 
 :host .udex-step-input__button_inc {
     order: 3;
-}
+}

package/src/themes/TabNavigation.css

@@ -153,7 +153,6 @@
   display: flex;
   align-items: center;
   position: relative;
-  z-index: 0;
 }
 
 .udex-tab-navigation__header:before {
@@ -355,6 +354,13 @@
   line-height: var(--udex-tab-navigation-content-line-height);
 }
 
+.udex-tab-navigation__content-item:focus,
+.udex-tab-navigation__content-item:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid var(--udex-button-tab-text-color-active);
+  border-radius: var(--udexRadiusXXS, 2px);
+}
+
 .hidden {
   display: none;
 }