bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tap target button utility

Browse Source
This commit is contained in:
Adrien Maston
2026-03-02 15:46:34 +01:00
parent 6a9121078e
commit 911d114eb5
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/buttons.css
+22
View File
@@ -272,4 +272,26 @@
inline-size: 100%;
}
}
/* Button utilities
/* ------------------------------------------------------------------------ */
:is([data-platform~=mobile], [data-platform~=native]) {
.btn--ensure-tap-target-size {
--tap-target-z-index: 1;
--tap-target-min-size: 44px;
z-index: var(--tap-target-z-index);
&::before {
content: "";
display: block;
block-size: var(--tap-target-min-size);
inline-size: var(--tap-target-min-size);
inset: calc(50% - var(--tap-target-min-size) / 2) auto auto calc(50% - var(--tap-target-min-size) / 2);
opacity: 0;
position: absolute;
}
}
}
}
app/views/cards/display/perma/_tags.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<div id="<%= dom_id(card, :tags) %>" class="card__tags">
<div data-controller="dialog"
data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
<button class="card__tag-picker-button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
<button class="card__tag-picker-button btn btn--ensure-tap-target-size card__hide-on-index" style="--btn-background: var(--card-bg-color);"
data-controller="tooltip hotkey" data-action="click->dialog#open:stop keydown.t@document->hotkey#click">
<%= icon_tag "tag" %>
<span class="for-screen-reader">Add a tag</span>