-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
style.scss
180 lines (153 loc) · 4.55 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
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
// On Mobile devices, swiping the HTML element should not scroll.
// By making it fixed, we prevent that.
html.interface-interface-skeleton__html-container {
position: fixed;
width: 100%;
@include break-medium() {
position: initial;
width: initial;
}
}
.interface-interface-skeleton {
display: flex;
flex-direction: row;
height: auto;
max-height: 100%;
// Fill the available space on Mobile.
position: fixed;
top: $admin-bar-height-big;
left: 0;
right: 0;
bottom: 0;
// Adjust to admin-bar going small.
@media (min-width: #{ ($break-medium + 1) }) {
top: $admin-bar-height;
.is-fullscreen-mode & {
top: 0;
}
}
}
.interface-interface-skeleton__editor {
display: flex;
flex-direction: column;
flex: 0 1 100%;
overflow: hidden;
}
@include editor-left(".interface-interface-skeleton");
.interface-interface-skeleton__body {
flex-grow: 1;
display: flex;
// Even on Mobile, we choose to scroll this element on its own.
// This helps enable a fixed-to-top toolbar that makes the editing experience
// on Mobile Safari usable.
// Unfortunately an issue still exists where if you swipe the top toolbar
// or beyond the bottom of the page when the soft keyboard is showing, you scroll
// the body element and can scroll the toolbar out of view.
// This is still preferable, though, as it allows the editor to function at all.
overflow: auto;
// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
// This allows us to disallow the scroll-chaining and rubber-banding that is currently
// is the cause of the issue outlined above.
// In other words, the following behavior doesn't yet work in Safari, but if/when
// it is added, it should take care of the issue.
// See also: https://drafts.csswg.org/css-overscroll/
overscroll-behavior-y: none;
// Footer overlap prevention
.has-footer & {
@include break-medium() {
padding-bottom: $button-size-small + $border-width;
}
}
}
.interface-interface-skeleton__content {
flex-grow: 1;
// Treat as flex container to allow children to grow to occupy full
// available height of the content area.
display: flex;
flex-direction: column;
// On Mobile the header is fixed to keep HTML as scrollable.
// Beyond the medium breakpoint, we allow the sidebar.
// The sidebar should scroll independently, so enable scroll here also.
overflow: auto;
// On Safari iOS on smaller viewports lack of a z-index causes the background
// to "bleed" through the header.
// See https://github.com/WordPress/gutenberg/issues/32631
z-index: z-index(".interface-interface-skeleton__content");
}
.interface-interface-skeleton__secondary-sidebar,
.interface-interface-skeleton__sidebar {
display: block;
flex-shrink: 0;
position: absolute;
z-index: z-index(".interface-interface-skeleton__sidebar");
top: 0;
right: 0;
bottom: 0;
left: 0;
background: $white;
color: $gray-900;
// On Mobile the header is fixed to keep HTML as scrollable.
@include break-medium() {
position: relative !important;
z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
width: auto; // Keep the sidebar width flexible.
}
}
.interface-interface-skeleton__sidebar {
overflow: auto;
@include break-medium() {
border-left: $border-width solid $gray-200;
}
}
.interface-interface-skeleton__secondary-sidebar {
@include break-medium() {
border-right: $border-width solid $gray-200;
}
}
.interface-interface-skeleton__header {
flex-shrink: 0;
height: auto; // Keep the height flexible.
border-bottom: $border-width solid $gray-200;
z-index: z-index(".interface-interface-skeleton__header");
color: $gray-900;
}
.interface-interface-skeleton__footer {
height: auto; // Keep the height flexible.
flex-shrink: 0;
border-top: $border-width solid $gray-200;
color: $gray-900;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: $white;
z-index: z-index(".interface-interface-skeleton__footer");
// On Mobile the footer is hidden
display: none;
@include break-medium() {
display: flex;
}
.block-editor-block-breadcrumb {
z-index: z-index(".edit-post-layout__footer");
display: flex;
background: $white;
height: $button-size-small;
align-items: center;
font-size: $default-font-size;
padding: 0 ($grid-unit-15 + 6px);
}
}
.interface-interface-skeleton__actions {
z-index: z-index(".interface-interface-skeleton__actions");
position: fixed !important; // Need to override the default relative positioning
top: -9999em;
bottom: auto;
left: auto;
right: 0;
width: $sidebar-width;
color: $gray-900;
&:focus {
top: auto;
bottom: 0;
}
}