Skip to content

Commit c047da7

Browse files
ilhan007ilhan007
authored
fix(ui5-textarea): fix bg-color in IE (#1210)
- All themes and browsers: readonly textarea does not change its background on hover - Quartz Dark and IE: the textarea has proper dark background, not a white one as used to.
1 parent 5d4e594 commit c047da7

File tree

2 files changed

+28
-43
lines changed

2 files changed

+28
-43
lines changed

‎packages/main/src/themes/TextArea.css

+13-12
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
background-color: var(--sapField_Background);
99
font-size: var(--sapFontMediumSize);
1010
font-family: var(--sapFontFamily);
11+
border: 1px solid var(--sapField_BorderColor);
1112
border-radius: var(--_ui5_input_wrapper_border_radius);
1213
box-sizing: border-box;
1314
}
@@ -51,15 +52,15 @@
5152
line-height: 1.4;
5253
box-sizing: border-box;
5354
color: inherit;
54-
background: inherit;
5555
font-size: inherit;
5656
font-family: inherit;
5757
-webkit-appearance: none;
5858
-moz-appearance: textfield;
5959
overflow: auto;
6060
resize: none;
61-
border: 1px solid var(--sapField_BorderColor);
62-
border-radius: inherit;
61+
border: inherit;
62+
border-radius: inherit;
63+
background: transparent;
6364
}
6465

6566
:host([growing]) .ui5-textarea-root {
@@ -113,13 +114,13 @@
113114
color: var(--sapField_PlaceholderTextColor);
114115
}
115116

116-
:host(:not([value-state]):not([exceeding]):hover) .ui5-textarea-inner {
117+
:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
117118
background-color: var(--sapField_Hover_Background);
118119
border-color: var(--sapField_Hover_BorderColor);
119120
}
120121

121-
:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
122-
:host([exceeding]) .ui5-textarea-inner {
122+
:host([value-state]:not([value-state="None"])),
123+
:host([exceeding]) {
123124
border-width: var(--_ui5_input_state_border_width);
124125
}
125126

@@ -132,23 +133,23 @@
132133
font-weight: var(--_ui5_input_error_font_weight);
133134
}
134135

135-
:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
136+
:host([value-state="Error"]:not([readonly])) {
136137
background-color: var(--sapField_InvalidBackground);
137138
border-color: var(--sapField_InvalidColor);
138139
}
139140

140-
:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
141-
:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
141+
:host([value-state="Error"]:not([readonly]):not([disabled])),
142+
:host([value-state="Warning"]:not([readonly]):not([disabled])) {
142143
border-style: var(--_ui5_input_error_warning_border_style);
143144
}
144145

145-
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
146-
:host([exceeding]) .ui5-textarea-inner {
146+
:host([value-state="Warning"]:not([readonly])),
147+
:host([exceeding]) {
147148
background-color: var(--sapField_WarningBackground);
148149
border-color: var(--sapField_WarningColor);
149150
}
150151

151-
:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
152+
:host([value-state="Success"]:not([readonly])) {
152153
background-color: var(--sapField_SuccessBackground);
153154
border-color: var(--sapField_SuccessColor);
154155
}

‎packages/main/test/pages/TextArea.html

+15-31
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,8 @@
3737
background: #3f5161;
3838
}
3939

40-
.header-title {
41-
color: #fafafa;
42-
margin: 0;
43-
padding: 0;
44-
line-height: 3rem;
45-
font-size: 1.375rem;
46-
font-weight: normal;
47-
text-shadow: 0 0 0.125rem #ffffff;
48-
font-family: "72", Arial, Helvetica, sans-serif;
49-
}
50-
5140
.group {
5241
padding: 1rem;
53-
background: #fafafa;
5442
}
5543

5644
.group-title {
@@ -61,10 +49,6 @@
6149
margin: 2px;
6250
}
6351

64-
.group_colored {
65-
background: #eff4f9;
66-
}
67-
6852
.fixed-width {
6953
display: inline-block;
7054
width: 280px;
@@ -79,11 +63,11 @@
7963
<body style="background-color: var(--sapBackgroundColor);">
8064

8165
<header class="header">
82-
<h2 class="header-title">Evoground</h2>
66+
<ui5-title class="header-title">Evoground</ui5-title>
8367
</header>
8468

8569
<section class="group">
86-
<h2>Simple TextArea</h2>
70+
<ui5-title>Simple TextArea</ui5-title>
8771
<ui5-textarea id="basic-textarea" placeholder="Basic text area"></ui5-textarea>
8872

8973
<br>
@@ -102,7 +86,7 @@ <h2>Simple TextArea</h2>
10286
</section>
10387

10488
<section class="group">
105-
<h2>TextArea with value</h2>
89+
<ui5-title>TextArea with value</ui5-title>
10690
<ui5-textarea id="fix-width-textarea" class="fixed-width" rows="8" value="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
10791
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
10892
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
@@ -112,65 +96,65 @@ <h2>TextArea with value</h2>
11296
</section>
11397

11498
<section class="group">
115-
<h2>Disabled TextArea</h2>
99+
<ui5-title>Disabled TextArea</ui5-title>
116100
<ui5-textarea id="disabled-textarea" class="fixed-width" disabled placeholder="Example of disabled text area"></ui5-textarea>
117101
</section>
118102

119103
<section class="group">
120-
<h2>Readonly TextArea</h2>
104+
<ui5-title>Readonly TextArea</ui5-title>
121105
<ui5-textarea id="readonly-textarea" class="fixed-width" readonly placeholder="Example of a read-only text area"></ui5-textarea>
122106
</section>
123107

124108
<section class="group">
125-
<h2>Required TextArea</h2>
109+
<ui5-title>Required TextArea</ui5-title>
126110
<ui5-textarea id="required-textarea" class="fixed-width" required placeholder="Example of a required text area"></ui5-textarea>
127111
</section>
128112

129113
<section class="group">
130-
<h2>Text Area: Growing</h2>
114+
<ui5-title>Text Area: Growing</ui5-title>
131115
<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area"></ui5-textarea>
132116
</section>
133117

134118
<section class="group">
135-
<h2>Text Area: Growing with 8 initial rows</h2>
119+
<ui5-title>Text Area: Growing with 8 initial rows</ui5-title>
136120
<ui5-textarea id="eight-rows-textarea" class="fixed-width" growing placeholder="Growing Text Area" rows="8"></ui5-textarea>
137121
</section>
138122

139123
<section class="group">
140-
<h2>Text Area: Growing up to 4</h2>
124+
<ui5-title>Text Area: Growing up to 4</ui5-title>
141125
<ui5-textarea id="growing-ta-to-four" class="fixed-width" growing-max-lines="4" growing placeholder="Growing Text Area"></ui5-textarea>
142126
</section>
143127

144128
<section class="group">
145-
<h2>Text Area: Growing with initial rows 4 and growing up to 12</h2>
129+
<ui5-title>Text Area: Growing with initial rows 4 and growing up to 12</ui5-title>
146130
<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area" growing-max-lines="12" rows="4"></ui5-textarea>
147131
</section>
148132

149133
<section class="group">
150-
<h2>Text Area: growing with max length 20 characters </h2>
134+
<ui5-title>Text Area: growing with max length 20 characters </ui5-title>
151135
<ui5-textarea id="ta-max-length" class="fixed-width" growing maxlength="20" placeholder="Max length"></ui5-textarea>
152136
</section>
153137

154138
<section class="group">
155-
<h2>Text Area: max length 20 characters </h2>
139+
<ui5-title>Text Area: max length 20 characters </ui5-title>
156140
<ui5-textarea class="fixed-width" maxlength="20" placeholder="Max length"></ui5-textarea>
157141
</section>
158142

159143
<section class="group">
160-
<h2>Text Area: showExceededText with maxlength</h2>
144+
<ui5-title>Text Area: showExceededText with maxlength</ui5-title>
161145
<ui5-textarea id="show-max-length" class="fixed-width fixed-height" maxlength="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
162146
</section>
163147

164148
<section class="group">
165-
<h2>Text Area: change event</h2>
149+
<ui5-title>Text Area: change event</ui5-title>
166150
<ui5-textarea id="textarea-change" class="fixed-width fixed-height" placeholder="Test change event"></ui5-textarea>
167151
</section>
168152
<section class="group">
169153
<ui5-input id="changeResult" class="fixed-width"></ui5-input>
170154
</section>
171155

172156
<section class="group">
173-
<h2>Text Area: input event</h2>
157+
<ui5-title>Text Area: input event</ui5-title>
174158
<ui5-textarea id="textarea-input" class="fixed-width fixed-height" placeholder="Test input event"></ui5-textarea>
175159
</section>
176160
<section class="group">

0 commit comments

Comments
 (0)