mirror of
https://github.com/tabler/tabler.git
synced 2026-07-14 01:24:19 +04:00
Fix .bg-gradient conflict and add gradient documentation pages (#2681)
This commit is contained in:
Bartosz-Do
GitHub
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fixed `.bg-gradient` utility conflicts to restore `from`/`via`/`to` gradient rendering and updated gradient documentation examples to match available classes.
|
||||
@@ -794,13 +794,6 @@ $utilities: map.merge(
|
||||
class: bg,
|
||||
values: $utilities-bg-subtle,
|
||||
),
|
||||
'gradient': (
|
||||
property: background-image,
|
||||
class: bg,
|
||||
values: (
|
||||
gradient: var(--#{$prefix}gradient),
|
||||
),
|
||||
),
|
||||
'user-select': (
|
||||
property: user-select,
|
||||
values: all auto none,
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
title: Card gradient
|
||||
summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
|
||||
description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
|
||||
---
|
||||
|
||||
{% assign gradients = "rainbow,sun,snow,ocean,mellow,disco,psychedelic,love,gold" | split: "," %}
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `.card-gradient` class on a `.card` element to apply the default gradient treatment.
|
||||
|
||||
```html
|
||||
<div class="card card-gradient">...</div>
|
||||
```
|
||||
|
||||
The example below shows the base gradient card style.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-gradient">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Total Revenue</h3>
|
||||
<p class="text-secondary mb-0">Track key metrics in a highlighted card.</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Color variants
|
||||
|
||||
You can change the color of card gradient by adding a color class like `.card-gradient-primary` or `.card-gradient-success` to the `.card-gradient` element. You can choose any color from [full list of available colors](/ui/base/colors).
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-gradient card-gradient-primary">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Primary</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-success">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Success</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-danger">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Danger</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-blue">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Blue</h3>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Named gradients
|
||||
|
||||
In addition to color-based variants, card gradients include predefined multi-color themes.
|
||||
|
||||
Here is a list of classes:
|
||||
{% for gradient in gradients %}
|
||||
- `.card-gradient-{{ gradient }}`
|
||||
{% endfor %}
|
||||
|
||||
{% capture html -%}
|
||||
{% for gradient in gradients %}
|
||||
<div class="card card-gradient card-gradient-{{ gradient }}">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{{ gradient | capitalize }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Direction modifiers
|
||||
|
||||
Use direction modifiers to control where the gradient flow starts.
|
||||
|
||||
```html
|
||||
<div class="card card-gradient card-gradient-start">...</div>
|
||||
<div class="card card-gradient card-gradient-end">...</div>
|
||||
<div class="card card-gradient card-gradient-bottom">...</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-gradient card-gradient-start card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Start</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-end card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">End</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-bottom card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Bottom</h3>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Animated gradient
|
||||
|
||||
Add `.card-gradient-animated` to animate gradient direction over time.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card card-gradient card-gradient-rainbow card-gradient-animated">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Animated gradient</h3>
|
||||
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-sun card-gradient-animated">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Animated gradient</h3>
|
||||
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keep text contrast readable on all gradient variants.
|
||||
- Prefer short content blocks on high-saturation gradients.
|
||||
- Avoid using animated gradients on too many cards in one view.
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
title: Gradients
|
||||
summary: Use gradient utilities to build directional color backgrounds with from, via, and to color stops.
|
||||
description: Create directional gradients with utility classes.
|
||||
---
|
||||
|
||||
{% assign colors = '' | split: '' %}
|
||||
{% for color in site.colors %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% endfor %}
|
||||
{% assign colors = colors | push: 'white' %}
|
||||
{% assign colors = colors | push: 'transparent' %}
|
||||
|
||||
## Default gradient
|
||||
|
||||
Use `.bg-gradient` to enable gradient background rendering on an element.
|
||||
Then combine it with color stop utilities to define the final look.
|
||||
|
||||
```html
|
||||
<div class="bg-gradient bg-gradient-from-primary bg-gradient-to-transparent"></div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<div class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent p-5"></div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="pattern-rectangles" column %}
|
||||
|
||||
## Gradient directions
|
||||
|
||||
Use direction utilities to control gradient flow:
|
||||
|
||||
- `.bg-gradient-to-t`
|
||||
- `.bg-gradient-to-te`
|
||||
- `.bg-gradient-to-e`
|
||||
- `.bg-gradient-to-be`
|
||||
- `.bg-gradient-to-b`
|
||||
- `.bg-gradient-to-bs`
|
||||
- `.bg-gradient-to-s`
|
||||
- `.bg-gradient-to-ts`
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t p-4"></div><code>.bg-gradient-to-t</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te p-4"></div><code>.bg-gradient-to-te</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e p-4"></div><code>.bg-gradient-to-e</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be p-4"></div><code>.bg-gradient-to-be</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b p-4"></div><code>.bg-gradient-to-b</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs p-4"></div><code>.bg-gradient-to-bs</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s p-4"></div><code>.bg-gradient-to-s</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts p-4"></div><code>.bg-gradient-to-ts</code></div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-primary" hide-code %}
|
||||
|
||||
```html
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s">
|
||||
...
|
||||
</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
## Gradient color stops
|
||||
|
||||
Use color stop utilities to control where a gradient starts, transitions, and ends. You can choose any color from [full list of available colors](/ui/base/colors).
|
||||
|
||||
Here is a list of classes:
|
||||
- `.bg-gradient-from-{color}`
|
||||
- `.bg-gradient-via-{color}` (optional middle stop for smoother blending)
|
||||
- `.bg-gradient-to-{color}`
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row row-cols-1 row-cols-lg-2 g-3">
|
||||
<div class="col">
|
||||
<div class="border rounded bg-gradient bg-gradient-from-purple bg-gradient-to-transparent p-5"></div>
|
||||
<code>.bg-gradient-from-purple .bg-gradient-to-transparent</code>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="border rounded bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow p-5"></div>
|
||||
<code>.bg-gradient-from-pink .bg-gradient-via-orange .bg-gradient-to-yellow</code>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="pattern-rectangles" hide-code %}
|
||||
|
||||
```html
|
||||
<div class="bg-gradient bg-gradient-from-purple bg-gradient-to-transparent">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## Available colors
|
||||
|
||||
You can use any project color token with `from`, `via`, and `to` utilities.
|
||||
See the [full list of available colors](/ui/base/colors) for all color names.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{% for color in colors %}
|
||||
<div class="col">
|
||||
<div class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent mb-2 p-4"></div>
|
||||
<code>.bg-gradient-from-{{ color }}</code>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-primary" hide-code %}
|
||||
|
||||
```html
|
||||
{% for color in colors %}
|
||||
<div class="bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent">
|
||||
...
|
||||
</div>
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Card header gradient
|
||||
|
||||
Use gradient utilities on card sections to highlight key content areas.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="card">
|
||||
<div class="card-body bg-gradient bg-gradient-from-indigo bg-gradient-to-transparent rounded-top">
|
||||
<h3 class="card-title mb-1">Performance</h3>
|
||||
<p class="text-secondary mb-0">Weekly trend overview</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Card content</p>
|
||||
</div>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" column %}
|
||||
|
||||
### Badge-like highlight
|
||||
|
||||
Use short gradients on compact UI elements for subtle emphasis.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<span class="badge bg-gradient bg-gradient-from-green bg-gradient-to-teal">Success trend</span>
|
||||
<span class="badge bg-gradient bg-gradient-from-orange bg-gradient-to-red">Warning trend</span>
|
||||
<span class="badge bg-gradient bg-gradient-from-blue bg-gradient-to-purple">New feature</span>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html bg="surface-secondary" centered %}
|
||||
Reference in New Issue
Block a user