-
Notifications
You must be signed in to change notification settings - Fork 4k
/
editor.scss
118 lines (99 loc) · 2.64 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
.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;
}
.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;
}