polylang / css / build / language-switcher.css

language-switcher.css in Polylang trunk, at css/build/language-switcher.css

191 lines 4.4 KB

Raw Download Zip

1	.pll-switcher {
2	display: block;
3	box-sizing: border-box;
4	width: 100%;
5	}
6
7	/* List layouts */
8	.pll-switcher ul {
9	padding: 0;
10	margin: 0;
11	list-style: none;
12	line-height: normal;
13	}
14	.pll-switcher li {
15	margin: 0;
16	}
17
18	/* Dropdown layout */
19	.pll-layout-dropdown,
20	.pll-switcher-inner {
21	display: flex;
22	flex-flow: row nowrap;
23	align-items: center;
24	justify-content: flex-start;
25	background-color: inherit;
26	}
27	.pll-switcher-inner {
28	box-sizing: border-box;
29	width: fit-content;
30	gap: .25em;
31	position: relative;
32	}
33	.pll-switcher .pll-switcher-inner > a {
34	width: auto;
35	max-width: none;
36	padding: .25em 0 .25em .5em;
37	color: inherit;
38	text-decoration: none;
39	z-index: 1;
40	}
41	.pll-switcher-inner .pll-submenu-toggle {
42	width: auto;
43	height: auto;
44	padding: 0 .4em 0 .2em;
45	border: none;
46	margin: 0;
47	line-height: 0;
48	font-size: inherit;
49	background-color: transparent !important; /* !important to overwrite some themes. */
50	color: currentColor !important;
51	}
52	.pll-switcher-inner .pll-submenu-toggle:focus {
53	outline: auto;
54	}
55	.pll-switcher-inner .pll-submenu-toggle svg {
56	display: block;
57	width: .6em;
58	height: .6em;
59	margin: 0;
60	}
61	.pll-switcher-inner .pll-submenu-toggle svg path {
62	stroke: currentColor;
63	}
64	.pll-switcher-inner:hover .pll-submenu-toggle:not([aria-expanded]) svg,
65	.pll-switcher-inner .pll-submenu-toggle[aria-expanded="true"] svg {
66	transform: rotate(180deg);
67	}
68	.pll-switcher-inner ul {
69	display: flex;
70	flex-direction: column;
71	align-items: stretch;
72	position: absolute;
73	z-index: 2;
74	width: 0;
75	height: 0;
76	left: 0;
77	right: auto;
78	top: 100%;
79	border: 1px solid rgba(0, 0, 0, .15);
80	background-color: var(--pll-dropdown-background-color, #fff);
81	color: inherit;
82	visibility: hidden;
83	overflow: hidden;
84	opacity: 0;
85	}
86	.wp-block-polylang-language-switcher .pll-switcher-inner ul {
87	background-color: var(--pll-dropdown-background-color, inherit); /* Allow to change the color via the UI. */
88	}
89	.pll-switcher-inner:hover .pll-submenu-toggle:not([aria-expanded]) + ul,
90	.pll-switcher-inner .pll-submenu-toggle[aria-expanded="true"] + ul {
91	width: auto;
92	height: auto;
93	min-width: 200px;
94	visibility: visible;
95	overflow: visible;
96	opacity: 1;
97	}
98
99	/* Horizontal, vertical and Select layouts */
100	.pll-layout-vertical ul {
101	display: flex;
102	flex-direction: column;
103	}
104	.pll-layout-horizontal ul,
105	.pll-layout-select {
106	display: flex;
107	flex-direction: row;
108	flex-wrap: wrap;
109	}
110
111	/*
112	* Main-axis alignment for horizontal, select, and dropdown.
113	* Selectors differ because the flex container is not always the root:
114	* - horizontal: the inner `ul` is flex → target `ul`
115	* - select / dropdown: the root is flex → target the root
116	* Vertical is omitted here: rows stay full width; alignment is done on
117	* the links via justify-content (see below).
118	*/
119	.pll-alignment-left.pll-layout-horizontal ul,
120	.pll-alignment-left.pll-layout-select,
121	.pll-alignment-left.pll-layout-dropdown {
122	justify-content: flex-start; /* Default value, but safety check. */
123	}
124	.pll-alignment-center.pll-layout-horizontal ul,
125	.pll-alignment-center.pll-layout-select,
126	.pll-alignment-center.pll-layout-dropdown {
127	justify-content: center;
128	}
129	.pll-alignment-right.pll-layout-horizontal ul,
130	.pll-alignment-right.pll-layout-select,
131	.pll-alignment-right.pll-layout-dropdown {
132	justify-content: flex-end;
133	}
134	.pll-alignment-stretched .pll-switcher-inner {
135	width: 100%;
136	}
137	.pll-alignment-stretched.pll-layout-horizontal ul,
138	.pll-alignment-stretched.pll-layout-select {
139	align-items: stretch;
140	}
141	.pll-alignment-stretched.pll-layout-dropdown {
142	flex-direction: row;
143	flex-wrap: wrap;
144	align-items: stretch;
145	}
146	.pll-alignment-stretched.pll-layout-horizontal li,
147	.pll-alignment-stretched.pll-layout-select select,
148	.pll-alignment-stretched .pll-switcher-inner > a {
149	flex-grow: 1;
150	}
151
152	/* Dropdown submenu panel position */
153	.pll-alignment-center.pll-layout-dropdown ul {
154	left: 50%;
155	right: auto;
156	transform: translateX(-50%);
157	}
158	.pll-alignment-right.pll-layout-dropdown ul {
159	left: auto;
160	right: 0;
161	}
162	.pll-alignment-stretched.pll-layout-dropdown ul {
163	left: 0;
164	right: 0;
165	}
166
167	/* Links */
168	.pll-switcher a {
169	display: flex;
170	align-items: center;
171	box-sizing: border-box;
172	width: 100%;
173	height: 100%;
174	padding: 0.25em .5em;
175	}
176	:root .pll-layout-dropdown ul a span {
177	color: var(--pll-dropdown-text-color, inherit);
178	}
179	/* Links are flex containers — use justify-content, not text-align. */
180	.pll-alignment-center a,
181	.pll-alignment-stretched.pll-layout-horizontal a {
182	justify-content: center;
183	}
184	.pll-alignment-left a {
185	justify-content: flex-start;
186	}
187	.pll-alignment-right a {
188	justify-content: flex-end;
189	}
190
191