@lalternative/editor 0.8.2 → 0.8.4
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/dist/editor.css +44 -14
- package/package.json +1 -1
package/dist/editor.css
CHANGED
|
@@ -48,25 +48,31 @@
|
|
|
48
48
|
variable; it is 0 whenever nothing covers anything. */
|
|
49
49
|
.lalt-toolbar {
|
|
50
50
|
position: fixed;
|
|
51
|
-
left: 0
|
|
52
|
-
right: 0
|
|
53
|
-
|
|
51
|
+
left: 0;
|
|
52
|
+
right: 0;
|
|
53
|
+
/* Flush on the keyboard, filling the strip iOS puts its own accessory bar in
|
|
54
|
+
— the arrows and the Done tick. The two cannot be merged: that bar is
|
|
55
|
+
drawn by the system over the page, so ours occupies the same band rather
|
|
56
|
+
than replacing it. Square edges and full width so the band is one shape
|
|
57
|
+
instead of a pill floating inside another. */
|
|
58
|
+
bottom: var(--lalt-keyboard-inset, 0px);
|
|
54
59
|
z-index: 100;
|
|
55
60
|
display: flex;
|
|
56
61
|
align-items: center;
|
|
57
|
-
|
|
62
|
+
/* Left-aligned, not centred: the row scrolls when it overflows, and a
|
|
63
|
+
centred row hides its first item as readily as its last. */
|
|
64
|
+
justify-content: flex-start;
|
|
58
65
|
gap: 0.125rem;
|
|
59
|
-
width:
|
|
60
|
-
|
|
61
|
-
margin: 0
|
|
62
|
-
|
|
63
|
-
padding:
|
|
64
|
-
border-radius:
|
|
66
|
+
width: 100%;
|
|
67
|
+
min-height: 2.75rem;
|
|
68
|
+
margin: 0;
|
|
69
|
+
padding: 0 0.5rem;
|
|
70
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
71
|
+
border-radius: 0;
|
|
65
72
|
background: var(--lalt-editor-surface, #ffffff);
|
|
66
|
-
border:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
0 1px 3px rgb(0 0 0 / 0.1);
|
|
73
|
+
border: none;
|
|
74
|
+
border-top: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
|
|
75
|
+
box-shadow: 0 -2px 12px rgb(0 0 0 / 0.08);
|
|
70
76
|
color: var(--lalt-editor-text, #111827);
|
|
71
77
|
user-select: none;
|
|
72
78
|
/* A long row scrolls rather than stretching the pill past the screen. This
|
|
@@ -87,7 +93,13 @@
|
|
|
87
93
|
top: var(--lalt-toolbar-top, 0);
|
|
88
94
|
right: auto;
|
|
89
95
|
bottom: auto;
|
|
96
|
+
/* Back to a pill: the band shape belongs to the strip above a keyboard,
|
|
97
|
+
and there is no keyboard here — the bar appears mid-paragraph. */
|
|
98
|
+
width: fit-content;
|
|
90
99
|
max-width: none;
|
|
100
|
+
min-height: 0;
|
|
101
|
+
border-radius: 999px;
|
|
102
|
+
border: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
|
|
91
103
|
margin: 0;
|
|
92
104
|
padding: 0.1875rem;
|
|
93
105
|
/* Deep enough to read as floating over the text rather than sitting in
|
|
@@ -129,6 +141,24 @@
|
|
|
129
141
|
box-shadow: inset 1px 0 0 var(--lalt-editor-border, rgb(0 0 0 / 0.1));
|
|
130
142
|
}
|
|
131
143
|
|
|
144
|
+
/* On a phone the three labels do not fit, and the bar clips its last button —
|
|
145
|
+
the format menu ends up unreachable behind an edge with nothing saying it
|
|
146
|
+
scrolls. Where an icon already carries the meaning the label steps aside and
|
|
147
|
+
survives as the accessible name.
|
|
148
|
+
|
|
149
|
+
Not a (pointer: coarse) query: a narrow desktop window has the same problem
|
|
150
|
+
and a wide tablet has neither. */
|
|
151
|
+
@media (max-width: 30rem) {
|
|
152
|
+
.lalt-toolbar__button[data-has-icon] .lalt-toolbar__label {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.lalt-toolbar__button[data-has-icon] {
|
|
157
|
+
padding-left: 0.75rem;
|
|
158
|
+
padding-right: 0.75rem;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
132
162
|
.lalt-toolbar__button:active {
|
|
133
163
|
background: var(--lalt-editor-active, rgb(0 0 0 / 0.12));
|
|
134
164
|
}
|
package/package.json
CHANGED