Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

docs: docs improvements

Browse Source
This commit is contained in:
codecalm
2025-11-24 22:42:21 +01:00
parent d0fe913453
commit 2a474ef935
10 changed files with 83 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/scss/_variables.scss
View File

@@ -442,7 +442,7 @@ $font-weight-base: $font-weight-normal !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-line-height: 1.2 !default;
$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
$headings-font-weight: var(--#{$prefix}font-weight-medium) !default;
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
$headings-color: inherit !default;

2
core/scss/ui/_markdown.scss
View File

@@ -27,7 +27,7 @@ Markdown
h4,
h5,
h6 {
font-weight: var(--#{$prefix}font-weight-bold);
font-weight: $headings-font-weight;
}
h2,

4
core/scss/ui/_nav.scss
View File

@@ -17,12 +17,12 @@
.nav-link.active,
.nav-item.show .nav-link {
font-weight: var(--#{$prefix}font-weight-bold);
font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-active-color);
}
&.nav-pills {
margin: 0 calc(-1 * $nav-link-padding-x);
margin: 0 calc(-1 * var(--#{$prefix}nav-link-padding-x));
}
}

1
docs/content/emails/index.md
View File

@@ -1,6 +1,7 @@
---
title: Tabler Emails
seoTitle: Tabler Emails - premium email templates
icon: mail
order: 4
description: Customizable email templates for over 90 clients and devices.
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.

1
docs/content/icons/index.md
View File

@@ -1,6 +1,7 @@
---
title: Tabler Icons
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
icon: ghost
order: 2
description: Over 5000 pixel-perfect icons for web design and development
---

1
docs/content/illustrations/index.md
View File

@@ -1,6 +1,7 @@
---
title: Tabler Illustrations
order: 3
icon: paint
description: Customizable illustrations for modern web and mobile designs.
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
---

1
docs/content/ui/index.md
View File

@@ -1,6 +1,7 @@
---
title: Tabler UI
order: 1
icon: layout
description: Free and open source web application UI kit based on Bootstrap
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
---

36
docs/scss/docs.scss
View File

@@ -2,11 +2,13 @@
:root {
--docsearch-primary-color: var(--tblr-primary);
--docsearch-searchbox-background: var(--tblr-bg-surface);
--docsearch-searchbox-focus-background: var(--tblr-bg-surface);
--docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
--docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
--docsearch-text-color: var(--tblr-body-text);
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
--docsearch-key-shadow: none;
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
--docsearch-searchbox-shadow: 0 0 0 1px var(--tblr-border-color);
--docsearch-searchbox-focus-background: var(--tblr-bg-surface-tertiary);
}
.col-docs {
@@ -24,6 +26,11 @@
box-shadow: 0 0 0 1px var(--tblr-border-color);
font-weight: var(--tblr-font-weight-normal);
transition: all 0.2s ease-in-out;
border-radius: var(--tblr-border-radius);
}
.DocSearch-Button-Placeholder {
font-size: var(--tblr-font-size);
}
.DocSearch-SearchBar {
@@ -32,6 +39,11 @@
background-color: var(--tblr-bg-surface) !important;
}
.DocSearch-Search-Icon {
width: 1rem;
height: 1rem;
}
.DocSearch-Hit-source {
background: none !important;
}
@@ -100,8 +112,20 @@
box-shadow: none !important;
}
.DocSearch-Button-Keys {
min-width: 0;
gap: .25rem;
margin-right: .25rem;
}
.DocSearch-Button-Key {
top: 0;
box-shadow: none;
background: none;
padding: 0;
margin: 0;
width: auto;
font-size: var(--tblr-font-size);
}
.DocSearch-Container {
@@ -114,13 +138,13 @@
}
}
.example > .modal,
.example > .offcanvas {
.example>.modal,
.example>.offcanvas {
display: block !important;
position: relative !important;
}
.example > .offcanvas-backdrop {
.example>.offcanvas-backdrop {
position: absolute !important;
}

42
shared/includes/docs/navbar.html
View File

@@ -1,7 +1,7 @@
<div class="navbar navbar-expand sticky-top">
<div class="container">
<div class="row flex-fill align-items-md-center">
<div class="col">
<div class="col-auto">
<div class="d-flex align-items-center gap-4">
<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
{% include "docs/logo.html" %}
@@ -11,7 +11,7 @@
</div>
</div>
</div>
<div class="d-none d-md-block col">
<div class="d-none d-md-block col-3">
<div id="docsearch"></div>
</div>
<div class="col d-flex">
@@ -47,3 +47,41 @@
</div>
</div>
</div>
{% assign menu = collections.docs | collection-tree %}
<div class="navbar-expand-md">
<div class="container">
<div class="navbar">
<div class="row flex-column flex-md-row flex-fill align-items-center">
<div class="col">
<nav>
<ul class="navbar-nav">
{% for level1 in menu %}
<li class="nav-item{% if page.url contains level1.url %} active{% endif %}">
<a href="{{ level1.url }}" class="nav-link">
{% if level1.data.icon %}<span class="nav-link-icon">{% include "ui/icon.html" icon=level1.data.icon %}</span>{% endif %}
<span class="nav-link-title">{{ level1.data.title }}</span>
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
<div class="col-auto">
<nav>
<ul class="navbar-nav">
{% for link in docs-links %}
<li class="nav-item">
<a href="{{ link.url }}" class="nav-link" target="_blank">
<span class="nav-link-icon">{% include "ui/icon.html" icon=link.icon %}</span>
<span class="nav-link-title">{{ link.title }}</span>
</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

12
shared/layouts/docs/default.html
View File

@@ -81,7 +81,7 @@
<link rel="stylesheet" href="/css/docs{% if environment != 'development' %}.min{% endif %}.css" />
</head>
<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
<body class="d-flex flex-column bg-surface">
<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
<!-- BEGIN NAVBAR -->
<header role="banner">
@@ -93,16 +93,8 @@
<div class="container">
<div class="row g-0">
<div class="col-docs d-none d-lg-block border-end">
<div class="py-4">
<div class="py-4 pe-2">
<div class="space-y space-y-5">
<div class="nav nav-vertical">
{% for link in docs-links %}
<a href="{{ link.url }}" class="nav-link" target="_blank">
<span class="border me-2 rounded p-1">{% include "ui/icon.html" icon=link.icon %}</span>
{{ link.title }}
</a>
{% endfor %}
</div>
<div class="flex-fill">
{% include "docs/menu.html" %}
</div>