Projet

Général

Profil

0001-css-adapt-select2-style-to-look-like-other-widgets-1.patch

Frédéric Péters, 20 octobre 2020 08:32

Télécharger (4,52 ko)

Voir les différences:

Subject: [PATCH] css: adapt select2 style to look like other widgets (#13819)

 gadjo/static/css/_forms.scss | 126 +++++++++++++++++++++++++++++++++--
 1 file changed, 122 insertions(+), 4 deletions(-)
gadjo/static/css/_forms.scss
5 5
$button-delete-color: #CD2026;
6 6
$button-submit-color: #215D9C;
7 7

  
8
$widget-background: white;
9
$widget-focus-background: white;
10
$widget-border: 1px solid #AAA;
11
$widget-focus-border: $widget-border;
12
$widget-border-radius: 0;
13
$widget-color: $font-color;
14
$widget-focus-color: $font-color;
15
$widget-focus-outline: none;
16
$widget-focus-outline-offset: 0;
17

  
18
$data_uri_arrow-down: "arrow-down.svg";
19

  
8 20
input, select, button, textarea {
9 21
	font-size: 100%;
10 22
	font-family: $font-family;
......
174 186
}
175 187

  
176 188
input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
177
	border: 1px solid #AAA;
178
	border-radius: 0px;
189
	border: $widget-border;
190
	border-radius: $widget-border-radius;
179 191
	box-sizing: border-box;
180 192
	margin: 0.2em 0px;
181 193
	outline: medium none;
182 194
	padding: 0.7ex 0.7em;
183 195
	max-width: 100%;
184 196
	@include vendor-prefix('transition', 'background-size 0.2s ease');
185
	background: white;
197
	background: $widget-background;
186 198
	&:focus {
187 199
		border-bottom-color: $button-submit-color;
188 200
	}
......
217 229
	background: white;
218 230
	@include vendor-prefix('appearance', 'none');
219 231
	padding-right: 4em;
220
	background-image: url(arrow-down.svg);
232
	background-image: url($data_uri_arrow-down);
221 233
	background-position: right 1.3rem center;
222 234
	background-repeat: no-repeat;
223 235
	background-size: 1rem auto;
......
319 331
	display: none;
320 332
}
321 333

  
334
/* select2 */
335
div.select2-container,
336
span.select2-container {
337
	min-width: 20em;
338
	margin: 0.2em 0px;
339
	padding-bottom: 1px;
340
	a.select2-choice {
341
		padding: 0.1em 0.7em;
342
	}
343
	span.select2-selection--single,
344
	a.select2-choice,
345
	a.select2-choice div {
346
		box-sizing: content-box;
347
		padding: 0.2em 0 0.2em 0;
348
		background: $widget-background;
349
		color: $widget-color;
350
		border-radius: $widget-border-radius;
351
		border: $widget-border;
352
	}
353
	&.select2-container--focus,
354
	&.select2-container--open {
355
		span.select2-selection--single,
356
		a.select2-choice,
357
		a.select2-choice div {
358
			background: $widget-focus-background;
359
			border: $widget-focus-border;
360
			color: $widget-focus-color;
361
			span {
362
				color: $widget-focus-color;
363
			}
364
		}
365
	}
366
	&.select2-container--focus span.select2-selection--single {
367
		outline: $widget-focus-outline;
368
		outline-offset: $widget-focus-outline-offset;
369
	}
370
	.select2-choices,
371
	.select2-choice {
372
		box-shadow: none;
373
	}
374
	.select2-search--dropdown input,
375
	.select2-search--dropdown input:active,
376
	.select2-search--dropdown input:focus {
377
		background: white;
378
		color: #333;
379
		border: 1px solid #ccc;
380
	}
381
	.select2-selection--single .select2-selection__rendered {
382
		padding-right: 50px;
383
	}
384
	.select2-selection--single .select2-selection__arrow {
385
		background-image: url($data_uri_arrow-down);
386
		background-position: right 1.3rem center;
387
		background-repeat: no-repeat;
388
		background-size: 1rem auto;
389
		width: 50px;
390
		right: 0;
391
		top: 0;
392
		height: 100%;
393
		b {
394
			display: none;
395
		}
396
	}
397
	.select2-selection--single .select2-selection__clear {
398
	}
399
	.select2-dropdown {
400
		border: $widget-border;
401
		&.select2-dropdown--below {
402
			position: relative;
403
			top: -6px;
404
		}
405
	}
406
	.select2-results {
407
		.loading-results {
408
			position: absolute;
409
			display: inline-block;
410
			right: 0;
411
			color: black;
412
			@media screen and (max-width: $mobile-limit) {
413
				display: none;
414
			}
415
		}
416
		.loading-results:last-child {
417
			position: static;
418
			display: block;
419
			color: inherit;
420
		}
421
	}
422
}
423

  
424
div.select2-container.select2-drop-above .select2-choice {
425
	background: white;
426
	border-radius: 0;
427
}
428

  
429
div.select2-drop {
430
	box-shadow: none;
431
	border-radius: 0;
432
}
433

  
434
div.select2-search {
435
	margin-top: 4px;
436
}
437

  
438

  
439

  
322 440
/* form.as_p */
323 441

  
324 442
form p {
325
-