-
Notifications
You must be signed in to change notification settings - Fork 4k
/
style.scss
131 lines (111 loc) · 2.6 KB
/
style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
.wp-block-social-links {
padding-left: 0;
padding-right: 0;
// Some themes set text-indent on all <ul>
text-indent: 0;
// Some themes give all <ul> default margin instead of padding.
margin-left: 0;
// Some themes add underlines, false underlines (via shadows), and borders to <a>.
.wp-social-link a,
.wp-social-link a:hover {
text-decoration: none;
border-bottom: 0;
box-shadow: none;
}
.wp-social-link {
// By setting the font size, we can scale icons and paddings consistently based on that.
// This also allows themes to override this, if need be.
a {
padding: 0.25em;
}
svg {
width: 1em;
height: 1em;
}
}
// Icon sizes.
// Small.
&.has-small-icon-size {
font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
}
// Normal/default.
&,
&.has-normal-icon-size {
font-size: 24px;
}
// Large.
&.has-large-icon-size {
font-size: 36px;
}
// Huge.
&.has-huge-icon-size {
font-size: 48px;
}
// Center flex items. This has an equivalent in editor.scss.
// It also needs to override some of the default classes usually applied to the centering class.
// align left must not be set, because this is the default (flex-start).
&.aligncenter {
justify-content: center;
display: flex;
}
&.alignright {
justify-content: flex-end;
}
}
.wp-block-social-link {
display: block;
border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
transition: transform 0.1s ease;
@include reduce-motion("transition");
// Dimensions.
height: auto;
a {
display: block;
line-height: 0;
transition: transform 0.1s ease;
}
&:hover {
transform: scale(1.1);
}
}
// This needs specificity because themes usually override it with things like .widget-area a.
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
&,
&:hover,
&:active,
&:visited,
svg {
color: currentColor;
fill: currentColor;
}
}
// Provide colors for a range of icons.
.wp-block-social-links:not(.is-style-logos-only) {
// Generic items such as mail, feed, etc.
@import "../social-link/socials-with-bg.scss";
}
// Treatment for logos only style.
.wp-block-social-links.is-style-logos-only {
.wp-social-link {
background: none;
a {
padding: 0;
}
// Make these bigger.
svg {
width: 1.25em;
height: 1.25em;
}
}
@import "../social-link/socials-without-bg.scss";
}
// Treatment for pill shape style.
.wp-block-social-links.is-style-pill-shape {
.wp-social-link {
width: auto;
}
.wp-social-link a {
padding-left: calc((2/3) * 1em);
padding-right: calc((2/3) * 1em);
}
}