mirror of
https://github.com/tabler/tabler.git
synced 2026-07-26 04:54:40 +04:00
Release 1.0.0-alpha.11
This commit is contained in:
codecalm
+243
-194
@@ -1,7 +1,7 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
|
||||
* @version 1.0.0-alpha.10
|
||||
* @version 1.0.0-alpha.11
|
||||
* @link https://tabler.io
|
||||
* Copyright 2018-2020 The Tabler Authors
|
||||
* Copyright 2018-2020 codecalm.net Paweł Kuna
|
||||
@@ -362,181 +362,14 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item active dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="../docs/index.html" >
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="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="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Docs
|
||||
Documentation
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/index.html" >
|
||||
Introduction
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/alerts.html" >
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/autosize.html" >
|
||||
Autosize
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/avatars.html" >
|
||||
Avatars
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/badges.html" >
|
||||
Badges
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/breadcrumb.html" >
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/buttons.html" >
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/cards.html" >
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/carousel.html" >
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item active" href="../docs/colors.html" >
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/cursors.html" >
|
||||
Cursors
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/charts.html" >
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/dropdowns.html" >
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/divider.html" >
|
||||
Divider
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/empty.html" >
|
||||
Empty states
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/flags.html" >
|
||||
Flags
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/form-elements.html" >
|
||||
Form elements
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/form-helpers.html" >
|
||||
Form helpers
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/input-mask.html" >
|
||||
Form input mask
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/modals.html" >
|
||||
Modals
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/progress.html" >
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/payments.html" >
|
||||
Payments
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/range-slider.html" >
|
||||
Range slider
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/ribbons.html" >
|
||||
Ribbons
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/skeleton.html" >
|
||||
Skeleton
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/spinners.html" >
|
||||
Spinners
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/steps.html" >
|
||||
Steps
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/tables.html" >
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/tabs.html" >
|
||||
Tabs
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/timelines.html" >
|
||||
Timelines
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/toasts.html" >
|
||||
Toasts
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/tooltips.html" >
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
<li >
|
||||
<a class="dropdown-item" href="../docs/typography.html" >
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
|
||||
@@ -565,34 +398,250 @@
|
||||
</div>
|
||||
</div>
|
||||
</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 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
|
||||
</a>
|
||||
<h5 class="subheader">On this page</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="toc-entry toc-h2"><a href="#base-colors">Base colors</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#light-colors">Light colors</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="d-none d-lg-block col-lg-3">
|
||||
<ul class="nav nav-pills nav-vertical">
|
||||
<li class="nav-item">
|
||||
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="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="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
|
||||
</span>
|
||||
Getting started
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav collapse show" id="menu-base">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/index.html" class="nav-link">
|
||||
Introduction
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/colors.html" class="nav-link active">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/typography.html" class="nav-link">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/icons.html" class="nav-link">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="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="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
|
||||
</span>
|
||||
Components
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav collapse" id="menu-components">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/alerts.html" class="nav-link">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/avatars.html" class="nav-link">
|
||||
Avatars
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/badges.html" class="nav-link">
|
||||
Badges
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/breadcrumb.html" class="nav-link">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/buttons.html" class="nav-link">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/cards.html" class="nav-link">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/carousel.html" class="nav-link">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/dropdowns.html" class="nav-link">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/divider.html" class="nav-link">
|
||||
Divider
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/empty.html" class="nav-link">
|
||||
Empty states
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-elements.html" class="nav-link">
|
||||
Form elements
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/form-helpers.html" class="nav-link">
|
||||
Form helpers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/modals.html" class="nav-link">
|
||||
Modals
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/progress.html" class="nav-link">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/payments.html" class="nav-link">
|
||||
Payments
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/range-slider.html" class="nav-link">
|
||||
Range slider
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/ribbons.html" class="nav-link">
|
||||
Ribbons
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/skeleton.html" class="nav-link">
|
||||
Skeleton
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/spinners.html" class="nav-link">
|
||||
Spinners
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/steps.html" class="nav-link">
|
||||
Steps
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/switch-icon.html" class="nav-link">
|
||||
Switch icon
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tables.html" class="nav-link">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tabs.html" class="nav-link">
|
||||
Tabs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/timelines.html" class="nav-link">
|
||||
Timelines
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/toasts.html" class="nav-link">
|
||||
Toasts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/tooltips.html" class="nav-link">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="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="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
|
||||
</span>
|
||||
Utilities
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav collapse" id="menu-utils">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/cursors.html" class="nav-link">
|
||||
Cursors
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
|
||||
</span>
|
||||
Plugins
|
||||
<span class="nav-link-toggle"></span>
|
||||
</a>
|
||||
<ul class="nav collapse" id="menu-plugins">
|
||||
<li class="nav-item">
|
||||
<a href="../docs/autosize.html" class="nav-link">
|
||||
Autosize
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/input-mask.html" class="nav-link">
|
||||
Form input mask
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/flags.html" class="nav-link">
|
||||
Flags
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../docs/charts.html" class="nav-link">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../changelog.html" class="nav-link">
|
||||
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="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"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
|
||||
</span>
|
||||
Changelog
|
||||
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.11</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="markdown">
|
||||
<div class="d-flex">
|
||||
<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>
|
||||
Bootstrap documentation
|
||||
</a>
|
||||
</p>
|
||||
<div class="mb-5">
|
||||
<div class="d-flex mb-3">
|
||||
<h1 class="mt-0">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>
|
||||
Bootstrap documentation
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p>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's a very important aspect of a successful design, which needs to be well thought out.</p>
|
||||
</div>
|
||||
<p>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's a very important aspect of a successful design, which needs to be well thought out.</p>
|
||||
<h2 id="base-colors">Base colors</h2>
|
||||
<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">
|
||||
@@ -845,7 +894,7 @@
|
||||
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.10</a>
|
||||
<a href="../changelog.html" class="link-secondary">v1.0.0-alpha.11</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user