UNPKG

12.4 kBCSSView Raw
1/**
2 * Colors
3 */
4/**
5 * Breakpoints & Media Queries
6 */
7/**
8 * SCSS Variables.
9 *
10 * Please use variables from this sheet to ensure consistency across the UI.
11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
13 */
14/**
15 * Colors
16 */
17/**
18 * Fonts & basic variables.
19 */
20/**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24/**
25 * Dimensions.
26 */
27/**
28 * Shadows.
29 */
30/**
31 * Editor widths.
32 */
33/**
34 * Block & Editor UI.
35 */
36/**
37 * Block paddings.
38 */
39/**
40 * React Native specific.
41 * These variables do not appear to be used anywhere else.
42 */
43/**
44* Converts a hex value into the rgb equivalent.
45*
46* @param {string} hex - the hexadecimal value to convert
47* @return {string} comma separated rgb values
48*/
49/**
50 * Breakpoint mixins
51 */
52/**
53 * Long content fade mixin
54 *
55 * Creates a fading overlay to signify that the content is longer
56 * than the space allows.
57 */
58/**
59 * Focus styles.
60 */
61/**
62 * Applies editor left position to the selector passed as argument
63 */
64/**
65 * Styles that are reused verbatim in a few places
66 */
67/**
68 * Allows users to opt-out of animations via OS-level preferences.
69 */
70/**
71 * Reset default styles for JavaScript UI based pages.
72 * This is a WP-admin agnostic reset
73 */
74/**
75 * Reset the WP Admin page styles for Gutenberg-like pages.
76 */
77.wp-block-social-links {
78 box-sizing: border-box;
79 padding-right: 0;
80 padding-left: 0;
81 text-indent: 0;
82 margin-right: 0;
83 background: none;
84}
85.wp-block-social-links .wp-social-link a,
86.wp-block-social-links .wp-social-link a:hover {
87 text-decoration: none;
88 border-bottom: 0;
89 box-shadow: none;
90}
91.wp-block-social-links .wp-social-link a {
92 padding: 0.25em;
93}
94.wp-block-social-links .wp-social-link svg {
95 width: 1em;
96 height: 1em;
97}
98.wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
99 margin-right: 0.5em;
100 margin-left: 0.5em;
101 font-size: 0.65em;
102}
103.wp-block-social-links.has-small-icon-size {
104 font-size: 16px;
105}
106.wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
107 font-size: 24px;
108}
109.wp-block-social-links.has-large-icon-size {
110 font-size: 36px;
111}
112.wp-block-social-links.has-huge-icon-size {
113 font-size: 48px;
114}
115.wp-block-social-links.aligncenter {
116 justify-content: center;
117 display: flex;
118}
119.wp-block-social-links.alignright {
120 justify-content: flex-end;
121}
122
123.wp-block-social-link {
124 display: block;
125 border-radius: 9999px;
126 transition: transform 0.1s ease;
127 height: auto;
128}
129@media (prefers-reduced-motion: reduce) {
130 .wp-block-social-link {
131 transition-duration: 0s;
132 transition-delay: 0s;
133 }
134}
135.wp-block-social-link a {
136 align-items: center;
137 display: flex;
138 line-height: 0;
139 transition: transform 0.1s ease;
140}
141.wp-block-social-link:hover {
142 transform: scale(1.1);
143}
144
145.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:active, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:visited,
146.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg {
147 color: currentColor;
148 fill: currentColor;
149}
150
151.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
152 background-color: #f0f0f0;
153 color: #444;
154}
155.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-amazon {
156 background-color: #f90;
157 color: #fff;
158}
159.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-bandcamp {
160 background-color: #1ea0c3;
161 color: #fff;
162}
163.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-behance {
164 background-color: #0757fe;
165 color: #fff;
166}
167.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-codepen {
168 background-color: #1e1f26;
169 color: #fff;
170}
171.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-deviantart {
172 background-color: #02e49b;
173 color: #fff;
174}
175.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dribbble {
176 background-color: #e94c89;
177 color: #fff;
178}
179.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dropbox {
180 background-color: #4280ff;
181 color: #fff;
182}
183.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-etsy {
184 background-color: #f45800;
185 color: #fff;
186}
187.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook {
188 background-color: #1778f2;
189 color: #fff;
190}
191.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-fivehundredpx {
192 background-color: #000;
193 color: #fff;
194}
195.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-flickr {
196 background-color: #0461dd;
197 color: #fff;
198}
199.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-foursquare {
200 background-color: #e65678;
201 color: #fff;
202}
203.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-github {
204 background-color: #24292d;
205 color: #fff;
206}
207.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-goodreads {
208 background-color: #eceadd;
209 color: #382110;
210}
211.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-google {
212 background-color: #ea4434;
213 color: #fff;
214}
215.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram {
216 background-color: #f00075;
217 color: #fff;
218}
219.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-lastfm {
220 background-color: #e21b24;
221 color: #fff;
222}
223.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-linkedin {
224 background-color: #0d66c2;
225 color: #fff;
226}
227.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-mastodon {
228 background-color: #3288d4;
229 color: #fff;
230}
231.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium {
232 background-color: #02ab6c;
233 color: #fff;
234}
235.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup {
236 background-color: #f6405f;
237 color: #fff;
238}
239.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-patreon {
240 background-color: #ff424d;
241 color: #fff;
242}
243.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pinterest {
244 background-color: #e60122;
245 color: #fff;
246}
247.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pocket {
248 background-color: #ef4155;
249 color: #fff;
250}
251.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-reddit {
252 background-color: #ff4500;
253 color: #fff;
254}
255.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-skype {
256 background-color: #0478d7;
257 color: #fff;
258}
259.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-snapchat {
260 background-color: #fefc00;
261 color: #fff;
262 stroke: #000;
263}
264.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-soundcloud {
265 background-color: #ff5600;
266 color: #fff;
267}
268.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-spotify {
269 background-color: #1bd760;
270 color: #fff;
271}
272.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-telegram {
273 background-color: #2aabee;
274 color: #fff;
275}
276.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tiktok {
277 background-color: #000;
278 color: #fff;
279}
280.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tumblr {
281 background-color: #011835;
282 color: #fff;
283}
284.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitch {
285 background-color: #6440a4;
286 color: #fff;
287}
288.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitter {
289 background-color: #1da1f2;
290 color: #fff;
291}
292.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vimeo {
293 background-color: #1eb7ea;
294 color: #fff;
295}
296.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vk {
297 background-color: #4680c2;
298 color: #fff;
299}
300.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-wordpress {
301 background-color: #3499cd;
302 color: #fff;
303}
304.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-whatsapp {
305 background-color: #25d366;
306 color: #fff;
307}
308.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-yelp {
309 background-color: #d32422;
310 color: #fff;
311}
312.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-youtube {
313 background-color: #f00;
314 color: #fff;
315}
316
317.wp-block-social-links.is-style-logos-only .wp-social-link {
318 background: none;
319}
320.wp-block-social-links.is-style-logos-only .wp-social-link a {
321 padding: 0;
322}
323.wp-block-social-links.is-style-logos-only .wp-social-link svg {
324 width: 1.25em;
325 height: 1.25em;
326}
327.wp-block-social-links.is-style-logos-only .wp-social-link-amazon {
328 color: #f90;
329}
330.wp-block-social-links.is-style-logos-only .wp-social-link-bandcamp {
331 color: #1ea0c3;
332}
333.wp-block-social-links.is-style-logos-only .wp-social-link-behance {
334 color: #0757fe;
335}
336.wp-block-social-links.is-style-logos-only .wp-social-link-codepen {
337 color: #1e1f26;
338}
339.wp-block-social-links.is-style-logos-only .wp-social-link-deviantart {
340 color: #02e49b;
341}
342.wp-block-social-links.is-style-logos-only .wp-social-link-dribbble {
343 color: #e94c89;
344}
345.wp-block-social-links.is-style-logos-only .wp-social-link-dropbox {
346 color: #4280ff;
347}
348.wp-block-social-links.is-style-logos-only .wp-social-link-etsy {
349 color: #f45800;
350}
351.wp-block-social-links.is-style-logos-only .wp-social-link-facebook {
352 color: #1778f2;
353}
354.wp-block-social-links.is-style-logos-only .wp-social-link-fivehundredpx {
355 color: #000;
356}
357.wp-block-social-links.is-style-logos-only .wp-social-link-flickr {
358 color: #0461dd;
359}
360.wp-block-social-links.is-style-logos-only .wp-social-link-foursquare {
361 color: #e65678;
362}
363.wp-block-social-links.is-style-logos-only .wp-social-link-github {
364 color: #24292d;
365}
366.wp-block-social-links.is-style-logos-only .wp-social-link-goodreads {
367 color: #382110;
368}
369.wp-block-social-links.is-style-logos-only .wp-social-link-google {
370 color: #ea4434;
371}
372.wp-block-social-links.is-style-logos-only .wp-social-link-instagram {
373 color: #f00075;
374}
375.wp-block-social-links.is-style-logos-only .wp-social-link-lastfm {
376 color: #e21b24;
377}
378.wp-block-social-links.is-style-logos-only .wp-social-link-linkedin {
379 color: #0d66c2;
380}
381.wp-block-social-links.is-style-logos-only .wp-social-link-mastodon {
382 color: #3288d4;
383}
384.wp-block-social-links.is-style-logos-only .wp-social-link-medium {
385 color: #02ab6c;
386}
387.wp-block-social-links.is-style-logos-only .wp-social-link-meetup {
388 color: #f6405f;
389}
390.wp-block-social-links.is-style-logos-only .wp-social-link-patreon {
391 color: #ff424d;
392}
393.wp-block-social-links.is-style-logos-only .wp-social-link-pinterest {
394 color: #e60122;
395}
396.wp-block-social-links.is-style-logos-only .wp-social-link-pocket {
397 color: #ef4155;
398}
399.wp-block-social-links.is-style-logos-only .wp-social-link-reddit {
400 color: #ff4500;
401}
402.wp-block-social-links.is-style-logos-only .wp-social-link-skype {
403 color: #0478d7;
404}
405.wp-block-social-links.is-style-logos-only .wp-social-link-snapchat {
406 color: #fff;
407 stroke: #000;
408}
409.wp-block-social-links.is-style-logos-only .wp-social-link-soundcloud {
410 color: #ff5600;
411}
412.wp-block-social-links.is-style-logos-only .wp-social-link-spotify {
413 color: #1bd760;
414}
415.wp-block-social-links.is-style-logos-only .wp-social-link-telegram {
416 color: #2aabee;
417}
418.wp-block-social-links.is-style-logos-only .wp-social-link-tiktok {
419 color: #000;
420}
421.wp-block-social-links.is-style-logos-only .wp-social-link-tumblr {
422 color: #011835;
423}
424.wp-block-social-links.is-style-logos-only .wp-social-link-twitch {
425 color: #6440a4;
426}
427.wp-block-social-links.is-style-logos-only .wp-social-link-twitter {
428 color: #1da1f2;
429}
430.wp-block-social-links.is-style-logos-only .wp-social-link-vimeo {
431 color: #1eb7ea;
432}
433.wp-block-social-links.is-style-logos-only .wp-social-link-vk {
434 color: #4680c2;
435}
436.wp-block-social-links.is-style-logos-only .wp-social-link-whatsapp {
437 color: #25d366;
438}
439.wp-block-social-links.is-style-logos-only .wp-social-link-wordpress {
440 color: #3499cd;
441}
442.wp-block-social-links.is-style-logos-only .wp-social-link-yelp {
443 color: #d32422;
444}
445.wp-block-social-links.is-style-logos-only .wp-social-link-youtube {
446 color: #f00;
447}
448
449.wp-block-social-links.is-style-pill-shape .wp-social-link {
450 width: auto;
451}
452.wp-block-social-links.is-style-pill-shape .wp-social-link a {
453 padding-right: calc((2/3) * 1em);
454 padding-left: calc((2/3) * 1em);
455}
\No newline at end of file