Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 13:17:00 +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": [ "files": [
{ {
"path": "./dist/css/tabler.css", "path": "./dist/css/tabler.css",
"maxSize": "84 kB" "maxSize": "85 kB"
}, },
{ {
"path": "./dist/css/tabler.min.css", "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
*/ */
.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; position: absolute;
inset-inline-start: $card-status-offset; inset: var(--card-status-offset);
inset-inline-end: $card-status-offset; pointer-events: none;
top: $card-status-offset; @include border-radius(var(--card-border-radius));
height: $card-status-size; }
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
.card-status-top {
mask-image: linear-gradient(to bottom, #000 var(--card-status-size), transparent var(--card-status-size));
} }
.card-status-start { .card-status-start {
position: absolute; mask-image: linear-gradient(to right, #000 var(--card-status-size), transparent var(--card-status-size));
inset-inline-start: $card-status-offset;
inset-inline-end: auto; [dir="rtl"] & {
top: $card-status-offset; mask-image: linear-gradient(to left, #000 var(--card-status-size), transparent var(--card-status-size));
bottom: $card-status-offset; }
width: $card-status-size;
@include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
} }
.card-status-bottom { .card-status-bottom {
position: absolute; mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size));
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));
} }
/** /**