Skip to content

Commit 6573703

Browse files
committed
chore: styles updated
1 parent e8f5bfb commit 6573703

File tree

3 files changed

+34
-22
lines changed

3 files changed

+34
-22
lines changed

elements/pf-search-input/pf-search-input-option.css

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@
1313
}
1414

1515
:host(:focus) #outer,
16-
:host(:hover) #outer,
17-
#outer.selected {
16+
:host(:hover) #outer{
1817
background-color: #e0e0e0;
1918
}
2019

@@ -37,25 +36,15 @@
3736
}
3837

3938
input[type="checkbox"] {
40-
margin-inline-end: 1em;
41-
display: var(--_pf-option-checkboxes-display, none);
42-
pointer-events: none;
43-
flex: 0 0 auto;
39+
display: none;
4440
}
4541

4642
span {
4743
flex: 1 1 auto;
4844
}
4945

5046
svg {
51-
font-size: var(--pf-c-select__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.675rem));
52-
color: var(--_svg-color, var(--pf-theme--color--accent, #0066cc));
53-
width: 1em;
54-
height: 1em;
55-
margin-inline-start: 1em;
56-
text-align: right;
57-
flex: 0 0 auto;
58-
display: var(--_pf-option-svg-display, block);
47+
display: none;
5948
}
6049

6150
#description {

elements/pf-search-input/pf-search-input.css

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@
211211

212212
#toggle {
213213
background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
214+
/* align-items: center; */
214215
}
215216

216217
#toggle,
217218
/* #toggle-button, */
218219
#toggle-input {
219220
display: flex;
220-
align-items: center;
221221
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
222222
font-size: var(--pf-global--FontSize--md, 16px);
223223
font-weight: var(--pf-global--FontWeight--normal, 400);
@@ -228,11 +228,18 @@
228228
border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
229229
border-bottom-color: var(--pf-theme--color--text, #151515);
230230
justify-content: space-between;
231+
/* &:focus{
232+
border-radius: 4px;
233+
border-bottom: 2px solid #06c;
234+
} */
231235
}
232236

233237
.expanded #toggle {
234-
border-bottom-width: 2px;
235-
border-bottom-color: var(--pf-theme--color--accent, #0066cc);
238+
border-top-left-radius: 4px;
239+
border-bottom-left-radius: 4px;
240+
border-bottom: 2px solid #06c;
241+
/* border-bottom-width: 2px;
242+
border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
236243
}
237244

238245
.disabled #toggle {
@@ -249,6 +256,12 @@
249256
text-align: left;
250257
border-radius: 0;
251258
flex: 1 0 auto;
259+
outline: none;
260+
&:focus{
261+
border: 2px solid #06c;
262+
/* border-bottom: none; */
263+
border-radius: 4px;
264+
}
252265
}
253266

254267
#toggle-input {
@@ -275,14 +288,18 @@
275288
display: flex;
276289
align-items: center;
277290
justify-content: center;
291+
border-radius: 0px;
292+
}
293+
294+
#close-button svg{
278295
position: relative;
279296
top: 3px;
280297
}
281298

282299

283300
#toggle-button:focus:before {
284-
border-bottom-color: var(--pf-c-search-input__toggle--focus--before--BorderBottomColor);
285-
border-bottom-width: var(--pf-c-search-input__toggle--focus--before--BorderBottomWidth);
301+
/* border-bottom-color: var(--pf-c-search-input__toggle--focus--before--BorderBottomColor);
302+
border-bottom-width: var(--pf-c-search-input__toggle--focus--before--BorderBottomWidth); */
286303
}
287304

288305
/* #outer.typeahead #toggle-button {
@@ -370,4 +387,10 @@ div.search-icon{
370387
transform: translateY(-50%);
371388
display: flex;
372389
align-items: center;
373-
}
390+
}
391+
392+
.expanded #close-button{
393+
/* border-bottom-width: 2px;
394+
border-bottom-color: var(--pf-theme--color--accent, #0066cc); */
395+
}
396+

elements/pf-search-input/pf-search-input.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export class PfSearchInput extends LitElement {
7676

7777
@query('#toggle-input') private _toggleInput?: HTMLInputElement;
7878

79-
@query('#toggle-button') private _toggleButton?: PfButton;
79+
@query('#toggle-button') private _toggleButton?: HTMLDivElement;
8080

8181
@query('#listbox') private _listbox?: HTMLElement;
8282

@@ -174,7 +174,6 @@ export class PfSearchInput extends LitElement {
174174
?disabled="${disabled}"
175175
placeholder="${placeholder || this.#buttonLabel}"
176176
>
177-
<button style="width: 0px; height: 0px; padding: 0px; visibility: hidden;" id="toggle-button"></button>
178177
<pf-button
179178
@click="${this.#OnClose}"
180179
?hidden="${(!expanded && this._toggleInput?.value.trim() === "")}"
@@ -193,6 +192,7 @@ export class PfSearchInput extends LitElement {
193192
</path>
194193
</svg>
195194
</pf-button>
195+
<div style="width: 0px; height: 0px; padding: 0px; visibility: hidden;" id="toggle-button"></div>
196196
</div>
197197
<div
198198
id="listbox-container"

0 commit comments

Comments
 (0)