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

Release 1.0.0-alpha.9

Browse Source
This commit is contained in:
codecalm
2020-11-04 12:34:30 +01:00
parent a5eacf14be
commit eb7767ccd2
122 changed files with 27715 additions and 26288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/cards-masonry.html
+41 -41
View File
@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.8
* @version 1.0.0-alpha.9
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -26,6 +26,8 @@
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
@@ -41,7 +43,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
@@ -59,24 +61,19 @@
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
Action
</a>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
Another action
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -190,6 +187,11 @@
Lists
</a>
</li>
<li >
<a class="dropdown-item" href="./docs-index.html" >
Docs index
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
@@ -337,6 +339,11 @@
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-rtl.html" >
RTL mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
@@ -540,14 +547,14 @@
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Cards Masonry
</h2>
</div>
</div>
</div>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="row row-cards" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="card-body">
@@ -597,12 +604,12 @@
<div class="row align-items-center">
<div class="col-auto ml-auto">
<div class="avatar-list avatar-list-stacked">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
<span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
<span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
<span class="avatar">+3</span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded">JL</span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded">+3</span>
</div>
</div>
</div>
@@ -681,7 +688,7 @@
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
</div>
<p class="empty-title h3">No results found</p>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
Try adjusting your search or filter to find what you're looking for.
</p>
@@ -744,7 +751,7 @@
<div class="col-8">
<div class="mb-3">
<label class="form-label">Expiration date</label>
<div class="row row-sm">
<div class="row g-2">
<div class="col">
<select class="form-select">
<option value="1">1</option>
@@ -807,9 +814,16 @@
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</li>
<li class="list-inline-item">
<a href="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
</li>
</ul>
</div>
</div>
</div>
@@ -821,20 +835,6 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
(function () {
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
<script>
document.body.style.display = "block"
</script>