Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

html href fixes, custom input fixes

Browse Source
This commit is contained in:
codecalm
2019-09-26 00:13:52 +02:00
parent 6ca4337ecd
commit a85a05eb4d
52 changed files with 228 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/_docs/alerts.md
View File

@@ -25,7 +25,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% example %} {% example %}
{% for variant in site.variants %} {% for variant in site.variants %}
{% capture variant-text %} {% capture variant-text %}
This is a {{ variant.name }} alert — <a href="#" class="alert-link">check it out</a>! This is a {{ variant.name }} alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
{% endcapture %} {% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %} {% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %} {% endfor %}

4
pages/_docs/badges.md
View File

@@ -36,7 +36,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 %}
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a> <a href="javascript:void(0)" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
@@ -45,6 +45,6 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %} {% example %}
{% for color in site.colors %} {% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}"></a> <a href="javascript:void(0)" class="badge bg-{{ color[0] }}"></a>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}

66
pages/_docs/buttons.md
View File

@@ -10,7 +10,7 @@ description: Use Bootstrap’s custom button styles for actions in forms, dialog
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering). The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a> <a href="javascript:void(0)" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button> <button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" /> <input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" /> <input type="submit" class="btn btn-primary" value="Submit" />
@@ -23,9 +23,9 @@ Use any of the available button classes to quickly create a styled button . We p
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.button_variants %} {% for button in site.button_variants %}
<a href="#" class="btn btn-{{ button.name }}">{{ button.title }}</a> <a href="javascript:void(0)" class="btn btn-{{ button.name }}">{{ button.title }}</a>
{% endfor %} {% endfor %}
<a href="#" class="btn btn-link">Link</a> <a href="javascript:void(0)" class="btn btn-link">Link</a>
{% endexample %} {% endexample %}
### Disabled buttons ### Disabled buttons
@@ -45,7 +45,7 @@ The classic button, in different colors.
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
{% for button in site.colors %} {% for button in site.colors %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a> <a href="javascript:void(0)" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
@@ -209,9 +209,9 @@ You can now create a list of buttons with the `.btn-list` container.
{% example html %} {% example html %}
<div class="btn-list"> <div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a> <a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a> <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a> <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
</div> </div>
{% endexample %} {% endexample %}
@@ -219,25 +219,25 @@ If the list is very long, it will automatically wrap on multiple lines, while ke
{% example html %} {% example html %}
<div class="btn-list"> <div class="btn-list">
<a href="#" class="btn btn-secondary">One</a> <a href="javascript:void(0)" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">Two</a> <a href="javascript:void(0)" class="btn btn-secondary">Two</a>
<a href="#" class="btn btn-secondary">Three</a> <a href="javascript:void(0)" class="btn btn-secondary">Three</a>
<a href="#" class="btn btn-secondary">Four</a> <a href="javascript:void(0)" class="btn btn-secondary">Four</a>
<a href="#" class="btn btn-secondary">Five</a> <a href="javascript:void(0)" class="btn btn-secondary">Five</a>
<a href="#" class="btn btn-secondary">Six</a> <a href="javascript:void(0)" class="btn btn-secondary">Six</a>
<a href="#" class="btn btn-secondary">Seven</a> <a href="javascript:void(0)" class="btn btn-secondary">Seven</a>
<a href="#" class="btn btn-secondary">Eight</a> <a href="javascript:void(0)" class="btn btn-secondary">Eight</a>
<a href="#" class="btn btn-secondary">Nine</a> <a href="javascript:void(0)" class="btn btn-secondary">Nine</a>
<a href="#" class="btn btn-secondary">Ten</a> <a href="javascript:void(0)" class="btn btn-secondary">Ten</a>
<a href="#" class="btn btn-secondary">Eleven</a> <a href="javascript:void(0)" class="btn btn-secondary">Eleven</a>
<a href="#" class="btn btn-secondary">Twelve</a> <a href="javascript:void(0)" class="btn btn-secondary">Twelve</a>
<a href="#" class="btn btn-secondary">Thirteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Thirteen</a>
<a href="#" class="btn btn-secondary">Fourteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Fourteen</a>
<a href="#" class="btn btn-secondary">Fifteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Fifteen</a>
<a href="#" class="btn btn-secondary">Sixteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Sixteen</a>
<a href="#" class="btn btn-secondary">Seventeen</a> <a href="javascript:void(0)" class="btn btn-secondary">Seventeen</a>
<a href="#" class="btn btn-secondary">Eighteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Eighteen</a>
<a href="#" class="btn btn-secondary">Nineteen</a> <a href="javascript:void(0)" class="btn btn-secondary">Nineteen</a>
</div> </div>
{% endexample %} {% endexample %}
@@ -245,23 +245,23 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html %} {% example html %}
<div class="btn-list text-center"> <div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a> <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a> <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
</div> </div>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="btn-list text-right"> <div class="btn-list text-right">
<a href="#" class="btn btn-primary">Save changes</a> <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a> <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
</div> </div>
{% endexample %} {% endexample %}
### Button with avatar ### Button with avatar
{% example html%} {% example html%}
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
{% endexample %} {% endexample %}

12
pages/_docs/cards.md
View File

@@ -95,14 +95,14 @@ You can also add the image on the left side of the card. All you need do to is:
<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title text-md"> <a href="javascript:void(0)" class="card-title text-md">
It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
</a> </a>
<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a> <a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
@@ -127,11 +127,11 @@ You can also add the image on the left side of the card. All you need do to is:
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<div class="mb-3"> <div class="mb-3">
<a href="#"> <a href="javascript:void(0)">
<span class="badge badge-md text-uppercase bg-danger">Fashion</span> <span class="badge badge-md text-uppercase bg-danger">Fashion</span>
</a> </a>
</div> </div>
<a href="#" class="card-title h-2x"> <a href="javascript:void(0)" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History What Not To Wear: The Hats, Scarves In History
</a> </a>
</div> </div>
@@ -151,14 +151,14 @@ You can also add the image on the left side of the card. All you need do to is:
<div class="media media-4x3 col-4"> <div class="media media-4x3 col-4">
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a> <a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="flex-fill"> <div class="flex-fill">
<a href="#" class="card-title text-md"> <a href="javascript:void(0)" class="card-title text-md">
Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
</a> </a>
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a> <a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>

6
pages/_includes/cards/_full-2.html
View File

@@ -3,13 +3,13 @@
<div class="card-header"> <div class="card-header">
<ul class="nav nav-tabs card-header-tabs"> <ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="javascript:void(0)">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="javascript:void(0)">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li> </li>
</ul> </ul>
</div> </div>

8
pages/_includes/cards/_full.html
View File

@@ -4,8 +4,8 @@
<div class="card-header"> <div class="card-header">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<div class="card-options"> <div class="card-options">
<a href="#" class="btn btn-secondary btn-sm">Button</a> <a href="javascript:void(0)" class="btn btn-secondary btn-sm">Button</a>
<a href="#" class="btn btn-primary btn-sm">Button</a> <a href="javascript:void(0)" class="btn btn-primary btn-sm">Button</a>
</div> </div>
</div> </div>
@@ -20,8 +20,8 @@
</ul> </ul>
<div class="card-body"> <div class="card-body">
<a href="#" class="card-link">Card link</a> <a href="javascript:void(0)" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a> <a href="javascript:void(0)" class="card-link">Another link</a>
</div> </div>
<div class="progress card-progress"> <div class="progress card-progress">

4
pages/_includes/cards/activity.html
View File

@@ -7,7 +7,7 @@
{% include ui/avatar.html person-id="3" class="mr-3"%} {% include ui/avatar.html person-id="3" class="mr-3"%}
</div> </div>
<div class="text-muted"> <div class="text-muted">
<strong class="text-body">Martin</strong> completed the task <a href="#">Set up client chat channel</a> <strong class="text-body">Martin</strong> completed the task <a href="javascript:void(0)">Set up client chat channel</a>
<div class="font-weight-light">Just now</div> <div class="font-weight-light">Just now</div>
</div> </div>
</div> </div>
@@ -27,7 +27,7 @@
{% include ui/avatar.html person-id="10" class="mr-3"%} {% include ui/avatar.html person-id="10" class="mr-3"%}
</div> </div>
<div class="text-muted"> <div class="text-muted">
<strong class="text-body">Kate</strong> added the task <a href="#">Let's make Tabler awesome!</a> <strong class="text-body">Kate</strong> added the task <a href="javascript:void(0)">Let's make Tabler awesome!</a>
<div class="font-weight-light">Just now</div> <div class="font-weight-light">Just now</div>
</div> </div>
</div> </div>

6
pages/_includes/cards/blog-single.html
View File

@@ -7,17 +7,17 @@
<div class="card{% if type == 'aside' %} card-aside{% endif %}"> <div class="card{% if type == 'aside' %} card-aside{% endif %}">
{% if type == 'image' %} {% if type == 'image' %}
<a href="#"><img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}"></a> <a href="javascript:void(0)"><img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}"></a>
{% endif %} {% endif %}
{% if type == 'aside' %} {% if type == 'aside' %}
<a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/img/photos//{{ site.data.photos[article.image].file }})"></a> <a href="javascript:void(0)" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/img/photos//{{ site.data.photos[article.image].file }})"></a>
{% endif %} {% endif %}
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h4><a href="#">{{ article.title }}</a></h4> <h4><a href="javascript:void(0)">{{ article.title }}</a></h4>
<div class="text-muted">{{ article.description | truncate: truncate }}</div> <div class="text-muted">{{ article.description | truncate: truncate }}</div>

10
pages/_includes/cards/card.html
View File

@@ -21,18 +21,18 @@
</div> </div>
</form> </form>
{% elsif include.show-buttons %} {% elsif include.show-buttons %}
<a href="#" class="btn btn-primary btn-sm">Action 1</a> <a href="javascript:void(0)" class="btn btn-primary btn-sm">Action 1</a>
<a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a> <a href="javascript:void(0)" class="btn btn-secondary btn-sm ml-2">Action 2</a>
{% elsif include.show-switch %} {% elsif include.show-switch %}
{% include ui/switch.html checked=true %} {% include ui/switch.html checked=true %}
{% elsif include.options %} {% elsif include.options %}
{{ include.options }} {{ include.options }}
{% else %} {% else %}
<a href="#" class="card-options-link" data-toggle="card-collapse">{% include ui/icon.html icon="chevron-up" %}</a> <a href="javascript:void(0)" class="card-options-link" data-toggle="card-collapse">{% include ui/icon.html icon="chevron-up" %}</a>
{% if include.show-fullscreen %} {% if include.show-fullscreen %}
<a href="#" class="card-options-link" data-toggle="card-fullscreen">{% include ui/icon.html icon="maximize" %}</a> <a href="javascript:void(0)" class="card-options-link" data-toggle="card-fullscreen">{% include ui/icon.html icon="maximize" %}</a>
{% endif %} {% endif %}
<a href="#" class="card-options-link" data-toggle="card-remove">{% include ui/icon.html icon="x" %}</a> <a href="javascript:void(0)" class="card-options-link" data-toggle="card-remove">{% include ui/icon.html icon="x" %}</a>
{% endif %} {% endif %}
</div> </div>
{% endunless %} {% endunless %}

8
pages/_includes/cards/comments.html
View File

@@ -21,14 +21,14 @@
</p> </p>
<div class="small"> <div class="small">
<span class="text-success mr-1">+{{ forloop.index | random_number: 20, 50 }}</span> <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 ui/icon.html icon="chevron-up" %}</a> <a href="javascript:void(0)" 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"> <a href="javascript:void(0)" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
{% include ui/icon.html icon="chevron-down" %} {% include ui/icon.html icon="chevron-down" %}
</a> </a>
<span class="mr-1">·</span> <span class="mr-1">·</span>
<a href="#" class="mr-1 text-muted">Reply</a> <a href="javascript:void(0)" class="mr-1 text-muted">Reply</a>
<span class="mr-1">·</span> <span class="mr-1">·</span>
<a href="#" class="text-muted">Edit</a> <a href="javascript:void(0)" class="text-muted">Edit</a>
</div> </div>
</div> </div>
</div> </div>

2
pages/_includes/cards/company-employees.html
View File

@@ -13,7 +13,7 @@
{% for person in site.data.people limit: 5 offset: 20 %} {% for person in site.data.people limit: 5 offset: 20 %}
<tr> <tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td> <td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-inherit">{{ person.full_name }}</a></td> <td><a href="javascript:void(0)" class="text-inherit">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td> <td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td> <td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td> <td>

12
pages/_includes/cards/company-lookup.html
View File

@@ -64,7 +64,7 @@
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="mb-5"> <li class="mb-5">
<a href="#">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a> <a href="javascript:void(0)">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a>
<p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons <p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons
commercial for its Alexa voice assistant Before Alexa lo…</p> commercial for its Alexa voice assistant Before Alexa lo…</p>
<div class="row"> <div class="row">
@@ -73,7 +73,7 @@
</div> </div>
</li> </li>
<li class="mb-5"> <li class="mb-5">
<a href="#">Holiday performance propels Amazon to stellar quarter results</a> <a href="javascript:void(0)">Holiday performance propels Amazon to stellar quarter results</a>
<p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing <p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing
on Business Insider To be the first to kno…</p> on Business Insider To be the first to kno…</p>
<div class="row"> <div class="row">
@@ -82,7 +82,7 @@
</div> </div>
</li> </li>
<li class="mb-5"> <li class="mb-5">
<a href="#">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a> <a href="javascript:void(0)">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a>
<p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p> <p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p>
<div class="row"> <div class="row">
<div class="col text-muted">businessinsider.com</div> <div class="col text-muted">businessinsider.com</div>
@@ -182,19 +182,19 @@
<li class="list-separated-item"> <li class="list-separated-item">
<h5 class="mb-1">Crunchbase</h5> <h5 class="mb-1">Crunchbase</h5>
<div> <div>
<a href="#">crunchbase.com/organization/amazon</a> <a href="javascript:void(0)">crunchbase.com/organization/amazon</a>
</div> </div>
</li> </li>
<li class="list-separated-item"> <li class="list-separated-item">
<h5 class="mb-1">Twitter</h5> <h5 class="mb-1">Twitter</h5>
<div> <div>
<a href="#">twitter.com/amazon</a> <a href="javascript:void(0)">twitter.com/amazon</a>
</div> </div>
</li> </li>
<li class="list-separated-item"> <li class="list-separated-item">
<h5 class="mb-1">Facebook</h5> <h5 class="mb-1">Facebook</h5>
<div> <div>
<a href="#">facebook.com/amazon</a> <a href="javascript:void(0)">facebook.com/amazon</a>
</div> </div>
</li> </li>
</ul> </ul>

16
pages/_includes/cards/feed-card.html
View File

@@ -2,11 +2,11 @@
{% assign id = 0 | random_id %} {% assign id = 0 | random_id %}
<div class="card"> <div class="card">
<div class="card-header d-flex"> <div class="card-header d-flex">
<a href="#"> <a href="javascript:void(0)">
{% include ui/avatar.html person=person size="md" %} {% include ui/avatar.html person=person size="md" %}
</a> </a>
<div class="mx-3"> <div class="mx-3">
<a href="#">{{ person.full_name }}</a> <a href="javascript:void(0)">{{ person.full_name }}</a>
<div class="text-muted text-sm">11 days ago</div> <div class="text-muted text-sm">11 days ago</div>
</div> </div>
</div> </div>
@@ -175,13 +175,13 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="toolbar toolbar-mx"> <div class="toolbar toolbar-mx">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="thumbs-up" %} 321 Likes {% include ui/icon.html icon="thumbs-up" %} 321 Likes
</a> </a>
<a href="#feed-form-{{ id }}" class="text-muted" data-toggle="collapse"> <a href="#feed-form-{{ id }}" class="text-muted" data-toggle="collapse">
{% include ui/icon.html icon="message-square" %} 56 Comments {% include ui/icon.html icon="message-square" %} 56 Comments
</a> </a>
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="share-2" %} {% include ui/icon.html icon="share-2" %}
Share Share
</a> </a>
@@ -192,10 +192,10 @@
<textarea class="form-control" rows="3"></textarea> <textarea class="form-control" rows="3"></textarea>
<div class="d-flex pt-2"> <div class="d-flex pt-2">
<div class="toolbar mt-1"> <div class="toolbar mt-1">
<a href="#" class="text-muted">{% include ui/icon.html icon="image" %}</a> <a href="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="image" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="video" %}</a> <a href="javascript:void(0)" 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="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="map-pin" %}</a>
<a href="#" class="text-muted">{% include ui/icon.html icon="paperclip" %}</a> <a href="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="paperclip" %}</a>
</div> </div>
<button class="btn btn-sm btn-primary ml-auto">Post</button> <button class="btn btn-sm btn-primary ml-auto">Post</button>
</div> </div>

6
pages/_includes/cards/image-box.html
View File

@@ -1,11 +1,11 @@
<div class="card"> <div class="card">
<a href="#"> <a href="javascript:void(0)">
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[0].file }}"/> <img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[0].file }}"/>
</a> </a>
<div class="card-body"> <div class="card-body">
<h4>Awesome Breakfast</h4> <h4>Awesome Breakfast</h4>
<div class="toolbar mb-3"> <div class="toolbar mb-3">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="clock" %} {% include ui/icon.html icon="clock" %}
May 23rd, 2018 May 23rd, 2018
</a> </a>
@@ -16,6 +16,6 @@
</div> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur consequatur dolor dolore, earum enim <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur consequatur dolor dolore, earum enim
error, nemo neque nulla quasi rerum, </p> error, nemo neque nulla quasi rerum, </p>
<a href="#" class="btn btn-primary">See more</a> <a href="javascript:void(0)" class="btn btn-primary">See more</a>
</div> </div>
</div> </div>

2
pages/_includes/cards/most-visited-pages.html
View File

@@ -14,7 +14,7 @@
{% for page in site.data.pages %} {% for page in site.data.pages %}
<tr> <tr>
<td>{{ page.uri }}</td> <td>{{ page.uri }}</td>
<td><a href="#" class="text-muted-light">{% include ui/icon.html icon="link" %}</a></td> <td><a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="link" %}</a></td>
<td>{{ page.visitors | format_number }}</td> <td>{{ page.visitors | format_number }}</td>
<td>{{ page.unique | format_number }}</td> <td>{{ page.unique | format_number }}</td>
<td>{{ page.bounce-rate }}</td> <td>{{ page.bounce-rate }}</td>

4
pages/_includes/cards/place-box.html
View File

@@ -29,11 +29,11 @@
<div class="card-body"> <div class="card-body">
<h4>Sunny Place Apartment</h4> <h4>Sunny Place Apartment</h4>
<div class="toolbar mb-5"> <div class="toolbar mb-5">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="map-pin" %} {% include ui/icon.html icon="map-pin" %}
Veiga, PT Veiga, PT
</a> </a>
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="users" %} {% include ui/icon.html icon="users" %}
51 51
</a> </a>

2
pages/_includes/cards/pricing-card.html
View File

@@ -24,7 +24,7 @@
</ul> </ul>
<div class="text-center mt-6"> <div class="text-center mt-6">
<a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a> <a href="javascript:void(0)" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a>
</div> </div>
</div> </div>
</div> </div>

4
pages/_includes/cards/project-box.html
View File

@@ -2,11 +2,11 @@
<div class="card-body"> <div class="card-body">
<h4>System redesign</h4> <h4>System redesign</h4>
<div class="toolbar mb-3"> <div class="toolbar mb-3">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="file" %} {% include ui/icon.html icon="file" %}
24 Files 24 Files
</a> </a>
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="bar-chart-2" %} {% include ui/icon.html icon="bar-chart-2" %}
12 Reports 12 Reports
</a> </a>

2
pages/_includes/cards/project-kanban.html
View File

@@ -13,7 +13,7 @@
{% include ui/dropdown-menu.html right=true %} {% include ui/dropdown-menu.html right=true %}
</div> </div>
<div class="card-title"> <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> <h6 class="h4 mb-3"><a href="javascript:void(0)">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
</div> </div>
{% include ui/avatar-list.html offset=offset limit=limit size="sm" stacked=true class="mb-3" %} {% include ui/avatar-list.html offset=offset limit=limit size="sm" stacked=true class="mb-3" %}

4
pages/_includes/cards/quote-box.html
View File

@@ -11,7 +11,7 @@
illo inventore molestiae!</p> illo inventore molestiae!</p>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<a href="#"> <a href="javascript:void(0)">
{% include ui/avatar.html person=p size="lg" %} {% include ui/avatar.html person=p size="lg" %}
</a> </a>
<div class="mx-3"> <div class="mx-3">
@@ -26,4 +26,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
pages/_includes/cards/recommended-users.html
View File

@@ -5,7 +5,7 @@
<div class="card-body"> <div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %} {% for person in site.data.people limit: 5 offset: 50 %}
<div class="mb-3"> <div class="mb-3">
<a href="#" class="d-flex align-items-center text-inherit"> <a href="javascript:void(0)" class="d-flex align-items-center text-inherit">
{% include ui/avatar.html person=person size="sm" class="mr-2"%} {% include ui/avatar.html person=person size="sm" class="mr-2"%}
{{ person.full_name }} {{ person.full_name }}
</a> </a>

6
pages/_includes/cards/subscribe.html
View File

@@ -8,7 +8,7 @@
</div> </div>
<div class="col"> <div class="col">
<h4 class="card-title m-0"> <h4 class="card-title m-0">
<a href="#">{{ person.full_name }}</a> <a href="javascript:void(0)">{{ person.full_name }}</a>
</h4> </h4>
<div class="text-muted"> <div class="text-muted">
Working in {{ person.company }} Working in {{ person.company }}
@@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block"> <a href="javascript:void(0)" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe Subscribe
</a> </a>
</div> </div>
@@ -32,4 +32,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

10
pages/_includes/cards/tabs.html
View File

@@ -28,13 +28,13 @@
{% endif %} {% endif %}
{% if include.dropdown %} {% if include.dropdown %}
<li class="nav-item 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> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div> </div>
</li> </li>
{% endif %} {% endif %}

6
pages/_includes/cards/tasks.html
View File

@@ -13,17 +13,17 @@
</label> </label>
</td> </td>
<td class="w-100"> <td class="w-100">
<a href="#" class="text-inherit">{{ task.name }}</a> <a href="javascript:void(0)" class="text-inherit">{{ task.name }}</a>
</td> </td>
<td class="text-nowrap text-muted-light"> <td class="text-nowrap text-muted-light">
{% include 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' }} {{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
<a href="#" class="text-muted-light">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a> <a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="check" %} {{ forloop.index | random_number: 0, 6 }}/{{ forloop.index | random_number: 5, 10 }}</a>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
<a href="#" class="text-muted-light">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a> <a href="javascript:void(0)" class="text-muted-light">{% include ui/icon.html icon="message-square" %} {{ forloop.index | random_number: 0, 12 }}</a>
</td> </td>
<td> <td>
{% include ui/avatar.html person-id=forloop.index size="sm" %} {% include ui/avatar.html person-id=forloop.index size="sm" %}

2
pages/_includes/cards/text-box.html
View File

@@ -5,6 +5,6 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores aspernatur dolor fugit id, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores aspernatur dolor fugit id,
illo iste molestiae nam nesciunt veniam? illo iste molestiae nam nesciunt veniam?
</p> </p>
<a href="#" class="btn btn-primary">Find out more</a> <a href="javascript:void(0)" class="btn btn-primary">Find out more</a>
</div> </div>
</div> </div>

6
pages/_includes/cards/top-users.html
View File

@@ -7,13 +7,13 @@
{% for person in site.data.people limit: 12 offset: 40 %} {% for person in site.data.people limit: 12 offset: 40 %}
<div class="col-sm-6" data-id="8"> <div class="col-sm-6" data-id="8">
<div class="media"> <div class="media">
<a href="#"> <a href="javascript:void(0)">
{% include ui/avatar.html src=person.photo size="md" %} {% include ui/avatar.html src=person.photo size="md" %}
</a> </a>
</div> </div>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<a href="#" class="text-default">{{ person.full_name }}</a> <a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
<a href="#" class="text-muted leading-none"> <a href="javascript:void(0)" class="text-muted leading-none">
{{ person.company }} {{ person.company }}
</a> </a>
</div> </div>

4
pages/_includes/cards/user-card-bg.html
View File

@@ -1,6 +1,6 @@
{% assign person-id = include.person-id | default: 0 %} {% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %} {% assign person = site.data.people[person-id] %}
<a class="card card-link" href="#"> <a class="card card-link" href="javascript:void(0)">
<div class="card-cover text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({% include ui/image.html id=person-id %})"> <div class="card-cover text-center{% if include.blurred %} card-cover-blurred{% endif %}" style="background-image: url({% include ui/image.html id=person-id %})">
{% include ui/avatar.html size="xl" person=person thumb=true %} {% include ui/avatar.html size="xl" person=person thumb=true %}
</div> </div>
@@ -8,4 +8,4 @@
<div class="card-title mb-1">{{ person.full_name }}</div> <div class="card-title mb-1">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div> <div class="text-muted">{{ person.job_title }}</div>
</div> </div>
</a> </a>

4
pages/_includes/cards/user-card-big.html
View File

@@ -8,5 +8,5 @@
<div class="card-title mb-1">{{ person.full_name }}</div> <div class="card-title mb-1">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div> <div class="text-muted">{{ person.job_title }}</div>
</div> </div>
<a href="#" class="card-btn">View full profile</a> <a href="javascript:void(0)" class="card-btn">View full profile</a>
</div> </div>

2
pages/_includes/cards/user-card.html
View File

@@ -1,6 +1,6 @@
{% assign person-id = include.person-id | default: 0 %} {% assign person-id = include.person-id | default: 0 %}
{% assign person = site.data.people[person-id] %} {% assign person = site.data.people[person-id] %}
<a class="card card-link" href="#"> <a class="card card-link" href="javascript:void(0)">
<div class="card-body"> <div class="card-body">
<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}"> <div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% include ui/avatar.html person=person %} {% include ui/avatar.html person=person %}

6
pages/_includes/cards/user-profile-2.html
View File

@@ -4,16 +4,16 @@
<div class="card"> <div class="card">
<div class="card-body text-center"> <div class="card-body text-center">
<a href="#"> <a href="javascript:void(0)">
{% include ui/avatar.html person=p size="lg" class="mb-3" %} {% include ui/avatar.html person=p size="lg" class="mb-3" %}
</a> </a>
<h4>{{p.full_name}}</h4> <h4>{{p.full_name}}</h4>
<div class="toolbar justify-content-center"> <div class="toolbar justify-content-center">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="map-pin" %} {% include ui/icon.html icon="map-pin" %}
{{ p.city }}, {{ p.country }} {{ p.city }}, {{ p.country }}
</a> </a>
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="briefcase" %} {% include ui/icon.html icon="briefcase" %}
{{ p.job_title }} {{ p.job_title }}
</a> </a>

6
pages/_includes/cards/user-profile.html
View File

@@ -5,7 +5,7 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex align-items-center mb-3"> <div class="d-flex align-items-center mb-3">
<a href="#"> <a href="javascript:void(0)">
{% include ui/avatar.html person=p size="lg" %} {% include ui/avatar.html person=p size="lg" %}
</a> </a>
<div class="mx-3"> <div class="mx-3">
@@ -21,8 +21,8 @@
officiis.</p> officiis.</p>
<div class="d-flex"> <div class="d-flex">
<a href="#" class="btn btn-block btn-primary">View profile</a> <a href="javascript:void(0)" class="btn btn-block btn-primary">View profile</a>
<a href="#" class="btn btn-secondary btn-icon ml-3"> <a href="javascript:void(0)" class="btn btn-secondary btn-icon ml-3">
{% include ui/icon.html icon="user" %} {% include ui/icon.html icon="user" %}
</a> </a>
</div> </div>

18
pages/_includes/forms/form-elements-3.html
View File

@@ -6,31 +6,17 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Valid State</label> <label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid" <input type="text" class="form-control is-valid" placeholder="Valid State..">
placeholder="Valid State..">
<input type="text" class="form-control mt-3 state-valid" value="Valid state"> <input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Invalid State</label> <label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid" <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div> <div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state"> <input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
</div> </div>
<div class="mb-3">
<label class="form-label">Country</label>
<select class="form-select">
<option value="">Germany</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Size</label>
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
</div>

14
pages/_includes/layout/debug.html
View File

@@ -1,10 +1,10 @@
<div class="debug"> <div class="debug">
<a href="#" data-debug="dark">Dark mode</a> <a href="javascript:void(0)" data-debug="dark">Dark mode</a>
<a href="#" data-debug="rtl">RTL mode</a> <a href="javascript:void(0)" data-debug="rtl">RTL mode</a>
<a href="#" data-debug="code">Show cards code</a> <a href="javascript:void(0)" data-debug="code">Show cards code</a>
<a href="#" data-debug="folded">Folded sidebar</a> <a href="javascript:void(0)" data-debug="folded">Folded sidebar</a>
<a href="#" data-debug="fullscreen">Fullscreen</a> <a href="javascript:void(0)" data-debug="fullscreen">Fullscreen</a>
<a href="#" data-debug="header-sticky">Sticky header</a> <a href="javascript:void(0)" data-debug="header-sticky">Sticky header</a>
<a href="{{ site.base }}/pages.html">All pages</a> <a href="{{ site.base }}/pages.html">All pages</a>
<div class="debug-info">Jekyll {{ jekyll.version }}</div> <div class="debug-info">Jekyll {{ jekyll.version }}</div>
@@ -137,7 +137,7 @@
var $card = $(this), var $card = $(this),
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, ''); htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
var $button = $('<div class="card-debug"><a href="#" class="text-muted-light" data-code>code</a></div>'), var $button = $('<div class="card-debug"><a href="javascript:void(0)" class="text-muted-light" data-code>code</a></div>'),
$codeLink = $button.find('[data-code]'); $codeLink = $button.find('[data-code]');
$codeLink $codeLink

8
pages/_includes/layout/page-title.html
View File

@@ -21,17 +21,17 @@
</div> </div>
</div> </div>
</div> </div>
<a href="#" class="btn btn-icon btn-secondary ml-2"> <a href="javascript:void(0)" class="btn btn-icon btn-secondary ml-2">
{% include ui/icon.html icon="refresh-ccw" %} {% include ui/icon.html icon="refresh-ccw" %}
</a> </a>
<a href="#" class="btn btn-icon btn-secondary ml-2"> <a href="javascript:void(0)" class="btn btn-icon btn-secondary ml-2">
{% include ui/icon.html icon="filter" %} {% include ui/icon.html icon="filter" %}
</a> </a>
</form> </form>
{% elsif page.page-right == "breadcrumb" %} {% elsif page.page-right == "breadcrumb" %}
<ol class="breadcrumb m-0"> <ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="#">UI Kit</a></li> <li class="breadcrumb-item"><a href="javascript:void(0)">UI Kit</a></li>
<li class="breadcrumb-item"><a href="#">Tables</a></li> <li class="breadcrumb-item"><a href="javascript:void(0)">Tables</a></li>
<li class="breadcrumb-item active">Basic Tables</li> <li class="breadcrumb-item active">Basic Tables</li>
</ol> </ol>
{% endif %} {% endif %}

2
pages/_includes/layout/sidenav-content.html
View File

@@ -21,7 +21,7 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="javascript:void(0)" class="nav-link">
<span class="nav-icon">{% include ui/icon.html icon="power" %}</span> <span class="nav-icon">{% include ui/icon.html icon="power" %}</span>
<span class="nav-text">Logout</span> <span class="nav-text">Logout</span>
</a> </a>

2
pages/_includes/parts/calendar.html
View File

@@ -34,7 +34,7 @@
{% endif %} {% endif %}
<div class="calendar-date{% if day <= 0 %} prev-month{% elsif day > days %} next-month{% endif %}{% if range-start and day >= range-start and range-end and day <= range-end %} calendar-range{% if day == range-start %} range-start{% endif %}{% if day == range-end %} range-end{% endif %}{% endif %}"> <div class="calendar-date{% if day <= 0 %} prev-month{% elsif day > days %} next-month{% endif %}{% if range-start and day >= range-start and range-end and day <= range-end %} calendar-range{% if day == range-start %} range-start{% endif %}{% if day == range-end %} range-end{% endif %}{% endif %}">
<a href="#" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a> <a href="javascript:void(0)" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

8
pages/_includes/parts/dropdown/days.html
View File

@@ -1,10 +1,10 @@
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle text-muted-light" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="dropdown-toggle text-muted-light" href="javascript:void(0)" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ include.value | default: 'Last 7 days' }} {{ include.value | default: 'Last 7 days' }}
</a> </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Last 7 days</a> <a class="dropdown-item active" href="javascript:void(0)">Last 7 days</a>
<a class="dropdown-item" href="#">Last 30 days</a> <a class="dropdown-item" href="javascript:void(0)">Last 30 days</a>
<a class="dropdown-item" href="#">Last 3 months</a> <a class="dropdown-item" href="javascript:void(0)">Last 3 months</a>
</div> </div>
</div> </div>

5
pages/_includes/parts/input-datalist.html
View File

@@ -2,8 +2,7 @@
<label class="form-label">Datalist example</label> <label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." /> <input class="form-control" list="datalistOptions" placeholder="Type to search..." />
<datalist id="datalistOptions"> <datalist id="datalistOptions">
{% for country in site.data.countries %} {% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}"> <option value="{{ country | escape }}" />{% endfor %}
{% endfor %}
</datalist> </datalist>
</div> </div>

36
pages/_includes/parts/navbar.html
View File

@@ -27,7 +27,7 @@
{% endif %} {% endif %}
{% if include.plus-left %} {% if include.plus-left %}
<a href="#" class="btn btn-primary"> <a href="javascript:void(0)" class="btn btn-primary">
{% include ui/icon.html icon="plus" %} {% include ui/icon.html icon="plus" %}
</a> </a>
{% endif %} {% endif %}
@@ -66,7 +66,7 @@
<div class="flex"> <div class="flex">
<span>6 Notifications</span> <span>6 Notifications</span>
</div> </div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a> <a href="javascript:void(0)">See all <i class="fa fa-angle-right text-muted"></i></a>
</div> </div>
</div> </div>
</li> </li>
@@ -74,7 +74,7 @@
{% if include.progress %} {% if include.progress %}
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link text-muted-light"> <a href="javascript:void(0)" class="nav-link text-muted-light">
Profile Completeness: 70% Profile Completeness: 70%
<!--<span class="progress progress-xs">--> <!--<span class="progress progress-xs">-->
<!--<span class="progress-bar" style="width: 70%"></span>--> <!--<span class="progress-bar" style="width: 70%"></span>-->
@@ -85,12 +85,12 @@
{% if include.language %} {% if include.language %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> <a href="javascript:void(0)" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English <span class="flag flag-gb mr-2"></span>English
</a> </a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable"> <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %} {% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{ <a href="javascript:void(0)" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a> language.name }}</a>
{% endfor %} {% endfor %}
</div> </div>
@@ -103,7 +103,7 @@
{% if include.user-menu %} {% if include.user-menu %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" data-toggle="dropdown" <a href="javascript:void(0)" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2"> class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %} {% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %} {% include ui/avatar.html src=person.photo %}
@@ -123,24 +123,24 @@
{% endif %} {% endif %}
</a> </a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile {% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings {% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
<span class="float-right"><span class="badge badge-primary">6</span></span> <span class="float-right"><span class="badge badge-primary">6</span></span>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
{% include 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>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="javascript:void(0)">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a> </a>
</div> </div>
@@ -149,18 +149,18 @@
{% if include.manage %} {% if include.manage %}
<li class="nav-item"> <li class="nav-item">
<a href="#" class="btn btn-secondary">Manage Widgets</a> <a href="javascript:void(0)" class="btn btn-secondary">Manage Widgets</a>
</li> </li>
{% endif %} {% endif %}
{% if include.register %} {% if include.register %}
<li class="nav-item "> <li class="nav-item ">
<a href="#" class="nav-link"> <a href="javascript:void(0)" class="nav-link">
Sign in Sign in
</a> </a>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block"> <a href="javascript:void(0)" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
Register Register
</a> </a>
</li> </li>
@@ -168,19 +168,19 @@
{% if include.plus %} {% if include.plus %}
<li class="nav-item"> <li class="nav-item">
<a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a> <a href="javascript:void(0)" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
</li> </li>
{% endif %} {% endif %}
{% if include.premium %} {% if include.premium %}
<li class="nav-item"> <li class="nav-item">
<a href="#" class="btn btn-success">Go Premium</a> <a href="javascript:void(0)" class="btn btn-success">Go Premium</a>
</li> </li>
{% endif %} {% endif %}
{% if include.sync %} {% if include.sync %}
<li class="nav-item"> <li class="nav-item">
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a> <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>

6
pages/_includes/parts/pagination.html
View File

@@ -2,7 +2,7 @@
{% assign active-item = include.active-item | default: 2 %} {% assign active-item = include.active-item | default: 2 %}
<ul class="pagination {{ include.class }}"> <ul class="pagination {{ include.class }}">
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled"> <li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
<a class="page-link" href="#" tabindex="-1"> <a class="page-link" href="javascript:void(0)" tabindex="-1">
{% if include.prev-description %} {% if include.prev-description %}
<div class="page-item-subtitle">Previous</div> <div class="page-item-subtitle">Previous</div>
<div class="page-item-title">{{ include.prev-description }}</div> <div class="page-item-title">{{ include.prev-description }}</div>
@@ -13,11 +13,11 @@
</li> </li>
{% for i in (1..count) %} {% for i in (1..count) %}
<li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li> <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="javascript:void(0)">{{ i }}</a></li>
{% endfor %} {% endfor %}
<li class="page-item{% if include.prev-description %} page-next{% endif %}"> <li class="page-item{% if include.prev-description %} page-next{% endif %}">
<a class="page-link" href="#"> <a class="page-link" href="javascript:void(0)">
{% if include.next-description %} {% if include.next-description %}
<div class="page-item-subtitle">Next</div> <div class="page-item-subtitle">Next</div>

6
pages/_includes/ui/alert.html
View File

@@ -5,9 +5,9 @@
"This is a custom alert box!" }} "This is a custom alert box!" }}
{% if include.buttons %} {% if include.buttons %}
<div class="btn-list"> <div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a> <a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Cancel</a> <a href="javascript:void(0)" class="btn btn-secondary">Cancel</a>
</div> </div>
{% endif %} {% endif %}
{% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %} {% if include.close %}<a href="javascript:void(0)" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
</div> </div>

2
pages/_includes/ui/avatar-list.html
View File

@@ -6,6 +6,6 @@
{% include ui/avatar.html person=person size=size %} {% include ui/avatar.html person=person size=size %}
{% endfor %} {% endfor %}
{% if include.text %} {% if include.text %}
<a href="#" class="avatar">{{ include.text }}</a> <a href="javascript:void(0)" class="avatar">{{ include.text }}</a>
{% endif %} {% endif %}
</div> </div>

4
pages/_includes/ui/breadcrumb.html
View File

@@ -2,9 +2,9 @@
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs"> <ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
{% for page in pages %} {% for page in pages %}
{% if forloop.last %} {% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li> <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">{{ page }}</a></li>
{% else %} {% else %}
<li class="breadcrumb-item"><a href="#">{{ page }}</a></li> <li class="breadcrumb-item"><a href="javascript:void(0)">{{ page }}</a></li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ol> </ol>

2
pages/_includes/ui/dropdown-menu.html
View File

@@ -4,7 +4,7 @@
{% if item == '-' %} {% if item == '-' %}
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
{% else %} {% else %}
<a class="dropdown-item" href="#">{{ item }}</a> <a class="dropdown-item" href="javascript:void(0)">{{ item }}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>

2
pages/_includes/ui/steps.html
View File

@@ -4,7 +4,7 @@
{% for i in (1..count) %} {% for i in (1..count) %}
{% assign elem = 'a' %} {% assign elem = 'a' %}
{% if i > active %}{% assign elem = 'span' %}{% endif %} {% if i > active %}{% assign elem = 'span' %}{% endif %}
<{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %} <{{ elem }} href="javascript:void(0)" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %}
Step {{ i }} Step {{ i }}
{% endif %}</{{ elem }}> {% endif %}</{{ elem }}>
{% endfor %} {% endfor %}

14
pages/buttons.html
View File

@@ -35,15 +35,15 @@ done: true
{% include ui/button.html text="Button" block=true color="secondary" %} {% include ui/button.html text="Button" block=true color="secondary" %}
</p> </p>
<p> <p>
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a> <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
</p> </p>
<p> <p>
<a href="#" class="btn btn-primary btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a> <a href="javascript:void(0)" class="btn btn-primary btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a>
<a href="#" class="btn btn-secondary btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a> <a href="javascript:void(0)" class="btn btn-secondary btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a>
<a href="#" class="btn btn-warning btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a> <a href="javascript:void(0)" class="btn btn-warning btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a>
<a href="#" class="btn btn-outline-danger btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a> <a href="javascript:void(0)" class="btn btn-outline-danger btn-loading"><span class="loader btn-loader"></span> Loading&hellip;</a>
</p> </p>
<p> <p>

36
pages/cards-2.html
View File

@@ -12,14 +12,14 @@ done: true
<div class="media media-4x3 col-4"> <div class="media media-4x3 col-4">
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a> <a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="flex-fill"> <div class="flex-fill">
<a href="#" class="card-title text-md"> <a href="javascript:void(0)" class="card-title text-md">
Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
</a> </a>
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a> <a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
@@ -34,14 +34,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-dark-overlay">MUSIC</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-dark-overlay">MUSIC</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title text-md"> <a href="javascript:void(0)" class="card-title text-md">
It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
</a> </a>
<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a> <a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
@@ -58,14 +58,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=8 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=8 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title "> <a href="javascript:void(0)" class="card-title ">
The Tallest Unclimbed Mountains In The World The Tallest Unclimbed Mountains In The World
</a> </a>
</div> </div>
@@ -81,14 +81,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=9 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=9 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-info">Music</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-info">Music</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title "> <a href="javascript:void(0)" class="card-title ">
Congrats on the Lifestyle! The Dark Side to Influencer Marketing Congrats on the Lifestyle! The Dark Side to Influencer Marketing
</a> </a>
</div> </div>
@@ -104,14 +104,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=10 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=10 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-primary">TOP5</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title h-2x"> <a href="javascript:void(0)" class="card-title h-2x">
The Tallest Unclimbed Mountains In The World The Tallest Unclimbed Mountains In The World
</a> </a>
</div> </div>
@@ -127,14 +127,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=11 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=11 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-danger">Fashion</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-danger">Fashion</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title h-2x"> <a href="javascript:void(0)" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History What Not To Wear: The Hats, Scarves In History
</a> </a>
</div> </div>
@@ -150,14 +150,14 @@ done: true
<a class="media-content " style="background-image:url({% include ui/image.html id=12 %})"> <a class="media-content " style="background-image:url({% include ui/image.html id=12 %})">
</a> </a>
<div class="media-overlay overlay-top"> <div class="media-overlay overlay-top">
<a href="#"><span class="badge badge-md text-uppercase bg-warning">AI</span></a> <a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-warning">AI</span></a>
</div> </div>
<div class="media-action "> <div class="media-action ">
</div> </div>
</div> </div>
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<a href="#" class="card-title"> <a href="javascript:void(0)" class="card-title">
How AI Helps Recruiters Track Jobseekers’ Emotions How AI Helps Recruiters Track Jobseekers’ Emotions
</a> </a>
</div> </div>
@@ -179,11 +179,11 @@ done: true
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<div class="mb-3"> <div class="mb-3">
<a href="#"> <a href="javascript:void(0)">
<span class="badge badge-md text-uppercase bg-danger">Fashion</span> <span class="badge badge-md text-uppercase bg-danger">Fashion</span>
</a> </a>
</div> </div>
<a href="#" class="card-title h-2x"> <a href="javascript:void(0)" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History What Not To Wear: The Hats, Scarves In History
</a> </a>
</div> </div>
@@ -204,11 +204,11 @@ done: true
<div class="card-body d-flex flex-column "> <div class="card-body d-flex flex-column ">
<div class="flex-fill "> <div class="flex-fill ">
<div class="mb-3"> <div class="mb-3">
<a href="#"> <a href="javascript:void(0)">
<span class="badge badge-md text-uppercase bg-warning">AI</span> <span class="badge badge-md text-uppercase bg-warning">AI</span>
</a> </a>
</div> </div>
<a href="#" class="card-title h-2x"> <a href="javascript:void(0)" class="card-title h-2x">
How AI Helps Recruiters Track Jobseekers’ Emotions How AI Helps Recruiters Track Jobseekers’ Emotions
</a> </a>
</div> </div>

16
pages/email.html
View File

@@ -10,31 +10,31 @@ page-title: Crypto currencies
<div> <div>
<div class="list-group list-group-transparent mb-0"> <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"> <a href="javascript:void(0)" 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> <span class="icon mr-3">{% include ui/icon.html icon="inbox" %}</span>Inbox <span class="ml-auto badge bg-blue">14</span>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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 <span class="icon mr-3">{% include ui/icon.html icon="send" %}</span>Sent Mail
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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> <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>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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 <span class="icon mr-3">{% include ui/icon.html icon="star" %}</span>Starred
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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 <span class="icon mr-3">{% include ui/icon.html icon="file" %}</span>Drafts
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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 <span class="icon mr-3">{% include ui/icon.html icon="tag" %}</span>Tags
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"> <a href="javascript:void(0)" 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 <span class="icon mr-3">{% include ui/icon.html icon="trash" %}</span>Trash
</a> </a>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<a href="#" class="btn btn-secondary btn-block">Compose new Email</a> <a href="javascript:void(0)" class="btn btn-secondary btn-block">Compose new Email</a>
</div> </div>
</div> </div>
</div> </div>

6
pages/gallery.html
View File

@@ -11,7 +11,7 @@ done: true
{% assign person = site.data.people[forloop.index0] %} {% assign person = site.data.people[forloop.index0] %}
<div class="col-sm-6 col-lg-4"> <div class="col-sm-6 col-lg-4">
<div class="card p-3"> <div class="card p-3">
<a href="#" class="mb-3"><img src="{{ site.base }}/img/photos/{{photo.file}}" class="rounded"></a> <a href="javascript:void(0)" class="mb-3"><img src="{{ site.base }}/img/photos/{{photo.file}}" class="rounded"></a>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
{% include ui/avatar.html person=person class="mr-2" %} {% include ui/avatar.html person=person class="mr-2" %}
<div> <div>
@@ -19,11 +19,11 @@ done: true
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div> <div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<a href="#" class="text-muted"> <a href="javascript:void(0)" class="text-muted">
{% include ui/icon.html icon="eye" %} {% include ui/icon.html icon="eye" %}
{{ forloop.index | random_number: 300, 600 }} {{ forloop.index | random_number: 300, 600 }}
</a> </a>
<a href="#" class="ml-3 text-muted"> <a href="javascript:void(0)" class="ml-3 text-muted">
{% include ui/icon.html icon="heart" %} {% include ui/icon.html icon="heart" %}
{{ forloop.index | random_number: 20, 100 }} {{ forloop.index | random_number: 20, 100 }}
</a> </a>

2
pages/homepage.html
View File

@@ -16,7 +16,7 @@ page-title: Homepage
<div class="d-flex"> <div class="d-flex">
{% include ui/avatar.html person=person class="mr-3" size="md" %} {% include ui/avatar.html person=person class="mr-3" size="md" %}
<div> <div>
{{ person.first_name }} <a href="#">created a new task</a><br> {{ person.first_name }} <a href="javascript:void(0)">created a new task</a><br>
<div class="text-muted">{{ forloop.index | random_number: 1, 10 }}h ago</div> <div class="text-muted">{{ forloop.index | random_number: 1, 10 }}h ago</div>
</div> </div>
</div> </div>

28
pages/repo.html
View File

@@ -12,18 +12,18 @@ done: true
master master
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">dev</a> <a class="dropdown-item" href="javascript:void(0)">dev</a>
<a class="dropdown-item" href="#">stage</a> <a class="dropdown-item" href="javascript:void(0)">stage</a>
<a class="dropdown-item" href="#">fix/ui-1</a> <a class="dropdown-item" href="javascript:void(0)">fix/ui-1</a>
</div> </div>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<div class="btn-list"> <div class="btn-list">
<a href="#" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="refresh-ccw" %}</a> <a href="javascript:void(0)" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="refresh-ccw" %}</a>
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="eye" class="mr-1" %}Watch</a> <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/icon.html icon="eye" class="mr-1" %}Watch</a>
<a href="#" class="btn btn-success">{% include ui/icon.html icon="download" class="mr-1" %}Clone or download</a> <a href="javascript:void(0)" class="btn btn-success">{% include ui/icon.html icon="download" class="mr-1" %}Clone or download</a>
<a href="#" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="settings" %}</a> <a href="javascript:void(0)" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="settings" %}</a>
</div> </div>
</div> </div>
</div> </div>
@@ -32,12 +32,12 @@ done: true
<div class="d-flex align-items-center w-100"> <div class="d-flex align-items-center w-100">
{% include ui/avatar.html person=person size="xs" class="mr-2" %} {% include ui/avatar.html person=person size="xs" class="mr-2" %}
<div> <div>
<a href="#" class="text-default">{{ person.full_name }}</a> <a href="javascript:void(0)" class="text-default">{{ person.full_name }}</a>
merge pull request merge pull request
<a href="#" class="text-default">#176</a> <a href="javascript:void(0)" class="text-default">#176</a>
from codecalm/dev from codecalm/dev
</div> </div>
<div class="ml-auto">Latest commit <a href="#" class="text-inherit font-semibold">54e9403</a> 4 days ago</div> <div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-inherit font-semibold">54e9403</a> 4 days ago</div>
</div> </div>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
@@ -50,16 +50,16 @@ done: true
{% else %} {% else %}
{% include ui/icon.html icon="file" class="mr-1" %} {% include ui/icon.html icon="file" class="mr-1" %}
{% endif %} {% endif %}
<a href="#" class="text-default">{{ file.name }}</a> <a href="javascript:void(0)" class="text-default">{{ file.name }}</a>
</td> </td>
<td class="text-muted text-nowrap"> <td class="text-muted text-nowrap">
<a href="#" class="text-inherit">{{ file.comment }}</a> <a href="javascript:void(0)" class="text-inherit">{{ file.comment }}</a>
</td> </td>
<td class="text-right text-muted text-nowrap"> <td class="text-right text-muted text-nowrap">
<a href="#" class="text-inherit">{{ file.date }}</a> <a href="javascript:void(0)" class="text-inherit">{{ file.date }}</a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
</div> </div>

10
scss/ui/forms/_input.custom.scss
View File

@@ -35,3 +35,13 @@ Icon input
left: auto; left: auto;
} }
} }
/**
Bootstrap color input
*/
.form-control-color {
&::-webkit-color-swatch {
border: none;
}
}