Skip to content

Commit 7db0689

Browse files
janfaracikjanfaracik
committed
Copy CSS from New Item PR - fix focus bug
1 parent 336b7b9 commit 7db0689

File tree

1 file changed

+110
-143
lines changed
  • src/main/resources/com/cloudbees/plugins/credentials/common

1 file changed

+110
-143
lines changed

‎src/main/resources/com/cloudbees/plugins/credentials/common/card.css‎

Lines changed: 110 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -110,148 +110,106 @@
110110
margin-bottom: 1.5rem;
111111
}
112112

113+
/* TODO remove after baseline including https://github.com/jenkinsci/jenkins/pull/26031 */
113114
.jenkins-choice-list {
114115
display: flex;
115116
flex-direction: column;
116117
padding: 0;
117-
margin: 0;
118118
border-radius: var(--form-input-border-radius);
119119
border: var(--card-border-width) solid var(--card-border-color);
120120
background: var(--card-background);
121-
margin-bottom: var(--section-padding);
121+
margin: 0 0 var(--section-padding);
122+
}
122123

123-
.jenkins-choice-list__item {
124-
-webkit-touch-callout: none;
125-
position: relative;
126-
user-select: none;
127-
display: flex;
128-
align-items: stretch;
129-
flex-direction: column;
130-
white-space: unset;
131-
border-radius: 0;
132-
cursor: pointer;
133-
134-
&:not(:last-of-type) {
135-
border-bottom: var(--card-border-width) solid var(--card-border-color);
136-
}
124+
.jenkins-choice-list__item {
125+
-webkit-touch-callout: none;
126+
position: relative;
127+
-webkit-user-select: none;
128+
-moz-user-select: none;
129+
user-select: none;
130+
display: flex;
131+
align-items: stretch;
132+
flex-direction: column;
133+
white-space: unset;
134+
border-radius: 0;
135+
cursor: pointer;
136+
}
137137

138-
&::before {
139-
content: "";
140-
position: absolute;
141-
inset: 0;
142-
border-radius: inherit;
143-
transition: var(--standard-transition);
144-
background: transparent;
145-
box-shadow:
146-
0 0 0 0.09375rem transparent,
147-
0 0 0 0.5rem transparent;
148-
pointer-events: none;
149-
}
138+
.jenkins-choice-list__item:not(:last-of-type) {
139+
border-bottom: var(--card-border-width) solid var(--card-border-color);
140+
}
150141

151-
&:hover {
152-
&::before {
153-
background: color-mix(
154-
in sRGB,
155-
var(--text-color-secondary) 7.5%,
156-
transparent
157-
);
158-
}
159-
}
142+
.jenkins-choice-list__item::before {
143+
content: "";
144+
position: absolute;
145+
inset: 0;
146+
border-radius: inherit;
147+
transition: var(--standard-transition);
148+
background: transparent;
149+
box-shadow: 0 0 0 0.09375rem transparent, 0 0 0 0.5rem transparent;
150+
pointer-events: none;
151+
}
160152

161-
&:active,
162-
&:focus-visible {
163-
z-index: 10;
164-
border-radius: calc(var(--form-input-border-radius) / 2);
165-
166-
&::before {
167-
background: color-mix(
168-
in sRGB,
169-
var(--text-color-secondary) 12.5%,
170-
transparent
171-
) !important;
172-
box-shadow:
173-
0 0 0 0.09375rem
174-
color-mix(
175-
in sRGB,
176-
var(--text-color-secondary) 20%,
177-
var(--card-background)
178-
),
179-
0 0 0 0.34375rem
180-
color-mix(
181-
in sRGB,
182-
color-mix(
183-
in sRGB,
184-
var(--text-color-secondary) 15%,
185-
var(--card-background)
186-
)
187-
65%,
188-
transparent
189-
);
190-
}
191-
}
153+
.jenkins-choice-list__item:hover::before {
154+
background: color-mix(in sRGB, var(--text-color-secondary) 7.5%, transparent);
155+
}
192156

193-
&:focus {
194-
&::before {
195-
box-shadow: 0 0 0 0.2rem var(--text-color) !important;
196-
}
197-
}
157+
.jenkins-choice-list__item:active, .jenkins-choice-list__item:has(input[type=radio]:focus-visible) {
158+
z-index: 10;
159+
border-radius: calc(var(--form-input-border-radius) / 2);
160+
}
198161

199-
&:has(input:checked) {
200-
&::before {
201-
background: color-mix(
202-
in sRGB,
203-
var(--text-color-secondary) 5%,
204-
transparent
205-
);
206-
}
207-
}
162+
.jenkins-choice-list__item:active::before, .jenkins-choice-list__item:has(input[type=radio]:focus-visible)::before {
163+
background: color-mix(in sRGB, var(--text-color-secondary) 12.5%, transparent) !important;
164+
box-shadow: 0 0 0 0.09375rem color-mix(in sRGB, var(--text-color-secondary) 20%, var(--card-background)), 0 0 0 0.34375rem color-mix(in sRGB, color-mix(in sRGB, var(--text-color-secondary) 15%, var(--card-background)) 65%, transparent);
165+
}
208166

209-
&:first-of-type {
210-
border-top-left-radius: calc(
211-
var(--form-input-border-radius) - var(--jenkins-border-width)
212-
) !important;
213-
border-top-right-radius: calc(
214-
var(--form-input-border-radius) - var(--jenkins-border-width)
215-
) !important;
216-
}
167+
.jenkins-choice-list__item:hover .jenkins-choice-list__item__icon::before, .jenkins-choice-list__item:active .jenkins-choice-list__item__icon::before, .jenkins-choice-list__item:has(input[type=radio]:focus-visible) .jenkins-choice-list__item__icon::before {
168+
background: rgb(from var(--text-color-secondary) r g b/0.1);
169+
box-shadow: inset var(--jenkins-border--subtle-shadow), inset 0 0 0 var(--jenkins-border-width) rgb(from var(--text-color-secondary) r g b/0.1);
170+
}
217171

218-
&:last-of-type {
219-
border-bottom-left-radius: calc(
220-
var(--form-input-border-radius) - var(--jenkins-border-width)
221-
) !important;
222-
border-bottom-right-radius: calc(
223-
var(--form-input-border-radius) - var(--jenkins-border-width)
224-
) !important;
225-
}
226-
}
172+
.jenkins-choice-list__item:has(input[type=radio]:focus-visible)::before {
173+
box-shadow: 0 0 0 0.2rem var(--text-color) !important;
227174
}
228175

229-
/*----*/
176+
.jenkins-choice-list__item:has(input:checked)::before {
177+
background: color-mix(in sRGB, var(--text-color-secondary) 5%, transparent);
178+
}
230179

231-
.jenkins-choice-list__item {
232-
label {
233-
display: grid;
234-
grid-template-columns: auto 1fr;
235-
gap: 0.25rem 0.875rem;
236-
padding: 0.875rem;
237-
cursor: pointer;
238-
239-
&:has(input:checked) {
240-
.jenkins-choice-list__item__icon {
241-
color: var(--background);
242-
243-
&::before {
244-
box-shadow:
245-
inset var(--jenkins-border--subtle-shadow),
246-
inset 0 0 18px 18px var(--accent-color);
247-
}
248-
}
249-
}
250-
}
180+
.jenkins-choice-list__item:has(input:checked) .jenkins-choice-list__item__icon {
181+
color: var(--background);
182+
}
251183

252-
label > input[type="radio"] {
253-
display: none;
254-
}
184+
.jenkins-choice-list__item:has(input:checked) .jenkins-choice-list__item__icon::before {
185+
box-shadow: inset var(--jenkins-border--subtle-shadow), inset 0 0 18px 18px var(--accent-color) !important;
186+
}
187+
188+
.jenkins-choice-list__item:has(input:checked) .jenkins-choice-list__item__conditional {
189+
display: block;
190+
}
191+
192+
.jenkins-choice-list__item:first-of-type {
193+
border-top-left-radius: calc(var(--form-input-border-radius) - var(--jenkins-border-width)) !important;
194+
border-top-right-radius: calc(var(--form-input-border-radius) - var(--jenkins-border-width)) !important;
195+
}
196+
197+
.jenkins-choice-list__item:last-of-type {
198+
border-bottom-left-radius: calc(var(--form-input-border-radius) - var(--jenkins-border-width)) !important;
199+
border-bottom-right-radius: calc(var(--form-input-border-radius) - var(--jenkins-border-width)) !important;
200+
}
201+
202+
.jenkins-choice-list__item label {
203+
display: grid;
204+
gap: 0.25rem 0.875rem;
205+
padding: 0.875rem;
206+
grid-template-columns: auto 1fr;
207+
cursor: pointer;
208+
}
209+
210+
.jenkins-choice-list__item label > input[type=radio] {
211+
position: absolute;
212+
opacity: 0;
255213
}
256214

257215
.jenkins-choice-list__item__icon {
@@ -264,28 +222,24 @@
264222
grid-row: span 2;
265223
z-index: 10;
266224
transition: var(--standard-transition);
225+
}
267226

268-
&::before {
269-
content: "";
270-
position: absolute;
271-
inset: 0;
272-
border-radius: var(--form-input-border-radius);
273-
transition: var(--standard-transition);
274-
z-index: 0;
275-
background: rgb(from var(--text-color-secondary) r g b / 0.05);
276-
box-shadow:
277-
inset 0 0 0 var(--jenkins-border-width) var(--jenkins-border-color),
278-
inset 0 0 0 var(--jenkins-border-width)
279-
rgb(from var(--text-color-secondary) r g b / 0.05);
280-
}
227+
.jenkins-choice-list__item__icon::before {
228+
content: "";
229+
position: absolute;
230+
inset: 0;
231+
border-radius: var(--form-input-border-radius);
232+
transition: var(--standard-transition);
233+
z-index: 0;
234+
background: rgb(from var(--text-color-secondary) r g b/0.05);
235+
box-shadow: inset 0 0 0 var(--jenkins-border-width) var(--jenkins-border-color), inset 0 0 0 var(--jenkins-border-width) rgb(from var(--text-color-secondary) r g b/0.05);
236+
}
281237

282-
svg,
283-
img {
284-
position: relative;
285-
width: 1.25rem;
286-
height: 1.25rem;
287-
z-index: 1;
288-
}
238+
.jenkins-choice-list__item__icon svg, .jenkins-choice-list__item__icon img {
239+
position: relative;
240+
width: 1.25rem;
241+
height: 1.25rem;
242+
z-index: 1;
289243
}
290244

291245
.jenkins-choice-list__item__label {
@@ -295,6 +249,19 @@
295249
color: var(--text-color);
296250
}
297251

252+
.jenkins-choice-list__item__description {
253+
color: var(--text-color-secondary);
254+
grid-column: 2;
255+
padding-right: 2rem;
256+
}
257+
258+
.jenkins-choice-list__item__conditional {
259+
display: none;
260+
margin-left: 4rem;
261+
margin-top: -0.25rem;
262+
margin-bottom: 0.875rem;
263+
}
264+
298265
/* TODO remove after baseline including https://github.com/jenkinsci/jenkins/pull/26189 */
299266
.jenkins-dropdown__item {
300267
&:has(.jenkins-dropdown__item__description) {

0 commit comments

Comments
 (0)