Skip to content

Commit

Permalink
Merge pull request #732 from tabler/rtl-utils
Browse files Browse the repository at this point in the history
  • Loading branch information
@codecalm
codecalm committed Dec 6, 2020
2 parents c72e780 + ee0e7fc commit 57508c0
Show file tree
Hide file tree
Showing 89 changed files with 237 additions and 235 deletions.
4 changes: 2 additions & 2 deletions src/pages/_docs/badges.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
4 changes: 2 additions & 2 deletions src/pages/_docs/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
{% endcapture %}
{% include example.html code=code %}

Use the `.text-center` or the `.text-right` modifiers to change the buttons' alignment and place them where they suit best.
Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.

{% capture code %}
<div class="btn-list justify-content-center">
Expand All @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions src/pages/_docs/flags.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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 %}

Expand Down
4 changes: 2 additions & 2 deletions src/pages/_docs/form-elements.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-end pe-0" flat=true value="yourfancydomain" %}
</div>
{% endcapture %}
{% include example.html code=code %}
Expand Down
14 changes: 7 additions & 7 deletions src/pages/_docs/payments.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand All @@ -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 %}

Expand Down
4 changes: 2 additions & 2 deletions src/pages/_docs/ribbons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
You can change the position of a ribbon by adding one of the following classes to the element:

- `ribbon-top` - moves it to the top
- `ribbon-right` - moves it to the right
- `ribbon-end` - moves it to the right
- `ribbon-bottom` - moves it to the bottom
- `ribbon-left` - moves it to the lefg
- `ribbon-start` - moves it to the left

Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.

Expand Down
2 changes: 1 addition & 1 deletion src/pages/_docs/skeleton.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ However, it may be useful, however, to specify the full width in order to fit th
You can also move the lines to right or to center:

{% capture code %}
<div class="text-right">
<div class="text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
Expand Down
8 changes: 5 additions & 3 deletions src/pages/_docs/toasts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,12 @@ Toasts blend over the elements they appear over. If a browser supports the `back

## Stacking toasts

Stack multiple toasts together by putting them within one container.
Stack multiple toasts together by putting them within one `.toast-container`.

{% capture code %}
{% include ui/toast.html person-id=3 %}
{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
<div class="toast-container">
{% include ui/toast.html person-id=3 %}
{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
</div>
{% endcapture %}
{% include example.html code=code %}
36 changes: 18 additions & 18 deletions src/pages/_docs/typography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down Expand Up @@ -84,7 +84,7 @@ You can also add a label to a horizontal rule and align it as you see fit.
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hr-text hr-text-right">
<div class="hr-text hr-text-end">
<span>Rule text</span>
</div>
<p>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/cards/blog-single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ <h3 class="card-title"><a href="#">{{ article.title }}</a></h3>

<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>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/cards/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{% elsif include.status-bottom %}
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
{% elsif include.status-left %}
<div class="card-status-left bg-{{ include.status-left | default: 'blue' }}"></div>
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
{% endif %}

{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
Expand Down Expand Up @@ -72,7 +72,7 @@ <h3 class="card-title">{{ include.title }}</h3>
{% 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" %}
Expand All @@ -93,7 +93,7 @@ <h3 class="card-title">{{ include.title }}</h3>
{% 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 %}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/cards/charts/active-users.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/cards/charts/new-clients.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/_includes/cards/charts/revenue.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/_includes/cards/charts/sales.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions src/pages/_includes/cards/comments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@

{% 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">
<div class="d-flex mt-n1">
<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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_includes/cards/company-employees.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h4 class="card-title">Company Employees</h4>
<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>
Expand Down
10 changes: 5 additions & 5 deletions src/pages/_includes/cards/company-lookup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h5 class="mb-4">Recent News</h5>
commercial for its Alexa voice assistant Before Alexa lo…</p>
<div class="row">
<div class="col text-muted">businessinsider.com</div>
<div class="col text-muted text-right">2 days ago</div>
<div class="col text-muted text-end">2 days ago</div>
</div>
</li>
<li class="mb-5">
Expand All @@ -78,15 +78,15 @@ <h5 class="mb-4">Recent News</h5>
on Business Insider To be the first to kno…</p>
<div class="row">
<div class="col text-muted">businessinsider.com</div>
<div class="col text-muted text-right">2 days ago</div>
<div class="col text-muted text-end">2 days ago</div>
</div>
</li>
<li class="mb-5">
<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>
<div class="col text-muted text-right" title="2018-02-02T12:32:00.000Z">4 days ago</div>
<div class="col text-muted text-end" title="2018-02-02T12:32:00.000Z">4 days ago</div>
</div>
</li>
<li class="mb-5">
Expand All @@ -96,7 +96,7 @@ <h5 class="mb-4">Recent News</h5>
latest earnings report the company reported 6045 billion…</p>
<div class="row">
<div class="col text-muted">businessinsider.com</div>
<div class="col text-muted text-right" title="2018-02-02T10:45:00.000Z">5 days ago</div>
<div class="col text-muted text-end" title="2018-02-02T10:45:00.000Z">5 days ago</div>
</div>
</li>
<li class="mb-4">
Expand All @@ -106,7 +106,7 @@ <h5 class="mb-4">Recent News</h5>
WongGetty Images</p>
<div class="row">
<div class="col text-muted">businessinsider.com</div>
<div class="col text-muted text-right" title="2018-02-01T11:25:00.000Z">6 days ago</div>
<div class="col text-muted text-end" title="2018-02-01T11:25:00.000Z">6 days ago</div>
</div>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_includes/cards/configuration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h3 class="card-title">
</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>
Expand Down

0 comments on commit 57508c0

Please sign in to comment.