tabler v1

_config.yml

@@ -30,7 +30,6 @@ plugins:
 tabler-plugins:
   - tabler-flags
   - tabler-payments
-  - tabler-buttons
 
 exclude:
   - .jekyll-cache

src/js/autosize.js

@@ -0,0 +1,10 @@
+// Autosize plugin
+
+import autosize from 'autosize';
+
+const elements = document.querySelectorAll('[data-toggle="autosize"]');
+if (elements.length) {
+	elements.forEach(function (element) {
+		autosize(element);
+	});
+}

src/js/tabler.js

@@ -1,5 +1,6 @@
 //Vendor
-// import 'bootstrap';
+
+import './autosize';
 
 (function() {
 	/**

src/pages/_data/charts.yml

@@ -168,7 +168,6 @@ development-activity:
   legend-position: 'top'
   sparkline: true
   datetime: true
-  title: Development Activity
   series:
     - name: 'Purchases'
       color: blue

src/pages/_data/menu.yml

@@ -169,6 +169,9 @@ layout:
     dark-mode:
       url: layout-dark.html
       title: Dark mode
+    rtl-mode:
+      url: layout-rtl.html
+      title: RTL mode
     fluid:
       url: layout-fluid.html
       title: Fluid

src/pages/_docs/autosize.md

@@ -2,7 +2,6 @@
 title: Autosize
 menu: docs.autosize
 description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
-done: true
 libs: autosize
 ---
 

src/pages/_docs/avatars.md

@@ -79,6 +79,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
 {% include ui/avatar.html person-id=8 size="md" %}
 {% include ui/avatar.html person-id=7 %}
 {% include ui/avatar.html person-id=6 size="sm" %}
+{% include ui/avatar.html person-id=5 size="xs" %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
 

src/pages/_docs/badges.md

@@ -66,27 +66,29 @@ Leave the HTML element empty if you want to create badges without any text. Empt
 {% include example.html code=code centered=true %}
 
 
-### Badge add-ons
+## Badge avatars
 
-Add the `.badge-addon` class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.
+Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
 
 {% capture code %}
-{% include ui/badge.html text="task" color="green" addon="finished" %}
-{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
-{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
+{% include ui/badge.html person-id=1 %}
+{% include ui/badge.html person-id=2 %}
+{% include ui/badge.html person-id=3 %}
+{% include ui/badge.html person-id=4 %}
+{% include ui/badge.html person-id=5 %}
 {% endcapture %}
 {% include example.html code=code %}
 
+## Button with badge
 
-### Badge avatars
-
-Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
+Badges can be used as part of links or buttons to provide a counter.
 
 {% capture code %}
-{% include ui/badge.html person-id=1 color="blue" %}
-{% include ui/badge.html person-id=2 color="blue" %}
-{% include ui/badge.html person-id=3 color="blue" %}
-{% include ui/badge.html person-id=4 color="blue" %}
-{% include ui/badge.html person-id=5 color="blue" %}
+<button type="button" class="btn">
+  Notifications <span class="badge bg-red ml-2">4</span>
+</button>
+<button type="button" class="btn">
+  Notifications <span class="badge bg-green ml-2">4</span>
+</button>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code wrapper="btn-list" %}

src/pages/_docs/buttons.md

@@ -2,8 +2,7 @@
 title: Buttons
 description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
 bootstrap-link: components/buttons/
-done: true
-libs: tabler-buttons
+menu: docs.buttons
 ---
 
 
@@ -12,15 +11,24 @@ libs: tabler-buttons
 As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention. 
 
 {% capture code %}
-<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"/>
-<input type="reset" class="btn btn-primary" value="Reset"/>
+<a href="#" class="btn" role="button">Link</a>
+<button class="btn">Button</button>
+<input type="button" class="btn" value="Input"/>
+<input type="submit" class="btn" value="Submit"/>
+<input type="reset" class="btn" value="Reset"/>
 {% endcapture  %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
 
+## Default button 
+
+The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page. 
+
+{% capture code %}
+<a href="#" class="btn" role="button">Link</a>
+{% endcapture  %}
+{% include example.html code=code wrapper="btn-list" centered=true %}
+
 ## Button variations
 
 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.

src/pages/_docs/cards.md

@@ -3,7 +3,6 @@ title: Cards
 menu: docs.cards
 description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
 bootstrap-link: components/card/
-done: true
 ---
 
 

src/pages/_docs/colors.md

@@ -3,7 +3,6 @@ title: Colors
 menu: docs.colors
 description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. 
 bootstrap-link: utilities/colors/
-done: true
 ---
 
 

src/pages/_docs/divider.md

@@ -2,7 +2,6 @@
 title: Divider
 description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.  
 bootstrap-link: components/dropdowns/#dividers
-done: true
 ---
 
 

src/pages/_docs/flags.md

@@ -3,7 +3,6 @@ title: Flags
 menu: docs.flags
 description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. 
 plugin: flags
-done: true
 libs: tabler-flags
 ---
 

src/pages/_docs/payments.md

@@ -3,7 +3,6 @@ title: Payments
 menu: docs.payments
 description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
 plugin: payments
-done: true
 ---
 
 

src/pages/_docs/progress.md

@@ -2,7 +2,6 @@
 title: Progress bars
 description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
 bootstrap-link: components/progress
-done: true
 ---
 
 

src/pages/_docs/ribbons.md

@@ -2,7 +2,6 @@
 title: Ribbons
 menu: docs.ribbons
 description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. 
-done: true
 ---
 
 

src/pages/_docs/spinners.md

@@ -3,7 +3,6 @@ title: Spinners
 menu: docs.spinners
 description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
 bootstrap-link: components/spinners/
-done: true
 ---
 
 

src/pages/_includes/cards/development-activity.html

@@ -1,5 +1,8 @@
 <div class="card">
-	{% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %}
+	<div class="card-header border-0">
+		<div class="card-title">Development activity</div>
+	</div>
+	{% include ui/chart.html chart-id="development-activity" height=12 %}
 
 	<div class="table-responsive">
 		<table class="table card-table table-vcenter">
@@ -14,7 +17,7 @@
 			{% for commit in site.data.commits limit: 5 %}
 			<tr>
 				<td class="w-1">
-					{% include ui/avatar.html person-id=forloop.index %}
+					{% include ui/avatar.html person-id=forloop.index size="sm" %}
 				</td>
 				<td class="td-truncate">
 					<div class="text-truncate">

src/pages/_includes/cards/gallery-photo.html

@@ -3,7 +3,7 @@
 	<div class="card-body">
 		<div class="d-flex align-items-center">
 			{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
-			<div class="lh-sm">
+			<div>
 				<div>{{ include.person.full_name }}</div>
 				<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
 			</div>
@@ -14,7 +14,11 @@
 					{{ forloop.index | random_number: 300, 600 }}
 				</a>
 				<a href="#" class="ml-3 text-muted">
-					{% include ui/icon.html icon="heart" %}
+					{% assign class = false %}
+					{% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %}
+						{% assign class = "icon-filled text-red" %}
+					{% endif %}
+					{% include ui/icon.html icon="heart" class=class %}
 					{{ forloop.index | random_number: 20, 100 }}
 				</a>
 			</div>

src/pages/_includes/cards/icons.html

@@ -25,7 +25,7 @@ <h2 class="mt-2" data-icon-preview-title>{{ first-icon-name }}</h2>
 						<li class="icons-list-item">
 							{% assign svg-icon = icon[1] %}
 							<a href="#" class="text-reset" data-toggle-icon="{{ icon[0] }}" data-toggle="tooltip" title="{{ icon[0] }}">
-								{% include ui/icon.html svg-icon=svg-icon class="icon-md" %}
+								{% include ui/icon.html svg-icon=svg-icon %}
 							</a>
 						</li>
 						{% endfor %}

src/pages/_includes/cards/most-visited-pages.html

@@ -19,7 +19,7 @@ <h4 class="card-title">Most Visited Pages</h4>
 			<tr>
 				<td>
 					{{ page.uri }}
-					<a href="#" class="link-secondary ml-2">{% include ui/icon.html icon="link" %}</a>
+					<a href="#" class="ml-1">{% 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>

src/pages/_includes/cards/project-summary.html

@@ -1,6 +1,6 @@
 <div class="card">
 	<div class="card-body p-4 py-5 text-center">
-		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color %}
+		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}
 		<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
 		<p class="text-muted">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
 		<p class="mb-3">

src/pages/_includes/cards/small-stats.html

@@ -14,8 +14,8 @@
 		</div>
 		{% endif %}
 
-		<div class="mr-3 lh-sm">
-			<div class="strong">
+		<div class="mr-3">
+			<div class="font-weight-medium">
 				{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
 				{% if include.small-icon %}
 				{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}

src/pages/_includes/cards/tasks.html

@@ -30,7 +30,7 @@ <h4 class="card-title">Tasks</h4>
 						{% include ui/icon.html icon="message" %} {{ forloop.index | random_number: 0, 12 }}</a>
 				</td>
 				<td>
-					{% include ui/avatar.html person-id=forloop.index %}
+					{% include ui/avatar.html size="sm" person-id=forloop.index %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/user-card.html

@@ -5,8 +5,8 @@
 		<div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
 			{% include ui/avatar.html person=person class="rounded" %}
 		</div>
-		<div class="lh-sm">
-			<div class="strong">{{ person.full_name }}</div>
+		<div>
+			<div class="font-weight-medium">{{ person.full_name }}</div>
 			<div class="text-muted">{{ person.job_title }}</div>
 		</div>
 	</div>

src/pages/_includes/forms/form-elements-6.html

@@ -20,10 +20,8 @@
 
 <div class="mb-3">
 	<label class="form-label">Form buttons</label>
-	<div class="btn-list">
-		{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
-		{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
-	</div>
+	{% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %}
+	{% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
 </div>
 
 <div class="mb-3">

src/pages/_includes/layout/navbar-side.html

@@ -13,7 +13,8 @@
 
 	<div class="nav-item dropdown">
 		<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-			{% include ui/avatar.html person-id=person-id %}
+			{% include ui/avatar.html person-id=person-id size="sm" %}
+
 			{% unless include.hide-username %}
 			<div class="d-none d-xl-block pl-2">
 				<div>{{ person.full_name }}</div>

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

@@ -13,7 +13,7 @@
 				<div class="form-selectgroup-label-content d-flex align-items-center">
 					{% include ui/avatar.html person=person class="mr-3" %}
 					<div class="lh-sm">
-						<div class="strong">{{ person.full_name }}</div>
+						<div class="font-weight-medium">{{ person.full_name }}</div>
 						<div class="text-muted">{{ person.job_title }}</div>
 					</div>
 				</div>

src/pages/_includes/parts/modals/info.html

@@ -1,7 +1,7 @@
 {% include ui/modal/close.html %}
 <div class="modal-body text-center py-5">
 
-	{% include ui/icon.html icon="circle-check" color="green" class="icon-xl mb-4" %}
+	{% include ui/icon.html icon="circle-check" color="green" class="mb-4" %}
 
 	<h3>Payment succedeed</h3>
 	<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>

src/pages/_includes/ui/badge.html

@@ -1,13 +1,13 @@
 {% assign el = 'span' %}
-<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">
+<{{ el }} class="badge{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 {% if include.person-id %}
     {% assign person-id = include.person-id | minus: 1 %}
     {% assign person = site.data.people[person-id] %}
     {% assign src = person.photo %}
     {% unless src %}
         {% assign placeholder = person.full_name | first_letters %}
     {% endunless %}
-    <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
+    <{{ el }} class="avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
  {% endif %}
 {% if include.text %}
     {{ include.text }}

src/pages/_includes/ui/form/textarea-autosize.html

@@ -1,15 +1 @@
-<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Typing something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
-
-{% capture_once scripts %}
-<script>
-	(function () {
-		const elements = document.querySelectorAll('[data-toggle="autosize"]');
-
-		if (elements.length) {
-			elements.forEach(function (element) {
-				autosize(element);
-			});
-		}
-	})();
-</script>
-{% endcapture_once %}
+<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-toggle="autosize" placeholder="{{ include.placeholder | default: 'Type something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>

src/pages/_includes/ui/sparkline.html

@@ -19,7 +19,7 @@
 			strokeWidth: 2,
 			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %},
 			padding: .2,
-			{% if type == 'pie' %}innerRadius: 17,{% endif %}
+			{% if type == 'pie' %}innerRadius: 16,{% endif %}
 		});
 	});
 </script>