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

new bootstrap 5 margin and padding utils

Browse Source
This commit is contained in:
codecalm
2020-12-06 14:18:42 +01:00
parent c72e780668
commit 5589a71f6f
74 changed files with 178 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/_docs/badges.md
View File

@@ -85,10 +85,10 @@ Badges can be used as part of links or buttons to provide a counter.
{% capture code %}
<button type="button" class="btn">
Notifications <span class="badge bg-red ml-2">4</span>
Notifications <span class="badge bg-red ms-2">4</span>
</button>
<button type="button" class="btn">
Notifications <span class="badge bg-green ml-2">4</span>
Notifications <span class="badge bg-green ms-2">4</span>
</button>
{% endcapture %}
{% include example.html code=code wrapper="btn-list" %}

2
src/pages/_docs/buttons.md
View File

@@ -327,7 +327,7 @@ Use the `.text-center` or the `.text-right` modifiers to change the buttons' ali
{% capture code %}
<div class="btn-list">
<a href="#" class="btn btn-outline-danger mr-auto">Delete</a>
<a href="#" class="btn btn-outline-danger me-auto">Delete</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>

12
src/pages/_docs/flags.md
View File

@@ -12,8 +12,8 @@ libs: tabler-flags
To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below.
{% capture code %}
{% include ui/flag.html flag="tg" class="mr-1" %}
{% include ui/flag.html flag="br" class="mr-1" %}
{% include ui/flag.html flag="tg" class="me-1" %}
{% include ui/flag.html flag="br" class="me-1" %}
{% include ui/flag.html flag="pt" %}
{% endcapture %}
{% include example.html code=code %}
@@ -24,11 +24,11 @@ To create a flag, add the `flag` class to a component and choose the country who
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
{% capture code %}
{% include ui/flag.html flag="pl" size="xl" class="mr-1" %}
{% include ui/flag.html flag="pl" size="lg" class="mr-1" %}
{% include ui/flag.html flag="pl" size="xl" class="me-1" %}
{% include ui/flag.html flag="pl" size="lg" class="me-1" %}
{% include ui/flag.html flag="pl" size="md" %}
{% include ui/flag.html flag="pl" size="sm" class="mr-1" %}
{% include ui/flag.html flag="pl" size="xs" class="mr-1" %}
{% include ui/flag.html flag="pl" size="sm" class="me-1" %}
{% include ui/flag.html flag="pl" size="xs" class="me-1" %}
{% endcapture %}
{% include example.html code=code %}

4
src/pages/_docs/form-elements.md
View File

@@ -258,8 +258,8 @@ Add text to your input control, either before or after the text which is to be e
{% capture code %}
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" class="mb-2" %}
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" class="mb-2" %}
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pe-0" flat=true value="yourfancydomain" %}
</div>
{% endcapture %}
{% include example.html code=code %}

14
src/pages/_docs/payments.md
View File

@@ -11,9 +11,9 @@ plugin: payments
To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify"%}
{% include ui/payment.html class="mr-3" payment="visa" %}
{% include ui/payment.html class="mr-3" payment="paypal"%}
{% include ui/payment.html class="me-3" payment="shopify"%}
{% include ui/payment.html class="me-3" payment="visa" %}
{% include ui/payment.html class="me-3" payment="paypal"%}
{% endcapture %}
{% include example.html code=code %}
@@ -23,10 +23,10 @@ To create a payment provider icon, add the `payment` class to a component and sp
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
{% capture code %}
{% include ui/payment.html class="mr-3" payment="shopify" size="xl" %}
{% include ui/payment.html class="mr-3" payment="visa" size="lg" %}
{% include ui/payment.html class="mr-3" payment="paypal" size="md" %}
{% include ui/payment.html class="mr-3" payment="amazon" size="sm" %}
{% include ui/payment.html class="me-3" payment="shopify" size="xl" %}
{% include ui/payment.html class="me-3" payment="visa" size="lg" %}
{% include ui/payment.html class="me-3" payment="paypal" size="md" %}
{% include ui/payment.html class="me-3" payment="amazon" size="sm" %}
{% endcapture %}
{% include example.html code=code %}

34
src/pages/_docs/typography.md
View File

@@ -33,23 +33,23 @@ Organize longer pieces of text into paragraphs using the `p` tag.
Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
{% capture code %}
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
<cite>Citation</cite>{% hide %} <code class="ml-2">cite</code><br/>{% endhide %}
<code>Hello World!</code>{% hide %} <code class="ml-2">code</code><br/>{% endhide %}
<del>Deleted</del>{% hide %} <code class="ml-2">del</code><br/>{% endhide %}
<em>Emphasis</em>{% hide %} <code class="ml-2">em</code><br/>{% endhide %}
<i>Italic</i>{% hide %} <code class="ml-2">i</code><br/>{% endhide %}
<ins>Inserted</ins>{% hide %} <code class="ml-2">ins</code><br/>{% endhide %}
<kbd>Ctrl + S</kbd>{% hide %} <code class="ml-2">kbd</code><br/>{% endhide %}
<mark>Highlighted</mark>{% hide %} <code class="ml-2">mark</code><br/>{% endhide %}
<s>Strikethrough</s{% hide %}> <code class="ml-2">s</code><br/>{% endhide %}
<samp>Sample</samp>{% hide %} <code class="ml-2">samp</code><br/>{% endhide %}
Text <sub>Subscripted</sub>{% hide %} <code class="ml-2">sub</code><br/>{% endhide %}
Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% endhide %}
<time>20:00</time>{% hide %} <code class="ml-2">time</code><br/>{% endhide %}
<u>Underline</u>{% hide %} <code class="ml-2">u</code><br/>{% endhide %}
<var>x</var> = <var>y</var> + 2{% hide %} <code class="ml-2">var</code><br/>{% endhide %}
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ms-2">abbr</code><br/>{% endhide %}
<strong>Bold</strong>{% hide %} <code class="ms-2">strong</code> <code>b</code><br/>{% endhide %}
<cite>Citation</cite>{% hide %} <code class="ms-2">cite</code><br/>{% endhide %}
<code>Hello World!</code>{% hide %} <code class="ms-2">code</code><br/>{% endhide %}
<del>Deleted</del>{% hide %} <code class="ms-2">del</code><br/>{% endhide %}
<em>Emphasis</em>{% hide %} <code class="ms-2">em</code><br/>{% endhide %}
<i>Italic</i>{% hide %} <code class="ms-2">i</code><br/>{% endhide %}
<ins>Inserted</ins>{% hide %} <code class="ms-2">ins</code><br/>{% endhide %}
<kbd>Ctrl + S</kbd>{% hide %} <code class="ms-2">kbd</code><br/>{% endhide %}
<mark>Highlighted</mark>{% hide %} <code class="ms-2">mark</code><br/>{% endhide %}
<s>Strikethrough</s{% hide %}> <code class="ms-2">s</code><br/>{% endhide %}
<samp>Sample</samp>{% hide %} <code class="ms-2">samp</code><br/>{% endhide %}
Text <sub>Subscripted</sub>{% hide %} <code class="ms-2">sub</code><br/>{% endhide %}
Text <sup>Superscripted</sup>{% hide %} <code class="ms-2">sup</code><br/>{% endhide %}
<time>20:00</time>{% hide %} <code class="ms-2">time</code><br/>{% endhide %}
<u>Underline</u>{% hide %} <code class="ms-2">u</code><br/>{% endhide %}
<var>x</var> = <var>y</var> + 2{% hide %} <code class="ms-2">var</code><br/>{% endhide %}
{% endcapture %}
{% include example.html code=code %}

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

@@ -13,12 +13,12 @@
<div class="d-flex align-items-center pt-4 mt-auto">
{% include ui/avatar.html person-id=avatar %}
<div class="ml-3">
<div class="ms-3">
<a href="{{ site.base }}/profile.html" class="text-body">{{ author.first_name }} {{ author.last_name }}</a>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="#" class="icon d-none d-md-inline-block ml-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
<div class="ms-auto">
<a href="#" class="icon d-none d-md-inline-block ms-3 {% if liked %}text-red{% else %}text-muted{% endif %}">
{% include ui/icon.html icon="heart" use-svg=true %}
</a>
</div>

4
src/pages/_includes/cards/card.html
View File

@@ -72,7 +72,7 @@
{% assign el = element | slice: 1, element.size %}
{% endif %}
<div class="col-auto{% if right %} ml-auto{% endif %}">
<div class="col-auto{% if right %} ms-auto{% endif %}">
{% case el %}
{% when "switch" %}
{% include ui/form/check.html switch=true empty=true checked=true class="m-0" %}
@@ -93,7 +93,7 @@
{% elsif include.footer-buttons %}
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
<a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
</div>
{% else %}

6
src/pages/_includes/cards/charts/active-users.html
View File

@@ -2,13 +2,13 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Active users</div>
<div class="ml-auto lh-1">
<div class="ms-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto">
<div class="h1 mb-3 me-2">2,986</div>
<div class="me-auto">
{% include ui/trending.html value=4 %}
</div>
</div>

6
src/pages/_includes/cards/charts/new-clients.html
View File

@@ -2,13 +2,13 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">New clients</div>
<div class="ml-auto lh-1">
<div class="ms-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto">
<div class="h1 mb-3 me-2">6,782</div>
<div class="me-auto">
{% include ui/trending.html value=0 %}
</div>
</div>

6
src/pages/_includes/cards/charts/revenue.html
View File

@@ -2,13 +2,13 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Revenue</div>
<div class="ml-auto lh-1">
<div class="ms-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto">
<div class="h1 mb-0 me-2">$4,300</div>
<div class="me-auto">
{% include ui/trending.html value=8 %}
</div>
</div>

4
src/pages/_includes/cards/charts/sales.html
View File

@@ -2,14 +2,14 @@
<div class="card-body">
<div class="d-flex align-items-center">
<div class="subheader">Sales</div>
<div class="ml-auto lh-1">
<div class="ms-auto lh-1">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto">{% include ui/trending.html value=7 %}</div>
<div class="ms-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html value=75 color="blue" size="sm" %}
</div>

14
src/pages/_includes/cards/comments.html
View File

@@ -6,7 +6,7 @@
{% for person in site.data.people limit: 3 %}
<div class="d-flex{% unless forloop.last %} mb-5{% endunless %}">
<div class="mr-4">
<div class="me-4">
{% include ui/avatar.html person=person status="green" %}
</div>
<div class="flex-fill">
@@ -14,20 +14,20 @@
<h5 class="m-0">
{{ person.full_name }}
</h5>
<div class="ml-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
<div class="ms-auto small text-muted">{{ forloop.index | random_date_ago: 23 | timeago }}</div>
</div>
<p class="mb-2">
{{ site.data.comments[forloop.index] }}
</p>
<div class="small">
<span class="text-success mr-1">+{{ forloop.index | random_number: 20, 50 }}</span>
<span class="text-success me-1">+{{ forloop.index | random_number: 20, 50 }}</span>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Up">{% include ui/icon.html icon="chevron-up" %}</a>
<a href="#" class="mr-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Down">
<a href="#" class="me-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Vote Down">
{% include ui/icon.html icon="chevron-down" %}
</a>
<span class="mr-1">·</span>
<a href="#" class="mr-1 text-muted">Reply</a>
<span class="mr-1">·</span>
<span class="me-1">·</span>
<a href="#" class="me-1 text-muted">Reply</a>
<span class="me-1">·</span>
<a href="#" class="text-muted">Edit</a>
</div>
</div>

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

@@ -17,7 +17,7 @@
<td class="w-1">{% include ui/avatar.html src=person.photo %}</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 class="w-1 pe-0">{{ forloop.index | random_number: 30, 90 }}%</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-{{ forloop.index | random_number: 30, 90 | number_color }}" role="progressbar" style="width: {{ forloop.index | random_number: 30, 90 }}%"></div>

2
src/pages/_includes/cards/configuration.html
View File

@@ -5,7 +5,7 @@
</h3>
<div class="card-actions">
<a href="#">
Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %}
Edit configuration{% include ui/icon.html icon="edit" class="ms-1" %}
</a>
</div>
</div>

6
src/pages/_includes/cards/gallery-photo.html
View File

@@ -2,18 +2,18 @@
<a href="#" class="d-block"><img src="{{ site.base }}/static/photos/{{ photo.file }}" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
{% include ui/avatar.html person=include.person class="me-3 rounded" %}
<div>
<div>{{ include.person.full_name }}</div>
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
</div>
{% unless include.hide-likes %}
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="text-muted">
{% include ui/icon.html icon="eye" %}
{{ forloop.index | random_number: 300, 600 }}
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
{% assign class = false %}
{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
{% assign class = "icon-filled text-red" %}

8
src/pages/_includes/cards/invoices.html
View File

@@ -13,9 +13,9 @@
entries
</div>
<div class="ml-auto text-muted">
<div class="ms-auto text-muted">
Search:
<div class="ml-2 d-inline-block">
<div class="ms-2 d-inline-block">
<input type="text" class="form-control form-control-sm" aria-label="Search invoice">
</div>
</div>
@@ -55,7 +55,7 @@
{{ invoice.date }}
</td>
<td>
<span class="badge bg-{{ invoice.status }} mr-1"></span> {{ invoice.status-name }}
<span class="badge bg-{{ invoice.status }} me-1"></span> {{ invoice.status-name }}
</td>
<td>{{ invoice.price }}</td>
@@ -72,6 +72,6 @@
</div>
<div class="card-footer d-flex align-items-center">
<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
{% include ui/pagination.html class="m-0 ml-auto" %}
{% include ui/pagination.html class="m-0 ms-auto" %}
</div>
</div>

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

@@ -20,7 +20,7 @@
<tr>
<td>
{{ page.uri }}
<a href="#" class="ml-1" aria-label="Open website">{% include ui/icon.html icon="link" %}</a>
<a href="#" class="ms-1" aria-label="Open website">{% include ui/icon.html icon="link" %}</a>
</td>
<td class="text-muted">{{ page.visitors | format_number }}</td>
<td class="text-muted">{{ page.unique | format_number }}</td>

4
src/pages/_includes/cards/order-statistics.html
View File

@@ -4,8 +4,8 @@
<div>Total orders</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
<div class="h1 mb-0 me-2">2,137</div>
<div class="me-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}

4
src/pages/_includes/cards/pricing-card.html
View File

@@ -15,9 +15,9 @@
{% for feature in features %}
<li>
{% if available-features[forloop.index0] == '1' %}
{% include ui/icon.html icon="check" class="mr-1 text-success" %}
{% include ui/icon.html icon="check" class="me-1 text-success" %}
{% else %}
{% include ui/icon.html icon="x" class="mr-1 text-danger" %}
{% include ui/icon.html icon="x" class="me-1 text-danger" %}
{% endif %}
{{ feature }}
</li>

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

@@ -2,7 +2,7 @@
<div class="card-body">
<div class="media">
{% include ui/avatar.html person-id=8 size="xl" %}
<div class="media-body ml-4">
<div class="media-body ms-4">
<h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
<p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>

12
src/pages/_includes/cards/profile-timeline.html
View File

@@ -9,7 +9,7 @@
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=5 class="mr-3" %}
{% include ui/avatar.html person-id=5 class="me-3" %}
</div>
<div class="flex-fill">
<div>
@@ -26,7 +26,7 @@
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=8 class="mr-3" %}
{% include ui/avatar.html person-id=8 class="me-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[7].first_name }} {{ site.data.people[7].last_name }}: </strong>
@@ -36,7 +36,7 @@
</li>
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=10 class="mr-3" %}
{% include ui/avatar.html person-id=10 class="me-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[9].first_name }} {{ site.data.people[9].last_name }}: </strong>
@@ -51,7 +51,7 @@
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=11 class="mr-3" %}
{% include ui/avatar.html person-id=11 class="me-3" %}
</div>
<div class="flex-fill">
<div>
@@ -68,7 +68,7 @@
<li class="list-group-item py-4">
<div class="d-flex">
<div>
{% include ui/avatar.html person-id=15 class="mr-3" %}
{% include ui/avatar.html person-id=15 class="me-3" %}
</div>
<div class="flex-fill">
<div>
@@ -84,7 +84,7 @@
<ul class="list-unstyled">
<li class="d-flex mt-4">
<div>
{% include ui/avatar.html person-id=6 class="mr-3" %}
{% include ui/avatar.html person-id=6 class="me-3" %}
</div>
<div class="flex-fill">
<strong>{{ site.data.people[5].first_name }} {{ site.data.people[5].last_name }}: </strong>

4
src/pages/_includes/cards/project-kanban.html
View File

@@ -9,14 +9,14 @@
<h3 class="card-title">
<a href="#">{{ include.title | default: 'Task Title' }}</a>
{% if include.badge %} <span class="badge ml-2">{{ include.badge }}</span>{% endif %}
{% if include.badge %} <span class="badge ms-2">{{ include.badge }}</span>{% endif %}
</h3>
{% include ui/avatar-list.html offset=offset limit=limit stacked=true class="mb-3" %}
<div class="card-meta d-flex justify-content-between">
<div class="d-flex align-items-center">
{% include ui/icon.html icon="check" class="mr-2" %}
{% include ui/icon.html icon="check" class="me-2" %}
<span>5/10</span>
</div>
<span>Due {{ due }}</span>

2
src/pages/_includes/cards/skeleton/card-6.html
View File

@@ -10,7 +10,7 @@
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div class="col-2 ml-auto text-right">
<div class="col-2 ms-auto text-right">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>

2
src/pages/_includes/cards/small-stats.html
View File

@@ -22,7 +22,7 @@
<div class="font-weight-medium">
{{ include.title | default: 1700 }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ms-1" %}
{% endif %}
{% if include.description-value %}
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>

2
src/pages/_includes/cards/store-product-grid.html
View File

@@ -16,5 +16,5 @@
{% endfor %}
</div>
<div class="d-flex">
{% include parts/pagination.html class="ml-auto" %}
{% include parts/pagination.html class="ms-auto" %}
</div>

2
src/pages/_includes/cards/store-product.html
View File

@@ -10,7 +10,7 @@
<div class="h3 mb-0">
<strong>{{ product.price }}</strong>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="btn btn-primary">{% include ui/icon.html icon='plus' %} Add to cart</a>
</div>
</div>

4
src/pages/_includes/cards/tabs.html
View File

@@ -2,7 +2,7 @@
{% if include.id %}
{% assign id = include.id %}
{% endif %}
{% assign icon-class = "mr-2" %}
{% assign icon-class = "me-2" %}
{% if include.hide-text %}
{% assign icon-class = "" %}
{% endif %}
@@ -36,7 +36,7 @@
</li>
{% endif %}
{% if include.settings %}
<li class="nav-item {% if reverse %}mr-auto{% else %}ml-auto{% endif %}">
<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include ui/icon.html icon="settings" %}</a>
</li>
{% endif %}

2
src/pages/_includes/cards/tasks.html
View File

@@ -6,7 +6,7 @@
<table class="table card-table table-vcenter">
{% for task in site.data.tasks %}
<tr>
<td class="w-1 pr-0">
<td class="w-1 pe-0">
<input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task"{% if task.checked %} checked{% endif %} >
</td>
<td class="w-100">

12
src/pages/_includes/cards/user-info.html
View File

@@ -5,27 +5,27 @@
<div class="card-body">
<div class="card-title">{{ include.title | default: 'Basic info' }}</div>
<div class="mb-2">
{% include ui/icon.html icon="book" class="mr-2 text-muted" %}
{% include ui/icon.html icon="book" class="me-2 text-muted" %}
Went to: <strong>{{ person.university }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="briefcase" class="mr-2 text-muted" %}
{% include ui/icon.html icon="briefcase" class="me-2 text-muted" %}
Worked at: <strong>{{ person.company }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="home" class="mr-2 text-muted" %}
{% include ui/icon.html icon="home" class="me-2 text-muted" %}
Lives in: <strong>{{ person.city }}, {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="map-pin" class="mr-2 text-muted" %}
{% include ui/icon.html icon="map-pin" class="me-2 text-muted" %}
From: <strong>{% include ui/flag.html flag=person.country_code %} {{ person.country }}</strong>
</div>
<div class="mb-2">
{% include ui/icon.html icon="calendar" class="mr-2 text-muted" %}
{% include ui/icon.html icon="calendar" class="me-2 text-muted" %}
Birth date: <strong>{{ person.birth_date }}</strong>
</div>
<div>
{% include ui/icon.html icon="clock" class="mr-2 text-muted" %}
{% include ui/icon.html icon="clock" class="me-2 text-muted" %}
Time zone: <strong>{{ person.time_zone }}</strong>
</div>
</div>

2
src/pages/_includes/docs/menu.html
View File

@@ -19,7 +19,7 @@
{{ item.title }}
{% if item.show-version %}
<span class="badge bg-blue-lt ml-auto">{{ site.data.package.version }}</span>
<span class="badge bg-blue-lt ms-auto">{{ site.data.package.version }}</span>
{% endif %}
{% if item.children %}

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

@@ -24,12 +24,12 @@
<div class="mb-3">
<label class="form-label">Input with prepended text</label>
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="pl-0" value="yourfancyusername" %}
{% include ui/form/input-group.html prepend="https://tabler.io/users/" flat=true input-class="ps-0" value="yourfancyusername" %}
</div>
<div class="mb-3">
<label class="form-label">Input with appended text</label>
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" flat=true value="yourfancydomain" %}
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pe-0" flat=true value="yourfancydomain" %}
</div>
<div class="mb-3">

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

@@ -24,7 +24,7 @@
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>

2
src/pages/_includes/layout/footer.html
View File

@@ -1,7 +1,7 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.base }}/docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="{{ site.base }}/license.html" class="link-secondary">License</a></li>

2
src/pages/_includes/layout/header-actions/photos.html
View File

@@ -1,5 +1,5 @@
<div class="d-flex">
<div class="mr-3">
<div class="me-3">
{% include ui/form/input-icon.html %}
</div>
{% include ui/button.html text="Add event" color="primary" icon="plus" %}

2
src/pages/_includes/layout/header-actions/users.html
View File

@@ -1,4 +1,4 @@
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
<input type="search" class="form-control d-inline-block w-9 me-3" placeholder="Search user…"/>
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>

20
src/pages/_includes/layout/homepage.html
View File

@@ -33,25 +33,25 @@
<div class="progress-bar bg-success" role="progressbar" style="width: 9%"></div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center pr-2">
<span class="legend mr-2 bg-primary"></span>
<div class="col-auto d-flex align-items-center pe-2">
<span class="legend me-2 bg-primary"></span>
<span>Regular</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">915MB</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">915MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend mr-2 bg-info"></span>
<span class="legend me-2 bg-info"></span>
<span>System</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">415MB</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">415MB</span>
</div>
<div class="col-auto d-flex align-items-center px-2">
<span class="legend mr-2 bg-success"></span>
<span class="legend me-2 bg-success"></span>
<span>Shared</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">201MB</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">201MB</span>
</div>
<div class="col-auto d-flex align-items-center pl-2">
<span class="legend mr-2"></span>
<div class="col-auto d-flex align-items-center ps-2">
<span class="legend me-2"></span>
<span>Free</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ml-2 text-muted">612MB</span>
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">612MB</span>
</div>
</div>
</div>

4
src/pages/_includes/layout/layouts-list.html
View File

@@ -11,9 +11,9 @@
<h3>
<a href="{{ site.base }}/{{ layout.page }}">{{ layout.title }}</a>
{% if layout.new %}
{% include ui/badge.html text="New" color="green" class="ml-2" %}
{% include ui/badge.html text="New" color="green" class="ms-2" %}
{% elsif layout.soon %}
{% include ui/badge.html text="Soon!" color="yellow" class="ml-2" %}
{% include ui/badge.html text="Soon!" color="yellow" class="ms-2" %}
{% endif %}
</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>

4
src/pages/_includes/layout/navbar-logo.html
View File

@@ -11,9 +11,9 @@
{% endif %}
{% unless include.hide-logo %}
{% if include.small-logo %}
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
{% else %}
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" width="110" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" width="110" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
{% endif %}
{% endunless %}

2
src/pages/_includes/layout/navbar-menu.html
View File

@@ -30,7 +30,7 @@
</a>
{% if level-1[1].children %}
<div class="dropdown-menu{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if include.auto-open and level-1[0] == current-page[0] %} show{% endif %}">
<div class="dropdown-menu{% if level-1[1].right %} dropdown-menu-end{% endif %}{% if include.auto-open and level-1[0] == current-page[0] %} show{% endif %}">
{% if level-1[1].columns %}
<div class="dropdown-menu-columns">

6
src/pages/_includes/layout/navbar-side.html
View File

@@ -1,12 +1,12 @@
{% assign person-id = include.person-id | default: 1 %}
{% assign person = site.data.people[person-id] %}
<div class="navbar-nav flex-row{% if include.class %} {{ include.class }}{% endif %}">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
{% include ui/icon.html icon="bell" %}
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
{% include cards/navbar-notifications.html %}
</div>
</div>
@@ -16,7 +16,7 @@
{% include ui/avatar.html person-id=person-id size="sm" %}
{% unless include.hide-username %}
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-2">
<div>{{ person.full_name }}</div>
<div class="mt-1 small text-muted">{{ person.job_title }}</div>
</div>

4
src/pages/_includes/layout/navbar.html
View File

@@ -10,7 +10,7 @@
{% include layout/navbar-toggler.html target="navbar-menu" %}
{% unless include.hide-brand %}
{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pr-0 pr-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
{% endunless %}
{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %}
@@ -25,7 +25,7 @@
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
{% assign search-class = "ml-md-auto pl-md-4 py-2 py-md-0 mr-md-4 order-first order-md-last flex-grow-1" %}
{% assign search-class = "ms-md-auto ps-md-4 py-2 py-md-0 me-md-4 order-first order-md-last flex-grow-1" %}
{% unless include.fluid-search %}
{% assign search-class = search-class | append: " flex-md-grow-0" %}
{% endunless %}

2
src/pages/_includes/layout/page-header.html
View File

@@ -32,7 +32,7 @@
{% if actions %}
<!-- Page title actions -->
<div class="col-auto ml-auto d-print-none">
<div class="col-auto ms-auto d-print-none">
{% include layout/header-actions/{{ actions }}.html %}
</div>
{% endif %}

2
src/pages/_includes/parts/dropdown/days.html
View File

@@ -1,6 +1,6 @@
<div class="dropdown">
<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ include.value | default: 'Last 7 days' }}</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<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>

4
src/pages/_includes/parts/form/selectgroup-payments.html
View File

@@ -7,11 +7,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index == 2 %} checked{% endif %}>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-{{ item }} payment-xs mr-2"></span>
<span class="payment payment-provider-{{ item }} payment-xs me-2"></span>
{% if forloop.index < 3 %}
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>

4
src/pages/_includes/parts/form/selectgroup-project-manager.html
View File

@@ -7,11 +7,11 @@
<input type="checkbox" name="form-project-manager[]" value="{{ person.id }}" class="form-selectgroup-input" {%
if forloop.index== 2 %} checked{% endif %}>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
{% include ui/avatar.html person=person class="mr-3" %}
{% include ui/avatar.html person=person class="me-3" %}
<div>
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="text-muted">{{ person.job_title }}</div>

6
src/pages/_includes/parts/modals/report.html
View File

@@ -15,7 +15,7 @@
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input"{% if forloop.index == 1 %} checked{% endif %}>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
@@ -32,7 +32,7 @@
<div class="col-lg-8">
<div class="mb-3">
<label class="form-label">Report url</label>
{% include ui/form/input-group.html prepend="https://tabler.io/reports/" flat=true input-class="pl-0" value="report-01" %}
{% include ui/form/input-group.html prepend="https://tabler.io/reports/" flat=true input-class="ps-0" value="report-01" %}
</div>
</div>
<div class="col-lg-4">
@@ -75,5 +75,5 @@
<div class="modal-footer">
{% include ui/button.html text="Cancel" color="link link-secondary" dismiss=true %}
{% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ml-auto" %}
{% include ui/button.html text="Create new report" icon="plus" color="primary" dismiss=true class="ms-auto" %}
</div>

2
src/pages/_includes/parts/modals/small.html
View File

@@ -3,6 +3,6 @@
<div>If you proceed, you will lose all your personal data.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary mr-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
</div>

2
src/pages/_includes/parts/modals/team.html
View File

@@ -19,6 +19,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn mr-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
</div>

2
src/pages/_includes/parts/nav/nav-aside.html
View File

@@ -6,7 +6,7 @@
{% for item in items %}
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
{{ item }}
<small class="text-muted ml-auto">{{ forloop.index | random_number: 11, 200 }}</small>
<small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
</a>
{% endfor %}
</div>

4
src/pages/_includes/ui/alert.html
View File

@@ -1,7 +1,7 @@
<div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-left mr-3" %}{% endif %}
{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-left me-3" %}{% endif %}
{% if include.icon %}
{% include ui/icon.html icon=include.icon class="mr-1" %}
{% include ui/icon.html icon=include.icon class="me-1" %}
{% endif %}
{{ include.text | default: "This is a custom alert box!" }}

2
src/pages/_includes/ui/button.html
View File

@@ -7,7 +7,7 @@
{% endif %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% if include.text %}{% assign spinner-class="me-2" %}{% endif %}
{% assign href = '#' %}
{% if include.href %}

2
src/pages/_includes/ui/card-dropdown.html
View File

@@ -4,7 +4,7 @@
<a href="#" class="card-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
{% include ui/icon.html icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
{% for item in menu %}
<a href="#" class="dropdown-item">{{ item }}</a>
{% endfor %}

10
src/pages/_includes/ui/dropdown-menu-all.html
View File

@@ -6,14 +6,14 @@
<div class="dropdown-item">
<a href="#" class="text-reset">My profile</a>
<label class="form-check m-0 ml-auto">
<label class="form-check m-0 ms-auto">
<input type="checkbox" class="form-check-input">
Public
</label>
</div>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 mr-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<div class="dropdown-divider"></div>
@@ -26,7 +26,7 @@
<div class="dropdown-divider"></div>
{% for person in site.data.people limit: 3 %}
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded mr-2" size="xs" %} {{ person.full_name }}</a>
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
<div class="dropdown-divider"></div>

10
src/pages/_includes/ui/dropdown-menu.html
View File

@@ -1,4 +1,4 @@
<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.menu %}
{% assign menu = include.menu | split: ',' %}
@@ -21,11 +21,11 @@
{% elsif include.check or include.radio %}
{% for i in (1..3) %}
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
{% endfor %}
{% elsif include.people %}
{% for person in site.data.people limit: 5 %}
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded mr-2" size="xs" %} {{ person.full_name }}</a>
<a href="#" class="dropdown-item">{% include ui/avatar.html person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
{% elsif include.type == 'text' %}
@@ -34,11 +34,11 @@
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
{% if include.badge %}<span class="badge bg-primary ms-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
{% if include.badge %}<span class="badge bg-green ml-auto"></span>{% endif %}
{% if include.badge %}<span class="badge bg-green ms-auto"></span>{% endif %}
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}

2
src/pages/_includes/ui/form/input-group.html
View File

@@ -31,7 +31,7 @@
{% assign icon = b[0] %}
{% assign description = b[1] %}
<a href="#" class="link-secondary{% unless forloop.first %} ml-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-bs-toggle="tooltip">{% include ui/icon.html icon=icon %}</a>
<a href="#" class="link-secondary{% unless forloop.first %} ms-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-bs-toggle="tooltip">{% include ui/icon.html icon=icon %}</a>
{% endfor %}
</span>
{% endif %}

2
src/pages/_includes/ui/form/input-selectgroup.html
View File

@@ -7,7 +7,7 @@
<label class="form-selectgroup-item">
{% assign s = value | split: "i:" %}
{% if include.with-text %}
{% assign icon-class = "mr-1" %}
{% assign icon-class = "me-1" %}
{% endif %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="form-selectgroup-label">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon class=icon-class use-svg=true %}{% if include.with-text %} {{ icon | capitalize }}{% endif %}{% else %}{{ value }}{% endif %}</span>

6
src/pages/_includes/ui/form/selectize.html
View File

@@ -7,7 +7,7 @@
{% if options == 'people' %}
{% for person in site.data.people limit: 20 %}
{% capture avatar %}
{% include ui/avatar.html person=person class="avatar-xs rounded mr-2" %}
{% include ui/avatar.html person=person class="avatar-xs rounded me-2" %}
{% endcapture %}
<option value="{{ person.id }}" data-data='{"avatar": "{{ avatar | strip | replace: '"', '\"' }}"}'{% if person.id == data.value %} selected{% endif %}>{{ person.full_name }}</option>
{% endfor %}
@@ -36,10 +36,10 @@
{% if key == "countries" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
}
}
{% elsif key == "people" %}

2
src/pages/_includes/ui/modal/footer.html
View File

@@ -1,4 +1,4 @@
<div class="modal-footer">
<button type="button" class="btn mr-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>

4
src/pages/_includes/ui/nav.html
View File

@@ -6,7 +6,7 @@
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include ui/icon.html icon="star" class="mr-1" %}
{% include ui/icon.html icon="star" class="me-1" %}
Link
</a>
</li>
@@ -15,7 +15,7 @@
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<li class="nav-item ms-auto">
<a class="nav-link" href="#">
{% include ui/icon.html icon="settings" %}
</a>

4
src/pages/_includes/ui/progress-description.html
View File

@@ -5,9 +5,9 @@
<div class="d-flex mb-1 align-items-center lh-1">
<div class="text-h5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
{% if include.description %}
<div class="text-h6 text-muted ml-2">{{ include.description }}</div>
<div class="text-h6 text-muted ms-2">{{ include.description }}</div>
{% endif %}
<span class="ml-auto text-h6 strong">{{ include.value }}%</span>
<span class="ms-auto text-h6 strong">{{ include.value }}%</span>
</div>
{% include ui/progress.html size=size value=include.value color=color %}
</div>

2
src/pages/_includes/ui/table.html
View File

@@ -26,7 +26,7 @@
{% if include.avatars %}
<td {% if include.mobile %}data-label="Name" {% endif %}>
<div class="d-flex py-1 align-items-center">
{% include ui/avatar.html person-id=person.id class="mr-2" %}
{% include ui/avatar.html person-id=person.id class="me-2" %}
<div class="flex-fill">
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="text-muted"><a href="#" class="text-reset">{{ person.email }}</a></div>

6
src/pages/_includes/ui/toast.html
View File

@@ -3,10 +3,10 @@
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
{% unless include.hide-header %}
<div class="toast-header">
{% include ui/avatar.html person=person class="mr-2" size="xs" %}
<strong class="mr-auto">{{ person.full_name }}</strong>
{% include ui/avatar.html person=person class="me-2" size="xs" %}
<strong class="me-auto">{{ person.full_name }}</strong>
<small>{{ include.date | default: '11 mins ago' }}</small>
<button type="button" class="ml-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{% endunless %}
<div class="toast-body">

2
src/pages/_includes/ui/trending.html
View File

@@ -11,5 +11,5 @@
{% endif %}
<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include ui/icon.html icon=icon class="ml-1" %}
{{ value }}% {% include ui/icon.html icon=icon class="ms-1" %}
</span>

4
src/pages/_layouts/docs.html
View File

@@ -20,9 +20,9 @@ page-header: Documentation
<h1 class="mt-0">{{ page.title }}</h1>
{% if page.bootstrap-link %}
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
{% include ui/icon.html icon="external-link" color="blue" class="pr-1" %}
{% include ui/icon.html icon="external-link" color="blue" class="pe-1" %}
Bootstrap documentation
</a>
</p>

2
src/pages/all.html
View File

@@ -19,7 +19,7 @@ menu: index
{% if page.name != 'index.html' %}
<li>
<a href="{{ page.url }}">
{% unless page.menu %}{% include ui/icon.html icon="x" color="red" class="mr-1" %}{% endunless %}{{ page.title | default: page.name }}
{% unless page.menu %}{% include ui/icon.html icon="x" color="red" class="me-1" %}{% endunless %}{{ page.title | default: page.name }}
</a>
</li>
{% endif %}

2
src/pages/charts.html
View File

@@ -13,7 +13,7 @@ libs: apexcharts
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ml-auto">
<div class="ms-auto">
{% include parts/dropdown/days.html %}
</div>
</div>

2
src/pages/form-elements.html
View File

@@ -36,7 +36,7 @@ libs: jquery, nouislider, autosize, selectize, flatpickr, tabler-flags, tabler-p
<div class="card-footer text-right">
<div class="d-flex">
<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 ms-auto">Send data</button>
</div>
</div>
</form>

2
src/pages/gallery.html
View File

@@ -19,5 +19,5 @@ menu: extra.gallery
</div>
<div class="d-flex">
{% include ui/pagination.html class="ml-auto" %}
{% include ui/pagination.html class="ms-auto" %}
</div>

2
src/pages/license.html
View File

@@ -20,7 +20,7 @@ menu: extra.license
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="mr-3">
<div class="me-3">
{% include ui/icon.html icon="scale" size="md" %}
</div>
<div>

2
src/pages/users.html
View File

@@ -51,5 +51,5 @@ menu: extra.users
</div>
<div class="d-flex mt-4">
{% include ui/pagination.html class="ml-auto" %}
{% include ui/pagination.html class="ms-auto" %}
</div>

2
src/pages/wizard.html
View File

@@ -16,7 +16,7 @@ menu: extra.wizard
<div class="card-body">
<div class="mb-3">
<label class="form-label">Create your Tabler URL</label>
{% include ui/form/input-group.html prepend="https://tabler.io/" input-class="pl-1" flat=true %}
{% include ui/form/input-group.html prepend="https://tabler.io/" input-class="ps-1" flat=true %}
<div class="form-hint">Choose a URL that describes you or your business in a concise way. Make it short and easy to remember so you can share links with ease.</div>
</div>

12
src/scss/_utilities.scss
View File

@@ -128,13 +128,13 @@ $utilities: (
"padding-right": (
responsive: true,
property: padding-inline-end,
class: pr,
class: pe,
values: $spacers
),
"padding-left": (
responsive: true,
property: padding-inline-start,
class: pl,
class: ps,
values: $spacers
),
"margin": (
@@ -146,13 +146,13 @@ $utilities: (
"margin-right": (
responsive: true,
property: margin-inline-end,
class: mr,
class: me,
values: $margin-spacers
),
"margin-left": (
responsive: true,
property: margin-inline-start,
class: ml,
class: ms,
values: $margin-spacers
),
"margin-top": (
@@ -170,13 +170,13 @@ $utilities: (
"negative-margin-right": (
responsive: true,
property: margin-inline-end,
class: mr,
class: me,
values: $negative-spacers
),
"negative-margin-left": (
responsive: true,
property: margin-inline-start,
class: ml,
class: ms,
values: $negative-spacers
),
) !default;

2
src/scss/ui/_dropdowns.scss
View File

@@ -75,7 +75,7 @@
clip: rect(0px, 9px, 9px, 0px);
}
&.dropdown-menu-right {
&.dropdown-menu-end {
&:before {
right: .75rem;
left: auto;