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

Merge branch 'dev' into dev-countup

Browse Source
This commit is contained in:
Dawid Harat
2020-01-03 20:57:07 +01:00
committed by GitHub
parent daccdd3c71 e05f85edbd
commit 0f413cc75c
438 changed files with 681 additions and 1751 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_components/card-ribbon.html
+1 -1
View File
@@ -3,4 +3,4 @@ title: Card with ribbon
columns: 1
---
{% include_cached cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
pages/_data/menu.yml
+6 -2
View File
@@ -63,12 +63,16 @@ base:
url: carousel.html
users:
title: Users
icon: users
url: users.html
gallery:
title: Gallery
icon: image
url: gallery.html
profile:
title: Profile
url: profile.html
music:
title: Music
url: music.html
charts:
url: charts.html
pages/_data/selects.yml
+5 -4
View File
@@ -11,6 +11,7 @@ users:
name: Nikola Tesla
tags:
max-items: 3
value: dev, test
options:
- dev
@@ -22,16 +23,16 @@ countries:
options:
pl:
name: Poland
image: img/flags/pl.svg
flag: pl
de:
name: Germany
image: img/flags/de.svg
flag: de
cz:
name: Czech Republic
image: img/flags/cz.svg
flag: cz
br:
name: Brazil
image: img/flags/br.svg
flag: br
people:
value: 4
pages/_docs/avatars.md
+1 -1
View File
@@ -113,4 +113,4 @@ Make the list stack when it reaches a certain length.
{% endfor %}
<span class="avatar" element="a">+8</span>
</div>
{% endexample %}
{% endexample %}
pages/_docs/buttons.md
+29 -29
View File
@@ -27,7 +27,7 @@ Use any of the available button classes to quickly create a styled button . We p
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title %}
{% include ui/button.html color=btn-color text=btn-title %}
{% endfor %}
{% endexample %}
@@ -39,7 +39,7 @@ Make buttons look inactive by adding the disabled boolean attribute to any `.btn
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title disabled=true %}
{% include ui/button.html color=btn-color text=btn-title disabled=true %}
{% endfor %}
{% endexample %}
@@ -62,7 +62,7 @@ Add `.btn-square` to button to remove border-radius.
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title square=true %}
{% include ui/button.html color=btn-color text=btn-title square=true %}
{% endfor %}
{% endexample %}
@@ -74,7 +74,7 @@ Add `.btn-pill` class to any button to make them more rounded.
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title pill=true %}
{% include ui/button.html color=btn-color text=btn-title pill=true %}
{% endfor %}
{% endexample %}
@@ -86,7 +86,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% for button in site.button-variants %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html text=btn-title color=btn-color outline=true %}
{% include ui/button.html text=btn-title color=btn-color outline=true %}
{% endfor %}
{% endexample %}
@@ -119,27 +119,27 @@ Icons can be found [**here**](/docs/icons.html#icons)
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-dark">
{% include_cached ui/icon.html icon="upload" class="icon-sm" %}
{% include ui/icon.html icon="upload" class="icon-sm" %}
Upload
</button>
<button type="button" class="btn btn-warning">
{% include_cached ui/icon.html icon="heart" class="icon-sm" %}
{% include ui/icon.html icon="heart" class="icon-sm" %}
I like
</button>
<button type="button" class="btn btn-success">
{% include_cached ui/icon.html icon="check" class="icon-sm" %}
{% include ui/icon.html icon="check" class="icon-sm" %}
I agree
</button>
<button type="button" class="btn btn-outline-primary">
{% include_cached ui/icon.html icon="plus" class="icon-sm" %}
{% include ui/icon.html icon="plus" class="icon-sm" %}
More
</button>
<button type="button" class="btn btn-danger">
{% include_cached ui/icon.html icon="link" class="icon-sm" %}
{% include ui/icon.html icon="link" class="icon-sm" %}
Link
</button>
<button type="button" class="btn btn-info">
{% include_cached ui/icon.html icon="message-circle" class="icon-sm" %}
{% include ui/icon.html icon="message-circle" class="icon-sm" %}
Comment
</button>
{% endexample %}
@@ -153,7 +153,7 @@ A button can be formatted to link to a social website
{% assign btn-icon = button[1].icon %}
{% assign btn-title = button[1].title %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% include ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% endfor %}
{% endexample %}
@@ -163,7 +163,7 @@ You can use only icons.
{% for button in site.socials %}
{% assign btn-icon = button[1].icon %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% include ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% endfor %}
{% endexample %}
@@ -173,25 +173,25 @@ Icon only button. Add `.btn-icon` class to remove unnecessary padding from butto
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-icon btn-primary">
{% include_cached ui/icon.html icon="activity" class="icon-sm" %}
{% include ui/icon.html icon="activity" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-github">
{% include_cached ui/icon.html icon="github" class="icon-sm" %}
{% include ui/icon.html icon="github" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-success">
{% include_cached ui/icon.html icon="bell" class="icon-sm" %}
{% include ui/icon.html icon="bell" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-warning">
{% include_cached ui/icon.html icon="star" class="icon-sm" %}
{% include ui/icon.html icon="star" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-danger">
{% include_cached ui/icon.html icon="trash-2" class="icon-sm" %}
{% include ui/icon.html icon="trash-2" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-purple">
{% include_cached ui/icon.html icon="bar-chart" class="icon-sm" %}
{% include ui/icon.html icon="bar-chart" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-secondary">
{% include_cached ui/icon.html icon="git-merge" class="icon-sm" %}
{% include ui/icon.html icon="git-merge" class="icon-sm" %}
</button>
{% endexample %}
@@ -202,23 +202,23 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
{% example html wrapper=btn-list %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}
{% include ui/icon.html icon="calendar" class="icon-sm" %}
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
{% include ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Show calendar
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
{% endexample %}
@@ -229,7 +229,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
{% example html wrapper=btn-list %}
{% include_cached ui/button.html color="primary" text="Button" spinner=true %}
{% include ui/button.html color="primary" text="Button" spinner=true %}
{% endexample %}
### List of buttons
@@ -290,13 +290,13 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html wrapper=btn-list %}
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="4" %} Avatar
{% include ui/avatar.html person-id="4" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="5" %} Avatar
{% include ui/avatar.html person-id="5" %} Avatar
</a>
<a href="#" class="btn btn-secondary">
{% include_cached ui/avatar.html person-id="6" %} Avatar
{% include ui/avatar.html person-id="6" %} Avatar
</a>
{% endexample %}
pages/_docs/ribbons.md
+5 -5
View File
@@ -7,7 +7,7 @@ done: true
### Default markup
{% example html columns=1 %}
{% include_cached cards/ribbon.html %}
{% include cards/ribbon.html %}
{% endexample %}
### Ribbon position
@@ -22,7 +22,7 @@ You can easily change the position of a ribbon by adding a class to the element.
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %}
{% include_cached cards/ribbon.html top=true left=true %}
{% include cards/ribbon.html top=true left=true %}
{% endexample %}
### Ribbon color
@@ -30,7 +30,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
{% include_cached cards/ribbon.html color="red" %}
{% include cards/ribbon.html color="red" %}
{% endexample %}
### Ribbon text
@@ -38,7 +38,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors
Set your own text in a ribbon.
{% example html columns=1 %}
{% include_cached cards/ribbon.html color="green" text="-50%" %}
{% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %}
### Ribbon style
@@ -46,5 +46,5 @@ Set your own text in a ribbon.
Change the style of a ribbon.
{% example html columns=1 %}
{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %}
pages/_docs/spinners.md
+5 -5
View File
@@ -44,9 +44,9 @@ done: true
### Buttons
{% example html wrapper=btn-list %}
{% include_cached ui/button.html spinner=true text="Button" color="primary" %}
{% include_cached ui/button.html spinner=true text="Button" color="danger" %}
{% include_cached ui/button.html spinner=true text="Button" color="warning" %}
{% include_cached ui/button.html spinner=true color="success" %}
{% include_cached ui/button.html spinner=true color="secondary" %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
{% include ui/button.html spinner=true text="Button" color="danger" %}
{% include ui/button.html spinner=true text="Button" color="warning" %}
{% include ui/button.html spinner=true color="success" %}
{% include ui/button.html spinner=true color="secondary" %}
{% endexample %}
pages/_includes/cards/blog-single.html
+1 -1
View File
@@ -19,7 +19,7 @@
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
{% include_cached ui/icon.html icon="heart" use-svg=true %}
{% include ui/icon.html icon="heart" use-svg=true %}
</a>
</div>
</div>
pages/_includes/cards/comments.html
+2 -2
View File
@@ -21,9 +21,9 @@
</p>
<div class="small">
<span class="text-success mr-1">+{{ forloop.index | random_number: 20, 50 }}</span>
<a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up">{% include_cached ui/icon.html icon="chevron-up" %}</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
<a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
{% include_cached ui/icon.html icon="chevron-down" %}
{% include ui/icon.html icon="chevron-down" %}
</a>
<span class="mr-1">·</span>
<a href="#" class="mr-1 text-muted">Reply</a>
pages/_includes/cards/company-employees.html
+1 -1
View File
@@ -21,7 +21,7 @@
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>
</div>
</td>
<td><a href="" class="text-muted">{% include_cached ui/icon.html icon="more-horizontal" %}</a></td>
<td><a href="" class="text-muted">{% include ui/icon.html icon="more-horizontal" %}</a></td>
</tr>
{% endfor %}
pages/_includes/cards/feed-card.html
+7 -7
View File
@@ -176,13 +176,13 @@
<div class="card-footer">
<div class="toolbar toolbar-mx">
<a href="#" class="text-muted">
{% include_cached ui/icon.html icon="thumbs-up" %} 321 Likes
{% include ui/icon.html icon="thumbs-up" %} 321 Likes
</a>
<a href="#feed-form-{{ id }}" class="text-muted" data-toggle="collapse">
{% include_cached ui/icon.html icon="message-square" %} 56 Comments
{% include ui/icon.html icon="message-square" %} 56 Comments
</a>
<a href="#" class="text-muted">
{% include_cached ui/icon.html icon="share-2" %}
{% include ui/icon.html icon="share-2" %}
Share
</a>
</div>
@@ -192,10 +192,10 @@
<textarea class="form-control" rows="3"></textarea>
<div class="d-flex pt-2">
<div class="toolbar mt-1">
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="image" %}</a>
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="video" %}</a>
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="map-pin" %}</a>
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="paperclip" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="image" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="video" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="map-pin" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="paperclip" %}</a>
</div>
<button class="btn btn-sm btn-primary ml-auto">Post</button>
</div>
pages/_includes/cards/gallery.html
+3 -3
View File
@@ -9,14 +9,14 @@
</div>
<div class="ml-auto">
<a href="#" class="text-muted">
{% include_cached ui/icon.html icon="eye" %}
{% include ui/icon.html icon="eye" %}
{{ forloop.index | random_number: 300, 600 }}
</a>
<a href="#" class="ml-3 text-muted">
{% include_cached ui/icon.html icon="heart" %}
{% include ui/icon.html icon="heart" %}
{{ forloop.index | random_number: 20, 100 }}
</a>
</div>
</div>
</div>
</div>
</div>
pages/_includes/cards/icons.html
+1 -1
View File
@@ -5,7 +5,7 @@
<ul class="icons-list">
{% for icon in site.data.icons[include.group] %}
<li class="icons-list-item">
{% include_cached ui/icon.html icon=icon class="icon-md" %}
{% include ui/icon.html icon=icon class="icon-md" %}
</li>
{% endfor %}
{% for icon in (0..20) %}
pages/_includes/cards/invoices.html
+81 -83
View File
@@ -1,84 +1,82 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap overflow-hidden">
<div class="mb-0">
Show
<div class="mx-2 d-inline-block" style="width: 4rem;">
<input type="text" class="form-control" value="8">
</div>
entries
</div>
<div class="mb-0 ml-4">
Serach:
<div class="ml-2 d-inline-block" style="width: 10rem;">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No. {% include_cached ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Client {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Created {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Status {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Price {% include_cached ui/icon.html icon="code" class="icon-sm" %}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for invoice in site.data.invoices limit: 8 %}
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
<td>
{% include ui/flag.html flag=invoice.country %}
{{ invoice.client }}
</td>
<td>
{{ invoice.vat-no }}
</td>
<td>
{{ invoice.date }}
</td>
<td>
<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
</td>
<td>{{ invoice.price }}</td>
<td class="text-right">
<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
<span class="dropdown ml-1">
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html %}
</span>
</td>
<td style="padding-right: 1rem;">
{% include_cached ui/icon.html icon="edit" class="icon-sm float-right" %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
<div class="mb-0 d-flex align-items-center">
<p class="mb-0 align-middle">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
</div>
<div class="mb-0 ml-4">
<a href="#" class="btn btn-secondary disabled">Previous</a><a href="#" class="btn btn-primary ml-2">1</a><a href="#" class="btn btn-secondary ml-2">2</a><a href="#" class="btn btn-secondary ml-2 font-weight-bold text-secondary">Next</a>
</div>
</div>
</div>
<div class="card-header">
<h3 class="card-title">Invoices</h3>
</div>
<div class="card-body border-bottom py-3">
<div class="d-flex">
<div class="mb-0">
Show
<div class="mx-2 d-inline-block">
<input type="text" class="form-control form-control-sm" value="8" size="3">
</div>
entries
</div>
<div class="mb-0 ml-auto">
Search:
<div class="ml-2 d-inline-block">
<input type="text" class="form-control form-control-sm">
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for invoice in site.data.invoices limit: 8 %}
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
<td>
{% include ui/flag.html flag=invoice.country %}
{{ invoice.client }}
</td>
<td>
{{ invoice.vat-no }}
</td>
<td>
{{ invoice.date }}
</td>
<td>
<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
</td>
<td>{{ invoice.price }}</td>
<td class="text-right">
<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
<span class="dropdown ml-1">
<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html %}
</span>
</td>
<td>
{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="card-footer d-flex align-items-center border-top-0">
<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
{% include ui/pagination.html class="m-0 ml-auto" %}
</div>
</div>
pages/_includes/cards/most-visited-pages.html
+1 -1
View File
@@ -14,7 +14,7 @@
{% for page in site.data.pages %}
<tr>
<td>{{ page.uri }}</td>
<td><a href="#" class="text-muted">{% include_cached ui/icon.html icon="link" %}</a></td>
<td><a href="#" class="text-muted">{% include ui/icon.html icon="link" %}</a></td>
<td>{{ page.visitors | format_number }}</td>
<td>{{ page.unique | format_number }}</td>
<td>{{ page.bounce-rate }}</td>
pages/_includes/cards/music/track-info.html
+19
View File
@@ -0,0 +1,19 @@
{% assign track-id = include.track-id | default: 5 %}
{% assign track = site.data.tracks[track-id] %}
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="{{ site.base }}/img/tracks/{{ track.album.images[1].path }}" class="rounded-left" alt="{{ track.name | escape }}" width="88" height="88">
</div>
<div class="col">
<div class="card-body">
{{ track.name }}
<div class="text-muted">
{% for artist in track.artists %}
{{ artist.name }}{% unless forloop.last %},{% endunless %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
pages/_includes/cards/music/tracks-list.html
+33
View File
@@ -0,0 +1,33 @@
<div class="card">
<div class="list-group card-list-group">
{% for track in site.data.tracks limit: 12 %}
<div class="list-group-item">
<div class="row row-sm align-items-center">
<div class="col-auto text-h3">
{{ forloop.index }}
</div>
<div class="col-auto">
<img src="{{ site.base }}/img/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="48" height="48">
</div>
<div class="col">
{{ track.name }}
<div class="text-muted">
{% for artist in track.artists %}
{{ artist.name }}{% unless forloop.last %},{% endunless %}
{% endfor %}
</div>
</div>
<div class="col-auto text-muted">
{{ track.duration_ms | miliseconds_to_minutes }}
</div>
<div class="col-auto">
{% include ui/icon.html icon="heart" %}
</div>
<div class="col-auto">
{% include ui/icon.html icon="more-horizontal" %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
pages/_includes/cards/pricing-card.html
+2 -2
View File
@@ -14,9 +14,9 @@
{% for feature in features %}
<li>
{% if available-features[forloop.index0] == '1' %}
{% include_cached ui/icon.html icon="check" class="mr-1 text-success" %}
{% include ui/icon.html icon="check" class="mr-1 text-success" %}
{% else %}
{% include_cached ui/icon.html icon="x" class="mr-1 text-danger" %}
{% include ui/icon.html icon="x" class="mr-1 text-danger" %}
{% endif %}
{{ feature }}
</li>
pages/_includes/cards/profile-2.html
+3 -3
View File
@@ -9,17 +9,17 @@
<ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item">
<a href="#" title="Facebook" data-toggle="tooltip">
{% include_cached ui/icon.html icon="facebook" %}
{% include ui/icon.html icon="facebook" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="Twitter" data-toggle="tooltip">
{% include_cached ui/icon.html icon="twitter" %}
{% include ui/icon.html icon="twitter" %}
</a>
</li>
<li class="list-inline-item">
<a href="#" title="1234567890" data-toggle="tooltip">
{% include_cached ui/icon.html icon="phone" %}
{% include ui/icon.html icon="phone" %}
</a>
</li>
</ul>
pages/_includes/cards/profile-timeline.html
+39 -29
View File
@@ -3,20 +3,20 @@
<div class="input-group">
<input type="text" class="form-control" placeholder="Message">
<div class="input-group-append">
<button type="button" class="btn btn-secondary">
<i class="fe fe-camera"></i>
</button>
{% include ui/button.html icon="camera" icon-only=true color="secondary" %}
</div>
</div>
</div>
<ul class="list-group card-list-group">
<li class="list-group-item py-4">
<div class="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
<div class="media-body">
<div class="media-heading">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">4 min</small>
<h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
<h4>{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4>
</div>
<div>
@@ -25,18 +25,22 @@
nascetur ridiculus mus.
</div>
<ul class="media-list">
<li class="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[7].photo }})"></div>
<div class="media-body">
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
</div>
</li>
<li class="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[9].photo }})"></div>
<div class="media-body">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.
@@ -47,12 +51,14 @@
</div>
</li>
<li class="list-group-item py-4">
<div class="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
<div class="media-body">
<div class="media-heading">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">12 min</small>
<h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
<h4>{{ site.data.people[10].first_name }} {{ site.data.people[10].last_name }}</h4>
</div>
<div>
Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis
@@ -62,12 +68,14 @@
</div>
</li>
<li class="list-group-item py-4">
<div class="media">
<div class="media-object avatar avatar-md mr-4" style="background-image: url({{ site.data.people[4].photo }})"></div>
<div class="media-body">
<div class="media-heading">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
</div>
<div class="flex-fill">
<div>
<small class="float-right text-muted">34 min</small>
<h4 class="font-semibold">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h4 class="font-semibold">
<h4>{{ site.data.people[14].first_name }} {{ site.data.people[14].last_name }}</h4>
</div>
<div>
@@ -75,10 +83,12 @@
venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</div>
<ul class="media-list">
<li class="media mt-4">
<div class="media-object avatar mr-4" style="background-image: url({{ site.data.people[5].photo }})"></div>
<div class="media-body">
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>
Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus
auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
pages/_includes/cards/profile.html
+1 -1
View File
@@ -10,7 +10,7 @@
</p>
<button class="btn btn-outline-primary btn-sm">
{% include_cached ui/icon.html icon="twitter" %}
{% include ui/icon.html icon="twitter" %}
Follow
</button>
</div>
pages/_includes/cards/project-kanban.html
+3 -3
View File
@@ -8,9 +8,9 @@
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include_cached ui/icon.html icon="more-vertical" %}
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include_cached ui/dropdown-menu.html right=true %}
{% include ui/dropdown-menu.html right=true %}
</div>
<div class="card-title">
<h6 class="h4 mb-3"><a href="#">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
@@ -20,7 +20,7 @@
<div class="card-meta d-flex justify-content-between">
<div class="d-flex align-items-center">
{% include_cached ui/icon.html icon="check-square" class="mr-2" %}
{% include ui/icon.html icon="check-square" class="mr-2" %}
<span>5/10</span>
</div>
<span>Due {{ due }}</span>
pages/_includes/cards/ribbon.html
+1 -1
View File
@@ -9,5 +9,5 @@
{% endif %}
</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include_cached ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
</div>
pages/_includes/cards/small-stats-2.html
+1 -1
View File
@@ -14,7 +14,7 @@
<div class="card" data-color={{color}}>
<div class="card-body">
<div class="float-right stamp{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
</div>
<div class="text-muted font-weight-normal mt-0">{{ include.title | default: 'Customers' }}</div>
<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
pages/_includes/cards/small-stats.html
+2 -2
View File
@@ -3,7 +3,7 @@
<div class="card">
<div class="card-body p-3 d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include_cached ui/icon.html icon=include.icon %}</span>
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
@@ -18,7 +18,7 @@
<div class="strong">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include_cached ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
pages/_includes/cards/store-product.html
+1 -1
View File
@@ -13,7 +13,7 @@
<strong>{{ product.price }}</strong>
</div>
<div class="ml-auto">
<a href="#" class="btn btn-primary">{% include_cached ui/icon.html icon='plus' %} Add to cart</a>
<a href="#" class="btn btn-primary">{% include ui/icon.html icon='plus' %} Add to cart</a>
</div>
</div>
</div>
pages/_includes/cards/subscribe.html
+2 -2
View File
@@ -25,9 +25,9 @@
<div class="col-auto">
<div class="dropdown">
<button class="btn-options" type="button" data-toggle="dropdown">
{% include_cached ui/icon.html icon="more-vertical" %}
{% include ui/icon.html icon="more-vertical" %}
</button>
{% include_cached ui/dropdown-menu.html right=true %}
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
pages/_includes/cards/table-users.html
+1 -1
View File
@@ -62,7 +62,7 @@
<td class="text-center">
<div class="dropdown">
<a class="btn-icon mx-2" data-toggle="dropdown">
{% include_cached ui/icon.html icon="more-vertical" %}
{% include ui/icon.html icon="more-vertical" %}
</a>
{% include ui/dropdown-menu.html %}
</div>
pages/_includes/cards/tabs.html
+6 -6
View File
@@ -11,33 +11,33 @@
<div class="card">
<ul class="nav nav-tabs{% if include.alternative %} nav-tabs-alt{% endif %}{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include_cached ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include_cached ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
</li>
{% if include.activity %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include_cached ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
</li>
{% endif %}
{% if include.disabled %}
<li class="nav-item">
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include_cached ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
</li>
{% endif %}
{% if include.dropdown %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</li>
{% endif %}
{% if include.settings %}
<li class="nav-item {% if reverse %}mr-auto{% else %}ml-auto{% endif %}">
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-toggle="tab">{% include_cached ui/icon.html icon="settings" %}</a>
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-toggle="tab">{% include ui/icon.html icon="settings" %}</a>
</li>
{% endif %}
</ul>
pages/_includes/cards/tasks.html
+3 -3
View File
@@ -16,14 +16,14 @@
<a href="#" class="text-reset">{{ task.name }}</a>
</td>
<td class="text-nowrap text-muted">
{% include_cached ui/icon.html icon="calendar" %}
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
</td>
<td class="text-nowrap">
<a href="#" class="text-muted">{% include_cached ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td>
<td>
{% include ui/avatar.html person-id=forloop.index size="sm" %}
pages/_includes/cards/timeline.html
+7 -7
View File
@@ -5,7 +5,7 @@
<div class="card-body">
<ul class="list list-timeline{% if include.simple %} list-timeline-simple{% endif %}">
<li>
<div class="list-timeline-icon bg-twitter">{% include_cached ui/icon.html icon="twitter" %}</div>
<div class="list-timeline-icon bg-twitter">{% include ui/icon.html icon="twitter" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">10 hrs ago</div>
<p class="list-timeline-title">+1150 Followers</p>
@@ -13,7 +13,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon bg-red">{% include_cached ui/icon.html icon="briefcase" %}</div>
<div class="list-timeline-icon bg-red">{% include ui/icon.html icon="briefcase" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 hrs ago</div>
<p class="list-timeline-title">+3 New Products were added!</p>
@@ -21,7 +21,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon bg-success">{% include_cached ui/icon.html icon="check" %}</div>
<div class="list-timeline-icon bg-success">{% include ui/icon.html icon="check" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
@@ -29,7 +29,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon bg-facebook">{% include_cached ui/icon.html icon="facebook" %}</div>
<div class="list-timeline-icon bg-facebook">{% include ui/icon.html icon="facebook" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">+290 Page Likes</p>
@@ -37,7 +37,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon bg-teal">{% include_cached ui/icon.html icon="user-plus" %}</div>
<div class="list-timeline-icon bg-teal">{% include ui/icon.html icon="user-plus" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 days ago</div>
<p class="list-timeline-title">+3 Friend Requests</p>
@@ -49,7 +49,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon bg-yellow">{% include_cached ui/icon.html icon="image" %}</div>
<div class="list-timeline-icon bg-yellow">{% include ui/icon.html icon="image" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
@@ -70,7 +70,7 @@
</div>
</li>
<li>
<div class="list-timeline-icon">{% include_cached ui/icon.html icon="settings" %}</div>
<div class="list-timeline-icon">{% include ui/icon.html icon="settings" %}</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
pages/_includes/cards/user-info.html
+6 -6
View File
@@ -5,27 +5,27 @@
<div class="card-body">
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
<div class="mb-2">
{% include_cached ui/icon.html icon="book" class="mr-2 text-muted" %}
{% include ui/icon.html icon="book" class="mr-2 text-muted" %}
Went to: <strong>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include_cached ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include_cached ui/icon.html icon="home" class="mr-2 text-muted" %}
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include_cached ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
{% include ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include_cached ui/icon.html icon="calendar" class="mr-2 text-muted" %}
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include_cached ui/icon.html icon="clock" class="mr-2 text-muted" %}
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>
pages/_includes/cards/users-list.html
+1 -1
View File
@@ -30,7 +30,7 @@
{% else %}
{% assign star-color = 'text-muted' %}
{% endif %}
<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include_cached ui/icon.html icon="star" class=star-color %}</a>
<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
{% endif %}
</div>
{% endfor %}
pages/_includes/forms/form-elements-1.html
+1 -1
View File
@@ -43,7 +43,7 @@
<div class="input-group-append">
<button type="button" class="btn btn-primary">Action</button>
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
{% include_cached ui/dropdown-menu.html right=true %}
{% include ui/dropdown-menu.html right=true %}
</div>
</div>
</div>
pages/_includes/forms/form-elements-2.html
+1 -1
View File
@@ -25,7 +25,7 @@
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
{% include_cached ui/dropdown-menu.html %}
{% include ui/dropdown-menu.html %}
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
pages/_includes/layout/menu.html
+1 -1
View File
@@ -14,7 +14,7 @@
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<span class="nav-icon">
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
</span>
<span class="nav-text">
{{ level-1[1].title }}
pages/_includes/layout/navbar.html
+8 -8
View File
@@ -2,9 +2,9 @@
{% assign person = site.data.people[person-id] %}
{% if include.menu-layout != 'vertical' %}
{% include_cached layout/navbar-logo.html class="mr-4" %}
{% include layout/navbar-logo.html class="mr-4" %}
{% else %}
{% include_cached layout/navbar-search.html class="mr-4" %}
{% include layout/navbar-search.html class="mr-4" %}
{% endif %}
<ul class="nav navbar-menu align-items-center ml-auto">
@@ -23,24 +23,24 @@
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="user" class="dropdown-icon" %} Profile
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="settings" class="dropdown-icon" %} Settings
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="send" class="dropdown-icon" %} Message
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include_cached ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
pages/_includes/layout/page-title-actions.html
+7 -7
View File
@@ -5,27 +5,27 @@
{% if actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif actions == 'calendar' %}
<div class="d-flex">
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'photos' %}
<div class="d-flex">
<div class="mr-3">
{% include ui/form/input-icon.html %}
</div>
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'breadcrumb' %}
<div class="d-flex">
{% include_cached ui/breadcrumb.html class="breadcrumb-alternate" %}
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
</div>
{% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline">
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
{% include ui/button.html text="New view" color="secondary" icon="plus" %}
</span>
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %}
</div>
</div>
pages/_includes/layout/sidebar.html
+2 -2
View File
@@ -1,6 +1,6 @@
<aside class="sidebar sidebar-dark">
<!-- Sidebar logo -->
{% include_cached layout/navbar-logo.html prefix="sidebar" %}
{% include layout/navbar-logo.html prefix="sidebar" %}
<div class="sidebar-content">
<div>
@@ -12,4 +12,4 @@
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
</div>
</div>
</aside>
</aside>
pages/_includes/layout/topmenu.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="container{% if include.fluid %}-fluid{% endif %}">
{% include layout/menu.html top=true %}
{% include_cached layout/navbar-search.html %}
{% include layout/navbar-search.html %}
</div>
</div>
</header>
pages/_includes/layout/topnav.html
+1 -1
View File
@@ -1,7 +1,7 @@
<header class="topnav topbar">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include_cached layout/navbar.html search=true menu-layout=page.menu-layout %}
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
</div>
</div>
</header>
pages/_includes/parts/buttons-table.html
+2 -2
View File
@@ -24,8 +24,8 @@
{% endif %}
{% assign text = type[1].title %}
{% include_cached ui/button.html block=true class=class icon=icon icon-only=icon-only text=text %}
{% assign color = type[0] %}
{% include ui/button.html block=true color=false class=class icon=icon icon-only=icon-only text=text %}
</div>
{% endif %}
{% endfor %}
pages/_includes/parts/calendar.html
+2 -2
View File
@@ -10,11 +10,11 @@
<div class="calendar{% if include.class %} {{ include.class }}{% endif %}">
<div class="calendar-nav">
<button class="btn btn-action btn-link btn-lg">
{% include_cached ui/icon.html icon="chevron-left" %}
{% include ui/icon.html icon="chevron-left" %}
</button>
<div class="calendar-title">{{ include.title | default: 'March 2017' }}</div>
<button class="btn btn-action btn-link btn-lg">
{% include_cached ui/icon.html icon="chevron-right" %}
{% include ui/icon.html icon="chevron-right" %}
</button>
</div>
<div class="calendar-container">
pages/_includes/parts/input-icon-separated.html
+1 -1
View File
@@ -8,4 +8,4 @@
{% include ui/button.html icon="search" icon-only=true color="secondary" %}
</div>
</div>
</div>
</div>
pages/_includes/parts/input-selectgroups.html
+4 -4
View File
@@ -1,18 +1,18 @@
<div class="mb-3">
<label class="form-label">Shipping methods</label>
{% include_cached ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
{% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="mb-3">
<label class="form-label">Icons input</label>
{% include_cached ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
{% include ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include_cached ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
{% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
</div>
<div class="mb-3">
<label class="form-label">Your skills</label>
{% include_cached ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
</div>
pages/_includes/ui/alert.html
+1 -1
View File
@@ -1,7 +1,7 @@
{% assign person = include.person %}
<div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
{% if include.avatar %}{% include ui/avatar.html person=person %}{% endif %}
{% if include.icon %}{% include_cached ui/icon.html icon=include.icon class="mr-1" %}{% endif %} {{ include.text | default:
{% if include.icon %}{% include ui/icon.html icon=include.icon class="mr-1" %}{% endif %} {{ include.text | default:
"This is a custom alert box!" }}
{% if include.buttons %}
<div class="btn-list">
pages/_includes/ui/avatar.html
+2 -2
View File
@@ -19,6 +19,6 @@
{% assign el = 'span' %}
{% if link %}{% assign el = 'a' %}{% endif %}
<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}/{{ src }})"{% endif %}>{% if include.status %}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include_cached ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include_cached ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %} {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
{% endremoveemptylines %}
pages/_includes/ui/button.html
+7 -3
View File
@@ -1,15 +1,19 @@
{% removeemptylines %}
{% assign spinner-class = false %}
{% assign color = include.color | default: 'secondary' %}
{% if include.color == false %}
{% assign color = null %}
{% endif %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
{% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include_cached ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{% unless include.icon-only %}
{{ include.text | default: "Button" }}
{% if include.icon-right %}{% include_cached ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
{% endunless %}
</{{ e }}>
{% endremoveemptylines %}
pages/_includes/ui/card-dropdown.html
+1 -1
View File
@@ -2,7 +2,7 @@
{% assign icon = include.icon | default: 'more-horizontal' %}
<div class="dropdown float-right">
<a href="#" class="card-drop" data-toggle="dropdown" aria-expanded="false">
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-right">
{% for item in menu %}
pages/_includes/ui/dropdown-menu.html
+5 -5
View File
@@ -8,18 +8,18 @@
{% else %}
{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
<a class="dropdown-item" href="#">
{% if include.icons %}{% include_cached ui/icon.html icon="settings" %} {% endif %}
{% if include.icons %}{% include ui/icon.html icon="settings" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include_cached ui/icon.html icon="edit" %} {% endif %}Another action
{% if include.icons %}{% include ui/icon.html icon="edit" %} {% endif %}Another action
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include_cached ui/icon.html icon="activity" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include_cached ui/icon.html icon="user-x" %} {% endif %}Disabled action</a>{% endif %}
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" %} {% endif %}Disabled action</a>{% endif %}
{% if include.separated %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">{% if include.icons %}{% include_cached ui/icon.html icon="plus" class="dropdown-icon" %} {% endif %}Separated link</a>
<a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" %} {% endif %}Separated link</a>
{% endif %}
{% endif %}
</div>
pages/_includes/ui/empty.html
+2 -2
View File
@@ -7,7 +7,7 @@
{% elsif include.icon-text %}
<div class="display-4">{{ include.icon-text }}</div>
{% else %}
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
{% endif %}
</div>
@@ -18,6 +18,6 @@
<div class="empty-action">
{% assign button-text = include.button-text | default: "Search again" %}
{% assign button-icon = include.button-icon | default: "search" %}
{% include_cached ui/button.html text=button-text color="primary" icon=button-icon href="index.html" %}
{% include ui/button.html text=button-text color="primary" icon=button-icon href="index.html" %}
</div>
</div>
pages/_includes/ui/form/input-icon.html
+2 -2
View File
@@ -1,7 +1,7 @@
{% assign icon = include.icon | default: 'search' %}
{% capture addon %}
<span class="input-icon-addon">
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
</span>
{% endcapture %}
@@ -15,4 +15,4 @@
{% unless include.prepend %}
{{ addon }}
{% endunless %}
</div>
</div>
pages/_includes/ui/form/input-selectgroup.html
+1 -1
View File
@@ -7,7 +7,7 @@
<label class="selectgroup-item">
{% assign s = value | split: "i:" %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include_cached ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
</label>
{% endfor %}
</div>
pages/_includes/ui/form/selectize.html
+43 -20
View File
@@ -2,32 +2,55 @@
{% assign data = site.data.selects[key] %}
{% assign options = data.options %}
<select name="{{ key }}" id="select-{{ key }}" class="form-select">
{% if options == 'people' %}
{% for person in site.data.people limit: 20 %}
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
{% endfor %}
{% if options == 'people' %}
{% for person in site.data.people limit: 20 %}
<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
{% endfor %}
{% else %}
{% for option in options %}
{% if option[1] %}
{% assign value = option[0] %}
{% assign name = option[1].name %}
{% assign all-data = option[1] %}
{% else %}
{% assign value = option %}
{% assign name = option %}
{% endif %}
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
{% endfor %}
{% else %}
{% for option in options %}
{% if option[1] %}
{% assign value = option[0] %}
{% assign name = option[1].name %}
{% assign all-data = option[1] %}
{% else %}
{% assign value = option %}
{% assign name = option %}
{% endif %}
<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
{% endfor %}
{% endif %}
{% endif %}
</select>
{% append_lib selectize %}
{% capture_global scripts %}
<script>
$(document).ready(function(){
$('#select-{{ key }}').selectize({});
});
$(document).ready(function () {
$('#select-{{ key }}').selectize({
{% if key == "countries" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
}
}
{% elsif key == "people" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
}
}
{% endif %}
{% if data.max-items %}
maxItems: {{ data.max-items }}
{% endif %}
});
});
</script>
{% endcapture_global %}
pages/_includes/ui/nav.html
+2 -2
View File
@@ -6,7 +6,7 @@
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include_cached ui/icon.html icon="star" class="mr-1" %}
{% include ui/icon.html icon="star" class="mr-1" %}
Link
</a>
</li>
@@ -17,7 +17,7 @@
</li>
<li class="nav-item ml-auto">
<a class="nav-link" href="#">
{% include_cached ui/icon.html icon="settings" %}
{% include ui/icon.html icon="settings" %}
</a>
</li>
</ul>
pages/_includes/parts/pagination.html → pages/_includes/ui/pagination.html
+2 -2
View File
@@ -7,7 +7,7 @@
<div class="page-item-subtitle">Previous</div>
<div class="page-item-title">{{ include.prev-description }}</div>
{% else %}
{% if include.icons %}{% include_cached ui/icon.html icon="chevron-left" %}{% else %}{% include_cached ui/icon.html icon="chevron-left" %} Prev{% endif %}
{% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}{% include ui/icon.html icon="chevron-left" %} Prev{% endif %}
{% endif %}
</a>
</li>
@@ -23,7 +23,7 @@
<div class="page-item-subtitle">Next</div>
<div class="page-item-title">{{ include.next-description }}</div>
{% else %}
{% if include.icons %}{% include_cached ui/icon.html icon="chevron-right" %}{% else %}Next {% include_cached ui/icon.html icon="chevron-right" %}{% endif %}
{% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next {% include ui/icon.html icon="chevron-right" %}{% endif %}
{% endif %}
</a>
</li>
pages/_includes/ui/stars.html
+2 -2
View File
@@ -8,9 +8,9 @@
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% if forloop.index <= rate and filled %}
{% include_cached ui/icon.html icon=icon class="icon-filled" %}
{% include ui/icon.html icon=icon class="icon-filled" %}
{% else %}
{% include_cached ui/icon.html icon=icon %}
{% include ui/icon.html icon=icon %}
{% endif %}
</span>
{% endfor %}
pages/_includes/ui/trending.html
+1 -1
View File
@@ -11,5 +11,5 @@
{% endif %}
<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
{{ value }}% {% include ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
</span>
pages/_layouts/base.html
+4 -7
View File
@@ -1,5 +1,5 @@
<!doctype html>
{% include_cached layout/banner.html %}
{% include layout/banner.html %}
<html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
<head>
<meta charset="utf-8"/>
@@ -26,10 +26,8 @@
<meta name="description" content="{{ page.description | escape }}"/>
{% endif %}
{% include_cached layout/og.html show=layout.og-component %}
{% include_cached layout/css.html %}
<style>body { display: none; }</style>
{% include layout/og.html show=layout.og-component %}
{% include layout/css.html %}
</head>
{% assign dark-theme = page.dark-theme | default: site.dark-theme %}
@@ -41,9 +39,8 @@
{% include layout/js-capture.html %}
{% if site.debug and jekyll.environment == 'development' %}
{% include_cached layout/debug.html %}
{% include layout/debug.html %}
{% endif %}
<script>document.body.style.display = 'block';</script>
</body>
</html>
pages/_layouts/component.html
+2 -2
View File
@@ -55,11 +55,11 @@ og-component: true
</div>
<div class="row">
<div class="col">{% include_cached ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">
<form action="https://codepen.io/pen/define" method="post" target="_blank">
<input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
{% include_cached ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
{% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
</form>
</div>
</div>
pages/_layouts/docs.html
+4 -4
View File
@@ -10,7 +10,7 @@ page-title: Documentation
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
{% include_cached ui/icon.html icon="github" class="mr-2" %}Browse source code
{% include ui/icon.html icon="github" class="mr-2" %}Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
@@ -20,7 +20,7 @@ page-title: Documentation
{% if jekyll.environment == 'development' %}
{% assign doc-page = site.docs | where: "slug", key | first %}
{% if doc-page.done %}{% include_cached ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
{% if doc-page.done %}{% include ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
{% endif %}
{{ doc[1].title }}
@@ -41,14 +41,14 @@ page-title: Documentation
{% if page.bootstrap-link %}
<p class="mb-4 float-right">
<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
{% include ui/icon.html icon="external-link" color="blue" class="pr-1" %}
Bootstrap documentation
</a>
</p>
{% endif %}
<h2 class="h1 mt-0 mb-3">{{ page.title }}
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}
</h2>
{% if page.plugin %}
pages/_plugins/jekyll-capture.rb
+9 -9
View File
@@ -7,7 +7,7 @@ module Jekyll
end
def render(context)
if $captured_global[@text] === nil
unless $captured_global[@text]
$captured_global[@text] = [];
end
@@ -54,10 +54,16 @@ module Jekyll
end
end
Jekyll::Hooks.register :site, :after_init do |page, jekyll|
Jekyll::Hooks.register :pages, :post_init do |page|
$captured_global = {}
$captured_libs = []
$captured_once = {}
$captured_libs = []
end
Jekyll::Hooks.register :pages, :post_render do |page|
$captured_global = {}
$captured_once = {}
$captured_libs = []
end
Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
@@ -65,12 +71,6 @@ module Jekyll
jekyll.site['captured_once'] = $captured_once
jekyll.site['captured_libs'] = $captured_libs
end
Jekyll::Hooks.register :pages, :post_render do |page, jekyll|
$captured_global = {}
$captured_libs = []
$captured_once = {}
end
end
Liquid::Template.register_tag('capture_global', Jekyll::Tags::CaptureGlobal)
pages/_plugins/jekyll-filters.rb
+12
View File
@@ -96,6 +96,18 @@ module Jekyll
Jekyll.sites.first.data['colors'][color]
end
def seconds_to_minutes(seconds)
seconds = seconds.to_i.round
minutes = (seconds / 60).round
seconds = seconds - (minutes * 60)
minutes.to_s.rjust(2, '0') + ":" + seconds.to_s.rjust(2, '0')
end
def miliseconds_to_minutes(miliseconds)
seconds_to_minutes(miliseconds.to_i / 1000)
end
end
end
pages/all.html
+1 -1
View File
@@ -20,7 +20,7 @@ menu: index
<li>
<a href="{{ page.url }}">
{% if page.done %}
{% include_cached ui/icon.html icon="check" color="success" %}
{% include ui/icon.html icon="check" color="success" %}
{% endif %}
{{ page.title | default: page.name }}
</a>
pages/datatables.html
+1 -1
View File
@@ -2,4 +2,4 @@
title: Data Tables
---
{% include cards/invoices.html %}
{% include cards/invoices.html %}
pages/dropdowns.html
+15 -15
View File
@@ -3,18 +3,18 @@ title: Dropdowns
page-title: Dropdowns
---
{% include_cached ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
{% include_cached ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
pages/email.html
+67 -69
View File
@@ -3,78 +3,76 @@ title: Email
page-title: Crypto currencies
---
<div class="container">
<div class="row">
<div class="col-md-3">
<h3 class="mb-4">Mail Service</h3>
<div class="row">
<div class="col-md-3">
<h3 class="mb-4">Mail Service</h3>
<div>
<div class="list-group list-group-transparent mb-0">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
<span class="icon mr-3">{% include_cached ui/icon.html icon="inbox" %}</span>Inbox <span class="ml-auto badge bg-blue">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="send" %}</span>Sent Mail
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="alert-circle" %}</span>Important <span class="ml-auto badge bg-gray">3</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="star" %}</span>Starred
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="file" %}</span>Drafts
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="tag" %}</span>Tags
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include_cached ui/icon.html icon="trash" %}</span>Trash
</a>
</div>
<div class="mt-4">
<a href="#" class="btn btn-secondary btn-block">Compose new Email</a>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
<h3 class="card-title">Compose new message</h3>
</div>
<div class="card-body">
<form action="">
<div class="mb-2">
<div class="row align-items-center">
<label class="col-sm-2">To:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="mb-2">
<div class="row align-items-center">
<label class="col-sm-2">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<textarea rows="10" class="form-control"></textarea>
<div class="btn-list mt-4 text-right">
<button type="button" class="btn btn-secondary btn-space">Cancel</button>
<button type="submit" class="btn btn-primary btn-space">Send message</button>
</div>
</form>
</div>
<div>
<div class="list-group list-group-transparent mb-0">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
<span class="icon mr-3">{% include ui/icon.html icon="inbox" %}</span>Inbox <span class="ml-auto badge bg-blue">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="send" %}</span>Sent Mail
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="alert-circle" %}</span>Important <span class="ml-auto badge bg-gray">3</span>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="star" %}</span>Starred
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="file" %}</span>Drafts
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="tag" %}</span>Tags
</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<span class="icon mr-3">{% include ui/icon.html icon="trash" %}</span>Trash
</a>
</div>
<div class="mt-4">
<a href="#" class="btn btn-secondary btn-block">Compose new Email</a>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
<h3 class="card-title">Compose new message</h3>
</div>
<div class="card-body">
<form action="">
<div class="mb-2">
<div class="row align-items-center">
<label class="col-sm-2">To:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="mb-2">
<div class="row align-items-center">
<label class="col-sm-2">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<textarea rows="10" class="form-control"></textarea>
<div class="btn-list mt-4 text-right">
<button type="button" class="btn btn-secondary btn-space">Cancel</button>
<button type="submit" class="btn btn-primary btn-space">Send message</button>
</div>
</form>
</div>
</div>
</div>
</div>
pages/gallery.html
+1 -1
View File
@@ -25,5 +25,5 @@ menu: gallery
</div>
<div class="d-flex">
{% include parts/pagination.html class="ml-auto" %}
{% include ui/pagination.html class="ml-auto" %}
</div>
pages/icons.html
+3 -3
View File
@@ -5,15 +5,15 @@ page-title: Icons
<div class="row">
<div class="col-12">
{% include_cached cards/icons.html title="Feather icons" group="fe" %}
{% include cards/icons.html title="Feather icons" group="fe" %}
</div>
{% if jekyll.environment == 'production' %}
<div class="col-lg-6">
{% include_cached cards/icons.html title="Brand icons" group="brand" %}
{% include cards/icons.html title="Brand icons" group="brand" %}
</div>
<div class="col-lg-6">
{% include_cached cards/icons.html title="Bootstrap icons" group="bootstrap" %}
{% include cards/icons.html title="Bootstrap icons" group="bootstrap" %}
</div>
{% endif %}
</div>
pages/index.html
+1 -1
View File
@@ -8,4 +8,4 @@ menu-layout: vertical
menu: home
---
{% include_cached layout/homepage.html %}
{% include layout/homepage.html %}
pages/music.html
+22
View File
@@ -0,0 +1,22 @@
---
title: Music components
page-title: Music components
menu: base.music
---
<div class="row">
<div class="col-lg-8">
{% include cards/music/tracks-list.html %}
</div>
<div class="col-lg-4">
<h3 class="mb-3">Top tracks</h3>
<div class="row">
{% for i in (8..13) %}
<div class="col-md-6 col-lg-12">
{% include cards/music/track-info.html track-id=i %}
</div>
{% endfor %}
</div>
</div>
</div>
pages/pagination.html
+4 -4
View File
@@ -4,15 +4,15 @@ title: Pagination
{% card %}
{% include parts/pagination.html %}
{% include parts/pagination.html icons=true %}
{% include ui/pagination.html %}
{% include ui/pagination.html icons=true %}
{% endcard %}
{% card %}
{% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
{% include ui/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
{% endcard %}
<div>
{% include parts/pagination.html icons=true %}
{% include ui/pagination.html icons=true %}
</div>
pages/profile.html
+11 -11
View File
@@ -1,17 +1,17 @@
---
title: Profile
page-title: Profile
menu: base.profile
---
<div class="container">
<div class="row">
<div class="col-lg-4">
{% include cards/profile.html %}
{% include cards/profile-2.html %}
{% include cards/profile-edit.html %}
</div>
<div class="col-lg-8">
{% include cards/profile-timeline.html %}
{% include cards/profile-edit-big.html %}
</div>
<div class="row">
<div class="col-lg-4">
{% include cards/profile.html %}
{% include cards/profile-2.html %}
{% include cards/profile-edit.html %}
</div>
<div class="col-lg-8">
{% include cards/profile-timeline.html %}
{% include cards/profile-edit-big.html %}
</div>
</div>
pages/ribbons.html
+20 -20
View File
@@ -7,24 +7,24 @@ done: true
{% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}
<div class="row">
<div class="{{ col-class }}">{% include_cached cards/ribbon.html %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html top=true left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html color="red" %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html color="green" bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="{{ col-class }}">{% include_cached cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="red" %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="green" bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
</div>
pages/sitemap.xml
+39
View File
@@ -0,0 +1,39 @@
---
layout: none
---
<?xml version="1.0" encoding="UTF-8"?>
{% if page.xsl %}
<?xml-stylesheet type="text/xsl" href="{{ "/sitemap.xsl" | absolute_url }}"?>
{% endif %}
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% assign collections = site.collections | where_exp:'collection','collection.output != false' %}
{% for collection in collections %}
{% assign docs = collection.docs | where_exp:'doc','doc.sitemap != false' %}
{% for doc in docs %}
<url>
<loc>{{ doc.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>
{% if doc.last_modified_at or doc.date %}
<lastmod>{{ doc.last_modified_at | default: doc.date | date_to_xmlschema }}</lastmod>
{% endif %}
</url>
{% endfor %}
{% endfor %}
{% assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != "/404.html"' %}
{% for page in pages %}
<url>
<loc>{{ page.url | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>
{% if page.last_modified_at %}
<lastmod>{{ page.last_modified_at | date_to_xmlschema }}</lastmod>
{% endif %}
</url>
{% endfor %}
{% assign static_files = page.static_files | where_exp:'page','page.sitemap != false' | where_exp:'page','page.name != "404.html"' %}
{% for file in static_files %}
<url>
<loc>{{ file.path | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>
<lastmod>{{ file.modified_time | date_to_xmlschema }}</lastmod>
</url>
{% endfor %}
</urlset>
pages/tmp2.html
+8 -8
View File
@@ -26,25 +26,25 @@ page-title: Tabler licence
<h4>Permissions</h4>
<ul class="list-unstyled">
<li>{% include_cached ui/icon.html icon="check" class="text-green" %} Commercial use</li>
<li>{% include_cached ui/icon.html icon="check" class="text-green" %} Modification</li>
<li>{% include_cached ui/icon.html icon="check" class="text-green" %} Distribution</li>
<li>{% include_cached ui/icon.html icon="check" class="text-green" %} Private use</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Commercial use</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Modification</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Distribution</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Private use</li>
</ul>
</div>
<div class="col-md">
<h4>Limitations</h4>
<ul class="list-unstyled">
<li>{% include_cached ui/icon.html icon="x" class="text-red" %} Liability</li>
<li>{% include_cached ui/icon.html icon="x" class="text-red" %} Warranty</li>
<li>{% include ui/icon.html icon="x" class="text-red" %} Liability</li>
<li>{% include ui/icon.html icon="x" class="text-red" %} Warranty</li>
</ul>
</div>
<div class="col-md">
<h4>Conditions</h4>
<ul class="list-unstyled">
<li>{% include_cached ui/icon.html icon="info" class="text-blue" %} License and copyright notice</li>
<li>{% include ui/icon.html icon="info" class="text-blue" %} License and copyright notice</li>
</ul>
</div>
</div>
@@ -52,4 +52,4 @@ page-title: Tabler licence
<div class="card-footer">
This is not legal advice. <a href="https://help.github.com/articles/licensing-a-repository/#disclaimer" target="_blank">Learn more about repository licenses.</a>
</div>
</div>
</div>
pages/tmp4.html
+22 -3
View File
@@ -1,9 +1,7 @@
---
tmp: true
menu: a.c.d
---
<div class="card">
<div class="card-header">
<h2 class="card-title">CountUp</h2>
@@ -36,4 +34,25 @@ menu: a.c.d
</div>
</div>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Tags</label>
{% include ui/form/selectize.html key="tags" %}
</div>
<div class="mb-3">
<label class="form-label">Top person</label>
{% include ui/form/selectize.html key="users" %}
</div>
<div class="mb-3">
<label class="form-label">Users list</label>
{% include ui/form/selectize.html key="people" %}
</div>
<div class="mb-3">
<label class="form-label">Countries</label>
{% include ui/form/selectize.html key="countries" %}
</div>
pages/users.html
+3 -3
View File
@@ -40,8 +40,8 @@ menu: base.users
</div>
<div class="col-auto">
<div class="btn-list">
{% include_cached ui/button.html text="Chat" color="secondary" size="sm" %}
{% include_cached ui/button.html text="Profile" color="secondary" size="sm" %}
{% include ui/button.html text="Chat" color="secondary" size="sm" %}
{% include ui/button.html text="Profile" color="secondary" size="sm" %}
</div>
</div>
</div>
@@ -52,5 +52,5 @@ menu: base.users
</div>
<div class="d-flex">
{% include parts/pagination.html class="ml-auto" %}
{% include ui/pagination.html class="ml-auto" %}
</div>