Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 13:21:29 +04:00
Code Issues Projects Releases Wiki Activity

Add screenshots package and fix card-gradient minify bug (#2793)

Browse Source 
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
2026-08-07 00:48:28 +02:00
committed by GitHub
co-authored by Bartek
parent cd0b210a87
commit b38cd32d07
82 changed files with 1698 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/layout/_navbar.scss
+5
View File
@@ -213,6 +213,11 @@ Navbar brand
height: $navbar-brand-image-height;
}
.navbar-brand-gray {
--navbar-logo-color: var(--tertiary);
opacity: 0.5;
}
/**
Navbar toggler
*/
core/scss/tests/_cards.test.scss
+31
View File
@@ -0,0 +1,31 @@
// Regression coverage for the multi-layer .card-gradient background: every
// zero-value gradient stop must keep its `%` unit. Unlike <length>,
// <percentage> has no unitless-zero exception, so `color-mix(in sRGB, x 0,
// y)` (missing the %) is invalid CSS and the whole color-mix() — and the
// gradient layer using it — silently drops in the browser.
//
// This only guards the SCSS source; the actual incident was a CSS minifier
// (clean-css) stripping a valid `0%` down to `0` post-compile, which is
// outside what Sass-level tests can see — see .build/build-css.ts's minify().
@use '../ui/cards' as cards;
@include describe('card-gradient-background') {
@include it('keeps the % unit on every zero-value gradient stop') {
@include assert() {
@include output() {
.t {
@include cards.card-gradient-background;
}
}
@include expect() {
.t {
background:
radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
}
}
}
}
}
core/scss/ui/_cards.scss
+11 -4
View File
@@ -688,15 +688,22 @@ Card note
/**
Card gradient
*/
// Split out so scss/tests/_cards.test.scss can assert on it directly — a bare
// top-level ruleset like .card-gradient can't be @include-d or otherwise
// referenced in isolation by sass-true.
@mixin card-gradient-background {
background:
radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
}
.card-gradient {
--card-gradient-direction: 180deg;
--card-gradient-opacity: 86%;
--card-gradient: var(--primary), var(--primary);
background:
radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
@include card-gradient-background();
}
@each $name, $color in map.merge($colors, $theme-colors) {