diff --git a/packages/base/hash.txt b/packages/base/hash.txt index 5d8dfc308066..5fb71d5c579b 100644 --- a/packages/base/hash.txt +++ b/packages/base/hash.txt @@ -1 +1 @@ -rdDAWx+4D0PvEdxuBB9NMlHEXYo= \ No newline at end of file +MqYJwSsMbglsBVErBjlj4MODyjI= \ No newline at end of file diff --git a/packages/localization/hash.txt b/packages/localization/hash.txt index 509a4eb8bfcc..483bddafec0a 100644 --- a/packages/localization/hash.txt +++ b/packages/localization/hash.txt @@ -1 +1 @@ -65ggwN6ZkFOPO38ZE2UOXXibHi8= \ No newline at end of file +VW6BY+s3XWP66RxH3uUWdXbfn/A= \ No newline at end of file diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index 3ad4e02c126f..4c4257b1f93a 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -38,12 +38,17 @@ min="{{nativeInputAttributes.min}}" max="{{nativeInputAttributes.max}}" /> + {{#if icon.length}}
{{/if}} +
+ {{{_valueStateInputIcon}}} +
+ {{> postContent }} {{#if showSuggestions}} diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index dc6a6cf43eb5..51d927966a7f 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -1263,6 +1263,26 @@ class Input extends UI5Element { return this.placeholder; } + /** + * This method is relevant for sap_horizon theme only + */ + get _valueStateInputIcon() { + const iconPerValueState = { + Error: ``, + Warning: ``, + Success: ``, + Information: ``, + }; + + const result = ` + + ${iconPerValueState[this.valueState]}; + + `; + + return this.valueState !== ValueState.None ? result : ""; + } + /** * Returns the caret position inside the native input * @protected diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index 9e955a7e9e31..921b9409017b 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -11,6 +11,11 @@ :host { color: var(--sapField_TextColor); background-color: var(--sapField_Background); + border-radius: var(--_ui5-datepicker_border_radius) +} + +:host(:not([disabled]):hover) { + background: var(--_ui5-datepicker-hover-background); } :host .ui5-date-picker-input { @@ -21,4 +26,9 @@ line-height: inherit; letter-spacing: inherit; word-spacing: inherit; -} \ No newline at end of file +} + +[slot="icon"] { + border-top-right-radius: var(--_ui5-datepicker_border_radius); + border-bottom-right-radius: var(--_ui5-datepicker_border_radius); +} diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index b9870e61ed4f..bd0a50d727a0 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -12,42 +12,66 @@ font-size: var(--sapFontSize); font-family: "72override", var(--sapFontFamily); font-style: normal; - background-color: var(--sapField_Background); - border: 1px solid var(--sapField_BorderColor); - border-radius: var(--sapField_BorderCornerRadius); + background-color: var(--_ui5-input-background-color); + border: var(--_ui5-input-border); + border-radius: var(--_ui5-input-border-radius); box-sizing: border-box; line-height: normal; letter-spacing: normal; word-spacing: normal; text-align: start; + transition: var(--_ui5-input-transition); } :host([focused]) { - outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); - outline-offset: -3px; + border-color: var(--_ui5-input-focused-border-color); + background-color: var(--sapField_Hover_Background); + outline: var(--_ui5-input-focus-outline); + outline-offset: var(--_ui5-input-focus-outline-offset); + box-shadow: var(--_ui5-input-hover-box-shadow); +} + +.ui5-input-root::before { + content: ""; + position: absolute; + width: calc(100% - 2px); + left: 1px; + bottom: -2px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + height: var(--_ui5-input-bottom-border-height); + transition: var(--_ui5-input-transition); + background-color: var(--_ui5-input-bottom-border-color); } :host([value-state]:not([value-state="None"])[focused]) { - outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); - outline-offset: -4px; + outline: var(--_ui5-input-value-state-outline); + outline-offset: var(--_ui5-input-value-state-outline-offset); } .ui5-input-root { width: 100%; height: 100%; + position: relative; background: transparent; display: inline-block; outline: none; box-sizing: border-box; color: inherit; + transition: border-color .2s ease-in-out; } :host([disabled]) { opacity: var(--_ui5_input_disabled_opacity); cursor: default; pointer-events: none; - background: var(--sapField_ReadOnly_Background); - border-color: var(--sapField_ReadOnly_BorderColor); + background: var(--_ui5-input-disabled-background); + border-color: var(--_ui5_input_disabled_border_color); +} + +:host([disabled]) .ui5-input-root::before, +:host([readonly]) .ui5-input-root::before { + content: none; } [inner-input] { @@ -77,6 +101,16 @@ padding: var(--_ui5_input_inner_padding_with_icon); } +.ui5-input-value-state-icon { + height: 100%; + display: var(--_ui5-input-value-state-icon-display); + align-items: center; +} + +.ui5-input-value-state-icon > svg { + margin-right: 8px; +} + [inner-input]::selection { background: var(--sapSelectedColor); color: var(--sapContent_ContrastTextColor); @@ -90,8 +124,8 @@ visibility: hidden; } [inner-input]::-webkit-input-placeholder { - font-style: italic; - color: var(--sapField_PlaceholderTextColor); + font-style: var(--_ui5-input-placeholder-style); + color: var(--_ui5-input-placeholder-color); padding-right: 0.125rem; } @@ -102,7 +136,7 @@ visibility: hidden; } [inner-input]::-moz-placeholder { - font-style: italic; + font-style: var(--_ui5-input-placeholder-style); color: var(--sapField_PlaceholderTextColor); padding-right: 0.125rem; } @@ -119,6 +153,38 @@ padding-right: 0.125rem; } +:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder { + color: var(--_ui5-input-value-state-error-border-botom-color); +} + +:host([value-state="Error"]) [inner-input]::-moz-placeholder { + color: var(--_ui5-input-value-state-error-border-botom-color); +} + +:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder { + color: var(--_ui5-input-value-state-warning-border-botom-color); +} + +:host([value-state="Warning"]) [inner-input]::-moz-placeholder { + color: var(--_ui5-input-value-state-warning-border-botom-color); +} + +:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder { + color: var(--_ui5-input-value-state-success-border-botom-color); +} + +:host([value-state="Success"]) [inner-input]::-moz-placeholder { + color: var(--_ui5-input-value-state-success-border-botom-color); +} + +:host([value-state="Information"]) [inner-input]::-webkit-input-placeholder { + color: var(--_ui5-input-value-success-information-border-botom-color); +} + +:host([value-state="Information"]) [inner-input]::-moz-placeholder { + color: var(--_ui5-input-value-success-information-border-botom-color); +} + .ui5-input-content { height: 100%; box-sizing: border-box; @@ -132,18 +198,33 @@ } :host([readonly]) { - border-color: var(--sapField_ReadOnly_BorderColor); - background: var(--sapField_ReadOnly_Background); + border-color: var(--_ui5_input_readonly_border_color); + background: var(--_ui5-input-readonly-background); } :host(:not([value-state]):not([readonly]):hover) { background-color: var(--sapField_Hover_Background); - border: 1px solid var(--sapField_Hover_BorderColor); + border: var(--_ui5-input-hover-border); + box-shadow: var(--_ui5-input-hover-box-shadow); +} + +:host(:not([value-state]):not([readonly])[focused]:hover), +:host([value-state="None"]:not([readonly])[focused]:hover) { + border-color: var(--_ui5-input-focused-border-color); +} + +:host(:not([value-state]):not([readonly]):hover) { + border: var(--_ui5-input-hover-border); +} + +:host([focused]) .ui5-input-root::before { + content: none; } :host([value-state="None"]:not([readonly]):hover) { background-color: var(--sapField_Hover_Background); - border: 1px solid var(--sapField_Hover_BorderColor); + border: var(--_ui5-input-hover-border); + box-shadow: var(--_ui5-input-hover-box-shadow); } :host([value-state]:not([value-state="None"])) { @@ -161,7 +242,21 @@ :host([value-state="Error"]:not([readonly])) { background-color: var(--sapField_InvalidBackground); - border-color: var(--sapField_InvalidColor); + border-color: var(--_ui5-input-value-state-error-border-color); +} + +:host([value-state="Error"][focused]:not([readonly])) { + background-color: var(--_ui5-input-focused-value-state-error-background); + border-color: var(--_ui5-input-focused-value-state-error-border-color); +} + +:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{ + background-color: var(--_ui5-input-value-state-error-border-botom-color); +} + +:host([value-state="Error"]:not([readonly]):hover) { + background-color: var(--sapField_Hover_Background); + box-shadow: var(--_ui5-input-value-state-error-box-shadow); } :host([value-state="Error"]:not([readonly]):not([disabled])), @@ -172,21 +267,63 @@ :host([value-state="Warning"]:not([readonly])) { background-color: var(--sapField_WarningBackground); - border-color: var(--sapField_WarningColor); + border-color: var(--_ui5-input-value-state-warning-border-color); +} + +:host([value-state="Warning"][focused]:not([readonly])) { + background-color: var(--_ui5-input-focused-value-state-warning-background); + border-color: var(--_ui5-input-focused-value-state-warning-border-color); +} + +:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{ + background-color: var(--_ui5-input-value-state-warning-border-botom-color); +} + +:host([value-state="Warning"]:not([readonly]):hover) { + background-color: var(--sapField_Hover_Background); + box-shadow: var(--_ui5-input-value-state-warning-box-shadow); } :host([value-state="Success"]:not([readonly])) { background-color: var(--sapField_SuccessBackground); - border-color: var(--sapField_SuccessColor); - border-width: 1px; + border-color: var(--_ui5-input-value-state-success-border-color); + border-width: var(--_ui5-input-value-state-success-border-width); +} + +:host([value-state="Success"][focused]:not([readonly])) { + background-color: var(--_ui5-input-focused-value-state-success-background); + border-color: var(--_ui5-input-focused-value-state-success-border-color); +} + +:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{ + background-color: var(--_ui5-input-value-state-success-border-botom-color); +} + +:host([value-state="Success"]:not([readonly]):hover) { + background-color: var(--sapField_Hover_Background); + box-shadow: var(--_ui5-input-value-state-success-box-shadow); } :host([value-state="Information"]:not([readonly])) { background-color: var(--sapField_InformationBackground); - border-color: var(--sapField_InformationColor); + border-color: var(--_ui5-input-value-state-information-border-color); border-width: var(--_ui5-input-information_border_width); } +:host([value-state="Information"][focused]:not([readonly])) { + background-color: var(--_ui5-input-focused-value-state-information-background); + border-color: var(--_ui5-input-focused-value-state-information-border-color); +} + +:host([value-state="Information"]:not([readonly])) .ui5-input-root::before{ + background-color: var(--_ui5-input-value-success-information-border-botom-color); +} + +:host([value-state="Information"]:not([readonly]):hover) { + background-color: var(--sapField_Hover_Background); + box-shadow: var(--_ui5-input-value-state-information-box-shadow); +} + /* Remove IE's defaut clear button */ [inner-input]::-ms-clear { height: 0; diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 3240d8df2211..a6faf9f58e5b 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -30,3 +30,8 @@ [ui5-multi-combobox] [ui5-tokenizer] { flex: 3; } + +[ui5-icon] { + border-top-right-radius: var(--ui5-multi_bombobox_icon_border_top_right_radius); + border-bottom-right-radius: var(--ui5-multi_bombobox_icon_border_bottom_right_radius); +} diff --git a/packages/main/src/themes/base/DatePicker-parameters.css b/packages/main/src/themes/base/DatePicker-parameters.css index 4cc3e6b33850..af03558aab1f 100644 --- a/packages/main/src/themes/base/DatePicker-parameters.css +++ b/packages/main/src/themes/base/DatePicker-parameters.css @@ -1,3 +1,4 @@ :root { --_ui5_datepicker_icon_border: none; + --_ui5-datepicker_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index d35afec270cd..f1086f8946fe 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -2,6 +2,18 @@ --_ui5_input_width: 13.125rem; --_ui5_input_height: 2.5rem; --_ui5_input_compact_height: 1.625rem; + --_ui5-input-hover-border: 1px solid var(--sapField_Hover_BorderColor); + --_ui5-input-hover-box-shadow: none; + --_ui5-input-background-color: var(--sapField_Background); + --_ui5-input-border-radius: var(--sapField_BorderCornerRadius); + --_ui5-input-border: 2px solid transparent; /* The value of this variable defaults to sap_horizon theme, because if it defaults to fiori, then a flickering of the border is present*/ + --_ui5-input-placeholder-style: italic; + --_ui5-input-placeholder-color: var(--sapField_PlaceholderTextColor); + --_ui5-input-bottom-border-height: 0; + --_ui5-input-bottom-border-color: transparent; + --_ui5-input-focused-border-color: var(--sapField_Hover_BorderColor); + --_ui5-input-focus-outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); + --_ui5-input-focus-outline-offset: -3px; --_ui5_input_state_border_width: 0.125rem; --_ui5-input-information_border_width: 0.125rem; --_ui5_input_error_font_weight: normal; @@ -10,10 +22,30 @@ --_ui5_input_error_warning_font_style: inherit; --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; - --_ui5_input_disabled_border_color: var(--sapField_BorderColor); - --_ui5_input_disabled_background: var(--sapField_Background); + --_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor); + --_ui5-input-disabled-background: var(--sapField_ReadOnly_Background); + --_ui5_input_readonly_border_color: var(--sapField_ReadOnly_BorderColor); + --_ui5-input-readonly-background: var(--sapField_ReadOnly_Background); --_ui5_input_icon_padding: 0.625rem .6875rem; --_ui5_input_disabled_opacity: 0.5; --_ui5_input_icon_min_width: 2.375rem; --_ui5_input_compact_min_width: 2rem; -} \ No newline at end of file + --_ui5-input-value-state-outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); + --_ui5-input-value-state-outline-offset: -4px; + --_ui5-input-transition: none; + --_ui5-input-value-state-icon-display: none; + --_ui5-input-focused-value-state-error-background: var(--sapField_InvalidBackground); + --_ui5-input-focused-value-state-warning-background: var(--sapField_WarningBackground); + --_ui5-input-focused-value-state-success-background: var(--sapField_SuccessBackground); + --_ui5-input-focused-value-state-information-background: var(--sapField_InformationBackground); + --_ui5-input-value-state-error-border-color: var(--sapField_InvalidColor); + --_ui5-input-focused-value-state-error-border-color: var(--sapField_InvalidColor); + --_ui5-input-value-state-warning-border-color: var(--sapField_WarningColor); + --_ui5-input-focused-value-state-warning-border-color: var(--sapField_WarningColor); + --_ui5-input-value-state-success-border-color: var(--sapField_SuccessColor); + --_ui5-input-focused-value-state-success-border-color: var(--sapField_SuccessColor); + --_ui5-input-value-state-success-border-width: 1px; + --_ui5-input-value-state-information-border-color: var(--sapField_InformationColor); + --_ui5-input-focused-value-state-information-border-color: var(--sapField_InformationColor); + --_ui5-input-value-state-information-border-width: 1px; +} diff --git a/packages/main/src/themes/sap_belize/Input-parameters.css b/packages/main/src/themes/sap_belize/Input-parameters.css index d814be152045..a865559b1422 100644 --- a/packages/main/src/themes/sap_belize/Input-parameters.css +++ b/packages/main/src/themes/sap_belize/Input-parameters.css @@ -2,4 +2,5 @@ :root { --_ui5_input_icon_padding: 0.75rem; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/Input-parameters.css b/packages/main/src/themes/sap_belize_hcb/Input-parameters.css index 53382df5180f..9216909abd70 100644 --- a/packages/main/src/themes/sap_belize_hcb/Input-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Input-parameters.css @@ -3,12 +3,11 @@ :root { --_ui5_input_focus_border_width: 0.125rem; --_ui5_input_state_border_width: 1px; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); --_ui5_input_error_warning_border_style: dashed; --_ui5_input_error_warning_font_style: italic; --_ui5_input_error_font_weight: bold; --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; - --_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor); - --_ui5_input_disabled_background: var(--sapField_ReadOnly_Background); --_ui5_input_icon_padding: 0.65rem 0.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Input-parameters.css b/packages/main/src/themes/sap_belize_hcw/Input-parameters.css index 53382df5180f..9216909abd70 100644 --- a/packages/main/src/themes/sap_belize_hcw/Input-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Input-parameters.css @@ -3,12 +3,11 @@ :root { --_ui5_input_focus_border_width: 0.125rem; --_ui5_input_state_border_width: 1px; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); --_ui5_input_error_warning_border_style: dashed; --_ui5_input_error_warning_font_style: italic; --_ui5_input_error_font_weight: bold; --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; - --_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor); - --_ui5_input_disabled_background: var(--sapField_ReadOnly_Background); --_ui5_input_icon_padding: 0.65rem 0.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/Input-parameters.css b/packages/main/src/themes/sap_fiori_3/Input-parameters.css index 4b4286281db9..794468d40286 100644 --- a/packages/main/src/themes/sap_fiori_3/Input-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Input-parameters.css @@ -2,5 +2,6 @@ :root { --_ui5_input_height: 2.25rem; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); --_ui5_input_disabled_opacity: 0.4; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/Input-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Input-parameters.css index 4b4286281db9..ca78f73be59a 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Input-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Input-parameters.css @@ -3,4 +3,5 @@ :root { --_ui5_input_height: 2.25rem; --_ui5_input_disabled_opacity: 0.4; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Input-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Input-parameters.css index ab53cdf86373..5c01916c5963 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Input-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Input-parameters.css @@ -3,13 +3,12 @@ :root { --_ui5_input_focus_border_width: 0.125rem; --_ui5_input_state_border_width: 0.125rem; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); --_ui5-input-information_border_width: var(--sapField_BorderWidth); --_ui5_input_error_warning_border_style: dashed; --_ui5_input_error_warning_font_style: italic; --_ui5_input_error_font_weight: bold; --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; - --_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor); - --_ui5_input_disabled_background: var(--sapField_ReadOnly_Background); --_ui5_input_icon_padding: 0.65rem 0.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Input-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Input-parameters.css index ab53cdf86373..5c01916c5963 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Input-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Input-parameters.css @@ -3,13 +3,12 @@ :root { --_ui5_input_focus_border_width: 0.125rem; --_ui5_input_state_border_width: 0.125rem; + --_ui5-input-border: 1px solid var(--sapField_BorderColor); --_ui5-input-information_border_width: var(--sapField_BorderWidth); --_ui5_input_error_warning_border_style: dashed; --_ui5_input_error_warning_font_style: italic; --_ui5_input_error_font_weight: bold; --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; - --_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor); - --_ui5_input_disabled_background: var(--sapField_ReadOnly_Background); --_ui5_input_icon_padding: 0.65rem 0.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/DatePicker-parameters.css b/packages/main/src/themes/sap_horizon/DatePicker-parameters.css new file mode 100644 index 000000000000..6868ddb6eff7 --- /dev/null +++ b/packages/main/src/themes/sap_horizon/DatePicker-parameters.css @@ -0,0 +1,4 @@ +:root { + --_ui5-datepicker_border_radius: 8px; + --_ui5-datepicker-hover-background: #fff; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css index 4b4286281db9..66aae53a3221 100644 --- a/packages/main/src/themes/sap_horizon/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon/Input-parameters.css @@ -3,4 +3,44 @@ :root { --_ui5_input_height: 2.25rem; --_ui5_input_disabled_opacity: 0.4; -} \ No newline at end of file + --_ui5_input_disabled_border_color: transparent; + --_ui5-input-disabled-background: var(--sapNeutralBackground); + --_ui5-input-readonly-background: var(--sapNeutralBackground); + --_ui5_input_readonly_border_color: transparent; + --_ui5-input-hover-border: 2px solid transparent; + --_ui5-input-hover-box-shadow: 0 0 2px rgb(131 150 168 / 16%), 0 8px 16px rgb(131 150 168 / 16%); + --_ui5-input-border-radius: 8px; + --_ui5-input-placeholder-style: normal; + --_ui5-input-placeholder-color: var(--sapNeutralColor); + --_ui5-input-bottom-border-height: 2px; + --_ui5-input-bottom-border-color: var(--sapNeutralColor); + --_ui5-input-focused-border-color: #1890FF; + --_ui5-input-focus-outline: none; + --_ui5-input-focus-outline-offset: 0; + --_ui5-input-value-state-outline: none; + --_ui5-input-value-state-outline-offset: none; + --_ui5-input-transition: all .2s ease-in-out; + --_ui5-input-focused-value-state-error-background: #fff; + --_ui5-input-focused-value-state-warning-background: #fff; + --_ui5-input-focused-value-state-success-background: #fff; + --_ui5-input-focused-value-state-information-background: #fff; + --_ui5-input-value-state-icon-display: flex; + --_ui5-input-value-state-error-border-botom-color: #d20a0a; + --_ui5-input-value-state-error-border-color: transparent; + --_ui5-input-focused-value-state-error-border-color: var(--_ui5-input-focused-border-color); + --_ui5-input-value-state-error-box-shadow: 0 0 2px rgba(245, 40, 40, 0.16), 0 8px 16px rgba(245, 40, 40, 0.16); + --_ui5-input-value-state-warning-border-botom-color: #c35500; + --_ui5-input-value-state-warning-border-color: transparent; + --_ui5-input-focused-value-state-warning-border-color: var(--_ui5-input-focused-border-color); + --_ui5-input-value-state-warning-box-shadow: 0 0 2px rgba(255, 179, 0, 0.16), 0 8px 16px rgba(255, 179, 0, 0.16); + --_ui5-input-value-state-success-border-botom-color: #36a41d; + --_ui5-input-value-state-success-border-color: transparent; + --_ui5-input-focused-value-state-success-border-color: var(--_ui5-input-focused-border-color); + --_ui5-input-value-state-success-box-shadow: 0 0 2px rgba(131, 150, 168, 0.16), 0 8px 16px rgba(131, 150, 168, 0.16); + --_ui5-input-value-state-success-border-width: 2px; + --_ui5-input-value-success-information-border-botom-color: #0070f2; + --_ui5-input-value-state-information-border-color: transparent; + --_ui5-input-focused-value-state-information-border-color: var(--_ui5-input-focused-border-color); + --_ui5-input-value-state-information-box-shadow: 0 0 2px rgba(27, 144, 255, 0.16), 0 8px 16px rgba(27, 144, 255, 0.16); + --_ui5-input-value-state-information-border-width: 2px; +} diff --git a/packages/main/src/themes/sap_horizon/MultiComboBox-parameters.css b/packages/main/src/themes/sap_horizon/MultiComboBox-parameters.css index bc9e2adcf162..d6753c06c759 100644 --- a/packages/main/src/themes/sap_horizon/MultiComboBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/MultiComboBox-parameters.css @@ -2,4 +2,6 @@ :root { --_ui5-multi_combobox_token_margin_top: 1px; + --ui5-multi_bombobox_icon_border_top_right_radius: 8px; + --ui5-multi_bombobox_icon_border_bottom_right_radius: 12px; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css index 6842f5df3166..19d526e009fe 100644 --- a/packages/main/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css @@ -7,6 +7,7 @@ @import "./CheckBox-parameters.css"; @import "../base/ColorPalette-parameters.css"; @import "../base/DatePicker-parameters.css"; +@import "./DatePicker-parameters.css"; @import "./DayPicker-parameters.css"; @import "../base/Dialog-parameters.css"; @import "../base/GroupHeaderListItem-parameters.css"; diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index d87a275aaa15..56257debdbc4 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -123,7 +123,7 @@

'suggestionItemSelect' event result on group item

Test 'input' event

Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
- +

'input' test result

@@ -338,6 +338,33 @@

Test Backspace



+

sap_horizon

+ +
+ + + + + + + + +
+ +
+
+
+
+
+