@quillmark/svelte 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/THEMING.md
CHANGED
|
@@ -24,6 +24,8 @@ Nothing to import and nothing to set. The package pulls its own stylesheet, and
|
|
|
24
24
|
|
|
25
25
|
**Placing and sizing**: each surface carries a stable root class (`.qm-editor`, `.qm-preview`), so you can place it from your own stylesheet without a wrapper. Each also takes a `class` prop that merges onto the same element, which is the better handle when you have one to give.
|
|
26
26
|
|
|
27
|
+
A surface's width is the one you give it. Each contains its own inline size, so what a document holds — a table is as wide as its columns — scrolls inside the mount rather than widening the column the mount stands in.
|
|
28
|
+
|
|
27
29
|
**Taking the column back**: our selectors compute at specificity zero (below), so `padding: 0` or a `background` of your own on `.qm-editor` wins outright. Nothing is locked.
|
|
28
30
|
|
|
29
31
|
## Make it yours
|
|
@@ -228,6 +228,16 @@ li.ProseMirror-selectednode::after {
|
|
|
228
228
|
.ProseMirror > .qm-table-island + * {
|
|
229
229
|
margin-top: 0;
|
|
230
230
|
}
|
|
231
|
+
/* Width from above, never from the columns. The scroller below caps at `100%` of this
|
|
232
|
+
box, and a percentage is no cap while an ancestor is being sized to what it holds: a
|
|
233
|
+
leaf taking its width from its own contents is asked for the table's max-content width
|
|
234
|
+
and the cap never applies. The surface closes the same question at its edge
|
|
235
|
+
(`visual/VisualEditorInner.svelte` §`.qm-editor`); this end of it is what makes the cap
|
|
236
|
+
below true wherever the island lands. `inline-size`, not `size`: an island is as tall
|
|
237
|
+
as its rows. */
|
|
238
|
+
.qm-table-island {
|
|
239
|
+
contain: inline-size;
|
|
240
|
+
}
|
|
231
241
|
.qm-table-scroller {
|
|
232
242
|
/* The one horizontally scrolling box in a leaf: a table is as wide as its
|
|
233
243
|
columns, and a wide one must not push the card's own layout. `overflow-y` is
|
|
@@ -108,6 +108,12 @@
|
|
|
108
108
|
box-sizing: border-box;
|
|
109
109
|
position: relative;
|
|
110
110
|
width: 100%;
|
|
111
|
+
/* The width is the host's, never the document's, which is the same boundary the
|
|
112
|
+
editor states (`visual/VisualEditorInner.svelte` §`.qm-editor`): a mount standing
|
|
113
|
+
in a column that floors at what it holds is asked for nothing the sheets in it
|
|
114
|
+
are. `inline-size`, not `size`: the column is as tall as the pages painted in
|
|
115
|
+
it. */
|
|
116
|
+
contain: inline-size;
|
|
111
117
|
height: 100%;
|
|
112
118
|
overflow-y: auto;
|
|
113
119
|
padding: var(--_qm-space-4);
|
|
@@ -942,6 +942,14 @@
|
|
|
942
942
|
box-sizing: border-box;
|
|
943
943
|
display: flex;
|
|
944
944
|
flex-direction: column;
|
|
945
|
+
/* The width is the host's, never the document's. A mount standing in a column that
|
|
946
|
+
floors at what it holds — a flex or grid track with no minimum of its own — is
|
|
947
|
+
otherwise asked for the widest thing in the document, and a table is as wide as
|
|
948
|
+
its columns. The island holds its own end of that (`codec/prose.css` §"The table
|
|
949
|
+
island"); this is the boundary, so a construct a leaf gains later cannot reach
|
|
950
|
+
past it either. `inline-size`, not `size`: a surface is as tall as its cards, or
|
|
951
|
+
the pane's under `.qm-pane`. */
|
|
952
|
+
contain: inline-size;
|
|
945
953
|
gap: var(--_qm-space-2);
|
|
946
954
|
padding: var(--_qm-space-5);
|
|
947
955
|
background: var(--_qm-surface-sunken);
|