mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
Add gradient background utilities (#2164)
This commit is contained in:
Paweł Kuna
GitHub
@@ -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>'
|
'<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,
|
)} 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;
|
) !default;
|
||||||
|
|||||||
@@ -16,6 +16,19 @@
|
|||||||
--#{$prefix}border-opacity: 1;
|
--#{$prefix}border-opacity: 1;
|
||||||
border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
|
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 {
|
@each $color, $value in $theme-colors {
|
||||||
|
|||||||
@@ -11,59 +11,196 @@ permalink: colors.html
|
|||||||
{% assign colors = colors | push: color[0] %}
|
{% assign colors = colors | push: color[0] %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% assign colors = colors | push: 'dark' %}
|
{% assign colors = colors | push: 'dark' %}
|
||||||
{% assign colors = colors | push: 'muted' %}
|
|
||||||
|
|
||||||
<div class="card">
|
<div class="row row-cards">
|
||||||
<div class="card-body">
|
<div class="col-12">
|
||||||
<div class="table-responsive">
|
<div class="card">
|
||||||
<table class="table text-center">
|
<div class="card-body">
|
||||||
<tr>
|
<div class="table-responsive">
|
||||||
{% for color in colors %}
|
<table class="table text-center">
|
||||||
<td>
|
<tr>
|
||||||
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
|
{% for color in colors %}
|
||||||
|
<td>
|
||||||
|
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
{% for color in colors %}
|
||||||
|
<td>
|
||||||
|
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
{% for color in colors %}
|
||||||
|
<td>
|
||||||
|
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
<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>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
<tr class="bg-dark text-white">
|
||||||
|
{% for color in colors %}
|
||||||
|
<td>
|
||||||
|
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
||||||
|
<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
<tr class="bg-dark text-white">
|
||||||
|
{% for color in colors %}
|
||||||
|
<td>
|
||||||
|
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
||||||
|
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
||||||
|
<div class="mt-2" data-demo-color-contrast></div>
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</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>
|
||||||
</td>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
|
||||||
{% for color in colors %}
|
|
||||||
<td>
|
|
||||||
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
{% for color in colors %}
|
|
||||||
<td>
|
|
||||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
<tr class="bg-light">
|
|
||||||
{% for color in colors %}
|
|
||||||
<td>
|
|
||||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
<tr class="bg-dark text-white">
|
|
||||||
{% for color in colors %}
|
|
||||||
<td>
|
|
||||||
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
|
||||||
<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
<tr class="bg-dark text-white">
|
|
||||||
{% for color in colors %}
|
|
||||||
<td>
|
|
||||||
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
|
|
||||||
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
|
|
||||||
<div class="mt-2" data-demo-color-contrast></div>
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</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>
|
||||||
Reference in New Issue
Block a user