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

colors table fixes

Browse Source
This commit is contained in:
codecalm
2019-12-09 18:17:44 +01:00
parent 9846504339
commit 5995fe2a94
3 changed files with 32 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/colors.md
+7 -46
View File
@@ -3,49 +3,10 @@ title: Colors
menu: docs.colors
---
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Default colors
</h3>
</div>
<div class="card-body">
<ul class="list-unstyled">
{% for color in site.colors %}
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }}</strong><br />
<code>.bg-{{ color[0] }}</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Light colors
</h3>
</div>
<div class="card-body">
<ul class="list-unstyled">
{% for color in site.colors %}
<li class="d-flex align-items-center mb-3">
<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
<div>
<strong>{{ color[1].name }} lite</strong><br />
<code class="bg-{{ color[0] }}-lt">.bg-{{ color[0] }}-lt</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
## Base colors
{% include example/colors-table.html %}
## Light colors
{% include example/colors-table.html light=true %}
pages/_includes/example/colors-table.html
+20
View File
@@ -0,0 +1,20 @@
{% assign colors = include.colors | default: site.colors %}
{% assign light = include.light %}
<div class="example">
<div class="mb-n3">
{% for color in colors %}
<div class="row row-sm mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
</div>
<div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
</div>
</div>
{% endfor %}
</div>
</div>
pages/_plugins/jekyll-filters.rb
+5
View File
@@ -84,6 +84,11 @@ module Jekyll
input.gsub re, repl_str
end
def hex_to_rgb(color)
r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
"rgb(#{r.hex}, #{g.hex}, #{b.hex})"
end
end
end