1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-26 04:54:40 +04:00

Release 1.0.0-alpha.9

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
+83 -87
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
@@ -12,7 +12,7 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Colors - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<title>Colors - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
@@ -27,6 +27,8 @@
<meta name="description" content="The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it&#39;s a very important aspect of a successful design, which needs to be well thought out."/>
<!-- 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 {
@@ -42,7 +44,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">
@@ -60,24 +62,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>
@@ -191,6 +188,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
@@ -338,6 +340,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
@@ -541,7 +548,7 @@
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Documentation
</h2>
@@ -550,7 +557,7 @@
</div>
<div class="row justify-content-center">
<div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
<div class="sticky-top">
<div class="sticky-top lh-lg py-4">
<a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
Browse source code
@@ -567,7 +574,7 @@
<div class="card-body">
<div class="markdown">
<div class="d-flex">
<h2 class="h1 mt-0 mb-3">Colors</h2>
<h1 class="h2 mt-0 mb-3">Colors</h1>
<p class="ml-auto">
<a href="https://getbootstrap.com/docs/4.4/utilities/colors/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
@@ -580,246 +587,228 @@
<p>Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.</p>
<div class="example">
<div class="mb-n3">
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-blue text-white">B</div>
<div class="avatar bg-blue text-white">B</div>
</div>
<div class="col">
<span class="font-weight-semibold">Blue</span><br />
<code>bg-blue</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-azure text-white">A</div>
<div class="avatar bg-azure text-white">A</div>
</div>
<div class="col">
<span class="font-weight-semibold">Azure</span><br />
<code>bg-azure</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-indigo text-white">I</div>
<div class="avatar bg-indigo text-white">I</div>
</div>
<div class="col">
<span class="font-weight-semibold">Indigo</span><br />
<code>bg-indigo</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-purple text-white">P</div>
<div class="avatar bg-purple text-white">P</div>
</div>
<div class="col">
<span class="font-weight-semibold">Purple</span><br />
<code>bg-purple</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-pink text-white">P</div>
<div class="avatar bg-pink text-white">P</div>
</div>
<div class="col">
<span class="font-weight-semibold">Pink</span><br />
<code>bg-pink</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-red text-white">R</div>
<div class="avatar bg-red text-white">R</div>
</div>
<div class="col">
<span class="font-weight-semibold">Red</span><br />
<code>bg-red</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-orange text-white">O</div>
<div class="avatar bg-orange text-white">O</div>
</div>
<div class="col">
<span class="font-weight-semibold">Orange</span><br />
<code>bg-orange</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-yellow text-white">Y</div>
<div class="avatar bg-yellow text-white">Y</div>
</div>
<div class="col">
<span class="font-weight-semibold">Yellow</span><br />
<code>bg-yellow</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-lime text-white">L</div>
<div class="avatar bg-lime text-white">L</div>
</div>
<div class="col">
<span class="font-weight-semibold">Lime</span><br />
<code>bg-lime</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-green text-white">G</div>
<div class="avatar bg-green text-white">G</div>
</div>
<div class="col">
<span class="font-weight-semibold">Green</span><br />
<code>bg-green</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-teal text-white">T</div>
<div class="avatar bg-teal text-white">T</div>
</div>
<div class="col">
<span class="font-weight-semibold">Teal</span><br />
<code>bg-teal</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-cyan text-white">C</div>
<div class="avatar bg-cyan text-white">C</div>
</div>
<div class="col">
<span class="font-weight-semibold">Cyan</span><br />
<code>bg-cyan</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-gray text-white">G</div>
</div>
<div class="col">
<span class="font-weight-semibold">Gray</span><br />
<code>bg-gray</code>
</div>
</div>
</div>
</div>
<h2 id="light-colors">Light colors</h2>
<p>All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.</p>
<div class="example">
<div class="mb-n3">
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-blue-lt">B</div>
<div class="avatar bg-blue-lt">B</div>
</div>
<div class="col">
<span class="font-weight-semibold">Blue</span><br />
<code>bg-blue-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-azure-lt">A</div>
<div class="avatar bg-azure-lt">A</div>
</div>
<div class="col">
<span class="font-weight-semibold">Azure</span><br />
<code>bg-azure-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-indigo-lt">I</div>
<div class="avatar bg-indigo-lt">I</div>
</div>
<div class="col">
<span class="font-weight-semibold">Indigo</span><br />
<code>bg-indigo-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-purple-lt">P</div>
<div class="avatar bg-purple-lt">P</div>
</div>
<div class="col">
<span class="font-weight-semibold">Purple</span><br />
<code>bg-purple-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-pink-lt">P</div>
<div class="avatar bg-pink-lt">P</div>
</div>
<div class="col">
<span class="font-weight-semibold">Pink</span><br />
<code>bg-pink-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-red-lt">R</div>
<div class="avatar bg-red-lt">R</div>
</div>
<div class="col">
<span class="font-weight-semibold">Red</span><br />
<code>bg-red-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-orange-lt">O</div>
<div class="avatar bg-orange-lt">O</div>
</div>
<div class="col">
<span class="font-weight-semibold">Orange</span><br />
<code>bg-orange-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-yellow-lt">Y</div>
<div class="avatar bg-yellow-lt">Y</div>
</div>
<div class="col">
<span class="font-weight-semibold">Yellow</span><br />
<code>bg-yellow-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-lime-lt">L</div>
<div class="avatar bg-lime-lt">L</div>
</div>
<div class="col">
<span class="font-weight-semibold">Lime</span><br />
<code>bg-lime-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-green-lt">G</div>
<div class="avatar bg-green-lt">G</div>
</div>
<div class="col">
<span class="font-weight-semibold">Green</span><br />
<code>bg-green-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-teal-lt">T</div>
<div class="avatar bg-teal-lt">T</div>
</div>
<div class="col">
<span class="font-weight-semibold">Teal</span><br />
<code>bg-teal-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-cyan-lt">C</div>
<div class="avatar bg-cyan-lt">C</div>
</div>
<div class="col">
<span class="font-weight-semibold">Cyan</span><br />
<code>bg-cyan-lt</code>
</div>
</div>
<div class="row row-sm mb-3 align-items-center">
<div class="col-auto">
<div class="stamp bg-gray-lt">G</div>
</div>
<div class="col">
<span class="font-weight-semibold">Gray</span><br />
<code>bg-gray-lt</code>
</div>
</div>
</div>
</div>
</div>
@@ -839,9 +828,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>