Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

new components, ribbons, button fixes

Browse Source
This commit is contained in:
codecalm
2019-10-08 00:35:00 +01:00
parent e30d63840e
commit faf81c6e16
27 changed files with 132 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_components/card-ribbon.html
+6
View File
@@ -0,0 +1,6 @@
---
title: Card with ribbon
columns: 1
---
{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}
pages/_includes/cards/ribbon.html
+6 -3
View File
@@ -2,9 +2,12 @@
{% assign product = site.data.products[product-id] %}
<div class="card">
<div class="card-body p-5">
<div class="h-10"></div>
<div class="card-body{% unless include.lorem %} h-8{% endunless %}">
{% if include.lorem %}
<h3 class="card-title">Card with ribbon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
{% endif %}
</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" %}{% endif %}</div>
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
</div>
pages/_includes/parts/input-selectgroups.html
+1 -1
View File
@@ -14,5 +14,5 @@
<div class="mb-3">
<label class="form-label">Your skills</label>
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
</div>
pages/_includes/parts/navbar.html
+18 -30
View File
@@ -17,17 +17,8 @@
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
{% if include.search %}
<div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
<div class="input-icon">
<span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
<input type="text" class="form-control form-control-light" placeholder="Search" tabindex="-1">
</div>
</div>
{% endif %}
{% if include.plus-left %}
<a href="javascript:void(0)" class="btn btn-primary">
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
</a>
{% endif %}
@@ -66,7 +57,7 @@
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="javascript:void(0)">See all <i class="fa fa-angle-right text-muted"></i></a>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
@@ -74,23 +65,20 @@
{% if include.progress %}
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link text-muted">
<a href="#" class="nav-link text-muted">
Profile Completeness: 70%
<!--<span class="progress progress-xs">-->
<!--<span class="progress-bar" style="width: 70%"></span>-->
<!--</span>-->
</a>
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="javascript:void(0)" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
@@ -103,7 +91,7 @@
{% if include.user-menu %}
<li class="nav-item dropdown">
<a href="javascript:void(0)" data-toggle="dropdown"
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %}
@@ -123,24 +111,24 @@
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="javascript:void(0)">
<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="javascript:void(0)">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
@@ -149,18 +137,18 @@
{% if include.manage %}
<li class="nav-item">
<a href="javascript:void(0)" class="btn btn-secondary">Manage Widgets</a>
<a href="#" class="btn btn-secondary">Manage Widgets</a>
</li>
{% endif %}
{% if include.register %}
<li class="nav-item ">
<a href="javascript:void(0)" class="nav-link">
<a href="#" class="nav-link">
Sign in
</a>
</li>
<li class="d-flex align-items-center">
<a href="javascript:void(0)" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
Register
</a>
</li>
@@ -168,19 +156,19 @@
{% if include.plus %}
<li class="nav-item">
<a href="javascript:void(0)" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
<a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
</li>
{% endif %}
{% if include.premium %}
<li class="nav-item">
<a href="javascript:void(0)" class="btn btn-success">Go Premium</a>
<a href="#" class="btn btn-success">Go Premium</a>
</li>
{% endif %}
{% if include.sync %}
<li class="nav-item">
<a href="javascript:void(0)" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
</li>
{% endif %}
</ul>
pages/_includes/ui/empty.html
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="empty-icon">
{% if include.illustration %}
{% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
{% include ui/illustration.html image=illustration-src class="h-12 mb-4" %}
{% include ui/illustration.html image=illustration-src class="h-8 mb-4" %}
{% elsif include.icon-text %}
<div class="display-4">{{ include.icon-text }}</div>
{% else %}
pages/_includes/ui/icon.html
+9 -3
View File
@@ -5,12 +5,18 @@
{% include_cached {{ svg-file }} %}
{% endcapture %}
{% assign replace-to = "icon" %}
{% if include.right %}
{% assign replace-to = 'class="icon icon-right"' %}
{% else %}
{% assign replace-to = 'class="icon"' %}
{% assign replace-to = replace-to | append: " icon-right" %}
{% endif %}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% else %}
{% assign provider = include.provider | default: "fe" %}
pages/_layouts/component.html
+5 -5
View File
@@ -10,7 +10,7 @@ og-component: true
<div class="row">
<div class="col-lg-3">
<div class="list-group list-group-transparent mb-0">
{% assign components = site.components | sort: title %}
{% assign components = site.components | sort: 'title' %}
{% for component in components %}
<a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
{% endfor %}
@@ -18,7 +18,7 @@ og-component: true
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="card-body p-6">
<div class="card-title">{{ page.title }}</div>
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
@@ -31,13 +31,13 @@ og-component: true
</div>
</div>
<div class="highlight m-0 rounded-0 rounded-bottom">
<div class="highlight m-0 rounded-0 rounded-bottom mb-3">
{{ content | highlight_tidy: 'html' }}
</div>
<div class="row">
<div class="col">{% include ui/button.html text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
<div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
</div>
</div>
</div>
pages/ribbons.html
+23 -21
View File
@@ -4,25 +4,27 @@ page-title: Ribbons
done: true
---
{% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}
<div class="row">
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html top=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html top=true left=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html left=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html left=true bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true left=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html color="red" %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html color="green" bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
</div>
<div class="{{ col-class }}">{% include cards/ribbon.html %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html top=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="red" %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html color="green" bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
</div>