Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

Add gradient background utilities (#2164)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-06 18:06:02 +01:00
committed by GitHub
parent afd024f0b1
commit bc443ff4aa
3 changed files with 231 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
core/scss/_utilities.scss
View File

@@ -102,5 +102,34 @@ $utilities: (
'<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
)} repeat center/16px 16px,
)
)
),
"bg-gradient": (
property: background,
class: bg-gradient,
values: (
null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
),
),
"bg-gradient-direction": (
property: --#{$prefix}gradient-direction,
class: bg-gradient,
values: (
to-t: to top,
to-te: to top right,
to-e: to right,
to-be: to bottom right,
to-b: to bottom,
to-bs: to bottom left,
to-s: to left,
to-ts: to top left,
),
),
"table-layout": (
property: table-layout,
class: table,
values: (
auto: auto,
fixed: fixed,
),
),
) !default;

13
core/scss/utils/_colors.scss
View File

@@ -16,6 +16,19 @@
--#{$prefix}border-opacity: 1;
border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
}
.bg-gradient-from-#{"" + $color} {
--#{$prefix}gradient-from: var(--#{$prefix}#{$color});
}
.bg-gradient-to-#{"" + $color} {
--#{$prefix}gradient-to: var(--#{$prefix}#{$color});
}
.bg-gradient-via-#{"" + $color} {
--#{$prefix}gradient-via: var(--#{$prefix}#{$color});
--#{$prefix}gradient-stops: var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-via, transparent), var(--#{$prefix}gradient-to, transparent);
}
}
@each $color, $value in $theme-colors {

147
preview/pages/colors.html
View File

@@ -11,9 +11,10 @@ permalink: colors.html
{% assign colors = colors | push: color[0] %}
{% endfor %}
{% assign colors = colors | push: 'dark' %}
{% assign colors = colors | push: 'muted' %}
<div class="card">
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table text-center">
@@ -35,14 +36,16 @@ permalink: colors.html
<tr>
{% for color in colors %}
<td>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
</div>
</td>
{% endfor %}
</tr>
<tr class="bg-light">
<tr class="bg-surface-tertiary">
{% for color in colors %}
<td>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
</div>
</td>
{% endfor %}
</tr>
@@ -66,4 +69,138 @@ permalink: colors.html
</table>
</div>
</div>
</div>
</div>
<div class="col-12">
{% assign colors = colors | push: 'inverted' %}
{% assign colors = colors | push: 'white' %}
{% assign colors = colors | push: 'transparent' %}
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<h3 class="card-title">
Gradient
</h3>
<form action="">
<div class="row g-4">
<div class="col">
<div>
<label class="form-label">From</label>
<select class="form-select" data-demo-color-select name="color-from">
{% for color in colors %}
<option value="{{ color }}">{{ color }}</option>
{% endfor %}
</select>
</div>
<div class="mt-3">
<label class="form-label">To</label>
<select class="form-select" data-demo-color-select name="color-to">
{% for color in colors %}
<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
{{ color }}
</option>
{% endfor %}
</select>
</div>
</div>
<div class="col">
<div>
<label class="form-label">Via</label>
<select class="form-select" data-demo-color-select name="color-via">
<option></option>
{% for color in colors %}
<option value="{{ color }}">{{ color }}</option>
{% endfor %}
</select>
</div>
<div class="mt-3">
<label class="form-label">Direction</label>
<select class="form-select" data-demo-color-select name="color-direction">
<option value="to-t">to top</option>
<option value="to-te">to top right</option>
<option value="to-r" selected>to right</option>
<option value="to-be">to bottom right</option>
<option value="to-b">to bottom</option>
<option value="to-bs">to bottom left</option>
<option value="to-s">to left</option>
<option value="to-ts">to top left</option>
</select>
</div>
</div>
<div class="col-12">
<div class="border rounded bg-pattern-transparent overflow-hidden">
<div id="gradient-preview"
class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
<div class=" px-4 py-5"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<div class="space-y">
{% for color in colors %}
<div
class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent px-4 py-2">
</div>
{% endfor %}
</div>
</div>
<div class="col">
<div class="space-y">
{% for color in colors %}
<div
class="border rounded bg-gradient bg-gradient-to-{{ color }} bg-gradient-from-transparent px-4 py-2">
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var gradientPreview = document.getElementById('gradient-preview');
var colorFrom = document.querySelector('[name="color-from"]');
var colorTo = document.querySelector('[name="color-to"]');
var colorVia = document.querySelector('[name="color-via"]');
var colorDirection = document.querySelector('[name="color-direction"]');
function updateGradient() {
var from = colorFrom.value;
var to = colorTo.value;
var via = colorVia.value;
var direction = colorDirection.value;
var gradient = 'bg-gradient bg-gradient-from-' + from + ' bg-gradient-to-' + to;
if (via) {
gradient += ' bg-gradient-via-' + via;
}
gradient += ' bg-gradient-' + direction;
gradientPreview.className = gradient;
}
colorFrom.addEventListener('change', updateGradient);
colorTo.addEventListener('change', updateGradient);
colorVia.addEventListener('change', updateGradient);
colorDirection.addEventListener('change', updateGradient);
updateGradient();
});
</script>