Skip to content

Commit e504281

Browse files
bennypowersbennypowers
authored
fix(select): hr styles (#2701)
* fix(select): hr styles * fix(select): hide adjacent separator
1 parent d4e5411 commit e504281

File tree

1 file changed

+204
-1
lines changed

1 file changed

+204
-1
lines changed

‎elements/pf-select/pf-select.css‎

Lines changed: 204 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,165 @@
22
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
33
font-size: var(--pf-global--FontSize--md, 16px);
44
font-weight: var(--pf-global--FontWeight--normal, 400);
5-
color: var(--pf-theme--color--text, #151515);
5+
color: var(--pf-global--Color--100, #151515);
66
--_pf-option-checkboxes-display: none;
77
--_pf-option-svg-display: block;
8+
--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
9+
--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
10+
--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
11+
--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
12+
--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
13+
--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
14+
--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
15+
--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
16+
--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
17+
--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
18+
--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
19+
--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
20+
--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
21+
--pf-c-select__toggle--before--BorderWidth: initial;
22+
--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
23+
--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
24+
--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
25+
--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
26+
--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);
27+
--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
28+
--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
29+
--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
30+
--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
31+
--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
32+
--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
33+
--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
34+
--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
35+
--pf-c-select__toggle--m-plain--before--BorderColor: transparent;
36+
--pf-c-select__toggle--m-placeholder--Color: transparent;
37+
--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
38+
--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
39+
--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
40+
--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
41+
--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
42+
--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
43+
--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
44+
--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
45+
--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
46+
--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
47+
--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
48+
--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
49+
--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
50+
--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
51+
--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
52+
--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
53+
--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
54+
--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
55+
--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
56+
--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
57+
--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
58+
--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
59+
--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
60+
--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;
61+
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;
62+
--pf-c-select__toggle-typeahead--FlexBasis: 10em;
63+
--pf-c-select__toggle-typeahead--BackgroundColor: transparent;
64+
--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;
65+
--pf-c-select__toggle-typeahead--BorderRight: none;
66+
--pf-c-select__toggle-typeahead--BorderLeft: none;
67+
--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;
68+
--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));
69+
--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
70+
--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
71+
--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
72+
--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
73+
--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
74+
--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);
75+
--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
76+
--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
77+
--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
78+
--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
79+
--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
80+
--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
81+
--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
82+
--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
83+
--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);
84+
--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);
85+
--pf-c-select__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
86+
--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
87+
--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
88+
--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));
89+
--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);
90+
--pf-c-select__menu--Width: auto;
91+
--pf-c-select__menu--MinWidth: 100%;
92+
--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));
93+
--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
94+
--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
95+
--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);
96+
--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);
97+
--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);
98+
--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);
99+
--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);
100+
--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);
101+
--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);
102+
--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);
103+
--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);
104+
--pf-c-select__menu-item--Width: 100%;
105+
--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
106+
--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);
107+
--pf-c-select__menu-item--disabled--BackgroundColor: transparent;
108+
--pf-c-select__menu-item--m-link--Width: auto;
109+
--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;
110+
--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;
111+
--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
112+
--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);
113+
--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);
114+
--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);
115+
--pf-c-select__menu-item--m-action--Width: auto;
116+
--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
117+
--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;
118+
--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;
119+
--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);
120+
--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);
121+
--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);
122+
--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);
123+
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);
124+
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);
125+
--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);
126+
--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);
127+
--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);
128+
--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
129+
--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);
130+
--pf-c-select__menu-item-icon--Top: 50%;
131+
--pf-c-select__menu-item-icon--TranslateY: -50%;
132+
--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));
133+
--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);
134+
--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
135+
--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
136+
--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);
137+
--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
138+
--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
139+
--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);
140+
--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
141+
--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
142+
--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
143+
--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
144+
--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
145+
--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);
146+
--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);
147+
--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
148+
--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);
149+
--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);
150+
--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
151+
--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);
152+
--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
153+
--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
154+
--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);
155+
--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));
156+
--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);
157+
--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);
158+
--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);
159+
--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);
160+
--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
161+
--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
162+
--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);
163+
--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);
8164
}
9165

10166
:host, #outer {
@@ -48,6 +204,7 @@
48204
#listbox {
49205
display: flex;
50206
flex-direction: column;
207+
position: relative;
51208
width: 100%;
52209
}
53210

@@ -158,6 +315,14 @@ pf-badge {
158315
--_pf-option-svg-display: none;
159316
}
160317

318+
::slotted(pf-option-group + hr) {
319+
display: none !important;
320+
}
321+
322+
::slotted(hr:has(+ pf-option-group)) {
323+
display: none !important;
324+
}
325+
161326
.offscreen {
162327
position: absolute;
163328
left: -99999;
@@ -166,3 +331,41 @@ pf-badge {
166331
opacity: 0;
167332
overflow: hidden;
168333
}
334+
335+
::slotted(hr) {
336+
--pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
337+
--pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
338+
--pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
339+
--pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
340+
--pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
341+
--pf-c-divider--after--FlexBasis: 100%;
342+
--pf-c-divider--after--Inset: 0%;
343+
--pf-c-divider--m-vertical--after--FlexBasis: 100%;
344+
--pf-c-divider--m-horizontal--Display: flex;
345+
--pf-c-divider--m-horizontal--FlexDirection: row;
346+
--pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
347+
--pf-c-divider--m-horizontal--after--Width: auto;
348+
--pf-c-divider--m-vertical--Display: inline-flex;
349+
--pf-c-divider--m-vertical--FlexDirection: column;
350+
--pf-c-divider--m-vertical--after--Height: auto;
351+
--pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
352+
--pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
353+
--pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
354+
--pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
355+
--pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
356+
--pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
357+
display: var(--pf-c-divider--Display, flex);
358+
flex-direction: var(--pf-c-divider--FlexDirection);
359+
border: 0;
360+
width: 100%;
361+
margin-top: var(--pf-c-select-menu--c-divider--MarginTop);
362+
margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);
363+
}
364+
365+
::slotted(hr)::after {
366+
content: '';
367+
width: var(--pf-c-divider--after--Width, 100%) !important;
368+
height: var(--pf-c-divider--after--Height, 1px);
369+
background-color: var(--pf-c-divider--after--BackgroundColor);
370+
flex: 1 0 100%;
371+
}

0 commit comments

Comments
 (0)