提交 704f3653 编写于 作者: C codecalm

topnav refactoring

上级 4fb19657
...@@ -25,7 +25,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching ...@@ -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="javascript:void(0)" class="alert-link">check it out</a>! This is a {{ variant.name }} alert — <a href="#" 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 %}
......
...@@ -36,7 +36,7 @@ A small count and labeling component. Please read the [official Bootstrap docume ...@@ -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="javascript:void(0)" class="badge bg-{{ color[0] }}">{{ color[0] }}</a> <a href="#" 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 ...@@ -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="javascript:void(0)" class="badge bg-{{ color[0] }}"></a> <a href="#" class="badge bg-{{ color[0] }}"></a>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -10,7 +10,7 @@ description: Use Bootstrap’s custom button styles for actions in forms, dialog ...@@ -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="javascript:void(0)" class="btn btn-primary" role="button">Link</a> <a href="#" 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 ...@@ -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="javascript:void(0)" class="btn btn-{{ button.name }}">{{ button.title }}</a> <a href="#" class="btn btn-{{ button.name }}">{{ button.title }}</a>
{% endfor %} {% endfor %}
<a href="javascript:void(0)" class="btn btn-link">Link</a> <a href="#" class="btn btn-link">Link</a>
{% endexample %} {% endexample %}
### Disabled buttons ### Disabled buttons
...@@ -45,7 +45,7 @@ The classic button, in different colors. ...@@ -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="javascript:void(0)" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a> <a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
{% endfor %} {% endfor %}
{% endexample %} {% endexample %}
...@@ -163,8 +163,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within ...@@ -163,8 +163,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<i class="icon fe fe-calendar"></i> <i class="icon fe fe-calendar"></i>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
...@@ -173,8 +173,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within ...@@ -173,8 +173,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<i class="icon fe fe-calendar mr-2"></i>Show calendar <i class="icon fe fe-calendar mr-2"></i>Show calendar
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
...@@ -183,8 +183,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within ...@@ -183,8 +183,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
Show calendar Show calendar
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a>
</div> </div>
</div> </div>
{% endexample %} {% endexample %}
...@@ -209,9 +209,9 @@ You can now create a list of buttons with the `.btn-list` container. ...@@ -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="javascript:void(0)" class="btn btn-success">Save changes</a> <a href="#" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a> <a href="#" class="btn btn-secondary">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-danger">Cancel</a> <a href="#" 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 ...@@ -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="javascript:void(0)" class="btn btn-secondary">One</a> <a href="#" class="btn btn-secondary">One</a>
<a href="javascript:void(0)" class="btn btn-secondary">Two</a> <a href="#" class="btn btn-secondary">Two</a>
<a href="javascript:void(0)" class="btn btn-secondary">Three</a> <a href="#" class="btn btn-secondary">Three</a>
<a href="javascript:void(0)" class="btn btn-secondary">Four</a> <a href="#" class="btn btn-secondary">Four</a>
<a href="javascript:void(0)" class="btn btn-secondary">Five</a> <a href="#" class="btn btn-secondary">Five</a>
<a href="javascript:void(0)" class="btn btn-secondary">Six</a> <a href="#" class="btn btn-secondary">Six</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seven</a> <a href="#" class="btn btn-secondary">Seven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eight</a> <a href="#" class="btn btn-secondary">Eight</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nine</a> <a href="#" class="btn btn-secondary">Nine</a>
<a href="javascript:void(0)" class="btn btn-secondary">Ten</a> <a href="#" class="btn btn-secondary">Ten</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eleven</a> <a href="#" class="btn btn-secondary">Eleven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Twelve</a> <a href="#" class="btn btn-secondary">Twelve</a>
<a href="javascript:void(0)" class="btn btn-secondary">Thirteen</a> <a href="#" class="btn btn-secondary">Thirteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fourteen</a> <a href="#" class="btn btn-secondary">Fourteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fifteen</a> <a href="#" class="btn btn-secondary">Fifteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Sixteen</a> <a href="#" class="btn btn-secondary">Sixteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seventeen</a> <a href="#" class="btn btn-secondary">Seventeen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eighteen</a> <a href="#" class="btn btn-secondary">Eighteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nineteen</a> <a href="#" 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. ...@@ -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="javascript:void(0)" class="btn btn-primary">Save changes</a> <a href="#" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a> <a href="#" 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="javascript:void(0)" class="btn btn-primary">Save changes</a> <a href="#" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a> <a href="#" class="btn btn-secondary">Save and continue</a>
</div> </div>
{% endexample %} {% endexample %}
### Button with avatar ### Button with avatar
{% example html%} {% example html%}
<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="4" 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="5" 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> <a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
{% endexample %} {% endexample %}
...@@ -95,14 +95,14 @@ You can also add the image on the left side of the card. All you need do to is: ...@@ -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="javascript:void(0)"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a> <a href="#"><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="javascript:void(0)" class="card-title text-md"> <a href="#" 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: ...@@ -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="javascript:void(0)"> <a href="#">
<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="javascript:void(0)" class="card-title h-2x"> <a href="#" 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: ...@@ -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="javascript:void(0)"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a> <a href="#"><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="javascript:void(0)" class="card-title text-md"> <a href="#" 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>
......
...@@ -167,14 +167,14 @@ title: Form Elements ...@@ -167,14 +167,14 @@ title: Form Elements
<button data-toggle="dropdown" type="button" <button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button> class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
News News
</a> </a>
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
Messages Messages
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
Edit Profile Edit Profile
</a> </a>
</div> </div>
...@@ -276,11 +276,11 @@ title: Form Elements ...@@ -276,11 +276,11 @@ title: Form Elements
Action Action
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<input type="text" class="form-control" aria-label="Text input with dropdown button"> <input type="text" class="form-control" aria-label="Text input with dropdown button">
......
...@@ -3,13 +3,13 @@ ...@@ -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="javascript:void(0)">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -4,8 +4,8 @@ ...@@ -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="javascript:void(0)" class="btn btn-secondary btn-sm">Button</a> <a href="#" class="btn btn-secondary btn-sm">Button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-sm">Button</a> <a href="#" class="btn btn-primary btn-sm">Button</a>
</div> </div>
</div> </div>
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
</ul> </ul>
<div class="card-body"> <div class="card-body">
<a href="javascript:void(0)" class="card-link">Card link</a> <a href="#" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a> <a href="#" class="card-link">Another link</a>
</div> </div>
<div class="progress card-progress"> <div class="progress card-progress">
......
...@@ -7,7 +7,7 @@ ...@@ -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="javascript:void(0)">Set up client chat channel</a> <strong class="text-body">Martin</strong> completed the task <a href="#">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 @@ ...@@ -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="javascript:void(0)">Let's make Tabler awesome!</a> <strong class="text-body">Kate</strong> added the task <a href="#">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>
......
...@@ -21,14 +21,14 @@ ...@@ -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="javascript:void(0)" data-toggle="tooltip" data-placement="top" title="Vote Up">{% include 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="javascript:void(0)" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down"> <a href="#" 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="javascript:void(0)" class="mr-1 text-muted">Reply</a> <a href="#" class="mr-1 text-muted">Reply</a>
<span class="mr-1">·</span> <span class="mr-1">·</span>
<a href="javascript:void(0)" class="text-muted">Edit</a> <a href="#" class="text-muted">Edit</a>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -13,7 +13,7 @@ ...@@ -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="javascript:void(0)" class="text-reset">{{ person.full_name }}</a></td> <td><a href="#" class="text-reset">{{ 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>
......
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
<ul class="list-unstyled"> <ul class="list-unstyled">
<li class="mb-5"> <li class="mb-5">
<a href="javascript:void(0)">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a> <a href="#">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 @@ ...@@ -73,7 +73,7 @@
</div> </div>
</li> </li>
<li class="mb-5"> <li class="mb-5">
<a href="javascript:void(0)">Holiday performance propels Amazon to stellar quarter results</a> <a href="#">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 @@ ...@@ -82,7 +82,7 @@
</div> </div>
</li> </li>
<li class="mb-5"> <li class="mb-5">
<a href="javascript:void(0)">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a> <a href="#">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 @@ ...@@ -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="javascript:void(0)">crunchbase.com/organization/amazon</a> <a href="#">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="javascript:void(0)">twitter.com/amazon</a> <a href="#">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="javascript:void(0)">facebook.com/amazon</a> <a href="#">facebook.com/amazon</a>
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -2,11 +2,11 @@ ...@@ -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="javascript:void(0)"> <a href="#">
{% 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="javascript:void(0)">{{ person.full_name }}</a> <a href="#">{{ 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 @@ ...@@ -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="javascript:void(0)" class="text-muted"> <a href="#" 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="javascript:void(0)" class="text-muted"> <a href="#" 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 @@ ...@@ -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="javascript:void(0)" class="text-muted">{% include ui/icon.html icon="image" %}</a> <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="video" %}</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="map-pin" %}</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="paperclip" %}</a> <a href="#" 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>
......
<div class="card"> <div class="card">
<a href="javascript:void(0)"> <a href="#">
<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="javascript:void(0)" class="text-muted"> <a href="#" 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 @@ ...@@ -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="javascript:void(0)" class="btn btn-primary">See more</a> <a href="#" class="btn btn-primary">See more</a>
</div> </div>
</div> </div>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<td>{{ invoice.price }}</td> <td>{{ invoice.price }}</td>
<td class="text-right"> <td class="text-right">
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a> <a href="#" class="btn btn-secondary btn-sm">Manage</a>
<span class="dropdown"> <span class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button> <button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
</span> </span>
......
...@@ -14,7 +14,7 @@ ...@@ -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="javascript:void(0)" class="text-muted">{% include 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.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>
......
...@@ -29,11 +29,11 @@ ...@@ -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="javascript:void(0)" class="text-muted"> <a href="#" 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="javascript:void(0)" class="text-muted"> <a href="#" class="text-muted">
{% include ui/icon.html icon="users" %} {% include ui/icon.html icon="users" %}
51 51
</a> </a>
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</ul> </ul>
<div class="text-center mt-6"> <div class="text-center mt-6">
<a href="javascript:void(0)" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a> <a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -8,17 +8,17 @@ ...@@ -8,17 +8,17 @@
<ul class="social-links list-inline mb-0 mt-2"> <ul class="social-links list-inline mb-0 mt-2">
<li class="list-inline-item"> <li class="list-inline-item">
<a href="javascript:void(0)" title="Facebook" data-toggle="tooltip"> <a href="#" title="Facebook" data-toggle="tooltip">
{% include ui/icon.html icon="facebook" %} {% include ui/icon.html icon="facebook" %}
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="javascript:void(0)" title="Twitter" data-toggle="tooltip"> <a href="#" title="Twitter" data-toggle="tooltip">
{% include ui/icon.html icon="twitter" %} {% include ui/icon.html icon="twitter" %}
</a> </a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="javascript:void(0)" title="1234567890" data-toggle="tooltip"> <a href="#" title="1234567890" data-toggle="tooltip">
{% include ui/icon.html icon="phone" %} {% include ui/icon.html icon="phone" %}
</a> </a>
</li> </li>
......
...@@ -2,11 +2,11 @@ ...@@ -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="javascript:void(0)" class="text-muted"> <a href="#" class="text-muted">
{% include ui/icon.html icon="file" %} {% include ui/icon.html icon="file" %}
24 Files 24 Files
</a> </a>
<a href="javascript:void(0)" class="text-muted"> <a href="#" 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>
......
...@@ -13,7 +13,7 @@ ...@@ -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="javascript:void(0)">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6> <h6 class="h4 mb-3"><a href="#">{{ 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" %}
......
...@@ -11,7 +11,7 @@ ...@@ -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="javascript:void(0)"> <a href="#">
{% 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">
......
...@@ -5,7 +5,7 @@ ...@@ -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="javascript:void(0)" class="d-flex align-items-center text-reset"> <a href="#" class="d-flex align-items-center text-reset">
{% 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>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="mb-4 text-center"> <div class="mb-4 text-center">
<img src="{{ site.base }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid"> <img src="{{ site.base }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
</div> </div>
<h4 class="card-title"><a href="javascript:void(0)">{{ product.name }}</a></h4> <h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
<div class="text-muted"> <div class="text-muted">
{{ product.producer }} {{ product.producer }}
</div> </div>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<strong>{{ product.price }}</strong> <strong>{{ product.price }}</strong>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<a href="javascript:void(0)" class="btn btn-primary">{% include 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> </div>
</div> </div>
......
...@@ -8,7 +8,7 @@ ...@@ -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="javascript:void(0)">{{ person.full_name }}</a> <a href="#">{{ 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 @@ ...@@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<a href="javascript:void(0)" class="btn btn-sm btn-secondary d-none d-md-inline-block"> <a href="#" class="btn btn-sm btn-secondary d-none d-md-inline-block">
Subscribe Subscribe
</a> </a>
</div> </div>
......
...@@ -28,13 +28,13 @@ ...@@ -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="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</li> </li>
{% endif %} {% endif %}
......
...@@ -13,17 +13,17 @@ ...@@ -13,17 +13,17 @@
</label> </label>
</td> </td>
<td class="w-100"> <td class="w-100">
<a href="javascript:void(0)" class="text-reset">{{ task.name }}</a> <a href="#" class="text-reset">{{ task.name }}</a>
</td> </td>
<td class="text-nowrap text-muted"> <td class="text-nowrap text-muted">
{% 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="javascript:void(0)" class="text-muted">{% include 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>
<td class="text-nowrap"> <td class="text-nowrap">
<a href="javascript:void(0)" class="text-muted">{% include 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>
<td> <td>
{% include ui/avatar.html person-id=forloop.index size="sm" %} {% include ui/avatar.html person-id=forloop.index size="sm" %}
......
...@@ -5,6 +5,6 @@ ...@@ -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="javascript:void(0)" class="btn btn-primary">Find out more</a> <a href="#" class="btn btn-primary">Find out more</a>
</div> </div>
</div> </div>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div class="list-timeline-content"> <div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div> <div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p> <p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p> <p class="text-muted">Download the <a href="#">latest backup</a>.</p>
</div> </div>
</li> </li>
<li> <li>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<div class="list-timeline-content"> <div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div> <div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p> <p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity <p class="text-muted">Check the complete changelog at the <a href="#">activity
page</a>.</p> page</a>.</p>
</div> </div>
</li> </li>
......
...@@ -7,13 +7,13 @@ ...@@ -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="javascript:void(0)"> <a href="#">
{% 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="javascript:void(0)" class="text-body">{{ person.full_name }}</a> <a href="#" class="text-body">{{ person.full_name }}</a>
<a href="javascript:void(0)" class="text-muted leading-none"> <a href="#" class="text-muted leading-none">
{{ person.company }} {{ person.company }}
</a> </a>
</div> </div>
......
{% 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="javascript:void(0)"> <a class="card card-link" href="#">
<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,5 +8,5 @@ ...@@ -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="javascript:void(0)" class="card-btn">View full profile</a> <a href="#" class="card-btn">View full profile</a>
</div> </div>
{% 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="javascript:void(0)"> <a class="card card-link" href="#">
<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 %}
......
...@@ -4,16 +4,16 @@ ...@@ -4,16 +4,16 @@
<div class="card"> <div class="card">
<div class="card-body text-center"> <div class="card-body text-center">
<a href="javascript:void(0)"> <a href="#">
{% 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="javascript:void(0)" class="text-muted"> <a href="#" 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="javascript:void(0)" class="text-muted"> <a href="#" class="text-muted">
{% include ui/icon.html icon="briefcase" %} {% include ui/icon.html icon="briefcase" %}
{{ p.job_title }} {{ p.job_title }}
</a> </a>
......
...@@ -5,7 +5,7 @@ ...@@ -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="javascript:void(0)"> <a href="#">
{% 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 @@ ...@@ -21,8 +21,8 @@
officiis.</p> officiis.</p>
<div class="d-flex"> <div class="d-flex">
<a href="javascript:void(0)" class="btn btn-block btn-primary">View profile</a> <a href="#" class="btn btn-block btn-primary">View profile</a>
<a href="javascript:void(0)" class="btn btn-secondary btn-icon ml-3"> <a href="#" class="btn btn-secondary btn-icon ml-3">
{% include ui/icon.html icon="user" %} {% include ui/icon.html icon="user" %}
</a> </a>
</div> </div>
......
...@@ -45,14 +45,14 @@ ...@@ -45,14 +45,14 @@
<button data-toggle="dropdown" type="button" <button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button> class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
News News
</a> </a>
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
Messages Messages
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"> <a class="dropdown-item" href="#">
Edit Profile Edit Profile
</a> </a>
</div> </div>
......
...@@ -27,11 +27,11 @@ ...@@ -27,11 +27,11 @@
Action Action
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div> <div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</div> </div>
<input type="text" class="form-control" aria-label="Text input with dropdown button"> <input type="text" class="form-control" aria-label="Text input with dropdown button">
......
<div class="debug"> <div class="debug">
<a href="javascript:void(0)" data-debug="dark">Dark mode</a> <a href="#" data-debug="dark">Dark mode</a>
<a href="javascript:void(0)" data-debug="rtl">RTL mode</a> <a href="#" data-debug="rtl">RTL mode</a>
<a href="javascript:void(0)" data-debug="code">Show cards code</a> <a href="#" data-debug="code">Show cards code</a>
<a href="javascript:void(0)" data-debug="folded">Folded sidebar</a> <a href="#" data-debug="folded">Folded sidebar</a>
<a href="javascript:void(0)" data-debug="fullscreen">Fullscreen</a> <a href="#" data-debug="fullscreen">Fullscreen</a>
<a href="javascript:void(0)" data-debug="header-sticky">Sticky header</a> <a href="#" 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 @@ ...@@ -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="javascript:void(0)" class="text-muted" data-code>code</a></div>'), var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
$codeLink = $button.find('[data-code]'); $codeLink = $button.find('[data-code]');
$codeLink $codeLink
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
{% for level-1 in site.data.menu %} {% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %} {% assign icon = level-1[1].icon %}
<li class="nav-item"> <li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %}dropdown{% endif %}">
<a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}> <a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
<span class="nav-icon"> <span class="nav-icon">
{% include ui/icon.html icon=icon %} {% include ui/icon.html icon=icon %}
</span> </span>
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
{% for d in site.data.docs %} {% for d in site.data.docs %}
{% assign doc = site.docs | where: "slug", d.page | first %} {% assign doc = site.docs | where: "slug", d.page | first %}
{% if doc %} {% if doc %}
<li class="nav-item"> <li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}"> <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
<span class="nav-text"> <span class="nav-text">
{{ doc.title }} {{ doc.title }}
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
{% endif %} {% endif %}
{% for level-2 in level-1[1].children %} {% for level-2 in level-1[1].children %}
<li class="nav-item"> <li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}">
<a class="nav-link{% if level-2[0] == current-page[1] %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}> <a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
<span class="nav-text"> <span class="nav-text">
{{ level-2[1].title }} {{ level-2[1].title }}
{% if level-2[1].label %} {% if level-2[1].label %}
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
<div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}"> <div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}">
<ul class="nav nav-sm flex-column"> <ul class="nav nav-sm flex-column">
{% for level-3 in level-2[1].children %} {% for level-3 in level-2[1].children %}
<li class="nav-item"> <li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
<a class="nav-link{% if level-3[0] == current-page[2] %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}> <a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
<span class="nav-text"> <span class="nav-text">
{{ level-3[1].title }} {{ level-3[1].title }}
{% if level-3[1].label %} {% if level-3[1].label %}
...@@ -70,8 +70,8 @@ ...@@ -70,8 +70,8 @@
<div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}"> <div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column"> <ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %} {% for level-4 in level-3[1].children %}
<li class="nav-item"> <li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
<a class="nav-link{% if level-4[0] == current-page[3] %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}"> <a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
<span class="nav-text"> <span class="nav-text">
{{ level-4[1].title }} {{ level-4[1].title }}
{% if level-4[1].label %} {% if level-4[1].label %}
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a href="javascript:void(0)" class="nav-link"> <a href="#" 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>
......
<div class="d-none d-lg-block navbar navbar-expand-md"> <div class="d-none d-lg-block navbar {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %} navbar-expand-lg">
<div class="container"> <div class="container">
{% include layout/menu.html top=true %} {% include layout/menu.html top=true %}
</div> </div>
......
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %} js-header"> <header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark fluid=include.fluid %} <div class="container{% if include.fluid %} container-fluid{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
</div>
</header> </header>
...@@ -34,7 +34,7 @@ ...@@ -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="javascript:void(0)" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a> <a href="#" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
......
<div class="dropdown"> <div class="dropdown">
<a class="dropdown-toggle text-muted" href="javascript:void(0)" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="dropdown-toggle text-muted" href="#" 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="javascript:void(0)">Last 7 days</a> <a class="dropdown-item active" href="#">Last 7 days</a>
<a class="dropdown-item" href="javascript:void(0)">Last 30 days</a> <a class="dropdown-item" href="#">Last 30 days</a>
<a class="dropdown-item" href="javascript:void(0)">Last 3 months</a> <a class="dropdown-item" href="#">Last 3 months</a>
</div> </div>
</div> </div>
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
{% assign person = site.data.people | where: "id", include.person %} {% assign person = site.data.people | where: "id", include.person %}
{% assign person = person[0] %} {% assign person = person[0] %}
<div class="container{% if include.fluid %}-fluid{% endif %}">
<a class="navbar-toggler" data-toggle="modal" data-target="#aside"> <a class="navbar-toggler" data-toggle="modal" data-target="#aside">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</a> </a>
...@@ -17,38 +16,15 @@ ...@@ -17,38 +16,15 @@
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %} {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a> </a>
{% if include.plus-left %}
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
</a>
{% endif %}
<ul class="nav navbar-menu align-items-center order-1 order-lg-2"> <ul class="nav navbar-menu align-items-center order-1 order-lg-2">
{% if include.fullscreen %}
<li class="nav-item d-none d-sm-block">
<a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
{% include ui/icon.html icon="maximize" %}
</a>
</li>
{% endif %}
{% if include.customize %}
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="droplet" %}
<span class="badge badge-pill badge-up bg-success"></span>
</a>
</li>
{% endif %}
{% if include.notifications %} {% if include.notifications %}
<!-- Notification --> <li class="nav-item dropdown mr-3">
<li class="nav-item dropdown"> <a class="nav-link text-reset px-2" data-toggle="dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %} {% include ui/icon.html icon="bell" %}
<span class="badge badge-pill badge-up bg-primary">4</span> <span class="badge badge-pill badge-up bg-primary">4</span>
</a> </a>
<div class="dropdown-menu dropdown-menu-right mt-3 p-0"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
<div class="scrollable"> <div class="scrollable">
<div class="list list-row"> <div class="list list-row">
</div> </div>
...@@ -63,28 +39,6 @@ ...@@ -63,28 +39,6 @@
</li> </li>
{% endif %} {% endif %}
{% if include.progress %}
<li class="nav-item">
<a href="#" class="nav-link text-muted">
Profile Completeness: 70%
</a>
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
</li>
{% endif %}
<li class="nav-item d-none d-lg-flex mr-3"> <li class="nav-item d-none d-lg-flex mr-3">
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a> <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li> </li>
...@@ -92,23 +46,12 @@ ...@@ -92,23 +46,12 @@
{% 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="#" 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-reset ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %} {% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none"> <span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span> {{ person.full_name }}
<span class="text-muted d-block mt-1 text-h6">Administrator</span> <span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span> </span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-body">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %}
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 4 %}
<span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
{% 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="#">
...@@ -118,8 +61,8 @@ ...@@ -118,8 +61,8 @@
{% 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="#">
<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
<span class="badge bg-primary ml-auto">6</span>
</a> </a>
<a class="dropdown-item" href="#"> <a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
...@@ -172,4 +115,3 @@ ...@@ -172,4 +115,3 @@
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div>
...@@ -2,7 +2,7 @@ ...@@ -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="javascript:void(0)" tabindex="-1"> <a class="page-link" href="#" 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 @@ ...@@ -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="javascript:void(0)">{{ i }}</a></li> <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ 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="javascript:void(0)"> <a class="page-link" href="#">
{% if include.next-description %} {% if include.next-description %}
<div class="page-item-subtitle">Next</div> <div class="page-item-subtitle">Next</div>
......
...@@ -5,9 +5,9 @@ ...@@ -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="javascript:void(0)" class="btn btn-success">Save changes</a> <a href="#" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Cancel</a> <a href="#" class="btn btn-secondary">Cancel</a>
</div> </div>
{% endif %} {% endif %}
{% if include.close %}<a href="javascript:void(0)" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %} {% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
</div> </div>
...@@ -2,9 +2,9 @@ ...@@ -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="javascript:void(0)">{{ page }}</a></li> <li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li>
{% else %} {% else %}
<li class="breadcrumb-item"><a href="javascript:void(0)">{{ page }}</a></li> <li class="breadcrumb-item"><a href="#">{{ page }}</a></li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ol> </ol>
...@@ -4,7 +4,7 @@ ...@@ -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="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 %} <{{ 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 %}
Step {{ i }} Step {{ i }}
{% endif %}</{{ elem }}> {% endif %}</{{ elem }}>
{% endfor %} {% endfor %}
......
...@@ -3,7 +3,7 @@ layout: base ...@@ -3,7 +3,7 @@ layout: base
--- ---
<div class="d-flex flex-row h-100p"> <div class="d-flex flex-row h-100p">
{% include layout/sidenav.html dark=true folded=false fixed=true %} {% comment %}{% include layout/sidenav.html dark=true folded=false fixed=true %}{% endcomment %}
<div class="layout-main d-flex flex-column flex-fill max-w-full"> <div class="layout-main d-flex flex-column flex-fill max-w-full">
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %} {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
......
...@@ -12,7 +12,7 @@ def render_rouge(code, lang, dark = false) ...@@ -12,7 +12,7 @@ def render_rouge(code, lang, dark = false)
code = formatter.format(lexer.lex(code)) code = formatter.format(lexer.lex(code))
code = code.strip.gsub /^[\t\s]*$\n/, '' code = code.strip.gsub /^[\t\s]*$\n/, ''
code = code.gsub /\t/, "\s\s\s" code = code.gsub /\t/, "\s\s\s"
code = code.gsub "javascript:void(0)", "#" code = code.gsub "#", "#"
code = code.gsub "../", "./" code = code.gsub "../", "./"
"<pre>#{code}</pre>" "<pre>#{code}</pre>"
......
...@@ -10,31 +10,31 @@ page-title: Crypto currencies ...@@ -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="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center active"> <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> <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="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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 <span class="icon mr-3">{% include ui/icon.html icon="send" %}</span>Sent Mail
</a> </a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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> <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="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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 <span class="icon mr-3">{% include ui/icon.html icon="star" %}</span>Starred
</a> </a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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 <span class="icon mr-3">{% include ui/icon.html icon="file" %}</span>Drafts
</a> </a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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 <span class="icon mr-3">{% include ui/icon.html icon="tag" %}</span>Tags
</a> </a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action d-flex align-items-center"> <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 <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="javascript:void(0)" class="btn btn-secondary btn-block">Compose new Email</a> <a href="#" class="btn btn-secondary btn-block">Compose new Email</a>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -34,7 +34,7 @@ menu: forms ...@@ -34,7 +34,7 @@ menu: forms
</div> </div>
<div class="card-footer text-right"> <div class="card-footer text-right">
<div class="d-flex"> <div class="d-flex">
<a href="javascript:void(0)" class="btn btn-link">Cancel</a> <a href="#" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button> <button type="submit" class="btn btn-primary ml-auto">Send data</button>
</div> </div>
......
...@@ -19,11 +19,11 @@ done: true ...@@ -19,11 +19,11 @@ done: true
<small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small> <small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small>
</div> </div>
<div class="ml-auto"> <div class="ml-auto">
<a href="javascript:void(0)" class="text-muted"> <a href="#" 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="javascript:void(0)" class="ml-3 text-muted"> <a href="#" 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>
......
...@@ -15,7 +15,7 @@ page-title-actions: home ...@@ -15,7 +15,7 @@ page-title-actions: home
<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="javascript:void(0)">created a new task</a><br> {{ person.first_name }} <a href="#">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>
......
---
title: Repository
done: true
---
{% assign person = site.data.people[0] %}
<div class="card">
<div class="card-header">
<div class="d-flex w-100">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
{% include ui/icon.html icon="git-branch" %}
master
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">dev</a>
<a class="dropdown-item" href="javascript:void(0)">stage</a>
<a class="dropdown-item" href="javascript:void(0)">fix/ui-1</a>
</div>
</div>
<div class="ml-auto">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="refresh-ccw" %}</a>
<a href="javascript:void(0)" class="btn btn-secondary">{% include ui/icon.html icon="eye" class="mr-1" %}Watch</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="javascript:void(0)" class="btn btn-secondary btn-icon">{% include ui/icon.html icon="settings" %}</a>
</div>
</div>
</div>
</div>
<div class="card-header text-muted">
<div class="d-flex align-items-center w-100">
{% include ui/avatar.html person=person size="xs" class="mr-2" %}
<div>
<a href="javascript:void(0)" class="text-body">{{ person.full_name }}</a>
merge pull request
<a href="javascript:void(0)" class="text-body">#176</a>
from codecalm/dev
</div>
<div class="ml-auto">Latest commit <a href="javascript:void(0)" class="text-reset font-semibold">54e9403</a> 4 days ago</div>
</div>
</div>
<div class="table-responsive">
<table class="table card-table">
{% for file in site.data.files %}
<tr>
<td class="text-nowrap">
{% if file.type == "directory" %}
{% include ui/icon.html icon="folder" class="mr-1" %}
{% else %}
{% include ui/icon.html icon="file" class="mr-1" %}
{% endif %}
<a href="javascript:void(0)" class="text-body">{{ file.name }}</a>
</td>
<td class="text-muted text-nowrap">
<a href="javascript:void(0)" class="text-reset">{{ file.comment }}</a>
</td>
<td class="text-right text-muted text-nowrap">
<a href="javascript:void(0)" class="text-reset">{{ file.date }}</a>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
---
title: Timeline
page-title: Timeline
done: true
---
<div class="row">
<div class="col-lg-8">
{% include cards/timeline.html %}
</div>
<div class="col-lg-4">
{% include cards/timeline.html simple=true title="Simple timeline" %}
</div>
</div>
---
layout: default
---
<div id="element" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{% include ui/avatar.html person=1 size="xs" class="mr-2" %}
<strong class="mr-auto">Bootstrap</strong>
<small>{{ include.time | default: '11 mins ago' }}</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div id="element2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{% include ui/avatar.html person=1 size="xs" class="mr-2" %}
<strong class="mr-auto">Bootstrap</strong>
<small>{{ include.time | default: '11 mins ago' }}</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
{% include ui/icon.html icon="x" %}
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
$(document).ready(function(){
$('#element, #element2').toast({
delay: 5000,
autohide: false
}).toast('show');
});
</script>
---
title: Tracks demo
---
{% card %}
<table>
{% for track in site.data.tracks %}
<tr>
<td>{{ forloop.index }}</td>
<td>{{ track.name }}</td>
<td><img src="{{ site.base }}/img/tracks/{{ track.album.images[2].path }}" alt=""></td>
<td>{{ track.artists[0].name }}</td>
<td>{{ track.duration_ms | divided_by: 1000 }} s.</td>
</tr>
{% endfor %}
</table>
{% endcard %}
@import "mixins/mixins";
@import "mixins/functions"; @import "mixins/functions";
@import "mixins/container-breakpoints"; @import "mixins/container-breakpoints";
...@@ -43,6 +43,14 @@ $white: #ffffff !default; ...@@ -43,6 +43,14 @@ $white: #ffffff !default;
$light: #f5f7fb !default; $light: #f5f7fb !default;
$dark: #354052 !default; $dark: #354052 !default;
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$body-bg: $light !default; $body-bg: $light !default;
$body-color: $dark !default; $body-color: $dark !default;
...@@ -230,7 +238,7 @@ $card-border-color: $border-color !default; ...@@ -230,7 +238,7 @@ $card-border-color: $border-color !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-cap-bg: $min-black !default; $card-cap-bg: $min-black !default;
$card-active-border-color: $blue !default; $card-active-border-color: $primary !default;
$card-status-size: 2px !default; $card-status-size: 2px !default;
$card-group-margin: 1.5rem !default; $card-group-margin: 1.5rem !default;
...@@ -277,6 +285,9 @@ $sidenav-link-padding-x: .75rem !default; ...@@ -277,6 +285,9 @@ $sidenav-link-padding-x: .75rem !default;
$navbar-padding-x: .75rem !default; $navbar-padding-x: .75rem !default;
$navbar-padding-y: .75rem !default; $navbar-padding-y: .75rem !default;
$navbar-nav-link-padding-x: .75rem !default; $navbar-nav-link-padding-x: .75rem !default;
$navbar-light-color: $text-muted !default;
$navbar-light-active-color: $primary !default;
$navbar-light-hover-color: $body-color !default;
//steps //steps
$steps-border-width: 2px !default; $steps-border-width: 2px !default;
......
.navbar { .navbar {
border-bottom: 1px solid; border-bottom: 1px solid;
background-color: $navbar-bg; background-color: $navbar-bg;
border-color: $navbar-border-color; border-color: $navbar-border-color;
.nav-link {
color: inherit;
white-space: nowrap;
}
}
.navbar-nav {
flex-direction: row;
margin-right: -($navbar-padding-x);
margin-left: -($navbar-padding-x);
.nav-link {
display: flex;
color: $text-muted;
transition: .3s color;
&:hover {
color: $body-color;
}
}
.nav-item {
position: relative;
}
.navbar-nav {
padding-right: .5rem;
padding-left: .5rem;
}
}
.navbar:not(.navbar-side) .navbar-subnav {
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-tooltip;
width: 12rem;
padding: .25rem;
font-size: $h5-font-size;
background: #fff;
border: 1px solid $border-color;
border-radius: 3px;
box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
.nav {
flex-direction: column;
}
} }
/** /**
Navbar brand Navbar logo
*/ */
.navbar-brand {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
@at-root a#{&} {
transition: .3s opacity;
&:hover {
opacity: .8;
}
}
}
.navbar-brand-logo { .navbar-brand-logo {
height: 2rem; height: 2rem;
} }
/** //.nav-link {
Navbar toggler // &.active {
*/ // color: $primary;
.navbar-toggler { // }
padding: 0; //}
border: 0; //
} .navbar-nav {
flex-direction: row;
/* margin-right: -($navbar-padding-x);
Sidebar margin-left: -($navbar-padding-x);
*/
.navbar-side {
flex-direction: column;
flex-wrap: nowrap;
align-items: inherit;
justify-content: start;
width: $sidenav-width;
min-width: $sidenav-width;
margin: 0;
overflow: auto;
pointer-events: inherit;
user-select: none;
background: $sidenav-bg;
border-right: 1px solid $sidenav-border-color;
.nav {
flex-direction: column;
}
.nav-link {
display: flex;
align-items: center;
height: 2.5rem;
padding: 0 $navbar-padding-x;
color: $text-muted;
box-shadow: inset 2px 0 0 0 transparent;
transition: .3s background, .3s box-shadow;
&[aria-expanded="true"],
&:hover {
background: rgba($link-color, .04);
border-color: $primary;
box-shadow: inset 2px 0 0 0 $primary;
}
> .icon {
width: 2rem;
}
&[data-toggle="collapse"] {
&::after {
display: block;
margin-left: auto;
font-family: $font-icons !important;
content: "";
transition: transform .3s;
}
&[aria-expanded="true"]::after {
transform: rotate(-180deg);
}
}
}
&:not(.navbar-folded) {
&[data-toggle="collapse"][aria-expanded="true"] {
background: none;
box-shadow: none;
}
}
&:not(.hide-navbar-folded) {
//.nav-item .nav-item .nav-link {
// padding-left: 2.5rem;
//}
//
//.nav-item .nav-item .nav-item .nav-link {
// padding-left: 3.5rem;
//}
//
//.nav-item .nav-item .nav-item .nav-item .nav-link {
// padding-left: 4.5rem;
//}
}
.navbar-brand {
height: 2.5rem;
text-align: center;
}
.navbar-heading {
@extend .subheader;
margin: 0 0 .5rem;
}
.navbar-nav {
flex-direction: column;
}
}
/*
Fixed navbar
*/
.navbar-fixed {
position: fixed;
top: 0;
bottom: 0;
z-index: $zindex-sticky;
+ .navbar-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-dropdown;
display: none;
background: rgba($dark, .2);
}
&.navbar-side {
top: 0;
bottom: 0;
left: 0;
&.navbar-right {
right: 0;
left: auto;
}
}
}
.navbar-side {
display: none;
@include media-breakpoint-up(xl) {
display: flex;
&.navbar-fixed {
& ~ .layout-main {
margin-left: $sidenav-width;
}
&.navbar-right ~ .layout-main {
margin-right: $sidenav-width;
margin-left: 0;
}
}
}
&.navbar-folded {
display: flex;
&.navbar-fixed {
@include media-breakpoint-up(lg) {
& ~ .layout-main {
margin-left: $sidenav-folded-width;
}
&.navbar-right ~ .layout-main {
margin-right: $sidenav-folded-width;
margin-left: 0;
}
}
}
}
}
/*
Right navbar
*/
.navbar-right {
order: 9;
border-right: none;
border-left: 1px solid $sidenav-border-color;
}
/*
Dark navbar
*/
.navbar-dark {
color: #fff;
background-color: $sidenav-dark-bg;
.navbar-brand {
filter: brightness(0) invert(1);
}
.navbar-divider {
border-color: rgba(#fff, .2);
}
.nav-link {
color: inherit;
}
}
/**
Sticky navbar
*/
.navbar-sticky {
position: sticky;
top: 0;
z-index: 100;
&.navbar-side {
left: 0;
}
}
/**
Folded navbar
*/
.navbar-folded {
width: $sidenav-folded-width;
min-width: $sidenav-folded-width;
.navbar-brand {
width: 2.5rem;
}
.navbar-heading {
display: none;
}
.nav-text {
display: none;
}
.nav-link {
justify-content: center;
padding-top: 0;
padding-bottom: 0;
&[data-toggle="collapse"]::after {
content: none;
}
}
.nav-icon {
justify-content: center;
opacity: 1;
}
.navbar-subnav { .nav-item.active .nav-link {
position: absolute; position: relative;
top: 0;
left: 100%;
background: #fff;
.nav-text { &:before {
display: block; content: '';
} position: absolute;
.nav-link { bottom: calc(-#{$navbar-padding-y} - 1px);
color: $body-color; right: $navbar-nav-link-padding-x;
left: $navbar-nav-link-padding-x;
border-bottom: 1px solid $primary;
} }
} }
}
.nav-icon {
display: flex;
flex-shrink: 0;
align-items: center;
width: 1.5rem;
font-size: px2rem(15px);
border-radius: 100%;
opacity: .8;
.icon {
font-size: inherit;
}
}
.nav-text {
display: flex;
align-items: center;
width: 100%;
}
/** //
Utils // .nav-link {
*/ // display: flex;
.hide-navbar-folded { // color: $text-muted;
@at-root .navbar-side.navbar-folded & { // transition: .3s color;
display: none; //
} // &:hover {
// color: $body-color;
// }
// }
//
// .nav-item {
// position: relative;
// }
//
// .navbar-nav {
// padding-right: .5rem;
// padding-left: .5rem;
// }
} }
.hide-navbar-expanded {
@at-root .navbar-side:not(.navbar-folded) & {
display: none;
}
}
//.navbar:not(.navbar-side) .navbar-subnav {
// position: absolute;
// top: 100%;
// left: 0;
// z-index: $zindex-tooltip;
// width: 12rem;
// padding: .25rem;
// font-size: $h5-font-size;
// background: #fff;
// border: 1px solid $border-color;
// border-radius: 3px;
// box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
//
// .nav {
// flex-direction: column;
// }
//}
//
///**
//Navbar brand
// */
//.navbar-brand {
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 0;
// margin: 0;
//
// @at-root a#{&} {
// transition: .3s opacity;
//
// &:hover {
// opacity: .8;
// }
// }
//}
//
//.navbar-brand-logo {
// height: 2rem;
//}
//
///**
//Navbar toggler
// */
//.navbar-toggler {
// padding: 0;
// border: 0;
//}
//
///*
//Sidebar
// */
//.navbar-side {
// flex-direction: column;
// flex-wrap: nowrap;
// align-items: inherit;
// justify-content: start;
// width: $sidenav-width;
// min-width: $sidenav-width;
// margin: 0;
// overflow: auto;
// pointer-events: inherit;
// user-select: none;
// background: $sidenav-bg;
// border-right: 1px solid $sidenav-border-color;
//
// .nav {
// flex-direction: column;
// }
//
// .nav-link {
// display: flex;
// align-items: center;
// height: 2.5rem;
// padding: 0 $navbar-padding-x;
// color: $text-muted;
// box-shadow: inset 2px 0 0 0 transparent;
// transition: .3s background, .3s box-shadow;
//
// &[aria-expanded="true"],
// &:hover {
// background: rgba($link-color, .04);
// border-color: $primary;
// box-shadow: inset 2px 0 0 0 $primary;
// }
//
// > .icon {
// width: 2rem;
// }
//
// &[data-toggle="collapse"] {
// &::after {
// display: block;
// margin-left: auto;
// font-family: $font-icons !important;
// content: "";
// transition: transform .3s;
// }
//
// &[aria-expanded="true"]::after {
// transform: rotate(-180deg);
// }
// }
// }
//
// &:not(.navbar-folded) {
// &[data-toggle="collapse"][aria-expanded="true"] {
// background: none;
// box-shadow: none;
// }
// }
//
// &:not(.hide-navbar-folded) {
// //.nav-item .nav-item .nav-link {
// // padding-left: 2.5rem;
// //}
// //
// //.nav-item .nav-item .nav-item .nav-link {
// // padding-left: 3.5rem;
// //}
// //
// //.nav-item .nav-item .nav-item .nav-item .nav-link {
// // padding-left: 4.5rem;
// //}
// }
//
// .navbar-brand {
// height: 2.5rem;
// text-align: center;
// }
//
// .navbar-heading {
// @include subheader;
// margin: 0 0 .5rem;
// }
//
// .navbar-nav {
// flex-direction: column;
// }
//}
//
///*
//Fixed navbar
// */
//.navbar-fixed {
// position: fixed;
// top: 0;
// bottom: 0;
// z-index: $zindex-sticky;
//
// + .navbar-bg {
// position: fixed;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// z-index: $zindex-dropdown;
// display: none;
// background: rgba($dark, .2);
// }
//
// &.navbar-side {
// top: 0;
// bottom: 0;
// left: 0;
//
// &.navbar-right {
// right: 0;
// left: auto;
// }
// }
//}
//
//.navbar-side {
// display: none;
//
// @include media-breakpoint-up(xl) {
// display: flex;
//
// &.navbar-fixed {
// & ~ .layout-main {
// margin-left: $sidenav-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-width;
// margin-left: 0;
// }
// }
// }
//
// &.navbar-folded {
// display: flex;
//
// &.navbar-fixed {
// @include media-breakpoint-up(lg) {
//
// & ~ .layout-main {
// margin-left: $sidenav-folded-width;
// }
//
// &.navbar-right ~ .layout-main {
// margin-right: $sidenav-folded-width;
// margin-left: 0;
// }
// }
// }
// }
//}
//
///*
//Right navbar
// */
//.navbar-right {
// order: 9;
// border-right: none;
// border-left: 1px solid $sidenav-border-color;
//}
//
///*
//Dark navbar
// */
//.navbar-dark {
// color: #fff;
// background-color: $sidenav-dark-bg;
//
// .navbar-brand {
// filter: brightness(0) invert(1);
// }
//
// .navbar-divider {
// border-color: rgba(#fff, .2);
// }
//
// .nav-link {
// color: inherit;
// }
//}
//
///**
//Sticky navbar
// */
//.navbar-sticky {
// position: sticky;
// top: 0;
// z-index: 100;
//
// &.navbar-side {
// left: 0;
// }
//}
//
///**
//Folded navbar
// */
//.navbar-folded {
// width: $sidenav-folded-width;
// min-width: $sidenav-folded-width;
//
// .navbar-brand {
// width: 2.5rem;
// }
//
// .navbar-heading {
// display: none;
// }
//
// .nav-text {
// display: none;
// }
//
// .nav-link {
// justify-content: center;
// padding-top: 0;
// padding-bottom: 0;
//
// &[data-toggle="collapse"]::after {
// content: none;
// }
// }
//
// .nav-icon {
// justify-content: center;
// opacity: 1;
// }
//
// .navbar-subnav {
// position: absolute;
// top: 0;
// left: 100%;
// background: #fff;
//
// .nav-text {
// display: block;
// }
//
// .nav-link {
// color: $body-color;
// }
// }
//}
//
//.nav-icon {
// display: flex;
// flex-shrink: 0;
// align-items: center;
// width: 1.5rem;
// font-size: px2rem(15px);
// border-radius: 100%;
// opacity: .8;
//
// .icon {
// font-size: inherit;
// }
//}
//
//.nav-text {
// display: flex;
// align-items: center;
// width: 100%;
//}
//
///**
//Utils
// */
//.hide-navbar-folded {
// @at-root .navbar-side.navbar-folded & {
// display: none;
// }
//}
//
//.hide-navbar-expanded {
// @at-root .navbar-side:not(.navbar-folded) & {
// display: none;
// }
//}
//
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
.page-pretitle { .page-pretitle {
@extend .subheader; @include subheader;
} }
.page-title { .page-title {
......
@mixin subheader($include-color: true) {
font-size: $h6-font-size;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
@if ($include-color) {
color: $text-muted;
}
}
.badge { .badge {
@extend .subheader; @include subheader(false);
background: $gray-200; background: $gray-200;
@at-root a#{&} { @at-root a#{&} {
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
} }
.dropdown-header { .dropdown-header {
@extend .subheader; @include subheader;
padding-bottom: .25rem; padding-bottom: .25rem;
pointer-events: none; pointer-events: none;
} }
......
.nav-tabs { .nav-tabs {
.icon { .icon {
color: $text-muted; color: $text-muted;
...@@ -39,3 +38,15 @@ ...@@ -39,3 +38,15 @@
text-transform: uppercase; text-transform: uppercase;
} }
} }
.nav-icon {
font-size: 1rem;
line-height: 1;
margin-right: .25rem;
}
.nav-link {
display: flex;
align-items: center;
transition: .3s color;
}
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
th { th {
background: $min-black; background: $min-black;
border-width: $table-border-width; border-width: $table-border-width;
@extend .subheader; @include subheader;
} }
} }
......
...@@ -96,11 +96,7 @@ Selection ...@@ -96,11 +96,7 @@ Selection
Subheader Subheader
*/ */
.subheader { .subheader {
font-size: $h6-font-size; @include subheader;
font-weight: 600;
color: $text-muted;
text-transform: uppercase;
letter-spacing: .04em;
} }
/** /**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册