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

Make .card-header background transparent by default, add override hooks (#2802)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Paweł Kunaandcopilot-swe-agent[bot] authored and GitHub committed 2026-08-06 12:47:48 +02:00
1 parent 9cc9a36b10
commit 324b0fbf0e
4 files changed
+16 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/card-header-footer-bg-vars.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": minor
---
Added `--card-header-bg` and `--card-footer-bg` CSS variables (with `$card-header-bg` and `$card-footer-bg` Sass defaults) so `.card-header` and `.card-footer` backgrounds can be overridden independently, and made `.card-header` transparent by default instead of using `--card-cap-bg`.
core/scss/_variables.scss
+2
View File
@@ -1241,6 +1241,8 @@ $card-cap-padding-y: $card-spacer-y !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: var(--bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
$card-header-bg: transparent !default;
$card-footer-bg: null !default;
$card-height: null !default;
$card-color: inherit !default;
$card-bg: var(--bg-surface) !default;
core/scss/bootstrap/_card.scss
+8 -2
View File
@@ -106,10 +106,13 @@
//
.card-header {
@if $card-header-bg != null {
--card-header-bg: #{$card-header-bg};
}
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--card-cap-color);
background-color: var(--card-cap-bg);
background-color: var(--card-header-bg, var(--card-cap-bg));
border-bottom: var(--card-border-width) solid var(--card-border-color);
&:first-child {
@@ -118,9 +121,12 @@
}
.card-footer {
@if $card-footer-bg != null {
--card-footer-bg: #{$card-footer-bg};
}
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
color: var(--card-cap-color);
background-color: var(--card-cap-bg);
background-color: var(--card-footer-bg, var(--card-cap-bg));
border-top: var(--card-border-width) solid var(--card-border-color);
&:last-child {
core/scss/ui/_cards.scss
+1 -1
View File
@@ -221,7 +221,7 @@ Stacked card
display: flex;
align-items: center;
color: inherit;
background-color: var(--card-cap-bg);
background-color: var(--card-header-bg, var(--card-cap-bg));
&:first-child {
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);