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 strips over the card border, build RTL css in dev (#2921)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-09-01 22:29:04 +02:00
1 parent febfa9f4af
commit 0187b26a01
5 files changed
+22 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/dev-rtl-css.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Updated the dev CSS build to also emit the `.rtl.css` files, so the RTL preview page is styled in dev.
.changeset/fix-card-status-border.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed the `card-status-*` strips leaving a thin line over the card border and a mismatched corner radius.
core/package.json
+1 -1
View File
@@ -10,7 +10,7 @@
"build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"", "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
"clean": "shx rm -rf dist demo", "clean": "shx rm -rf dist demo",
"css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner", "css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner",
"css-build": "tsx ../.build/build-css.ts scss dist/css", "css-build": "tsx ../.build/build-css.ts scss dist/css --rtl",
"css-lint": "pnpm run lint:scss && pnpm run css-lint-variables", "css-lint": "pnpm run lint:scss && pnpm run css-lint-variables",
"lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs", "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs",
"lint:scss:fix": "pnpm run lint:scss --fix", "lint:scss:fix": "pnpm run lint:scss --fix",
core/scss/_variables.scss
+2
View File
@@ -1246,6 +1246,8 @@ $card-img-overlay-padding: $spacer !default;
$card-group-margin: 1.5rem !default; $card-group-margin: 1.5rem !default;
$card-status-size: 3px !default; $card-status-size: 3px !default;
// The strip sits on top of the card border, so it is pulled out by the border width
$card-status-offset: calc(-1 * var(--card-border-width)) !default;
$card-stamp-opacity: 0.2 !default; $card-stamp-opacity: 0.2 !default;
core/scss/ui/_cards.scss
+9 -7
View File
@@ -425,27 +425,29 @@ Card status
*/ */
.card-status-top { .card-status-top {
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: $card-status-offset;
inset-inline-end: 0; inset-inline-end: $card-status-offset;
top: 0; top: $card-status-offset;
height: $card-status-size; height: $card-status-size;
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0); @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
} }
.card-status-start { .card-status-start {
position: absolute; position: absolute;
inset-inline-start: $card-status-offset;
inset-inline-end: auto; inset-inline-end: auto;
bottom: 0; top: $card-status-offset;
bottom: $card-status-offset;
width: $card-status-size; width: $card-status-size;
height: 100%;
@include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius)); @include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
} }
.card-status-bottom { .card-status-bottom {
position: absolute; position: absolute;
inset-inline-start: $card-status-offset;
inset-inline-end: $card-status-offset;
top: initial; top: initial;
bottom: 0; bottom: $card-status-offset;
width: 100%;
height: $card-status-size; height: $card-status-size;
@include border-radius(0 0 var(--card-border-radius) var(--card-border-radius)); @include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
} }