Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

topnav refactoring

Browse Source
This commit is contained in:
codecalm
2019-10-27 13:09:59 +01:00
committed by Alex Safian
parent 71c07146ea
commit 212da5c6e8
68 changed files with 607 additions and 747 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 %}
{% for variant in site.variants %}
{% 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 %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% 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 %}
{% 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 %}
{% endexample %}
@@ -45,6 +45,6 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %}
{% 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 %}
{% endexample %}

78
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).
{% 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>
<input type="button" class="btn btn-primary" value="Input" />
<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 %}
{% 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 %}
<a href="javascript:void(0)" class="btn btn-link">Link</a>
<a href="#" class="btn btn-link">Link</a>
{% endexample %}
### Disabled buttons
@@ -45,7 +45,7 @@ The classic button, in different colors.
{% example html wrapper=btn-list %}
{% 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 %}
{% endexample %}
@@ -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>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
@@ -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
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
@@ -183,8 +183,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
{% endexample %}
@@ -209,9 +209,9 @@ You can now create a list of buttons with the `.btn-list` container.
{% example html %}
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
{% endexample %}
@@ -219,25 +219,25 @@ If the list is very long, it will automatically wrap on multiple lines, while ke
{% example html %}
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-secondary">One</a>
<a href="javascript:void(0)" class="btn btn-secondary">Two</a>
<a href="javascript:void(0)" class="btn btn-secondary">Three</a>
<a href="javascript:void(0)" class="btn btn-secondary">Four</a>
<a href="javascript:void(0)" class="btn btn-secondary">Five</a>
<a href="javascript:void(0)" class="btn btn-secondary">Six</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eight</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nine</a>
<a href="javascript:void(0)" class="btn btn-secondary">Ten</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eleven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Twelve</a>
<a href="javascript:void(0)" class="btn btn-secondary">Thirteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fourteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fifteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Sixteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seventeen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eighteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nineteen</a>
<a href="#" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">Two</a>
<a href="#" class="btn btn-secondary">Three</a>
<a href="#" class="btn btn-secondary">Four</a>
<a href="#" class="btn btn-secondary">Five</a>
<a href="#" class="btn btn-secondary">Six</a>
<a href="#" class="btn btn-secondary">Seven</a>
<a href="#" class="btn btn-secondary">Eight</a>
<a href="#" class="btn btn-secondary">Nine</a>
<a href="#" class="btn btn-secondary">Ten</a>
<a href="#" class="btn btn-secondary">Eleven</a>
<a href="#" class="btn btn-secondary">Twelve</a>
<a href="#" class="btn btn-secondary">Thirteen</a>
<a href="#" class="btn btn-secondary">Fourteen</a>
<a href="#" class="btn btn-secondary">Fifteen</a>
<a href="#" class="btn btn-secondary">Sixteen</a>
<a href="#" class="btn btn-secondary">Seventeen</a>
<a href="#" class="btn btn-secondary">Eighteen</a>
<a href="#" class="btn btn-secondary">Nineteen</a>
</div>
{% endexample %}
@@ -245,23 +245,23 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html %}
<div class="btn-list text-center">
<a href="javascript:void(0)" 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-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
{% endexample %}
{% example html %}
<div class="btn-list text-right">
<a href="javascript:void(0)" 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-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
{% endexample %}
### Button with avatar
{% 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="javascript:void(0)" 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="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="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
{% 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>
<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 class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<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
</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="flex-fill ">
<div class="mb-3">
<a href="javascript:void(0)">
<a href="#">
<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
</a>
</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
</a>
</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">
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
<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 class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<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
</a>
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>

14
pages/_docs/form-elements.md
View File

@@ -167,14 +167,14 @@ title: Form Elements
<button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
News
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Messages
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Edit Profile
</a>
</div>
@@ -276,11 +276,11 @@ title: Form Elements
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<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>
<input type="text" class="form-control" aria-label="Text input with dropdown button">

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

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

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

@@ -4,8 +4,8 @@
<div class="card-header">
<h5 class="card-title">Card title</h5>
<div class="card-options">
<a href="javascript:void(0)" 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-secondary btn-sm">Button</a>
<a href="#" class="btn btn-primary btn-sm">Button</a>
</div>
</div>
@@ -20,8 +20,8 @@
</ul>
<div class="card-body">
<a href="javascript:void(0)" class="card-link">Card link</a>
<a href="javascript:void(0)" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<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"%}
</div>
<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>
</div>
@@ -27,7 +27,7 @@
{% include ui/avatar.html person-id="10" class="mr-3"%}
</div>
<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>
</div>

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

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

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

@@ -64,7 +64,7 @@
<ul class="list-unstyled">
<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
commercial for its Alexa voice assistant Before Alexa lo…</p>
<div class="row">
@@ -73,7 +73,7 @@
</div>
</li>
<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
on Business Insider To be the first to kno…</p>
<div class="row">
@@ -82,7 +82,7 @@
</div>
</li>
<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>
<div class="row">
<div class="col text-muted">businessinsider.com</div>
@@ -182,19 +182,19 @@
<li class="list-separated-item">
<h5 class="mb-1">Crunchbase</h5>
<div>
<a href="javascript:void(0)">crunchbase.com/organization/amazon</a>
<a href="#">crunchbase.com/organization/amazon</a>
</div>
</li>
<li class="list-separated-item">
<h5 class="mb-1">Twitter</h5>
<div>
<a href="javascript:void(0)">twitter.com/amazon</a>
<a href="#">twitter.com/amazon</a>
</div>
</li>
<li class="list-separated-item">
<h5 class="mb-1">Facebook</h5>
<div>
<a href="javascript:void(0)">facebook.com/amazon</a>
<a href="#">facebook.com/amazon</a>
</div>
</li>
</ul>

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

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

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

@@ -1,11 +1,11 @@
<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 }}"/>
</a>
<div class="card-body">
<h4>Awesome Breakfast</h4>
<div class="toolbar mb-3">
<a href="javascript:void(0)" class="text-muted">
<a href="#" class="text-muted">
{% include ui/icon.html icon="clock" %}
May 23rd, 2018
</a>
@@ -16,6 +16,6 @@
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur consequatur dolor dolore, earum enim
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>

2
pages/_includes/cards/invoices.html
View File

@@ -38,7 +38,7 @@
<td>{{ invoice.price }}</td>
<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">
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
</span>

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

@@ -14,7 +14,7 @@
{% for page in site.data.pages %}
<tr>
<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.unique | format_number }}</td>
<td>{{ page.bounce-rate }}</td>

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

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

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

@@ -24,7 +24,7 @@
</ul>
<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>

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

@@ -8,17 +8,17 @@
<ul class="social-links list-inline mb-0 mt-2">
<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" %}
</a>
</li>
<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" %}
</a>
</li>
<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" %}
</a>
</li>

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

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

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

@@ -13,7 +13,7 @@
{% include ui/dropdown-menu.html right=true %}
</div>
<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>
{% include ui/avatar-list.html offset=offset limit=limit size="sm" stacked=true class="mb-3" %}

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

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

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

@@ -5,7 +5,7 @@
<div class="card-body">
{% for person in site.data.people limit: 5 offset: 50 %}
<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"%}
{{ person.full_name }}
</a>

4
pages/_includes/cards/store-product.html
View File

@@ -4,7 +4,7 @@
<div class="mb-4 text-center">
<img src="{{ site.base }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
</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">
{{ product.producer }}
</div>
@@ -13,7 +13,7 @@
<strong>{{ product.price }}</strong>
</div>
<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>

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

@@ -8,7 +8,7 @@
</div>
<div class="col">
<h4 class="card-title m-0">
<a href="javascript:void(0)">{{ person.full_name }}</a>
<a href="#">{{ person.full_name }}</a>
</h4>
<div class="text-muted">
Working in {{ person.company }}
@@ -18,7 +18,7 @@
</div>
</div>
<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
</a>
</div>

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

@@ -28,13 +28,13 @@
{% endif %}
{% if include.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">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<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>
</li>
{% endif %}

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

@@ -13,17 +13,17 @@
</label>
</td>
<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 class="text-nowrap text-muted">
{% include ui/icon.html icon="calendar" %}
{{ forloop.index | random_date: "2019-01-01", "2018-01-01" | date: '%B %d, %Y' }}
</td>
<td class="text-nowrap">
<a href="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 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>
{% 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,
illo iste molestiae nam nesciunt veniam?
</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>

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

@@ -25,7 +25,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<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>
</li>
<li>
@@ -74,7 +74,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<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>
</div>
</li>

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

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

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

@@ -1,6 +1,6 @@
{% assign person-id = include.person-id | default: 0 %}
{% 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 %})">
{% include ui/avatar.html size="xl" person=person thumb=true %}
</div>

2
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="text-muted">{{ person.job_title }}</div>
</div>
<a href="javascript:void(0)" class="card-btn">View full profile</a>
<a href="#" class="card-btn">View full profile</a>
</div>

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

@@ -1,6 +1,6 @@
{% assign person-id = include.person-id | default: 0 %}
{% 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="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
{% 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-body text-center">
<a href="javascript:void(0)">
<a href="#">
{% include ui/avatar.html person=p size="lg" class="mb-3" %}
</a>
<h4>{{p.full_name}}</h4>
<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" %}
{{ p.city }}, {{ p.country }}
</a>
<a href="javascript:void(0)" class="text-muted">
<a href="#" class="text-muted">
{% include ui/icon.html icon="briefcase" %}
{{ p.job_title }}
</a>

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

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

6
pages/_includes/forms/form-elements-1.html
View File

@@ -45,14 +45,14 @@
<button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
News
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Messages
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Edit Profile
</a>
</div>

8
pages/_includes/forms/form-elements-2.html
View File

@@ -27,11 +27,11 @@
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<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>
<input type="text" class="form-control" aria-label="Text input with dropdown button">

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

@@ -1,10 +1,10 @@
<div class="debug">
<a href="javascript:void(0)" data-debug="dark">Dark mode</a>
<a href="javascript:void(0)" data-debug="rtl">RTL mode</a>
<a href="javascript:void(0)" data-debug="code">Show cards code</a>
<a href="javascript:void(0)" data-debug="folded">Folded sidebar</a>
<a href="javascript:void(0)" data-debug="fullscreen">Fullscreen</a>
<a href="javascript:void(0)" data-debug="header-sticky">Sticky header</a>
<a href="#" data-debug="dark">Dark mode</a>
<a href="#" data-debug="rtl">RTL mode</a>
<a href="#" data-debug="code">Show cards code</a>
<a href="#" data-debug="folded">Folded sidebar</a>
<a href="#" data-debug="fullscreen">Fullscreen</a>
<a href="#" data-debug="header-sticky">Sticky header</a>
<a href="{{ site.base }}/pages.html">All pages</a>
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
@@ -137,7 +137,7 @@
var $card = $(this),
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

20
pages/_includes/layout/menu.html
View File

@@ -4,8 +4,8 @@
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item">
<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 %}>
<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[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">
{% include ui/icon.html icon=icon %}
</span>
@@ -27,8 +27,8 @@
{% for d in site.data.docs %}
{% assign doc = site.docs | where: "slug", d.page | first %}
{% if doc %}
<li class="nav-item">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
<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">
<span class="nav-text">
{{ doc.title }}
@@ -43,8 +43,8 @@
{% endif %}
{% for level-2 in level-1[1].children %}
<li class="nav-item">
<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 %}>
<li class="nav-item{% if level-2[0] == current-page[1] %} active{% 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">
{{ level-2[1].title }}
{% if level-2[1].label %}
@@ -56,8 +56,8 @@
<div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-3 in level-2[1].children %}
<li class="nav-item">
<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 %}>
<li class="nav-item{% if level-3[0] == current-page[2] %} active{% 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">
{{ level-3[1].title }}
{% if level-3[1].label %}
@@ -70,8 +70,8 @@
<div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %}
<li class="nav-item">
<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 %}">
<li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
<a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
<span class="nav-text">
{{ level-4[1].title }}
{% if level-4[1].label %}

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

@@ -21,7 +21,7 @@
<ul class="navbar-nav">
<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-text">Logout</span>
</a>

2
pages/_includes/layout/topmenu.html
View File

@@ -1,4 +1,4 @@
<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">
{% include layout/menu.html top=true %}
</div>

6
pages/_includes/layout/topnav.html
View File

@@ -1,4 +1,6 @@
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %} js-header">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark fluid=include.fluid %}
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
<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>

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

@@ -34,7 +34,7 @@
{% 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>
{% endfor %}
</div>

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

@@ -1,10 +1,10 @@
<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' }}
</a>
<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" href="javascript:void(0)">Last 30 days</a>
<a class="dropdown-item" href="javascript:void(0)">Last 3 months</a>
<a class="dropdown-item active" href="#">Last 7 days</a>
<a class="dropdown-item" href="#">Last 30 days</a>
<a class="dropdown-item" href="#">Last 3 months</a>
</div>
</div>

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

@@ -2,7 +2,6 @@
{% assign person = site.data.people | where: "id", include.person %}
{% assign person = person[0] %}
<div class="container{% if include.fluid %}-fluid{% endif %}">
<a class="navbar-toggler" data-toggle="modal" data-target="#aside">
<span class="navbar-toggler-icon"></span>
</a>
@@ -17,38 +16,15 @@
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</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">
{% 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 %}
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
<li class="nav-item dropdown mr-3">
<a class="nav-link text-reset px-2" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %}
<span class="badge badge-pill badge-up bg-primary">4</span>
</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="list list-row">
</div>
@@ -63,28 +39,6 @@
</li>
{% 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">
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
</li>
@@ -92,23 +46,12 @@
{% if include.user-menu %}
<li class="nav-item 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">
{% if include.user-menu == 1 %}
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
{% include ui/avatar.html src=person.photo %}
<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>
{% 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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
@@ -118,8 +61,8 @@
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<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
<span class="badge bg-primary ml-auto">6</span>
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
@@ -172,4 +115,3 @@
</li>
{% endif %}
</ul>
</div>

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

@@ -2,7 +2,7 @@
{% assign active-item = include.active-item | default: 2 %}
<ul class="pagination {{ include.class }}">
<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 %}
<div class="page-item-subtitle">Previous</div>
<div class="page-item-title">{{ include.prev-description }}</div>
@@ -13,11 +13,11 @@
</li>
{% 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 %}
<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 %}
<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!" }}
{% if include.buttons %}
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Cancel</a>
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Cancel</a>
</div>
{% 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>

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

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

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

@@ -4,7 +4,7 @@
{% for i in (1..count) %}
{% assign elem = 'a' %}
{% 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 }}
{% endif %}</{{ elem }}>
{% endfor %}

2
pages/_layouts/default.html
View File

@@ -3,7 +3,7 @@ layout: base
---
<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">
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}

2
pages/_plugins/jekyll-example.rb
View File

@@ -12,7 +12,7 @@ def render_rouge(code, lang, dark = false)
code = formatter.format(lexer.lex(code))
code = code.strip.gsub /^[\t\s]*$\n/, ''
code = code.gsub /\t/, "\s\s\s"
code = code.gsub "javascript:void(0)", "#"
code = code.gsub "#", "#"
code = code.gsub "../", "./"
"<pre>#{code}</pre>"

16
pages/email.html
View File

@@ -10,31 +10,31 @@ page-title: Crypto currencies
<div>
<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>
</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
</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>
</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
</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
</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
</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
</a>
</div>
<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>

2
pages/form-elements.html
View File

@@ -34,7 +34,7 @@ menu: forms
</div>
<div class="card-footer text-right">
<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>
</div>

4
pages/gallery.html
View File

@@ -19,11 +19,11 @@ done: true
<small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small>
</div>
<div class="ml-auto">
<a href="javascript:void(0)" class="text-muted">
<a href="#" class="text-muted">
{% include ui/icon.html icon="eye" %}
{{ forloop.index | random_number: 300, 600 }}
</a>
<a href="javascript:void(0)" class="ml-3 text-muted">
<a href="#" class="ml-3 text-muted">
{% include ui/icon.html icon="heart" %}
{{ forloop.index | random_number: 20, 100 }}
</a>

2
pages/homepage.html
View File

@@ -15,7 +15,7 @@ page-title-actions: home
<div class="d-flex">
{% include ui/avatar.html person=person class="mr-3" size="md" %}
<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>
</div>

65
pages/repo.html
View File

@@ -1,65 +0,0 @@
---
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>

14
pages/timeline.html
View File

@@ -1,14 +0,0 @@
---
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>

40
pages/toasts.html
View File

@@ -1,40 +0,0 @@
---
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>

17
pages/tracks.html
View File

@@ -1,17 +0,0 @@
---
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 %}

1
scss/_mixins.scss
View File

@@ -1,2 +1,3 @@
@import "mixins/mixins";
@import "mixins/functions";
@import "mixins/container-breakpoints";

13
scss/_variables.scss
View File

@@ -43,6 +43,14 @@ $white: #ffffff !default;
$light: #f5f7fb !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-color: $dark !default;
@@ -230,7 +238,7 @@ $card-border-color: $border-color !default;
$card-border-radius: $border-radius !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-group-margin: 1.5rem !default;
@@ -277,6 +285,9 @@ $sidenav-link-padding-x: .75rem !default;
$navbar-padding-x: .75rem !default;
$navbar-padding-y: .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-border-width: 2px !default;

731
scss/layout/_navbar.scss
View File

@@ -1,374 +1,397 @@
.navbar {
border-bottom: 1px solid;
background-color: $navbar-bg;
border-color: $navbar-border-color;
.nav-link {
color: inherit;
white-space: nowrap;
}
}
/**
Navbar logo
*/
.navbar-brand-logo {
height: 2rem;
}
//.nav-link {
// &.active {
// color: $primary;
// }
//}
//
.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 {
.nav-item.active .nav-link {
position: relative;
}
.navbar-nav {
padding-right: .5rem;
padding-left: .5rem;
}
}
&:before {
content: '';
position: absolute;
.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);
}
bottom: calc(-#{$navbar-padding-y} - 1px);
right: $navbar-nav-link-padding-x;
left: $navbar-nav-link-padding-x;
border-bottom: 1px solid $primary;
}
}
&: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;
}
//
// .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;
// }
}
/*
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;
}
}
//.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;
// }
//}
//

2
scss/layout/_page.scss
View File

@@ -10,7 +10,7 @@
}
.page-pretitle {
@extend .subheader;
@include subheader;
}
.page-title {

10
scss/mixins/_mixins.scss Normal file
View File

@@ -0,0 +1,10 @@
@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;
}
}

2
scss/ui/_badges.scss
View File

@@ -1,5 +1,5 @@
.badge {
@extend .subheader;
@include subheader(false);
background: $gray-200;
@at-root a#{&} {

2
scss/ui/_dropdowns.scss
View File

@@ -13,7 +13,7 @@
}
.dropdown-header {
@extend .subheader;
@include subheader;
padding-bottom: .25rem;
pointer-events: none;
}

13
scss/ui/_nav.scss
View File

@@ -1,4 +1,3 @@
.nav-tabs {
.icon {
color: $text-muted;
@@ -39,3 +38,15 @@
text-transform: uppercase;
}
}
.nav-icon {
font-size: 1rem;
line-height: 1;
margin-right: .25rem;
}
.nav-link {
display: flex;
align-items: center;
transition: .3s color;
}

2
scss/ui/_tables.scss
View File

@@ -5,7 +5,7 @@
th {
background: $min-black;
border-width: $table-border-width;
@extend .subheader;
@include subheader;
}
}

6
scss/ui/_typo.scss
View File

@@ -96,11 +96,7 @@ Selection
Subheader
*/
.subheader {
font-size: $h6-font-size;
font-weight: 600;
color: $text-muted;
text-transform: uppercase;
letter-spacing: .04em;
@include subheader;
}
/**