Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Fix .card-progress corner radius overflowing the card's rounded corners (#3170)

Browse Source
This commit is contained in:
Bartosz-Do authored and GitHub committed 2026-09-24 18:26:55 +02:00
1 parent 531529a13c
commit 79796ab90d
2 files changed
+16 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/fix-card-progress-radius.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed `.card-progress` to overlay the card like `.card-status`, so its rounded corners match the card's radius exactly.
core/scss/ui/_cards.scss
+11 -4
View File
@@ -302,16 +302,23 @@ Stacked card
}
// Card progress
.card-progress {
// `.card >` outranks ui/_progress.scss's later `.progress { position: relative; }`.
.card > .card-progress {
--card-progress-height: #{$card-progress-height};
height: var(--card-progress-height);
--card-progress-offset: calc(-1 * var(--card-border-width));
position: absolute;
inset: var(--card-progress-offset);
width: auto;
height: auto;
pointer-events: none;
@include border-radius(var(--card-border-radius));
&:last-child {
@include border-radius(0 0 2px 2px);
mask-image: linear-gradient(to top, #000 var(--card-progress-height), transparent var(--card-progress-height));
}
&:first-child {
@include border-radius(2px 2px 0 0);
mask-image: linear-gradient(to bottom, #000 var(--card-progress-height), transparent var(--card-progress-height));
}
}