-
Notifications
You must be signed in to change notification settings - Fork 4k
/
style.scss
128 lines (108 loc) · 3.3 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
.block-editor-default-block-appender {
clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
textarea.block-editor-default-block-appender__content { // Needs specificity in order to override input field styles from WP-admin styles.
font-family: $editor-font;
font-size: $editor-font-size; // It should match the default paragraph size.
border: none;
background: none;
box-shadow: none;
display: block;
cursor: text;
width: 100%;
outline: $border-width solid transparent;
transition: 0.2s outline;
resize: none;
// Emulate the dimensions of a paragraph block.
// On mobile and in nested contexts, the plus to add blocks shows up on the right.
// The rightmost padding makes sure it doesn't overlap text.
padding: 0 #{ $block-padding + $icon-button-size } 0 $block-padding;
// Use opacity to work in various editor styles.
color: $dark-opacity-300;
.is-dark-theme & {
color: $light-opacity-300;
}
}
// Don't show the inserter until mousing over.
.block-editor-inserter__toggle:not([aria-expanded="true"]) {
opacity: 0;
transition: opacity 0.2s;
}
&:hover {
.block-editor-inserter-with-shortcuts {
@include edit-post__fade-in-animation;
}
.block-editor-inserter__toggle {
opacity: 1;
}
}
// Dropzone.
.components-drop-zone__content-icon {
display: none;
}
}
// Quick shortcuts, left and right.
.block-editor-block-list__empty-block-inserter, // Empty paragraph
.block-editor-default-block-appender .block-editor-inserter, // Empty appender
.block-editor-inserter-with-shortcuts { // Right side quick shortcuts
position: absolute;
top: 0;
// Change the size of the buttons to match that of the default paragraph height.
.components-icon-button {
width: $block-side-ui-width;
height: $block-side-ui-width;
margin-right: 12px;
padding: 0;
}
.block-editor-block-icon {
margin: auto;
}
.components-icon-button svg {
display: block;
margin: auto;
}
.block-editor-inserter__toggle {
margin-right: 0;
// Hide the box shadow that appears on hover.
// All the :not() rules are needed to override default iconButton styles.
&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
box-shadow: none;
}
}
}
// Left side.
.block-editor-block-list__empty-block-inserter,
.block-editor-default-block-appender .block-editor-inserter {
right: $grid-size; // Show to the right on mobile.
@include break-small {
left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
right: auto;
}
&:disabled {
display: none;
}
.block-editor-inserter__toggle {
border-radius: 50%;
width: $block-side-ui-width;
height: $block-side-ui-width;
padding: 0;
// Use opacity to work in various editor styles.
&:not(:hover) {
color: $dark-opacity-500;
.is-dark-theme & {
color: $light-opacity-500;
}
}
}
}
// Quick block insertion icons on the right side.
// Needs specificity to styles from the component itself.
.block-editor-block-list__side-inserter .block-editor-inserter-with-shortcuts,
.block-editor-default-block-appender .block-editor-inserter-with-shortcuts {
right: $block-padding;
display: none; // Don't show on mobile.
z-index: z-index(".block-editor-inserter-with-shortcuts"); // Elevate above the sibling inserter.
@include break-small {
right: 0;
display: flex;
}
}