-
Notifications
You must be signed in to change notification settings - Fork 68
Expand file tree
/
Copy patheditor.scss
More file actions
214 lines (196 loc) · 5.69 KB
/
editor.scss
File metadata and controls
214 lines (196 loc) · 5.69 KB
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
// Editor only: Smooth changes.
// $effect-transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out, transform 0.2s ease-in-out, padding 0.2s ease-in-out, border-radius 0.2s ease-in-out, fill 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
// .wp-admin .wp-block [class*="ugb-"],
// .wp-admin .wp-block [class*="ugb-"] * {
// transition: $effect-transition;
// }
@import "common";
@import "styles/editor-block-design-system";
@import "styles/editor-block";
@import "styles/editor-skin";
// Stackable gradient fill. Works in tandem with icons.js
svg.stk-stackable-icon-gradient {
fill: url(#stackable-gradient) !important;
}
// Hide the additional Panels of EditorsKit for Stackable blocks, since we have
// duplicate functionality.
.ugb--has-panel-tabs .ugb-panel-tabs ~ .editorskit-panel {
display: none;
}
// Styling for inspector toolbars which are Premium only.
// This adds a lock icon when hovering over the option.
.components-toolbar__control.ugb--is-premium {
position: relative;
&::after {
position: absolute;
z-index: 1;
background: none;
line-height: 18px;
padding: 0 6px;
border-radius: 2px;
left: 0;
right: 0;
text-transform: uppercase;
background-size: 100%;
background-repeat: no-repeat;
font-family: dashicons;
content: "\f160";
color: #888;
font-size: 20px;
opacity: 0;
}
*,
&::after {
transition: all 0.2s ease-in-out;
}
// Adjust opacity since a disabled toolbar changes the opacity of the whole thing.
&:disabled {
opacity: 1;
* {
opacity: 0.3;
}
}
&:hover {
* {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
/**
* Thicker column (blue) outlines for container-type blocks.
*/
$blocks: (
'[data-type="stackable/column"]',
'[data-type="stackable/call-to-action"]',
'[data-type="stackable/card"]',
'[data-type="stackable/hero"]',
'[data-type="stackable/notification"]',
'[data-type="stackable/testimonial"]',
'[data-type="stackable/team-member"]'
);
$block-joined: #{ join($blocks, (), $separator: comma) };
// Highlight column blocks in a special color so people can see the column better.
:is(#{ $block-joined }):hover {
outline: 2px solid var(--wp-admin-theme-color);
}
// Darker color for nested columns.
:is(#{ $block-joined }) :is(#{ $block-joined }):hover {
outline: 2px solid var(--wp-admin-theme-color-darker-20);
}
/**
* Gray dotted outlines for blocks
*/
:root {
--stk-block-outline-color: #888;
}
// Highlight root blocks with an outline when they're hovered on. But only
// stackable blocks to keep the default behavior of core blocks and other
// third-party blocks.
.is-root-container > [data-block][data-type^="stackable/"]:not([data-type*="/column"]):not(:focus) {
&::after {
content: "";
inset: 0;
pointer-events: none;
}
&:hover::after {
outline: 2px dotted var(--stk-block-outline-color);
position: absolute;
}
}
// For blocks inside columns, highlight all blocks.
[data-type^="stackable/"] {
[data-block]:not([data-type*="/column"]):not(:focus) { // Don't do this for columns and column blocks since they have their own highlight.
&::after {
content: "";
inset: 0;
pointer-events: none;
}
&:hover::after {
outline: 2px dotted var(--stk-block-outline-color);
position: absolute;
}
}
}
// Some blocks contain other blocks, make them a lighter gray shade.
[data-type="stackable/button-group"],
[data-type="stackable/blockquote"],
[data-type="stackable/icon-label"],
[data-type="stackable/expand"] {
--stk-block-outline-color: #ccc;
* {
--stk-block-outline-color: #888;
}
}
// Hide the gray outline of some blocks.
[data-type="stackable/accordion"]::after,
[data-type="stackable/feature-grid"]::after,
[data-type="stackable/pricing-box"]::after,
[data-type="stackable/feature"]::after,
.stk-block-accordion__heading [data-type="stackable/icon-label"]::after, // Hide the outline for the accordion heading.
.stk-block-video-popup [data-type="stackable/image"]::after, // Hide the outline for the video popup image block.
:is(#{ $block-joined })::after { // Make sure that all the blue highlighted blocks don't have gray outlines.
outline: none !important;
}
// Make highlighted block icons white in the list view.
.block-editor-list-view-leaf.is-selected {
svg.stk-stackable-icon-gradient {
fill: #fff !important;
}
}
// Small card notice fonts so they look like help comments from the inspector.
.stk-block .components-card__body {
font-size: 12px;
}
// Focal point picker goes past container.
.stk-control .components-focal-point-picker__icon_container {
z-index: 3 !important;
}
// Fix WP 6.1 makes the control into 1 column only.
.ugb-design-control .components-flex {
display: inline-block;
}
.ugb-columns-width-control .ugb-design-control .components-flex {
display: inline-block;
text-align: center;
}
// Fix WP 6.1 FSE selected block outline looks like cut when with background color.
.is-outline-mode [class*="wp-block-stackable-"].block-editor-block-list__block:not(.remove-outline) {
&.is-selected,
&.is-hovered,
&.is-highlighted {
padding: 2px;
}
}
// Adjust the styles of †he datetime picker.
.ugb-toggle-panel-body {
.components-datetime__time-wrapper {
.components-base-control {
margin-bottom: 0px !important;
}
.components-datetime__timezone {
display: none;
}
}
.components-datetime__date {
.components-datetime__date__day[aria-label*="Selected" i] {
color: #fff;
&:hover {
color: #fff !important;
}
}
:last-child {
row-gap: 8px;
column-gap: 4px;
div:nth-of-type(7) {
justify-self: auto;
}
}
}
}
// Remove the block description from the inspector.
.block-editor-block-inspector:has(.ugb-panel-tabs) .block-editor-block-card__description {
display: none;
}