-
Notifications
You must be signed in to change notification settings - Fork 4k
/
style.scss
140 lines (125 loc) · 3.29 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
132
133
134
135
136
137
138
139
140
.wp-block-image {
img {
height: auto;
max-width: 100%;
vertical-align: bottom;
box-sizing: border-box;
}
&.has-custom-border {
img {
box-sizing: border-box;
}
}
&.aligncenter {
text-align: center;
}
&.alignfull img,
&.alignwide img {
height: auto;
width: 100%;
}
&.alignleft,
&.alignright,
&.aligncenter,
.alignleft,
.alignright,
.aligncenter {
display: table;
> figcaption {
display: table-caption;
caption-side: bottom;
}
}
.alignleft {
/*rtl:ignore*/
float: left;
/*rtl:ignore*/
margin-left: 0;
margin-right: 1em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-right: 0;
margin-left: 1em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
// This is needed for classic themes where the align class is not on the container.
.aligncenter {
margin-left: auto;
margin-right: auto;
}
// Supply caption styles to images, even if the theme hasn't opted in.
// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
// so we supply the styles so as to not appear broken or unstyled in those themes.
figcaption {
@include caption-style();
}
// Variations
&.is-style-rounded img,
.is-style-rounded img {
// We use an absolute pixel to prevent the oval shape that a value of 50% would give
// to rectangular images. A pill-shape is better than otherwise.
border-radius: 9999px;
}
// The following variation is deprecated.
// The CSS is kept here for the time being, to support blocks using the old variation.
&.is-style-circle-mask img {
// We use an absolute pixel to prevent the oval shape that a value of 50% would give
// to rectangular images. A pill-shape is better than otherwise.
border-radius: 9999px;
// If a browser supports it, we will switch to using a circular SVG mask.
// The stylelint override is necessary to use the SVG inline here.
@supports (mask-image: none) or (-webkit-mask-image: none) {
/* stylelint-disable */
mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
/* stylelint-enable */
mask-mode: alpha;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
border-radius: 0;
}
}
// The following is required to overcome WP Core applying styles that clear
// img borders with a higher specificity than those added by the border
// block support to provide a default border-style of solid when a border
// color or width has been set.
:where(.has-border-color) {
border-style: solid;
}
:where([style*="border-top-color"]) {
border-top-style: solid;
}
:where([style*="border-right-color"]) {
border-right-style: solid;
}
:where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
:where([style*="border-left-color"]) {
border-left-style: solid;
}
:where([style*="border-width"]) {
border-style: solid;
}
:where([style*="border-top-width"]) {
border-top-style: solid;
}
:where([style*="border-right-width"]) {
border-right-style: solid;
}
:where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
:where([style*="border-left-width"]) {
border-left-style: solid;
}
}
.wp-block-image figure {
margin: 0;
}