@sapudex/web-components 0.117.1 → 0.127.6

package/src/themes/TextField.css

@@ -28,11 +28,21 @@
   --udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));
   --udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));
 
-  --udex-input-padding: 9px var(--udexSpacer12, 12px);
+  --udex-input-padding: 0 var(--udexSpacer12, 12px);
   --udex-input-min-width-xs-and-s: 100%;
   --udex-input-max-width: 100%;
 }
 
+.udex-text-field__wrap {
+  display: flex;
+  border-radius: var(--udexRadiusXS, 4px);
+  border: 1px solid var(--udex-input-color-standard-default-border);
+}
+
+.udex-text-field__wrap:hover {
+  border-color: var(--udex-input-color-standard-hover-border);
+}
+
 .udex-text-field__container {
   position: relative;
   font-family: var(--sapFontFamily, sans-serif);
@@ -54,7 +64,7 @@
 
 .udex-text-field__input {
   width: 100%;
-  height: 42px;
+  height: 40px;
   font-size: var(--sapProgress_FontSize, 16px);
   font-family: inherit;
   line-height: 24px;
@@ -62,92 +72,101 @@
   padding: var(--udex-input-padding);
   border-radius: var(--udexRadiusXS, 4px);
   box-sizing: border-box;
-  border: 1px solid var(--udex-input-color-standard-default-border);
   font-weight: var(--udexTypographyFontWeightRegular, 400);
+  background: transparent;
+  border: none;
 }
 
-.udex-text-field__container:hover .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-standard-hover-border);
+.udex-text-field__input:focus {
+  outline: none;
 }
 
-.udex-text-field__input[open],
-:host([active]) .udex-text-field__input, .udex-text-field__input:focus {
-  border: 1px solid var(--udex-input-color-standard-active-border);
+.udex-text-field__wrap[open],
+:host([active]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-standard-active-border);
   outline: 0;
 }
 
-.udex-text-field__input[open]:hover {
+:host([active]) .udex-text-field_icon-container {
+  border-color: transparent;
+  color: var(--udexColorGrey7, #475E75);
+}
+
+.udex-text-field__wrap[open]:hover {
   border-color: var(--udex-input-color-standard-active-border);
 }
 
 /* additional #input selector to add weight */
 
-:host([disabled]) .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-disabled-border);
+:host([disabled]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-disabled-border);
   background-color: var(--udex-input-color-standard-default-background-light);
 }
 
-:host([readonly]) .udex-text-field__input {
-  border: 1px solid var(--udex-input-color-read-only-default-border);
+:host([readonly]) .udex-text-field__wrap {
+  border-color: var(--udex-input-color-read-only-default-border);
   background-color: var(--udex-input-color-read-only-default-background);
 }
 
-:host([displayonly]) .udex-text-field__container .udex-text-field__input {
+:host([value-state="Success"][displayonly]) .udex-text-field__wrap,
+:host([value-state="Warning"][displayonly]) .udex-text-field__wrap,
+:host([value-state="Error"][displayonly]) .udex-text-field__wrap,
+:host([displayonly]) .udex-text-field__wrap {
   border: 0;
   background-color: transparent;
   font-family: inherit;
 }
 
-:host([displayonly]) .udex-text-field__container .udex-text-field__input[open],
-:host([displayonly]) .udex-text-field__container .udex-text-field__input:focus {
+:host([displayonly]) .udex-text-field__wrap[open],
+:host([displayonly]) .udex-text-field__wrap {
   outline: 0;
   border: 0;
 }
 
-:host([displayonly][value-state="Success"]) .udex-text-field__input:hover,
-:host([displayonly][value-state="Warning"]) .udex-text-field__input:hover,
-:host([displayonly][value-state="Error"]) .udex-text-field__input:hover {
+:host([displayonly][value-state="Success"]) .udex-text-field__wrap:hover,
+:host([displayonly][value-state="Warning"]) .udex-text-field__wrap:hover,
+:host([displayonly][value-state="Error"]) .udex-text-field__wrap:hover {
   border: none;
 }
 
-:host([value-state="Error"]) .udex-text-field__input {
+:host([value-state="Error"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-error-default-border);
 }
 
-:host([value-state="Error"]) .udex-text-field__input:hover {
+:host([value-state="Error"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-error-hover-border);
 }
 
-:host([value-state="Error"]) .udex-text-field__input[open],
-:host([value-state="Error"]) .udex-text-field__input:focus {
+:host([value-state="Error"]) .udex-text-field__wrap[open],
+:host([value-state="Error"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-error-active-border);
   outline: 0;
 }
 
-:host([value-state="Warning"]) .udex-text-field__input {
+:host([value-state="Warning"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-warning-default-border);
 }
 
-:host([value-state="Warning"]) .udex-text-field__input:hover {
+:host([value-state="Warning"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-warning-hover-border);
 }
 
-:host([value-state="Warning"]) .udex-text-field__input[open],
-:host([value-state="Warning"]) .udex-text-field__input:focus {
+:host([value-state="Warning"]) .udex-text-field__wrap[open],
+:host([value-state="Warning"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-warning-active-border);
   outline: 0;
 }
 
-:host([value-state="Success"]) .udex-text-field__input {
+:host([value-state="Success"]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-success-default-border);
 }
 
-:host([value-state="Success"]) .udex-text-field__input:hover {
+:host([value-state="Success"]) .udex-text-field__wrap:hover {
   border: 1px solid var(--udex-input-color-success-hover-border);
 }
 
-:host([value-state="Success"]) .udex-text-field__input[open],
-:host([value-state="Success"]) .udex-text-field__input:focus {
+:host([value-state="Success"]) .udex-text-field__wrap[open],
+:host([value-state="Success"][active]) .udex-text-field__wrap {
   border: 1px solid var(--udex-input-color-success-active-border);
   outline: 0;
 }
@@ -214,37 +233,38 @@
   --sapButton_BorderWidth: 0 0 0 1px;
   --udex-control-button-large-height: 40px;
   --udex-control-button-large-width: 40px;
+  position: relative;
+  padding: var(--udexSpacer4, 4px);
 }
 
-.udex-text-field_icon-container {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  right: 1px;
-  top: 1px;
-}
-
-:host(:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap:hover .udex-text-field_icon-container {
   --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+  --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
-  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__wrap .udex-text-field_icon-container {
   --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container .udex-text-field_icon-container {
-  --sapButton_BorderWidth: 0 1px 0 0;
+:host([active]) [active].udex-text-field_icon-container,
+:host([active]) [active].udex-text-field_icon-container,
+:host([active]) [active].udex-text-field_icon-container {
+  border-color: transparent;
+  color: var(--udexColorGrey7, #475E75);
 }
 
-:host([value-state="Success"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
-:host([value-state="Error"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
-:host([value-state="Warning"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
-  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-success-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-error-border-color: var(--udexColorGrey4, #A9B4BE);
-  --udex-control-button-warning-border-color: var(--udexColorGrey4, #A9B4BE);
+:host [active].udex-text-field_icon-container,
+:host [active].udex-text-field_icon-container,
+:host [active].udex-text-field_icon-container {
+  border-color: var(--udexColorBlue4, #89D1FF);
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+:host([active]) .udex-text-field_icon-container:hover,
+:host([active]) .udex-text-field_icon-container:hover,
+:host([active]) .udex-text-field_icon-container:hover {
+  border-color: var(--udexColorGrey7, #475E75);
+  color: var(--udexColorGrey7, #475E75);
 }
 
 /* Supporting text styles */
@@ -284,12 +304,12 @@
   height: var(--sapContent_IconHeight, 16px);
 }
 
-:host .udex-text-field__input[type="number"] {
+:host .udex-text-field__wrap[type="number"] {
   appearance: textfield;
 }
 
-:host .udex-text-field__input[type="number"]::-webkit-outer-spin-button,
-:host .udex-text-field__input[type="number"]::-webkit-inner-spin-button {
+:host .udex-text-field__wrap[type="number"]::-webkit-outer-spin-button,
+:host .udex-text-field__wrap[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }