Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 06:24:38 +04:00
Code Issues Projects Releases Wiki Activity

colors docs added

Browse Source
This commit is contained in:
Dawid Harat
2019-12-08 19:17:51 +01:00
parent 47f8ca1036
commit 0b257000c5
5 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/docs.yml
+1
View File
@@ -7,6 +7,7 @@
- page: buttons - page: buttons
- page: cards - page: cards
- page: carousel - page: carousel
- page: colors
- page: cursors - page: cursors
- page: charts - page: charts
- page: divider - page: divider
pages/_docs/badges.md
+2 -2
View File
@@ -10,7 +10,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %} {% example %}
{% for color in site.colors %} {% for color in site.colors %}
<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span> <span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
@@ -18,7 +18,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %} {% example %}
{% for color in site.colors %} {% for color in site.colors %}
<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span> <span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
pages/_docs/colors.md
+46
View File
@@ -3,3 +3,49 @@ title: Colors
menu: docs.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>
pages/_docs/cursors.md
+7
View File
@@ -5,6 +5,13 @@ menu: docs.cursors
### Cursor utilities ### Cursor utilities
- `.cursor-auto`- cursor style depends on what's inside element
- `.cursor-pointer` - pointing cursor
- `.cursor-move` - cursor showing that user can move something
- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
- `.cursor-zoom-in` - cursor showing that user can zoom in
- `.cursor-zoom-out` - cursor showing that user can zoom out
{% example html %} {% example html %}
<div class="row text-center"> <div class="row text-center">
<div class="col-4 mb-3"> <div class="col-4 mb-3">
pages/colors.html
-51
View File
@@ -1,51 +0,0 @@
---
title: Colors
done: true
---
<div class="row">
<div class="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-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>.bg-{{ color[0] }}-lt</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>