Skip to content

Commit

Permalink
fix(ui5-textarea): adjust placeholder styling (#5179)
Browse files Browse the repository at this point in the history
  • Loading branch information
niyap committed May 10, 2022
1 parent 78298af commit fab2b61
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 10 deletions.
18 changes: 14 additions & 4 deletions packages/main/src/themes/TextArea.css
Expand Up @@ -162,32 +162,42 @@

:host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
font-style: var(--_ui5_textarea_error_placeholder_font_style);
color: var(--_ui5_textarea_error_placeholder_color);
}

:host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder {
/* Firefox 19+ */
font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
font-style: var(--_ui5_textarea_error_placeholder_font_style);
color: var(--_ui5_textarea_error_placeholder_color);
}

:host([value-state="Error"]) .ui5-textarea-inner:-ms-input-placeholder {
/* IE 10+ */
font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
font-style: var(--_ui5_textarea_error_placeholder_font_style);
color: var(--_ui5_textarea_error_placeholder_color);
}

:host([value-state="Error"]) .ui5-textarea-inner:-moz-placeholder {
/* Firefox 18- */
font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
font-style: var(--_ui5_textarea_error_placeholder_font_style);
color: var(--_ui5_textarea_error_placeholder_color);
}

:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
}

:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder {
/* Firefox 19+ */
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
}

:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
border-color: var(--sapField_Hover_BorderColor);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/themes/base/TextArea-parameters.css
Expand Up @@ -17,8 +17,8 @@
--_ui5_textarea_after_element_display: none;
--_ui5_textarea_placeholder_font_style: italic;
--_ui5_input_warning_font_weight: normal;
--_ui5_textarea_value_state_error_placeholder_font_weight: normal;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: normal;
--_ui5_textarea_error_placeholder_font_style: italic;
--_ui5_textarea_error_placeholder_color: var(--sapField_PlaceholderTextColor);
--_ui5_textarea_disabled_background_color: var(--sapField_ReadOnly_Background);
--_ui5_textarea_error_hover_background_color: var(--sapField_Hover_Background);
Expand Down
Expand Up @@ -6,4 +6,8 @@
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
}
Expand Up @@ -6,4 +6,8 @@
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
}
Expand Up @@ -6,6 +6,9 @@
--_ui5_textarea_error_warning_border_width: 2 * var(--sapField_BorderWidth);
--_ui5_textarea_information_border_width: 0.0625rem;
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_input_warning_font_weight: bold;
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
Expand Down
Expand Up @@ -6,6 +6,9 @@
--_ui5_textarea_error_warning_border_width: 2 * var(--sapField_BorderWidth);
--_ui5_textarea_information_border_width: 0.0625rem;
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_input_warning_font_weight: bold;
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
Expand Down
Expand Up @@ -7,8 +7,8 @@
--_ui5_textarea_information_border_width: 0.0625rem;
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_input_warning_font_weight: bold;
--_ui5_textarea_value_state_error_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: italic;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
--_ui5_textarea_disabled_background_color: var(--sapField_Background);
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
Expand Down
Expand Up @@ -7,8 +7,8 @@
--_ui5_textarea_information_border_width: 0.0625rem;
--_ui5_textarea_placeholder_font_style: normal;
--_ui5_input_warning_font_weight: bold;
--_ui5_textarea_value_state_error_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: italic;
--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
--_ui5_textarea_error_placeholder_font_style: normal;
--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
--_ui5_textarea_disabled_background_color: var(--sapField_Background);
--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
Expand Down

0 comments on commit fab2b61

Please sign in to comment.