mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Merge branch 'dev' into dev-nouislider
This commit is contained in:
Dawid Harat
33
pages/_includes/cards/configuration.html
Normal file
33
pages/_includes/cards/configuration.html
Normal 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>
|
||||
24
pages/_includes/cards/gallery-photo.html
Normal file
24
pages/_includes/cards/gallery-photo.html
Normal 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>
|
||||
@@ -1,22 +0,0 @@
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<a href="#" class="mb-3 d-block"><img src="{{ site.base }}/static/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>
|
||||
@@ -1,8 +1,5 @@
|
||||
<div class="card card-profile">
|
||||
<div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<img class="card-profile-img" src="{{ site.data.people[4].photo }}">
|
||||
|
||||
<h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
|
||||
|
||||
<p class="mb-4">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text</label>
|
||||
<div class="form-hint">Here's some more info.</div>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@@ -20,7 +21,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 +61,7 @@
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</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>
|
||||
|
||||
@@ -9,8 +9,13 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/form/input-group.html prepend="https://example.com/users/" %}
|
||||
<label class="form-label">Input with prepended text</label>
|
||||
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended text</label>
|
||||
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
{% include parts/input-selectgroups.html %}
|
||||
{% include parts/input-datalist.html %}
|
||||
{% include parts/input-sizes.html %}
|
||||
{% include parts/input-range.html %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -8,5 +8,6 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- Tabler Core -->
|
||||
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
<script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler-range-sliders{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
|
||||
|
||||
24
pages/_includes/layout/layouts-list.html
Normal file
24
pages/_includes/layout/layouts-list.html
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" icon-color="github" external=true %}
|
||||
</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>
|
||||
|
||||
@@ -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…"/>
|
||||
{% 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…"/>
|
||||
{% 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>
|
||||
|
||||
@@ -6,10 +6,22 @@
|
||||
<div>
|
||||
<!-- Sidebar menu -->
|
||||
{% include layout/menu-aside.html %}
|
||||
|
||||
<div class="hide-sidebar-folded">
|
||||
<hr>
|
||||
|
||||
<div class="text-muted">
|
||||
<div class="mb-2">
|
||||
<strong>160MB</strong> from <strong>2GB</strong> used.
|
||||
</div>
|
||||
{% include ui/progress.html percentage=30 size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<div class="mt-auto hide-sidebar-folded pt-3">
|
||||
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
18
pages/_includes/parts/demo-layout.html
Normal file
18
pages/_includes/parts/demo-layout.html
Normal 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>
|
||||
24
pages/_includes/parts/form-payments.html
Normal file
24
pages/_includes/parts/form-payments.html
Normal 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>
|
||||
24
pages/_includes/parts/form-project-manager.html
Normal file
24
pages/_includes/parts/form-project-manager.html
Normal 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>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 }}/static/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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
20
pages/_includes/parts/modals/simple.html
Normal file
20
pages/_includes/parts/modals/simple.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% assign id = "default" %}
|
||||
<div class="modal modal-blur fade" id="modal-{{ id }}" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
{% include ui/icon.html icon="x" %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
pages/_includes/parts/nav/nav-aside.html
Normal file
62
pages/_includes/parts/nav/nav-aside.html
Normal 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…</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>
|
||||
@@ -19,7 +19,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% assign e = include.element | default: 'a' %}
|
||||
<{{ 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 %}>
|
||||
<{{ 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.modal %} data-toggle="modal" data-target="#modal-{{ include.modal }}"{% 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 color=include.icon-color %}{% endif %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<span class="input-group-text">{{ include.prepend }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<input type="text" class="form-control"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
|
||||
<input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
|
||||
{% if include.append %}
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">{{ include.append }}</span>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user