Add bounce to cards
This commit is contained in:
@@ -106,9 +106,12 @@
|
||||
margin-block-start: -1ch;
|
||||
margin-inline: -1ch;
|
||||
overflow: hidden;
|
||||
translate: 0 -1ch;
|
||||
transition: translate 300ms var(--ease-out-overshoot);
|
||||
|
||||
.cards:not(.is-collapsed) & {
|
||||
padding: 1ch;
|
||||
translate: 0 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
@@ -24,9 +24,11 @@
|
||||
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
<div class="cards__list">
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -24,9 +24,11 @@
|
||||
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
<div class="cards__list">
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -24,9 +24,11 @@
|
||||
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
<div class="cards__list">
|
||||
<div class="card blank-slate blank-slate--card">
|
||||
<p class="txt-align-center">Drag cards here</p>
|
||||
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user