@threadlabs/looma 0.11.4 → 0.11.6
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/components/ui-button/ui-button.html +17 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-button.css +22 -0
- package/vue/UiButton.vue +19 -0
- package/vue/chunks/UiButton.js +1 -1
- package/vue/components.css +52 -34
|
@@ -260,6 +260,23 @@
|
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
|
|
263
|
+
/* Under touch, a link-style button's press lands within the control minimum: an invisible hit
|
|
264
|
+
area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
|
|
265
|
+
a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
|
|
266
|
+
area. Only the link needs it: a hit area on every button would reach over its neighbours. */
|
|
267
|
+
html[data-ui-input-modality="touch"] :host-state([variant="link"]) {
|
|
268
|
+
position: relative;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
html[data-ui-input-modality="touch"] :host-state([variant="link"])::after {
|
|
272
|
+
position: absolute;
|
|
273
|
+
inset: 50% auto auto 50%;
|
|
274
|
+
inline-size: max(100%, var(--ui-control-min-block-size));
|
|
275
|
+
block-size: max(100%, var(--ui-control-min-block-size));
|
|
276
|
+
transform: translate(-50%, -50%);
|
|
277
|
+
content: "";
|
|
278
|
+
}
|
|
279
|
+
|
|
263
280
|
/* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
|
|
264
281
|
WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
|
|
265
282
|
:host-state([variant="link"]) {
|