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

Only show the glowing pattern on Considering

Browse Source
This commit is contained in:
Jason Zimdars
2025-09-22 11:10:27 -05:00
parent 6b22724ce4
commit 4fe735d9fe
2 changed files with 1 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+1 -60
View File
@@ -504,66 +504,7 @@
/* ------------------------------------------------------------------------ */
.cards--doing {
--pattern-color: color-mix(in srgb, var(--card-color) 50%, var(--color-canvas));
&:not(.is-collapsed) {
background-color: var(--color-canvas);
background-image: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--pattern-color) 25%, transparent) 33%,
color-mix(in srgb, var(--pattern-color) 25%, transparent) 66%,
transparent 100%);
margin-block: var(--cards-gap);
@supports(mask: radial-gradient(black)) {
&:before {
background: linear-gradient(90deg,
color-mix(in oklch, var(--pattern-color) 0%, transparent) 0%,
color-mix(in oklch, var(--pattern-color) 20%, transparent) 25%,
color-mix(in oklch, var(--pattern-color) 20%, transparent) 50%,
color-mix(in oklch, var(--pattern-color) 0%, transparent) 100%);
content: "";
inset: 0;
mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
position: absolute;
z-index: 0;
}
}
.cards__decoration {
--size: 4.25em;
background-color: var(--color-canvas);
background-image: radial-gradient(ellipse at bottom,
color-mix(in srgb, var(--pattern-color) 30%, transparent) 0%,
transparent 70%);
block-size: var(--size);
inline-size: 100%;
inset: calc(var(--size) * -1) 0 auto 0;
position: absolute;
z-index: -1;
@supports(mask: radial-gradient(black)) {
&:before {
background: radial-gradient(ellipse at bottom,
color-mix(in srgb, var(--pattern-color) 30%, transparent) 0%,
transparent 70%);
content: "";
inset: 0;
mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
position: absolute;
z-index: 0;
}
}
&.cards__decoration--end {
inset: auto 0 calc(var(--size) * -1);
rotate: 180deg;
}
}
}
margin-block: var(--cards-gap);
@media (min-width: 640px) {
padding-inline: var(--cards-gap);
app/views/cards/index/engagement/_doing.html.erb
-2
View File
@@ -11,7 +11,6 @@
page.records
end
%>
<div class="cards__decoration"></div>
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<strong class="cards__expander-count"><%= filtered_records.count > 99 ? "99+" : filtered_records.count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase"><%= stage.name if defined?(stage) && stage %></button>
@@ -35,5 +34,4 @@
</div>
<% end %>
<% end %>
<div class="cards__decoration cards__decoration--end"></div>
</section>