/
style.scss
116 lines (98 loc) · 4.14 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
.edit-post-visual-editor {
position: relative;
padding-top: 50px;
& .components-button {
font-family: $default-font;
}
flex: 1 1 auto;
// In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area.
// But it works as expected without it.
// The flex-basis is needed for the other browsers to make sure the content area is full-height.
@supports (position: sticky) {
flex-basis: 100%;
}
}
.edit-post-visual-editor > .block-editor__typewriter,
.edit-post-visual-editor > .block-editor__typewriter > .block-editor-writing-flow,
.edit-post-visual-editor > .block-editor__typewriter > .block-editor-writing-flow > .block-editor-writing-flow__click-redirect {
height: 100%;
}
.edit-post-visual-editor .block-editor-writing-flow__click-redirect {
// Allow the page to be scrolled with the last block in the middle.
min-height: 50vh;
width: 100%;
}
// Hide the extra space when there are metaboxes.
.has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect {
height: 0;
}
// The base width of blocks
.edit-post-visual-editor .block-editor-block-list__block {
margin-left: auto;
margin-right: auto;
@include break-small() {
// Center the block toolbar on wide and full-wide blocks.
// Use specific selector to not affect nested block toolbars.
&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
height: 0; // This collapses the container to an invisible element without margin.
width: calc(100% - #{$block-side-ui-width * 3} - #{$grid-size-small * 1.5}); // -90px to account for inner element left position value causing overflow-x scrollbars
margin-left: 0;
margin-right: 0;
text-align: center;
// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
// This is necessary because otherwise the mere presence of the toolbar can push down content.
// Pairs with relative rule on line 49.
float: left;
@include break-xlarge() {
width: calc(100% - #{$block-padding * 2} + #{$border-width * 2}); // On the largest screens, line the toolbar up with standard-aligned block controls.
}
.block-editor-block-toolbar {
max-width: $content-width;
width: 100%;
// Necessary for the toolbar to be centered.
// This unsets an absolute position that will otherwise left align the toolbar.
position: relative;
}
}
}
}
// The base width of the title should match that of blocks even if it isn't a block.
// @todo: This duplicates CSS from line 49 in block-list/style.scss, and should be
// removed when the Title field becomes an actual block.
.editor-post-title {
// Beyond the mobile breakpoint, compensate for side UI.
@include break-small() {
padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
}
}
.edit-post-visual-editor .editor-post-title__block {
// Center.
margin-left: auto;
margin-right: auto;
// Apply default block margin below the post title.
// This ensures the first block on the page is in a good position.
// This rule can be retired once the title becomes an actual block.
margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style.
// Stack borders.
> div {
margin-left: 0;
margin-right: 0;
}
// Stretch to mimic outline padding on desktop.
// Note that we can't target the textarea as it can't be stretched.
@include break-small() {
> div {
margin-left: -$block-padding - $block-side-ui-clearance;
margin-right: -$block-padding - $block-side-ui-clearance;
}
}
}
.edit-post-visual-editor {
// If the first block is floated, it needs top margin, unlike the rule in line 69.
.block-editor-block-list__layout > .block-editor-block-list__block[data-align="left"]:first-child,
.block-editor-block-list__layout > .block-editor-block-list__block[data-align="right"]:first-child {
margin-top: $block-padding + $block-spacing + $border-width + $border-width + $block-padding;
}
}