mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
6 Commits
dev-doc-ch
...
dev-css-pr
| Author | SHA1 | Date | |
|---|---|---|---|
|
fe1aff9ce8 | ||
|
|
05ab7eff71 | ||
|
b578ead846 | ||
|
|
803fbfbbd9 | ||
|
|
8887148504 | ||
|
|
130c18cab4 |
@@ -35,7 +35,7 @@
|
||||
background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-#{"" + $color}-fg {
|
||||
.text-#{"" + $color} {
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
356
preview/pages/_data/css-props.json
Normal file
356
preview/pages/_data/css-props.json
Normal file
@@ -0,0 +1,356 @@
|
||||
{
|
||||
"colors": [
|
||||
{
|
||||
"name": "Body",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-body"
|
||||
],
|
||||
"variable": "--tblr-body-color"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-body"
|
||||
],
|
||||
"variable": "--tblr-body-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Secondary",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-body-secondary"
|
||||
],
|
||||
"variable": "--tblr-secondary"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-body-secondary"
|
||||
],
|
||||
"variable": "--tblr-secondary-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Tertiary",
|
||||
"props": [
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"text-body-tertiary"
|
||||
],
|
||||
"variable": "--tblr-tertiary"
|
||||
},
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"bg-body-tertiary"
|
||||
],
|
||||
"variable": "--tblr-tertiary-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Quaternary",
|
||||
"props": [
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"text-body-quaternary"
|
||||
],
|
||||
"variable": "--tblr-quaternary"
|
||||
},
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"bg-body-quaternary"
|
||||
],
|
||||
"variable": "--tblr-quaternary-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Body-Highlight",
|
||||
"props": [
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"text-highlight"
|
||||
],
|
||||
"variable": "--tblr-body-highlight"
|
||||
},
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"bg-highlight"
|
||||
],
|
||||
"variable": "--tblr-body-highlight-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Emphasis",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-emphasis"
|
||||
],
|
||||
"variable": "--tblr-emphasis-color"
|
||||
},
|
||||
{
|
||||
"todo": true,
|
||||
"classes": [
|
||||
"bg-emphasis"
|
||||
],
|
||||
"variable": "--tblr-emphasis-bg"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Primary",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-info",
|
||||
"bg-info",
|
||||
"border-info"
|
||||
],
|
||||
"variable": "--tblr-primary"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-primary-lt"
|
||||
],
|
||||
"variable": "--tblr-primary-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Info",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-info",
|
||||
"bg-info",
|
||||
"border-info"
|
||||
],
|
||||
"variable": "--tblr-info"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-info-emphasis"
|
||||
],
|
||||
"variable": "--tblr-info-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-info-lt"
|
||||
],
|
||||
"variable": "--tblr-info-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Danger",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-danger",
|
||||
"bg-danger"
|
||||
],
|
||||
"variable": "--tblr-danger"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-danger-emphasis"
|
||||
],
|
||||
"variable": "--tblr-danger-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-danger-lt",
|
||||
"bg-danger-lt",
|
||||
"border-danger"
|
||||
],
|
||||
"variable": "--tblr-danger-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Warning",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-warning",
|
||||
"bg-warning",
|
||||
"border-warning"
|
||||
],
|
||||
"variable": "--tblr-warning"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-warning-emphasis"
|
||||
],
|
||||
"variable": "--tblr-warning-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-warning-lt"
|
||||
],
|
||||
"variable": "--tblr-warning-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Success",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-success",
|
||||
"bg-success",
|
||||
"border-success"
|
||||
],
|
||||
"variable": "--tblr-success"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-success-emphasis"
|
||||
],
|
||||
"variable": "--tblr-success-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-success-lt"
|
||||
],
|
||||
"variable": "--tblr-success-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Dark",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-dark",
|
||||
"bg-dark"
|
||||
],
|
||||
"variable": "--tblr-dark"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-dark-emphasis"
|
||||
],
|
||||
"variable": "--tblr-dark-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-dark-lt"
|
||||
],
|
||||
"variable": "--tblr-dark-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Light",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-light",
|
||||
"bg-light"
|
||||
],
|
||||
"variable": "--tblr-light"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-light-emphasis"
|
||||
],
|
||||
"variable": "--tblr-light-text-emphasis"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"bg-light-lt"
|
||||
],
|
||||
"variable": "--tblr-light-lt"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Gray",
|
||||
"props": [
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-50",
|
||||
"bg-gray-50"
|
||||
],
|
||||
"variable": "--tblr-gray-50"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-100",
|
||||
"bg-gray-100"
|
||||
],
|
||||
"variable": "--tblr-gray-100"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-200",
|
||||
"bg-gray-200"
|
||||
],
|
||||
"variable": "--tblr-gray-200"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-300",
|
||||
"bg-gray-300"
|
||||
],
|
||||
"variable": "--tblr-gray-300"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-400",
|
||||
"bg-gray-400"
|
||||
],
|
||||
"variable": "--tblr-gray-400"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-500",
|
||||
"bg-gray-500"
|
||||
],
|
||||
"variable": "--tblr-gray-500"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-600",
|
||||
"bg-gray-600"
|
||||
],
|
||||
"variable": "--tblr-gray-600"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-700",
|
||||
"bg-gray-700"
|
||||
],
|
||||
"variable": "--tblr-gray-700"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-800",
|
||||
"bg-gray-800"
|
||||
],
|
||||
"variable": "--tblr-gray-800"
|
||||
},
|
||||
{
|
||||
"classes": [
|
||||
"text-gray-900",
|
||||
"bg-gray-900"
|
||||
],
|
||||
"variable": "--tblr-gray-900"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -6,63 +6,51 @@ layout: default
|
||||
permalink: colors.html
|
||||
---
|
||||
|
||||
{% assign colors = '' | split: '' %}
|
||||
{% for color in site.colors %}
|
||||
{% assign colors = colors | push: color[0] %}
|
||||
{% endfor %}
|
||||
{% assign colors = colors | push: 'dark' %}
|
||||
{% assign colors = colors | push: 'muted' %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table text-center">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Swatch</th>
|
||||
<th>CSS variables</th>
|
||||
<th colspan="2">CSS class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for category in css-props.colors %}
|
||||
{% for prop in category.props %}
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
{% if forloop.first %}
|
||||
<th class="text-left" rowspan="{{ category.props | size }}">{{ category.name }}</th>
|
||||
{% endif %}
|
||||
<td>
|
||||
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="w-100 h-7 p-1 rounded border{% if prop.todo %} border-danger text-danger{% endif %}" style="background-color: var({{ prop.variable }})">{% if prop.todo %}{% include "ui/icon.html" icon="alert-square-rounded" type="filled" %}{% endif %}</div>
|
||||
</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
<code>{{ prop.variable }}</code>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for color in colors %}
|
||||
<td>
|
||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
<div class="space-y">
|
||||
{% for class in prop.classes %}
|
||||
<div><code>{{ class }}</code></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr class="bg-light">
|
||||
{% for color in colors %}
|
||||
{% if environment == 'development' %}
|
||||
<td>
|
||||
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}</div>
|
||||
<div class="space-y">
|
||||
{% for class in prop.classes %}
|
||||
<div class="{{ class }} border p-2 rounded">123</div>
|
||||
{% endfor %}
|
||||
</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 %}
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user