diff --git a/.changeset/dev-rtl-css.md b/.changeset/dev-rtl-css.md new file mode 100644 index 000000000..4954d2141 --- /dev/null +++ b/.changeset/dev-rtl-css.md @@ -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. diff --git a/.changeset/fix-card-status-border.md b/.changeset/fix-card-status-border.md new file mode 100644 index 000000000..dfef00f41 --- /dev/null +++ b/.changeset/fix-card-status-border.md @@ -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. diff --git a/core/package.json b/core/package.json index 7a6bf8c1e..0f7799d3b 100644 --- a/core/package.json +++ b/core/package.json @@ -10,7 +10,7 @@ "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"", "clean": "shx rm -rf dist demo", "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", "lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs", "lint:scss:fix": "pnpm run lint:scss --fix", diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 89f6691e8..c5a093ff4 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1246,6 +1246,8 @@ $card-img-overlay-padding: $spacer !default; $card-group-margin: 1.5rem !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; diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 3ecdeeedf..9dc119d8b 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -425,27 +425,29 @@ Card status */ .card-status-top { position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - top: 0; + 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); } .card-status-start { position: absolute; + inset-inline-start: $card-status-offset; inset-inline-end: auto; - bottom: 0; + top: $card-status-offset; + bottom: $card-status-offset; width: $card-status-size; - height: 100%; @include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius)); } .card-status-bottom { position: absolute; + inset-inline-start: $card-status-offset; + inset-inline-end: $card-status-offset; top: initial; - bottom: 0; - width: 100%; + bottom: $card-status-offset; height: $card-status-size; @include border-radius(0 0 var(--card-border-radius) var(--card-border-radius)); }