Skip to content

Commit f9198e5

Browse files
ArathyKumarArathyKumar
committed
chore: code cleanup
1 parent cfc1389 commit f9198e5

File tree

4 files changed

+123
-118
lines changed

4 files changed

+123
-118
lines changed

‎elements/pf-search-input/demo/pf-search-input-with-submit.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h1>Search with autocomplete</h1>
1010
<pf-option value="Alabama1"> Alabama 1 </pf-option>
1111
<pf-option value="New Jersey1"> New Jersey 1 </pf-option>
1212
<pf-option value="New York1"> New York 1 </pf-option>
13-
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
13+
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
1414
<pf-option value="North Carolina1"> North Carolina 1</pf-option>
1515
<pf-option value="Alabama2"> Alabama 2 </pf-option>
1616
<pf-option value="New Jersey2"> New Jersey 2 </pf-option>
@@ -39,7 +39,7 @@ <h1>Search with autocomplete</h1>
3939
</script>
4040

4141
<style>
42-
.container{
43-
padding: 40px;
44-
}
42+
.container {
43+
padding: 40px;
44+
}
4545
</style>

‎elements/pf-search-input/demo/pf-search-input.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>Search with autocomplete</h1>
99
<pf-option value="Alabama1"> Alabama 1 </pf-option>
1010
<pf-option value="New Jersey1"> New Jersey 1 </pf-option>
1111
<pf-option value="New York1"> New York 1 </pf-option>
12-
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
12+
<pf-option value="New Mexico1"> New Mexico 1</pf-option>
1313
<pf-option value="North Carolina1"> North Carolina 1</pf-option>
1414
<pf-option value="Alabama2"> Alabama 2 </pf-option>
1515
<pf-option value="New Jersey2"> New Jersey 2 </pf-option>
@@ -38,8 +38,7 @@ <h1>Search with autocomplete</h1>
3838
</script>
3939

4040
<style>
41-
.container{
42-
padding: 40px;
43-
}
44-
</style>
45-
41+
.container {
42+
padding: 40px;
43+
}
44+
</style>

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

Lines changed: 111 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
:host {
2-
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
3-
font-size: var(--pf-global--FontSize--md, 16px);
4-
font-weight: var(--pf-global--FontWeight--normal, 400);
2+
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
3+
font-size: var(--pf-global--FontSize--md, 16px);
4+
font-weight: var(--pf-global--FontWeight--normal, 400);
55
color: var(--pf-global--Color--100, #151515);
6-
--_pf-option-checkboxes-display: none;
7-
--_pf-option-svg-display: block;
6+
--_pf-option-checkboxes-display: none;
7+
--_pf-option-svg-display: block;
88
--pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
99
--pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
1010
--pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
@@ -153,107 +153,110 @@
153153
--pf-c-search-input-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
154154
}
155155

156-
:host, #outer {
157-
display: flex;
158-
flex-direction: column;
159-
align-items: stretch;
156+
:host,
157+
#outer {
158+
display: flex;
159+
flex-direction: column;
160+
align-items: stretch;
160161
width: fit-content;
161162
}
162163

163164
:host([hidden]),
164165
*[hidden] {
165-
display: none !important;
166+
display: none !important;
166167
}
167168

168169
:host([disabled]) {
169-
pointer-events: none !important;
170+
pointer-events: none !important;
170171
}
171172

172173
#outer.disabled {
173-
color: var(--pf-global--Color--dark-200, #6a6e73) !important;
174+
color: var(--pf-global--Color--dark-200, #6a6e73) !important;
174175
}
175176

176177
#outer {
177-
position: relative;
178+
position: relative;
178179
}
179180

180181
#listbox-container {
181-
display: inline-flex;
182-
position: absolute;
183-
background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
184-
opacity: 0;
185-
--_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
182+
display: inline-flex;
183+
position: absolute;
184+
background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
185+
opacity: 0;
186+
--_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
186187
box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
187188
}
188189

189190
#outer.expanded #listbox-container {
190-
opacity: 1;
191-
z-index: 9999 !important;
191+
opacity: 1;
192+
z-index: 9999 !important;
192193
max-height: 220px;
193194
overflow: hidden;
194195
}
195196

196197
#listbox {
197-
display: flex;
198-
flex-direction: column;
199-
position: relative;
200-
width: 100%;
198+
display: flex;
199+
flex-direction: column;
200+
position: relative;
201+
width: 100%;
201202
}
202203

203204
#listbox slot.disabled {
204-
color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
205-
background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
206-
border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
207-
pointer-events: none;
208-
cursor: not-allowed;;
209-
--_active-descendant-color: transparent;
210-
--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
205+
color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
206+
background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
207+
border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
208+
pointer-events: none;
209+
cursor: not-allowed;
210+
;
211+
--_active-descendant-color: transparent;
212+
--_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
211213
}
212214

213215
#toggle {
214-
background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
216+
background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
215217
}
216218

217219
#toggle,
218220
#toggle-input {
219-
display: flex;
220-
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
221-
font-size: var(--pf-global--FontSize--md, 16px);
222-
font-weight: var(--pf-global--FontWeight--normal, 400);
223-
line-height: 1.6;
221+
display: flex;
222+
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
223+
font-size: var(--pf-global--FontSize--md, 16px);
224+
font-weight: var(--pf-global--FontWeight--normal, 400);
225+
line-height: 1.6;
224226
}
225227

226228
#toggle {
227-
border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
228-
border-bottom-color: var(--pf-theme--color--text, #151515);
229-
justify-content: space-between;
229+
border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
230+
border-bottom-color: var(--pf-theme--color--text, #151515);
231+
justify-content: space-between;
230232
}
231233

232234
.disabled #toggle {
233-
color: var(--pf-global--Color--dark-200, #6a6e73) !important;
234-
background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
235-
border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
235+
color: var(--pf-global--Color--dark-200, #6a6e73) !important;
236+
background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
237+
border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
236238
}
237239

238240

239241
/* #toggle-button, */
240242
#toggle-input {
241-
background: transparent;
242-
border: none;
243-
text-align: left;
244-
border-radius: 0;
245-
padding-left: 3rem; /*Change it to variable*/
243+
background: transparent;
244+
border: none;
245+
text-align: left;
246+
border-radius: 0;
247+
padding-left: 3rem;
248+
/*Change it to variable*/
246249
}
247250

248251
#toggle-input {
249-
justify-content: space-between;
252+
justify-content: space-between;
250253
min-width: calc(100% - 33px);
251254
box-sizing: border-box;
252255
height: 2.25rem;
253256
}
254257

255258
.disabled #toggle-input {
256-
pointer-events: none;
259+
pointer-events: none;
257260
}
258261

259262
#close-button {
@@ -262,8 +265,8 @@
262265
--pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
263266
--pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
264267

265-
color: currentColor;
266-
background-color: transparent;
268+
color: currentColor;
269+
background-color: transparent;
267270
max-height: 2.25rem;
268271
max-width: 2.25rem;
269272
box-sizing: border-box;
@@ -279,98 +282,101 @@
279282
}
280283
}
281284

282-
.close-button-container{
285+
.close-button-container {
283286
height: 2.25rem;
284287
width: 2.25rem;
285288
}
286289

287290
#toggle-text {
288-
flex: 1 1 auto;
291+
flex: 1 1 auto;
289292
}
290293

291294

292295
#description {
293-
display: block;
296+
display: block;
294297
}
295298

296299
#listbox.checkboxes {
297-
--_pf-option-checkboxes-display: none;
298-
--_pf-option-svg-display: none;
300+
--_pf-option-checkboxes-display: none;
301+
--_pf-option-svg-display: none;
299302
}
300303

301304
.visually-hidden {
302-
border: 0;
303-
clip: rect(0, 0, 0, 0);
304-
block-size: 1px;
305-
margin: -1px;
306-
overflow: hidden;
307-
padding: 0;
308-
position: absolute;
309-
white-space: nowrap;
310-
inline-size: 1px;
305+
border: 0;
306+
clip: rect(0, 0, 0, 0);
307+
block-size: 1px;
308+
margin: -1px;
309+
overflow: hidden;
310+
padding: 0;
311+
position: absolute;
312+
white-space: nowrap;
313+
inline-size: 1px;
311314
}
312315

313316
::slotted(hr) {
314-
--pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
315-
--pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
316-
--pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
317-
--pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
318-
--pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
319-
--pf-c-divider--after--FlexBasis: 100%;
320-
--pf-c-divider--after--Inset: 0%;
321-
--pf-c-divider--m-vertical--after--FlexBasis: 100%;
322-
--pf-c-divider--m-horizontal--Display: flex;
323-
--pf-c-divider--m-horizontal--FlexDirection: row;
324-
--pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
325-
--pf-c-divider--m-horizontal--after--Width: auto;
326-
--pf-c-divider--m-vertical--Display: inline-flex;
327-
--pf-c-divider--m-vertical--FlexDirection: column;
328-
--pf-c-divider--m-vertical--after--Height: auto;
329-
--pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
330-
--pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
331-
--pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
332-
--pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
333-
--pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
334-
--pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
335-
display: var(--pf-c-divider--Display, flex);
317+
--pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
318+
--pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
319+
--pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
320+
--pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
321+
--pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
322+
--pf-c-divider--after--FlexBasis: 100%;
323+
--pf-c-divider--after--Inset: 0%;
324+
--pf-c-divider--m-vertical--after--FlexBasis: 100%;
325+
--pf-c-divider--m-horizontal--Display: flex;
326+
--pf-c-divider--m-horizontal--FlexDirection: row;
327+
--pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
328+
--pf-c-divider--m-horizontal--after--Width: auto;
329+
--pf-c-divider--m-vertical--Display: inline-flex;
330+
--pf-c-divider--m-vertical--FlexDirection: column;
331+
--pf-c-divider--m-vertical--after--Height: auto;
332+
--pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
333+
--pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
334+
--pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
335+
--pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
336+
--pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
337+
--pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
338+
display: var(--pf-c-divider--Display, flex);
336339
flex-direction: var(--pf-c-divider--FlexDirection);
337340
border: 0;
338-
width: 100%;
339-
margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
340-
margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
341+
width: 100%;
342+
margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
343+
margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
341344
}
342345

343346
::slotted(hr)::after {
344-
content: '';
345-
width: var(--pf-c-divider--after--Width, 100%) !important;
346-
height: var(--pf-c-divider--after--Height, 1px);
347-
background-color: var(--pf-c-divider--after--BackgroundColor);
348-
flex: 1 0 100%;
347+
content: '';
348+
width: var(--pf-c-divider--after--Width, 100%) !important;
349+
height: var(--pf-c-divider--after--Height, 1px);
350+
background-color: var(--pf-c-divider--after--BackgroundColor);
351+
flex: 1 0 100%;
349352
}
350353

351354
div.search-icon {
352355
position: absolute;
353-
top: 50%;
354-
left: var(--pf-global--spacer--md, 1rem);
355-
transform: translateY(-50%);
356-
display: flex;
357-
align-items: center;
356+
top: 50%;
357+
left: var(--pf-global--spacer--md, 1rem);
358+
transform: translateY(-50%);
359+
display: flex;
360+
align-items: center;
358361
}
359362

360363
#outer:focus-within {
361364
#toggle {
362365
border-bottom: none;
363366
border-bottom-left-radius: 4px;
367+
364368
#toggle-input {
365-
border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
369+
border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
366370
}
367371
}
372+
368373
.close-button-container {
369374
position: relative;
370-
&::after{
375+
376+
&::after {
371377
content: '';
372378
width: 2.25rem;
373-
height: var(--pf-global--spacer--xs, 0.125rem);
379+
height: var(--pf-global--spacer--xs, 0.125rem);
374380
bottom: 0px;
375381
left: -3px;
376382
background-color: var(--pf-theme--color--accent, #0066cc);
@@ -406,5 +412,5 @@ pf-text-input {
406412
.submit-button-container {
407413
position: absolute;
408414
top: 0;
409-
right: -100px;
415+
right: -100px;
410416
}

0 commit comments

Comments
 (0)