Changes for page Icon Picker

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -10,14 +10,11 @@
10	10	}
11	11
12	12	.xwikiIconPickerList {
13		- display: grid;
14		- max-width: 100%;
15		- height: 240px;
16	16	overflow-y: scroll;
	14	+ height: 240px;
	15	+ display: flex;
	16	+ flex-wrap: wrap;
17	17	gap: .3em;
18		- padding: .3em;
19		- /* 4 columns, each a fraction of the whole width */
20		- grid-template-columns: repeat(4, 1fr);
21	21	}
22	22
23	23	/* Avoid stretching on the Loader element. */
...	...	@@ -26,21 +26,17 @@
26	26	}
27	27
28	28	.xwikiIconPickerIcon {
29		- display: flex;
30		- flex-direction: column;
31		- margin: 0;
32		- padding: 0;
	26	+ height: 80px;
	27	+ width: 100px;
33	33	text-align: center;
34	34	border-radius: 7px;
35	35	vertical-align: middle;
	31	+ overflow: hidden;
	32	+ padding: 10px;
36	36	cursor: pointer;
37	37	background-color: transparent;
38	38	}
39	39
40		-.xwikiIconPickerIcon * {
41		- padding: 0;
42		-}
43		-
44	44	.xwikiIconPickerIcon:hover {
45	45	background-color: $theme.highlightColor;
46	46	}
...	...	@@ -56,6 +56,12 @@
56	56	}
57	57
58	58	.xwikiIconPickerIcon .xwikiIconPickerIconName {
	52	+ /* We want to limit the number of lines in the name so that it always fit inside the standard button size.
	53	+ The value below is just about twice the line-height. */
	54	+ max-height: 2.9em;
	55	+ /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */
	56	+ overflow-y: scroll;
	57	+ overflow-x: hidden;
59	59	/* Make sure the name wraps onto multiple lines instead of overflowing. */
60	60	white-space: pre-wrap;
61	61	word-break: break-word;