Changes for page Icon Picker

Summary

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

Details

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -10,11 +10,14 @@
10	10	}
11	11
12	12	.xwikiIconPickerList {
13		- overflow-y: scroll;
	13	+ display: grid;
	14	+ max-width: 100%;
14	14	height: 240px;
15		- display: flex;
16		- flex-wrap: wrap;
	16	+ overflow-y: scroll;
17	17	gap: .3em;
	18	+ padding: .3em;
	19	+ /* 4 columns, each a fraction of the whole width */
	20	+ grid-template-columns: repeat(4, 1fr);
18	18	}
19	19
20	20	/* Avoid stretching on the Loader element. */
...	...	@@ -23,17 +23,21 @@
23	23	}
24	24
25	25	.xwikiIconPickerIcon {
26		- height: 80px;
27		- width: 100px;
	29	+ display: flex;
	30	+ flex-direction: column;
	31	+ margin: 0;
	32	+ padding: 0;
28	28	text-align: center;
29	29	border-radius: 7px;
30	30	vertical-align: middle;
31		- overflow: hidden;
32		- padding: 10px;
33	33	cursor: pointer;
34	34	background-color: transparent;
35	35	}
36	36
	40	+.xwikiIconPickerIcon * {
	41	+ padding: 0;
	42	+}
	43	+
37	37	.xwikiIconPickerIcon:hover {
38	38	background-color: $theme.highlightColor;
39	39	}
...	...	@@ -49,12 +49,6 @@
49	49	}
50	50
51	51	.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;
58	58	/* Make sure the name wraps onto multiple lines instead of overflowing. */
59	59	white-space: pre-wrap;
60	60	word-break: break-word;