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-status-* strip corner radius not matching the card (#3070)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
Bartosz-Doandcodecalm authored and GitHub committed 2026-09-16 17:30:10 +02:00
1 parent 0e2faa00b7
commit db903c3a1b
3 files changed
+27 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/fix-card-status-corner-radius.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed `.card-status-*` strip corners not matching the card's `border-radius`.
core/package.json
+1 -1
View File
@@ -82,7 +82,7 @@
"files": [
{
"path": "./dist/css/tabler.css",
"maxSize": "84 kB"
"maxSize": "85 kB"
},
{
"path": "./dist/css/tabler.min.css",
core/scss/ui/_cards.scss
+21 -20
View File
@@ -423,33 +423,34 @@ Card optinos
/**
Card status
*/
.card-status-top {
// The strip is a full-size overlay with the card's own radius, masked down to
// a band along one edge, so the colored edge follows the card's rounded
// corners exactly instead of a separate box whose radius never matches.
.card-status-top,
.card-status-start,
.card-status-bottom {
--card-status-size: #{$card-status-size};
--card-status-offset: #{$card-status-offset};
position: absolute;
inset-inline-start: $card-status-offset;
inset-inline-end: $card-status-offset;
top: $card-status-offset;
height: $card-status-size;
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
inset: var(--card-status-offset);
pointer-events: none;
@include border-radius(var(--card-border-radius));
}
.card-status-top {
mask-image: linear-gradient(to bottom, #000 var(--card-status-size), transparent var(--card-status-size));
}
.card-status-start {
position: absolute;
inset-inline-start: $card-status-offset;
inset-inline-end: auto;
top: $card-status-offset;
bottom: $card-status-offset;
width: $card-status-size;
@include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
mask-image: linear-gradient(to right, #000 var(--card-status-size), transparent var(--card-status-size));
[dir="rtl"] & {
mask-image: linear-gradient(to left, #000 var(--card-status-size), transparent var(--card-status-size));
}
}
.card-status-bottom {
position: absolute;
inset-inline-start: $card-status-offset;
inset-inline-end: $card-status-offset;
top: initial;
bottom: $card-status-offset;
height: $card-status-size;
@include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size));
}
/**