-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
common.scss
186 lines (162 loc) · 4.52 KB
/
common.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
@import "./elements.scss";
// The following selectors have increased specificity (using the :root prefix)
// to assure colors take effect over another base class color, mainly to let
// the colors override the added specificity by link states such as :hover.
:root {
@include background-colors-deprecated();
@include foreground-colors-deprecated();
@include gradient-colors-deprecated();
// This CSS Custom Properties aren't used anymore as defaults,
// but we still need to keep them for backward compatibility.
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
}
// Font sizes (not used now, kept because of backward compatibility).
.has-regular-font-size {
font-size: 1em;
}
.has-larger-font-size {
font-size: 2.625em;
}
.has-normal-font-size {
font-size: var(--wp--preset--font-size--normal);
}
.has-huge-font-size {
font-size: var(--wp--preset--font-size--huge);
}
// Text alignments.
.has-text-align-center {
text-align: center;
}
.has-text-align-left {
/*rtl:ignore*/
text-align: left;
}
.has-text-align-right {
/*rtl:ignore*/
text-align: right;
}
.has-text-align-justify {
text-align: justify;
}
// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
#end-resizable-editor-section {
display: none;
}
// Block alignments.
.aligncenter {
clear: both;
}
// Justification.
.items-justified-left {
justify-content: flex-start;
}
.items-justified-center {
justify-content: center;
}
.items-justified-right {
justify-content: flex-end;
}
.items-justified-space-between {
justify-content: space-between;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: $gray-300;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/**
* The following provide a simple means of applying a default border style when
* a user first makes a selection in the border block support panel.
* This prevents issues such as where the user could set a border width
* and see no border due there being no border style set.
*
* This is intended to be removed once intelligent defaults can be set while
* making border selections via the block support.
*
* See: https://github.com/WordPress/gutenberg/pull/33743
*/
html :where(.has-border-color) {
border-style: solid;
}
html :where([style*="border-top-color"]) {
border-top-style: solid;
}
html :where([style*="border-right-color"]) {
border-right-style: solid;
}
html :where([style*="border-bottom-color"]) {
border-bottom-style: solid;
}
html :where([style*="border-left-color"]) {
border-left-style: solid;
}
html :where([style*="border-width"]) {
border-style: solid;
}
html :where([style*="border-top-width"]) {
border-top-style: solid;
}
html :where([style*="border-right-width"]) {
border-right-style: solid;
}
html :where([style*="border-bottom-width"]) {
border-bottom-style: solid;
}
html :where([style*="border-left-width"]) {
border-left-style: solid;
}
/**
* Provide baseline responsiveness for images.
*/
html :where(img[class*="wp-image-"]) {
height: auto;
max-width: 100%;
}
/**
* Reset user agent styles for figure element margins.
*/
:where(figure) {
margin: 0 0 1em 0;
}
// Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
// This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
html :where(.is-position-sticky) {
/* stylelint-disable length-zero-no-unit */
--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px); // 0px is set explicitly so that it can be used in a calc value.
/* stylelint-enable length-zero-no-unit */
}
// To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
// within the scope of the position classname. This is required because the admin bar
// is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
@media screen and (max-width: 600px) {
html :where(.is-position-sticky) {
/* stylelint-disable length-zero-no-unit */
--wp-admin--admin-bar--position-offset: 0px; // 0px is set explicitly so that it can be used in a calc value.
/* stylelint-enable length-zero-no-unit */
}
}