-
Notifications
You must be signed in to change notification settings - Fork 4k
/
editor.scss
129 lines (109 loc) · 2.86 KB
/
editor.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
.wp-block-cover {
/* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
.editor-styles-wrapper & {
box-sizing: border-box;
}
// Override default cover styles
// because we're not ready yet to show the cover block.
&.is-placeholder {
min-height: auto !important;
padding: 0 !important;
}
&.components-placeholder h2 {
color: inherit;
}
// Applied while media is being uploaded
&.is-transient::before {
background-color: #fff;
opacity: 0.3;
}
// Shown while media is being uploaded
.components-spinner {
position: absolute;
z-index: z-index(".wp-block-cover__inner-container");
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // Account for spinner dimensions
margin: 0;
}
.block-editor-block-list__layout {
width: 100%;
}
// The .wp-block-cover class is used just to increase selector specificity.
.wp-block-cover__inner-container {
// Avoid text align inherit from cover image align.
text-align: left;
margin-left: 0;
margin-right: 0;
.block-editor-block-list__block:not(.has-text-color) {
color: $white;
}
}
&.is-light {
.wp-block-cover__inner-container {
.block-editor-block-list__block:not(.has-text-color) {
color: $black;
}
}
}
.wp-block-cover__placeholder-background-options {
width: 100%;
}
}
[data-align="left"] > .wp-block-cover,
[data-align="right"] > .wp-block-cover {
max-width: $content-width * 0.5;
width: 100%;
}
.block-library-cover__reset-button {
margin-left: auto;
}
.block-library-cover__resize-container {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.block-library-cover__resize-container:not(.is-resizing) {
// Important is used to have higher specificity than the inline style set by re-resizable library.
height: auto !important;
}
// Only target direct dropzone.
.wp-block-cover > .components-drop-zone {
&.is-active {
transition: 0.2s opacity, 0.2s border;
@include reduce-motion("transition");
}
&.is-dragging-over-element {
background-color: transparent;
border: $grid-unit-60 solid var(--wp-admin-theme-color);
.components-drop-zone__content {
transform: none;
}
}
.components-drop-zone__content {
display: flex;
align-items: center;
top: -($grid-unit-15 * 3);
left: -($grid-unit-15 * 3);
transform: none;
}
.components-drop-zone__content-icon,
.components-drop-zone__content-text {
display: inline;
}
.components-drop-zone__content-icon {
// Reset margin.
margin: 0;
margin-right: $grid-unit;
}
.components-drop-zone__content-text {
font-size: $default-font-size;
}
}
// Remove the parallax fixed background when in the patterns preview panel as it
// doesn't work with the transforms that are applied to resize the block in that context.
.block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
background-attachment: scroll;
}