Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-01 07:54:38 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' into dev-daterangepicker

Browse Source
This commit is contained in:
Paweł Kuna
2020-01-10 22:52:24 +01:00
committed by GitHub
parent aacbbcef81 e191d527bb
commit c430a6938e
2093 changed files with 82155 additions and 32672 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/colors.yml
+12 -12
View File
@@ -130,16 +130,16 @@ cyan-700: '#0e616e'
cyan-800: '#09414a'
cyan-900: '#052025'
gray: '#adb5bd'
gray-100: '#f8f9fa'
gray-200: '#e9ecef'
gray-300: '#dee2e6'
gray-400: '#ced4da'
gray-500: '#adb5bd'
gray-600: '#868e96'
gray-700: '#495057'
gray-800: '#343a40'
gray-900: '#212529'
gray: '#cdd1d8'
gray-100: '#f5f7fb'
gray-200: '#f1f3f8'
gray-300: '#e9ecf1'
gray-400: '#dee1e7'
gray-500: '#cdd1d8'
gray-600: '#aeb3bc'
gray-700: '#8b929e'
gray-800: '#5f6877'
gray-900: '#354052'
border-color: '#dce3e9'
text-muted: '#8a91a5'
border-color: '#dee1e7'
text-muted: '#8b929e'
pages/_data/invoices.yml
+1
View File
@@ -84,6 +84,7 @@
status: success
status-name: Paid Today
price: $940
country: pl
-
invoice: "00450"
pages/_data/layouts.yml
+43 -3
View File
@@ -1,3 +1,43 @@
- name: sidebar-left
title: Left sidebar
url: layout-test.html
- title: Default tabler layout
config:
topmenu: true
- title: Dark navigation
config:
topmenu: true
topmenu-dark: true
- title: Sidebar
new: true
config:
sidebar: true
- title: Dark sidebar
new: true
config:
sidebar: true
sidebar-dark: true
- title: Narrow sidebar
new: true
config:
sidebar: true
sidebar-narrow: true
sidebar-dark: true
- title: Right sidebar
new: true
config:
sidebar-right: true
- title: Sidebar only
new: true
config:
sidebar: true
hide-topnav: true
- title: Dark mode
soon: true
config:
sidebar: true
sidebar-dark: true
pages/_data/libs.json
+2 -1
View File
@@ -26,7 +26,8 @@
"daterangepicker": [
"daterangepicker/moment.min.js",
"daterangepicker/daterangepicker.js"
]
],
"countup": "countup.js/dist/countUp.min.js"
},
"css": {
"jqvmap": "jqvmap/dist/jqvmap.min.css",
pages/_data/menu.yml
+40 -30
View File
@@ -2,41 +2,11 @@ home:
url: index.html
title: Dashboard
icon: home
badge: ''
badge-color: blue
forms:
url: form-elements.html
title: Form elements
icon: check-square
badge: New
badge-color: red
error:
title: Error pages
icon: file-minus
children:
400:
url: 400.html
title: 400 page
401:
url: 401.html
title: 401 page
403:
url: 403.html
title: 403 page
404:
url: 404.html
title: 404 page
500:
url: 500.html
title: 500 page
503:
url: 503.html
title: 503 page
maintenance:
url: maintenance.html
title: Maintenance page
base:
title: Base
@@ -79,6 +49,32 @@ charts:
title: Charts
icon: pie-chart
error:
title: Error pages
icon: file-minus
children:
400:
url: 400.html
title: 400 page
401:
url: 401.html
title: 401 page
403:
url: 403.html
title: 403 page
404:
url: 404.html
title: 404 page
500:
url: 500.html
title: 500 page
503:
url: 503.html
title: 503 page
maintenance:
url: maintenance.html
title: Maintenance page
a:
title: A
icon: menu
@@ -94,6 +90,8 @@ layouts:
title: Layouts
icon: layout
url: layouts.html
badge: New
badge-color: green
extra:
title: Extra
@@ -105,6 +103,9 @@ extra:
blog:
title: Blog cards
url: blog.html
search-results:
title: Search results
url: search-results.html
docs:
title: Documentation
icon: file-text
@@ -140,6 +141,9 @@ docs:
colors:
title: Colors
url: docs/colors.html
countup:
title: Countup
url: docs/countup.html
cursors:
title: Cursors
url: docs/cursors.html
@@ -164,9 +168,15 @@ docs:
input-mask:
title: Form input mask
url: docs/input-mask.html
layout:
title: Layout
url: docs/layout.html
progress:
title: Progress
url: docs/progress.html
payments:
title: Payments
url: docs/payments.html
ribbons:
title: Ribbons
badge: New
pages/_data/people.json
+129 -129
View File
File diff suppressed because it is too large Load Diff
pages/_data/products.yml
+30 -45
View File
@@ -1,53 +1,38 @@
-
name: Apple iPhone 7 Plus 256GB Red Special Edition
image: apple-iphone7-special.jpg
producer: Apple
price: $499
- image: product-1.jpg
name: Container for a Fanta
-
name: Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
image: apple-macbook-pro.jpg
producer: Apple
price: $1499
- image: product-2.jpg
name: Strange sunglasses
-
name: Apple iPhone 7 32GB Jet Black
image: apple-iphone7.jpg
producer: Apple
price: $499
- image: product-3.jpg
name: Pen Pineapple Apple Pen
-
name: GoPro HERO6 Black
image: gopro-hero.jpg
producer: GoPro
price: $599
- image: product-4.jpg
name: Binoculars
-
name: MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
image: msi.jpg
producer: MSI
price: $1599
- image: product-5.jpg
name: Magical notebook
-
name: Xiaomi Mi A1 64GB Black
image: xiaomi-mi.jpg
producer: Xiaomi
price: $269
- image: product-6.jpg
name: Dragonfly eyes
-
name: Huawei Mate 10 Pro Dual SIM Gray
image: huawei-mate.jpg
producer: Huawei
price: $999
- image: product-7.jpg
name: Fireman's pipe
-
name: Sony KD-49XE7005
image: sony-kd.jpg
producer: Sony
price: $799
- image: product-8.jpg
name: Garden shears
-
name: Samsung Galaxy A5 A520F 2017 LTE Black Sky
image: samsung-galaxy.jpg
producer: Samsung
price: $399
- image: product-9.jpg
name: Ironman wallet
- image: product-10.jpg
name: Blue notebook
- image: product-11.jpg
name: Morning alarm clock
- image: product-12.jpg
name: Spy camera
- image: product-13.jpg
name: Housefly
pages/_docs/alerts.md
+1 -2
View File
@@ -55,13 +55,12 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% endexample %}
### Alert with avatar
{% assign person = site.data.people[1] %}
{% example %}
{% for variant in site.variants %}
{% capture variant-text %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text avatar=true person=person %}
{% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %}
{% endfor %}
{% endexample %}
pages/_docs/countup.md
+115
View File
@@ -0,0 +1,115 @@
---
title: Countup
menu: docs.countup
---
Countups with many options that can be found [here](https://inorganik.github.io/countUp.js/)
To make countup add `data-countup` to any html text tag.
### Default countup
Set number to count up.
{% example %}
<h1 data-countup>30000</h1>
{% endexample %}
### Duration
Set the `duration` of the countup. (2s is set by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>
{% endexample %}
### Starting value
Set the start value of countup using `startVal`.
If you set it bigger than the `count`, countup will run reverse.
{% example %}
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
{% endexample %}
### Decimal places
Set how many decimal places to show using `decimalPlaces`.
{% example %}
<h1 data-countup>3.123</h1>
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
{% endexample %}
### Easing
Disable easing using `"useEasing": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>
{% endexample %}
### Use grouping
Disable grouping using `"useGrouping": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>
{% endexample %}
### Separator
Set seperator that seperates groups using `separator`. (`,` by default)
{% example %}
<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
<h1 data-countup='{"separator":"-"}'>3000000</h1>
<h1 data-countup='{"separator":":"}'>3000000</h1>
{% endexample %}
### Decimal separator
Set decimal separator using `decimal`. (`.` by default)
{% example %}
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
{% endexample %}
### Prefix
Set countup prefix using `prefix`.
{% example %}
<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>
{% endexample %}
### Suffix
Set countup suffix using `suffix`.
{% example %}
<h1 data-countup='{"suffix":"%"}'>30</h1>
<h1 data-countup='{"suffix":"‰"}'>30</h1>
<h1 data-countup='{"suffix":"k"}'>30</h1>
{% endexample %}
Of course you can mix all of these:
{% example %}
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
{% endexample %}
To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
pages/_docs/flags.md
+3 -3
View File
@@ -18,9 +18,9 @@ done: true
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-md" %}
{% 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="md" %}
{% include ui/flag.html flag="pl" class="mr-1" %}
{% endexample %}
pages/_docs/form-elements.md
+1 -1
View File
@@ -66,7 +66,7 @@ bootstrap-link: components/forms/
### Textarea
{% example %}
<div class="mb-2">
<label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
{% endexample %}
pages/_docs/layout.md
+8
View File
@@ -0,0 +1,8 @@
---
title: Page Layouts
done: true
---
Tabler includes a number of utility pages to help speed up development of your project management web application
{% include layout/layouts-list.html wide=true class="mt-6" %}
pages/_docs/payments.md
+2 -1
View File
@@ -2,6 +2,7 @@
title: Payments
menu: docs.payments
plugin: payments
done: true
---
### Payment
@@ -33,4 +34,4 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
<td>{{ payment.name }}</td>
</tr>
{% endfor %}
</table>
</table>
pages/_docs/toasts.md
+17 -2
View File
@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
bootstrap-link: components/toasts/
---
### Default markup
{% example %}
{% include ui/toast.html %}
{% endexample %}
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
{% example html class=bg-gray %}
{% include ui/toast.html %}
{% endexample %}
### Stacking toasts
If you want to stack toasts just put them in the same container.
{% example %}
{% include ui/toast.html person-id=3 %}
{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
{% endexample %}
pages/_includes/cards/blog-single.html
+2 -2
View File
@@ -31,7 +31,7 @@
<div class="row row-0 flex-fill">
<div class="col-md-3">
<a href="#">
<img src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
<img src="{{ site.base }}/static/photos//{{ site.data.photos[article.image].file }}" class="w-100 h-100 object-cover" alt="Card side image">
</a>
</div>
<div class="col">
@@ -43,7 +43,7 @@
{% else %}
{% if type == 'image' %}
<a href="#">
<img class="card-img-top" src="{{ site.base }}/img/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
<img class="card-img-top" src="{{ site.base }}/static/photos//{{ site.data.photos[article.image].file }}" alt="{{ article.title | escape}}">
</a>
{% endif %}
<div class="card-body d-flex flex-column">
pages/_includes/cards/card-image.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="card">
<div class="row row-0">
<div class="col-md-3{% if include.right %} order-md-last{% endif %}">
<img src="{{ site.base }}/img/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
<img src="{{ site.base }}/static/photos/{{ include.img | default: '2854fd67ddbd6217.jpg' }}" class="w-100 h-100 object-cover" alt="{{ include.img-alt | default: 'Card side image' }}">
</div>
<div class="col">
<div class="card-body">
pages/_includes/cards/card.html
+2 -2
View File
@@ -8,7 +8,7 @@
{% else %}
{% if include.img-top %}
<img src="{{ site.base }}/img/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
<img src="{{ site.base }}/static/photos/9f36332564ca271d.jpg" class="card-img-top" alt="{{ include.img-top-alt | default: 'Card top image' }}">
{% endif %}
{% if include.status-top %}
@@ -104,7 +104,7 @@
{% endif %}
{% if include.img-bottom %}
<img src="{{ site.base }}/img/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
<img src="{{ site.base }}/static/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
alt="{{ include.img-bottom-alt | default: 'Card bottom image' }}">
{% endif %}
pages/_includes/cards/configuration.html
+33
View File
@@ -0,0 +1,33 @@
<div class="card">
<div class="card-header">
<h3 class="card-title">
Configuration
</h3>
<div class="card-actions">
<a href="#">
Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %}
</a>
</div>
</div>
<div class="card-body">
<dl class="row">
<dt class="col-5">Date:</dt>
<dd class="col-7">2020-01-05 16:42:29 UTC</dd>
<dt class="col-5">Account:</dt>
<dd class="col-7">tabler</dd>
<dt class="col-5">Location:</dt>
<dd class="col-7">{% include ui/flag.html flag="pl" %} Poland</dd>
<dt class="col-5">IP Address:</dt>
<dd class="col-7">46.113.11.3</dd>
<dt class="col-5">Operating system:</dt>
<dd class="col-7">OS X 10.15.2 64-bit</dd>
<dt class="col-5">Browser:</dt>
<dd class="col-7">Chrome</dd>
</dl>
</div>
</div>
pages/_includes/cards/feed-card.html
+26 -26
View File
@@ -22,54 +22,54 @@
{% if include.feed == 1 %}
<div class="col-6 mb-2">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[0].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[0].file }})"></a>
</div>
</div>
<div class="col-6 mb-2">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[1].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[1].file }})"></a>
</div>
</div>
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[2].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[2].file }})"></a>
</div>
</div>
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[3].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[3].file }})"></a>
</div>
</div>
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[4].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[4].file }})"></a>
</div>
</div>
{% elsif include.feed == 2 %}
<div class="col-12">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[5].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[5].file }})"></a>
</div>
</div>
{% elsif include.feed == 3 %}
<div class="col-6 d-flex">
<div class="media flex-fill rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[6].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[6].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[7].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
</div>
<div class="row row-xs">
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[8].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[9].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[9].file }})"></a>
<a class="media-overlay active bg-dark-overlay"><small class="text-white mx-auto">9+</small></a>
</div>
</div>
@@ -78,56 +78,56 @@
{% elsif include.feed == 4 %}
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[10].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[10].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[11].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[11].file }})"></a>
</div>
</div>
{% elsif include.feed == 5 %}
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[12].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[12].file }})"></a>
</div>
</div>
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[13].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[13].file }})"></a>
</div>
</div>
<div class="col-4">
<div class="media media-4x3 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[14].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[14].file }})"></a>
</div>
</div>
{% elsif include.feed == 6 %}
<div class="col-6 d-flex">
<div class="media flex-fill rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[15].file }});"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[15].file }});"></a>
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[16].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[17].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[17].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[18].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[18].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[19].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[19].file }})"></a>
</div>
</div>
</div>
@@ -136,36 +136,36 @@
{% elsif include.feed == 7 %}
<div class="col-3 d-flex">
<div class="media flex-fill rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[20].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[20].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="row row-xs">
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[21].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media mb-2 rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[22].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[23].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[23].file }})"></a>
</div>
</div>
<div class="col-6">
<div class="media rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[24].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[24].file }})"></a>
</div>
</div>
</div>
</div>
<div class="col-3 d-flex">
<div class="media flex-fill rounded">
<a class="media-content" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[25].file }})"></a>
<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[25].file }})"></a>
</div>
</div>
{% endif %}
pages/_includes/cards/gallery-photo.html
+24
View File
@@ -0,0 +1,24 @@
<div class="card card-sm">
<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" %}
<div class="lh-sm">
<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">
<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">
{% include ui/icon.html icon="heart" %}
{{ forloop.index | random_number: 20, 100 }}
</a>
</div>
{% endunless %}
</div>
</div>
</div>
pages/_includes/cards/gallery.html
-22
View File
@@ -1,22 +0,0 @@
<div class="card card-sm">
<div class="card-body">
<a href="#" class="mb-3 d-block"><img src="{{ site.base }}/img/photos/{{ photo.file }}" class="rounded"></a>
<div class="d-flex align-items-center">
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
<div class="lh-sm">
<div>{{ include.person.full_name }}</div>
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
</div>
<div class="ml-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">
{% include ui/icon.html icon="heart" %}
{{ forloop.index | random_number: 20, 100 }}
</a>
</div>
</div>
</div>
</div>
pages/_includes/cards/music/track-info.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="{{ site.base }}/img/tracks/{{ track.album.images[1].path }}" class="rounded-left" alt="{{ track.name | escape }}" width="88" height="88">
<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded-left" alt="{{ track.name | escape }}" width="88" height="88">
</div>
<div class="col">
<div class="card-body">
pages/_includes/cards/music/tracks-list.html
+1 -1
View File
@@ -7,7 +7,7 @@
{{ forloop.index }}
</div>
<div class="col-auto">
<img src="{{ site.base }}/img/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="48" height="48">
<img src="{{ site.base }}/static/tracks/{{ track.album.images[1].path }}" class="rounded" alt="{{ track.name | escape }}" width="48" height="48">
</div>
<div class="col">
{{ track.name }}
pages/_includes/cards/profile.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="card card-profile">
<div class="card-header" style="background-image: url({{ site.base }}/img/photos/{{ site.data.photos[22].file }});"></div>
<div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
<div class="card-body text-center">
<img class="card-profile-img" src="{{ site.data.people[4].photo }}">
pages/_includes/cards/store-product.html
+2 -4
View File
@@ -1,13 +1,11 @@
{% assign product = site.data.products[include.product] %}
{% assign product-id = include.product-id | default: 1 %}
{% assign product = site.data.products[product-id] %}
<div class="card">
<div class="card-body">
<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="#">{{ product.name }}</a></h4>
<div class="text-muted">
{{ product.producer }}
</div>
<div class="mt-5 d-flex align-items-center">
<div class="h3 mb-0">
<strong>{{ product.price }}</strong>
pages/_includes/forms/form-elements-1.html
+2 -2
View File
@@ -20,7 +20,7 @@
value="Well, how'd you become king, then?" readonly>
</div>
<div class="mb-3">
<label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
@@ -60,7 +60,7 @@
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<div class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>" data-html="true">?</span>
</div>
</div>
</div>
pages/_includes/forms/form-elements-4.html
+5
View File
@@ -1,2 +1,7 @@
{% include parts/form-fieldset.html %}
{% include parts/input-selectgroups.html %}
{% include parts/form-payments.html %}
{% include parts/form-project-manager.html %}
pages/_includes/forms/form-elements-6.html
-1
View File
@@ -1,4 +1,3 @@
{% include parts/input-selectgroups.html %}
{% include parts/input-datalist.html %}
{% include parts/input-sizes.html %}
{% include parts/input-range.html %}
pages/_includes/layout/css.html
+3 -2
View File
@@ -11,5 +11,6 @@
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<!-- Tabler Plugins -->
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-payments{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
{% for plugin in site.tabler-plugins %}
<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %}
pages/_includes/layout/homepage.html
+65 -65
View File
@@ -1,74 +1,74 @@
<div class="row row-deck">
<div class="col-sm-6 col-lg-3">
{% include cards/charts/sales.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/revenue.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/new-clients.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/sales.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/revenue.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/new-clients.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/active-users.html %}
</div>
<div class="col-sm-6 col-lg-3">
{% include cards/charts/active-users.html %}
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-6">
{% include cards/project-summary.html stage-color="red" %}
</div>
<div class="col-md-6">
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-6">
{% include cards/project-summary.html stage-color="red" %}
</div>
<div class="col-md-6">
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
</div>
</div>
</div>
<div class="col-lg-6">
{% include cards/map.html title="Top users" %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
</div>
<div class="col-6 col-sm-4">
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
</div>
</div>
</div>
<div class="col-lg-6">
{% include cards/map.html title="Top users" %}
</div>
<div class="col-lg-6">
{% include cards/development-activity.html %}
</div>
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>
<div class="col-lg-6">
{% include cards/development-activity.html %}
</div>
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div>
<div class="col-md-12">
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
</div>
<div class="col-sm-6 col-xl-3">
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
</div>
<div class="col-12">
{% include cards/invoices.html %}
</div>
<div class="col-12">
{% include cards/invoices.html %}
</div>
<div class="col-12">
{% include cards/table-users.html %}
</div>
<div class="col-12">
{% include cards/table-users.html %}
</div>
</div>
pages/_includes/layout/js.html
+1 -1
View File
@@ -1,6 +1,6 @@
<!-- Libs JS -->
{% for lib in site.data.libs.js %}
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] %}
{% if site.captured_libs contains lib[0] or site.data.libs.global-libs contains lib[0] or page.libs contains lib[0] %}
{% for file in lib[1] %}
<script src="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}?{{ site.time | date: '%s' }}"></script>
{% endfor %}
pages/_includes/layout/layouts-list.html
+24
View File
@@ -0,0 +1,24 @@
<div class="row row-md mb-n{% if include.wide %}5{% else %}6{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% for layout in site.data.layouts %}
<div class="col-{% if include.wide %}12{% else %}6{% endif %} mb-{% if include.wide %}5{% else %}6{% endif %}{% if layout.soon %} opacity-25{% endif %}">
<div class="row">
<div class="col-auto">
<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">
{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
</a>
</div>
<div class="col">
<h3>
<a href="{{ site.base }}/{{ layout.page }}">{{ layout.title }}</a>
{% if layout.new %}
{% include ui/badge.html text="New" color="green" class="ml-2" %}
{% elsif layout.soon %}
{% include ui/badge.html text="Soon!" color="yellow" class="ml-2" %}
{% endif %}
</h3>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
</div>
</div>
</div>
{% endfor %}
</div>
pages/_includes/layout/layouts.html
+4 -8
View File
@@ -1,9 +1,5 @@
<div class="card">
<div class="card-body">
{% for layout in site.data.layouts %}
<a href="{{ layout.url }}" class="d-block">
{{ layout.title }}
</a>
{% endfor %}
</div>
<div class="card card-md">
<div class="card-body">
{% include layout/layouts-list.html %}
</div>
</div>
pages/_includes/layout/menu-aside.html
+1 -1
View File
@@ -15,7 +15,7 @@
{% if level-1[1].badge %}
{% assign badge = level-1[1].badge %}
{% assign badge-color = level-1[1].badge-color | default: 'green' %}
{% assign badge-color = level-1[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color %}
{% endif %}
pages/_includes/layout/menu.html
+44 -39
View File
@@ -1,46 +1,51 @@
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
{% assign has-children = false %}
{% if level-1[1].children %}
{% assign has-children = true %}
{% endif %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" 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>
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if has-children %} dropdown{% endif %}">
<a class="nav-link{% if has-children %} dropdown-toggle{% endif %}" {% if has-children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" 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>
<span class="nav-text">
{{ level-1[1].title }}
{{ level-1[1].title }}
{% unless include.top %}
{% if level-1[1].label %}
<span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
{% endif %}
{% endunless %}
</span>
</a>
{% if level-1[1].badge %}
{% assign badge = level-1[1].badge %}
{% assign badge-color = level-1[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color class="ml-2" %}
{% endif %}
</a>
{% if has-children %}
<div class="dropdown-menu">
{% for level-2 in level-1[1].children %}
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" 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 %}
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
{% endif %}
</span>
</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
{% if level-1[1].children %}
<ul class="dropdown-menu">
{% for level-2 in level-1[1].children %}
<li {% if level-2[1].children %}class="dropright"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
{{ level-2[1].title }}
{% if level-2[1].badge %}
{% assign badge = level-2[1].badge %}
{% assign badge-color = level-2[1].badge-color | default: "green" %}
{% include ui/badge.html text=badge color=badge-color class="ml-auto" %}
{% endif %}
</a>
{% if level-2[1].children %}
<div class="dropdown-menu">
{% for level-3 in level-2[1].children %}
<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
{% endfor %}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
pages/_includes/layout/navbar-logo.html
+3 -3
View File
@@ -1,6 +1,6 @@
{% assign prefix = include.prefix | default: 'navbar' %}
<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
</a>
<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
</a>
pages/_includes/layout/navbar-search.html
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="navbar-search d-none d-xl-block">
<form action="." method="get">
{% include ui/form/input-icon.html prepend=true light=true %}
{% include ui/form/input-icon.html prepend=true %}
</form>
</div>
pages/_includes/layout/navbar.html
+37 -37
View File
@@ -2,46 +2,46 @@
{% assign person = site.data.people[person-id] %}
{% if include.menu-layout != 'vertical' %}
{% include layout/navbar-logo.html class="mr-4" %}
{% include layout/navbar-logo.html class="mr-4" %}
{% else %}
{% include layout/navbar-search.html class="mr-4" %}
{% include layout/navbar-search.html class="mr-4" %}
{% endif %}
<ul class="nav navbar-menu align-items-center ml-auto">
<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>
<li class="nav-item d-none d-lg-flex mr-3">
{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" icon-color="github" external=true %}
</li>
<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-reset ml-2">
{% include ui/avatar.html src=person.photo size="sm" %}
<span class="ml-2 d-none d-lg-block lh-1">
{{ person.full_name }}
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
{% 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
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
<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-reset ml-2">
{% include ui/avatar.html src=person.photo size="sm" %}
<span class="ml-2 d-none d-lg-block lh-1">
{{ person.full_name }}
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
{% 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
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
</ul>
pages/_includes/layout/page-title-actions.html
+24 -24
View File
@@ -2,30 +2,30 @@
<!-- Page title actions -->
<div class="col-auto ml-auto d-print-none">
{% if actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif actions == 'calendar' %}
<div class="d-flex">
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'photos' %}
<div class="d-flex">
<div class="mr-3">
{% include ui/form/input-icon.html %}
</div>
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'breadcrumb' %}
<div class="d-flex">
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
</div>
{% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline">
{% if actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif actions == 'calendar' %}
<div class="d-flex">
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'photos' %}
<div class="d-flex">
<div class="mr-3">
{% include ui/form/input-icon.html %}
</div>
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'breadcrumb' %}
<div class="d-flex">
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
</div>
{% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline">
{% include ui/button.html text="New view" color="secondary" icon="plus" %}
</span>
{% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %}
{% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %}
</div>
pages/_includes/layout/topmenu.html
+7 -7
View File
@@ -1,9 +1,9 @@
<header class="topnav topbar">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
<div class="container{% if include.fluid %}-fluid{% endif %}">
{% include layout/menu.html top=true %}
<header class="topnav">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
<div class="container{% if include.fluid %}-fluid{% endif %}">
{% include layout/menu.html top=true %}
{% include layout/navbar-search.html %}
</div>
</div>
{% include layout/navbar-search.html %}
</div>
</div>
</header>
pages/_includes/layout/topnav.html
+6 -6
View File
@@ -1,9 +1,9 @@
<header class="topnav topbar">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
</div>
</div>
<header class="topnav">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
</div>
</div>
</header>
pages/_includes/parts/buttons-table.html
+2 -2
View File
@@ -11,7 +11,7 @@
{% for type in variants %}
{% if show-link or type[0] != 'link' %}
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %} mb-3">
{% if include.icon == true %}
{% if include.icon or include.icon-only %}
{% assign icon = type[1].icon %}
{% endif %}
@@ -25,7 +25,7 @@
{% assign text = type[1].title %}
{% assign color = type[0] %}
{% include ui/button.html block=true color=false class=class icon=icon icon-only=icon-only text=text %}
{% include ui/button.html block=true color=false class=class icon=icon icon-only=include.icon-only text=text %}
</div>
{% endif %}
{% endfor %}
pages/_includes/parts/demo-layout.html
+18
View File
@@ -0,0 +1,18 @@
<div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
<div class="row row-0 flex-fill">
{% if include.sidebar %}
<div class="{% if include.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if include.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
{% endif %}
<div class="col">
{% unless include.hide-topnav %}
<div class="border-bottom h-2 bg-white"></div>
{% endunless %}
{% if include.topmenu %}
<div class="h-2 {% if include.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
{% endif %}
</div>
{% if include.sidebar-right %}
<div class="col-3 {% if include.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
{% endif %}
</div>
</div>
pages/_includes/parts/form-payments.html
+24
View File
@@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Payment method</label>
{% assign items = "visa,mastercard,paypal" | split: ',' %}
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for item in items %}
<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-box d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-{{ item }} payment-sm mr-2"></span>
{% if forloop.index >= 2 %}
ending in <strong>{{ forloop.index | random_number: 1000, 9999 }}</strong>
{% endif %}
</div>
</div>
</label>
{% endfor %}
</div>
</div>
pages/_includes/parts/form-project-manager.html
+24
View File
@@ -0,0 +1,24 @@
<div class="mb-3">
<label class="form-label">Project Manager</label>
<div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
{% for person in site.data.people limit: 5 %}
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="{{ person.id }}" class="form-selectgroup-input" {%
if forloop.index== 2 %} checked{% endif %}>
<div class="form-selectgroup-box d-flex align-items-center p-3">
<div class="mr-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-box-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="text-muted">{{ person.job_title }}</div>
</div>
</div>
</div>
</label>
{% endfor %}
</div>
</div>
pages/_includes/parts/input-color.html
+3 -3
View File
@@ -3,9 +3,9 @@
<div class="row row-xs">
{% for color in site.colors limit: 10 %}
<div class="col-auto">
<label class="colorinput">
<input name="color" type="checkbox" value="{{ color[0] }}" class="colorinput-input" {% if forloop.index== 2 %} checked{% endif %}/>
<span class="colorinput-color bg-{{ color[0] }}"></span>
<label class="form-colorinput">
<input name="color" type="checkbox" value="{{ color[0] }}" class="form-colorinput-input" {% if forloop.index== 2 %} checked{% endif %}/>
<span class="form-colorinput-color bg-{{ color[0] }}"></span>
</label>
</div>
{% endfor %}
pages/_includes/parts/input-image.html
+4 -4
View File
@@ -4,10 +4,10 @@
<div class="row row-xs">
{% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="form-imagecheck-figure">
<img src="{{ site.base }}/static/photos/{{ photo.file }}" alt="" class="form-imagecheck-image">
</span>
</label>
</div>
pages/_includes/parts/input-selectgroups.html
+8 -6
View File
@@ -1,18 +1,20 @@
<div class="mb-3">
<label class="form-label">Shipping methods</label>
{% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
<label class="form-label">Your skills</label>
{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
</div>
<div class="mb-3">
<label class="form-label">Icons input</label>
{% include ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div>
<div class="mb-3">
<label class="form-label">Icon input</label>
{% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
<label class="form-label">Shipping methods</label>
{% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="form-selectgroup-vertical" type="radio" name="shipping-method" %}
</div>
<div class="mb-3">
<label class="form-label">Your skills</label>
{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
<label class="form-label">Icon input</label>
{% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
</div>
pages/_includes/parts/nav/nav-aside.html
+62
View File
@@ -0,0 +1,62 @@
<form action="" method="get">
<div class="subheader mb-2">Category</div>
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
<div class="list-group list-group-transparent mb-3">
{% 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>
</a>
{% endfor %}
</div>
<div class="subheader mb-2">Rating</div>
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}
<div class="mb-3">
{% for item in items %}
<label class="form-check mb-1">
<input type="radio" class="form-check-input" name="form-stars" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
<span class="form-check-label">{{ item }}</span>
</label>
{% endfor %}
</div>
<div class="subheader mb-2">Tags</div>
{% assign items = "business,evening,leisure,party" | split: "," %}
<div class="mb-3">
{% for item in items %}
<label class="form-check mb-1">
<input type="checkbox" class="form-check-input" name="form-tags[]" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
<span class="form-check-label">{{ item }}</span>
</label>
{% endfor %}
</div>
<div class="subheader mb-2">Price</div>
<div class="row row-sm align-items-center mb-3">
<div class="col">
{% include ui/form/input-group.html prepend="$" placeholder="from" value="3" %}
</div>
<div class="col-auto">—</div>
<div class="col">
{% include ui/form/input-group.html prepend="$" placeholder="to" %}
</div>
</div>
<div class="subheader mb-2">Shipping</div>
<div>
<select name="" class="form-select">
<option>United Kingdom</option>
<option>USA</option>
<option>Germany</option>
<option>Poland</option>
<option>Other&hellip;</option>
</select>
</div>
<div class="mt-5">
{% include ui/button.html text="Confirm changes" color="primary" block=true element="button" %}
{% include ui/button.html text="Reset to defaults" color="link" block=true %}
</div>
</form>
pages/_includes/ui/alert.html
+8 -4
View File
@@ -1,13 +1,17 @@
{% assign person = include.person %}
<div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
{% if include.avatar %}{% include ui/avatar.html person=person %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon class="mr-1" %}{% endif %} {{ include.text | default:
"This is a custom alert box!" }}
{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id %}{% endif %}
{% if include.icon %}
{% include ui/icon.html icon=include.icon class="mr-1" %}
{% endif %}
{{ include.text | default: "This is a custom alert box!" }}
{% if include.buttons %}
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Cancel</a>
</div>
{% endif %}
{% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
</div>
pages/_includes/ui/button.html
+14 -2
View File
@@ -1,16 +1,28 @@
{% removeemptylines %}
{% assign spinner-class = false %}
{% assign color = include.color | default: 'secondary' %}
{% if include.color == false %}
{% assign color = null %}
{% endif %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
{% assign href = '#' %}
{% if include.href %}
{% if include.external %}
{% assign href = include.href %}
{% else %}
{% assign href = site.base | append: '/' | append: include.href %}
{% endif %}
{% endif %}
{% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{% if include.href %}{{ site.base }}/{{ include.href }}{% else %}#{% endif %}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank"{% endif %}>
{% if include.spinner %}
{% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}
{% unless include.icon-only %}
{{ include.text | default: "Button" }}
{% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
pages/_includes/ui/carousel.html
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="carousel-inner">
{% for photo in photos limit: limit offset: offset %}
<div class="carousel-item{% if forloop.first %} active{% endif %}">
<img class="d-block w-100" alt="" src="{{ site.base }}/img/photos/{{ photo.file }}" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}" data-holder-rendered="true">
{% if include.show-captions %}
<div class="carousel-item-background d-none d-md-block"></div>
pages/_includes/ui/chart.html
-2
View File
@@ -27,9 +27,7 @@
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: "{{ data.type | default: 'bar' }}",
{% if data.title or data.type == "bar" or data.type == "line" %}
fontFamily: 'inherit',
{% endif %}
height: {{ height | times: 16 }},
{% if data.sparkline %}
pages/_includes/ui/flag.html
+1 -1
View File
@@ -1 +1 @@
<span class="flag flag-{{ include.flag | default: 'uk' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>
<span class="flag{% if include['size'] %} flag-{{ include.size }}{% endif %} flag-country-{{ include.flag | default: 'pl' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>
pages/_includes/ui/form/input-mask.html
+18
View File
@@ -1 +1,19 @@
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
{% append_lib imask %}
{% capture_once scripts %}
<script>
(function () {
const $elem = $('[data-mask]');
if ($elem) {
$elem.each(function () {
IMask($(this).get(0), {
mask: $(this).attr('data-mask'),
lazy: $(this).attr('data-mask-visible') === 'true',
});
});
}
})();
</script>
{% endcapture_once %}
pages/_includes/ui/form/input-selectgroup.html
+4 -4
View File
@@ -2,12 +2,12 @@
{% assign default = include.default | default: values[0] %}
{% assign type = include.type | default: "checkbox" %}
{% assign name = include.name | default: "name" %}
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
<div class="form-selectgroup{% if include.class %} {{ include.class }}{% endif %}">
{% for value in values %}
<label class="selectgroup-item">
<label class="form-selectgroup-item">
{% assign s = value | split: "i:" %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
<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-box">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
</label>
{% endfor %}
</div>
pages/_includes/ui/form/selectize.html
+2 -2
View File
@@ -31,10 +31,10 @@
{% if key == "countries" %}
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
}
}
{% elsif key == "people" %}
pages/_includes/ui/illustration.html
+1 -1
View File
@@ -1 +1 @@
<img src="{{ site.base }}/img/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
<img src="{{ site.base }}/static/illustrations/{{ include.image }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
pages/_includes/ui/image.html
+1 -1
View File
@@ -1 +1 @@
{% assign image-id = include.id | default: 0 %}{% assign image = site.data.photos[image-id] %}{{ site.base }}/img/photos/{{ image.file }}
{% assign image-id = include.id | default: 0 %}{% assign image = site.data.photos[image-id] %}{{ site.base }}/static/photos/{{ image.file }}
pages/_includes/ui/payment.html
+1 -1
View File
@@ -1 +1 @@
<span class="payment payment-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}{% if include.['size'] %} payment-size-{{include.size}}{% endif %}"></span>
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.class %} {{ include.class }}{% endif %}"></span>
pages/_includes/ui/toast.html
+2 -2
View File
@@ -1,6 +1,6 @@
{% assign person-id = include.person-id | default: 2 %}
{% assign person = site.data.people[person-id] %}
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
<div class="toast-header">
{% include ui/avatar.html person=person class="mr-2" size="sm" %}
<strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
{{ include.text | default: 'Hello, world! This is a toast message.' }}
</div>
</div>
pages/_layouts/docs.html
+1 -3
View File
@@ -9,9 +9,7 @@ page-title: Documentation
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
{% include ui/icon.html icon="github" class="mr-2" %}Browse source code
</a>
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" icon-color="github" external=true block=true class="mb-4" %}
<div class="list-group list-group-transparent mb-0">
{% for doc in site.data.menu.docs.children %}
pages/_plugins/jekyll-example.rb
+1 -1
View File
@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
def example(output)
output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
"<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
end
end
pages/buttons.html
+9
View File
@@ -69,6 +69,15 @@ menu: base.buttons
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Icon buttons</h3>
</div>
<div class="card-body">
{% include parts/buttons-table.html variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Social colors</h3>
pages/gallery.html
+2 -2
View File
@@ -4,7 +4,7 @@ page-title: Gallery
page-title-description: 1-12 of 241 photos
page-title-actions: photos
done: true
menu: gallery
menu: base.gallery
---
{% assign horizontal = 0 %}
@@ -13,7 +13,7 @@ menu: gallery
{% if photo.horizontal %}
{% assign person = site.data.people[forloop.index0] %}
<div class="col-sm-6 col-lg-4">
{% include cards/gallery.html person=person %}
{% include cards/gallery-photo.html person=person %}
</div>
{% assign horizontal = horizontal | plus: 1 %}
{% endif %}
pages/index.html
-2
View File
@@ -3,8 +3,6 @@ title: Dashboard
page-title: Dashboard
page-pretitle: Overview
page-title-actions: buttons
site-layout: layout-collapsed-md
menu-layout: vertical
menu: home
---
pages/layout-test.html
-1
View File
@@ -4,7 +4,6 @@ sidenav: true
sidenav-dark: true
page-title: Layout test
page-title-actions: breadcrumb
menu-layout: vertical
menu: base.buttons
---
pages/license.html
+55
View File
@@ -0,0 +1,55 @@
---
tmp: true
page-title: Tabler licence
---
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<div class="d-flex align-items-center mb-2">
<div>
<svg height="32" class="mr-3" viewBox="0 0 14 16" version="1.1" width="28" aria-hidden="true"><path fill-rule="evenodd" d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"></path></svg>
</div>
<div>
<small class="text-muted">tabler/tabler is licensed under the</small>
<h3 class="lh-1">MIT License</h3>
</div>
</div>
<div class="text-muted">
A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
</div>
</div>
<div class="col-md">
<h4>Permissions</h4>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="check" class="text-green" %} Commercial use</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Modification</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Distribution</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Private use</li>
</ul>
</div>
<div class="col-md">
<h4>Limitations</h4>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="x" class="text-red" %} Liability</li>
<li>{% include ui/icon.html icon="x" class="text-red" %} Warranty</li>
</ul>
</div>
<div class="col-md">
<h4>Conditions</h4>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="info" class="text-blue" %} License and copyright notice</li>
</ul>
</div>
</div>
</div>
<div class="card-footer">
This is not legal advice. <a href="https://help.github.com/articles/licensing-a-repository/#disclaimer" target="_blank">Learn more about repository licenses.</a>
</div>
</div>
pages/search-results.html
+29
View File
@@ -0,0 +1,29 @@
---
page-title: Search results
page-title-description: About 2,410 result (0.19 seconds)
menu: extra.search-results
menu-layout: horizontal
---
<div class="row">
<div class="col-3">
{% include parts/nav/nav-aside.html %}
</div>
<div class="col-9">
<div class="row">
{% for photo in site.data.photos %}
{% if photo.horizontal %}
{% assign person = site.data.people[forloop.index0] %}
<div class="col-sm-6 col-lg-4">
{% include cards/gallery-photo.html person=person hide-likes=true %}
</div>
{% assign horizontal = horizontal | plus: 1 %}
{% endif %}
{% if horizontal == 12 %}
{% break %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
pages/store.html
+2 -2
View File
@@ -8,10 +8,10 @@ page-title: Store
<div class="col-lg-3">
<div class="row">
<div class="col-md-6 col-lg-12">
{% include cards/store-product.html product=0 %}
{% include cards/store-product.html product-id=0 %}
</div>
<div class="col-md-6 col-lg-12">
{% include cards/store-product.html product=3 %}
{% include cards/store-product.html product-id=3 %}
</div>
</div>
</div>
pages/tmp.html
+48 -49
View File
@@ -4,60 +4,59 @@ menu: a.b.c
---
<div class="row">
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
</div>
<div class="col-md-6 col-xl-4">
{% include cards/small-stats.html chart-type="bar" chart-data="5,8,2,5,-1,3,5,3" color="blue" icon="heart" %}
</div>
{% for chart in site.data.charts %}
{% if chart[1].demo %}
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
{% assign chart-id = chart[0] %}
<p>{{ chart-id }}</p>
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% for chart in site.data.charts %}
{% if chart[1].demo %}
<div class="col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
{% assign chart-id = chart[0] %}
<p>{{ chart-id }}</p>
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8"></div>
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4">
{% include cards/charts/total-sales.html %}
</div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-md-6">
{% include cards/user-info.html %}
{% include cards/users-list-2.html %}
<div class="col-md-6">
{% include cards/user-info.html %}
{% include cards/users-list-2.html %}
<div class="card">
<div class="card-body">
<div>{% include ui/stars.html %}</div>
<div>{% include ui/stars.html count=3 %}</div>
<div>{% include ui/stars.html color="red" %}</div>
<div>{% include ui/stars.html filled=true %}</div>
<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
</div>
</div>
</div>
<div class="col-md-6">
{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
</div>
<div class="card">
<div class="card-body">
<div>{% include ui/stars.html %}</div>
<div>{% include ui/stars.html count=3 %}</div>
<div>{% include ui/stars.html color="red" %}</div>
<div>{% include ui/stars.html filled=true %}</div>
<div>{% include ui/stars.html icon="heart" color="red" rate=2 %}</div>
<div>{% include ui/stars.html icon="circle" color="blue" %}</div>
</div>
</div>
</div>
<div class="col-md-6">
{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
</div>
</div>
<div class="row">
<div class="col-10 col-sm-8 col-md-6 col-lg-4">
pages/tmp2.html
+49 -39
View File
@@ -1,55 +1,65 @@
---
tmp: true
page-title: Tabler licence
page-title: Search results
---
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<div class="d-flex align-items-center mb-2">
<div>
<svg height="32" class="mr-3" viewBox="0 0 14 16" version="1.1" width="28" aria-hidden="true"><path fill-rule="evenodd" d="M7 4c-.83 0-1.5-.67-1.5-1.5S6.17 1 7 1s1.5.67 1.5 1.5S7.83 4 7 4zm7 6c0 1.11-.89 2-2 2h-1c-1.11 0-2-.89-2-2l2-4h-1c-.55 0-1-.45-1-1H8v8c.42 0 1 .45 1 1h1c.42 0 1 .45 1 1H3c0-.55.58-1 1-1h1c0-.55.58-1 1-1h.03L6 5H5c0 .55-.45 1-1 1H3l2 4c0 1.11-.89 2-2 2H2c-1.11 0-2-.89-2-2l2-4H1V5h3c0-.55.45-1 1-1h4c.55 0 1 .45 1 1h3v1h-1l2 4zM2.5 7L1 10h3L2.5 7zM13 10l-1.5-3-1.5 3h3z"></path></svg>
</div>
<div>
<small class="text-muted">tabler/tabler is licensed under the</small>
<h3 class="lh-1">MIT License</h3>
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-body">
<div>
{% assign items = "HTML,CSS,JavaScript,Ruby,GraphSQL" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<span class="form-selectgroup-box">
{{ item }}
</span>
</label>
{% endfor %}
</div>
</div>
<div class="text-muted">
A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
<div class="mt-4">
{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<div class="form-selectgroup-box">
{% include ui/icon.html icon=item class="mr-1" %}
<span>{{ item }}</span>
</div>
</label>
{% endfor %}
</div>
</div>
</div>
<div class="col-md">
<h4>Permissions</h4>
<div class="mt-4">
{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
<div class="form-selectgroup">
{% for item in items %}
<label class="form-selectgroup-item">
<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
<div class="form-selectgroup-box">
{% include ui/icon.html icon=item %}
</div>
</label>
{% endfor %}
</div>
</div>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="check" class="text-green" %} Commercial use</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Modification</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Distribution</li>
<li>{% include ui/icon.html icon="check" class="text-green" %} Private use</li>
</ul>
</div>
<div class="col-md">
<h4>Limitations</h4>
<div class="mt-4">
<input type="checkbox" class="form-check-input" checked>
<input type="radio" class="form-check-input" checked> lorem haha
</div>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="x" class="text-red" %} Liability</li>
<li>{% include ui/icon.html icon="x" class="text-red" %} Warranty</li>
</ul>
</div>
<div class="col-md">
<h4>Conditions</h4>
<ul class="list-unstyled">
<li>{% include ui/icon.html icon="info" class="text-blue" %} License and copyright notice</li>
</ul>
</div>
</div>
</div>
<div class="card-footer">
This is not legal advice. <a href="https://help.github.com/articles/licensing-a-repository/#disclaimer" target="_blank">Learn more about repository licenses.</a>
<div class="col">
{% include cards/configuration.html %}
</div>
</div>
pages/tmp4.html
+33 -19
View File
@@ -1,24 +1,38 @@
---
tmp: true
libs: countup
---
<div class="mb-3">
<label class="form-label">Tags</label>
{% include ui/form/selectize.html key="tags" %}
</div>
<div class="mb-3">
<label class="form-label">Top person</label>
{% include ui/form/selectize.html key="users" %}
</div>
<div class="mb-3">
<label class="form-label">Users list</label>
{% include ui/form/selectize.html key="people" %}
</div>
<div class="mb-3">
<label class="form-label">Countries</label>
{% include ui/form/selectize.html key="countries" %}
<div class="card">
<div class="card-header">
<h2 class="card-title">CountUp</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup>30000</h1>
<small>(Default)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
<small>(Duration 10s)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
<small>(No comma)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
<small>(Space)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
<small>(Suffix)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
<small>(Prefix)</small>
</div>
</div>
</div>
</div>