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

feat: enhance documentation links and improve SCSS styles for better readability

Browse Source
This commit is contained in:
codecalm
2025-04-19 12:06:46 +02:00
parent d4886607f0
commit 88b9e87c6e
31 changed files with 105 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@
position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
background-color: var(--#{$prefix}alert-bg);
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
border-radius: var(--#{$prefix}alert-border-radius);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
display: flex;

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

@@ -2,6 +2,7 @@
Markdown
*/
.markdown {
font-size: $font-size-200;
line-height: $line-height-xl;
> :first-child {

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

@@ -71,6 +71,10 @@ h6,
line-height: var(--#{$prefix}line-height-h6);
}
.fs-base {
font-size: var(--#{$prefix}body-font-size);
}
strong,
.strong,
b {

4
docs/content/emails/introduction/contents.md
View File

@@ -44,8 +44,8 @@ The **Tabler Emails** package is organized into a clear and efficient folder str
### 1. Email Templates: `emails/`
This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files:
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/docs/emails/compiled-html) section.
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/img/emails/compiled-html) section.
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/img/emails/source-html) section.
* Screenshot images for desktop and mobile views.
* Assets folder with images used in the email template and the CSS file with styles.

2
docs/content/icons/plugins/figma.md
View File

@@ -4,7 +4,7 @@ description: Use Tabler Icons directly in Figma.
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
---
![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
![Tabler Figma Plugin](/img/icons/figma-plugin.png)
The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.

55
docs/content/ui/components/alerts.md
View File

@@ -14,22 +14,10 @@ Combine `alert` class with one of the following: `alert-success`, `alert-info`,
Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content.
{% capture html -%}
<div class="alert alert-success" role="alert">
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
<div class="alert alert-info" role="alert">
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.</div>
</div>
<div class="alert alert-warning" role="alert">
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.</div>
</div>
<div class="alert alert-danger" role="alert">
<h4 class="alert-title">I'm so sorry&hellip;</h4>
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
</div>
{% include "ui/alert.html" type="success" title="Wow! Everything worked!" description="Your account has been saved!" %}
{% include "ui/alert.html" type="info" title="Did you know?" description="Here is something that you might like to know." %}
{% include "ui/alert.html" type="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." %}
{% include "ui/alert.html" type="danger" title="I'm so sorry&hellip;" description="Your account has been deleted and can't be restored." %}
{%- endcapture %}
{% include "docs/example.html" html=html %}
@@ -38,9 +26,7 @@ Alert classes affect the color of all the text inside an alert. Use another clas
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
{% capture html -%}
<div class="alert alert-danger m-0">
This is a danger alert — <a href="#" class="alert-link">check it out</a>!
</div>
{% include "ui/alert.html" type="danger" title="This is a danger alert" link="check it out" %}
{%- endcapture %}
{% include "docs/example.html" html=html %}
@@ -53,34 +39,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
```
{% capture html -%}
<div class="alert alert-success alert-dismissible" role="alert">
<div>
<h4 class="alert-title">Wow! Everything worked!</h4>
<div class="text-secondary">Your account has been saved!</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<div>
<h4 class="alert-title">Did you know?</h4>
<div class="text-secondary">Here is something that you might like to know.</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<div>
<h4 class="alert-title">Uh oh, something went wrong</h4>
<div class="text-secondary">Sorry! There was a problem with your request.</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<div>
<h4 class="alert-title">I'm so sorry&hellip;</h4>
<div class="text-secondary">Your account has been deleted and can't be restored.</div>
</div>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
{% include "ui/alert.html" type="danger" title="This is a danger alert" show-close %}
{%- endcapture %}
{% include "docs/example.html" html=html %}
@@ -415,4 +374,6 @@ You're not limited to the 4 default alert colors. You can use any [base or socia
## SASS variables
You can customize the alert colors by changing the SASS variables. The default values are:
{% scss-docs "alert-variables" "ui/_alerts.scss" %}

2
docs/content/ui/components/avatars.md
View File

@@ -64,7 +64,7 @@ Besides pictures and initials, you can also use icons to make the avatars more u
## Avatar initials color
Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
Customize the color of the avatars' background. You can click [here](/img/ui/base/colors) to see the list of available colors.
{% capture html -%}
<span class="avatar bg-green-lt">AB</span>

2
docs/content/ui/components/buttons.md
View File

@@ -151,7 +151,7 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
Icons can be found [**here**](/docs/components/icons)
Icons can be found [**here**](/img/components/icons)
{% capture html -%}
<button type="button" class="btn">

2
docs/content/ui/components/divider.md
View File

@@ -46,7 +46,7 @@ You can modify the position of the text which is to be included in a separator a
## Divider color
Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
Customize the color of dividers to make them go well with your design. Click [here](/img/ui/base/colors) to see the list of available colors.
{% capture html -%}
<p>

2
docs/content/ui/components/icons.md
View File

@@ -45,7 +45,7 @@ Look at the example below to see the filled icons.
## Icon colors
To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/img/ui/colors). Color classes can be used with any HTML element.
```html
<span class="text-red">

2
docs/content/ui/components/progress.md
View File

@@ -89,7 +89,7 @@ This is how it looks:
You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
Full list of available colors can be found [here](/docs/ui/base/colors).
Full list of available colors can be found [here](/img/ui/base/colors).
{% capture html -%}
<div class="progress">

2
docs/content/ui/components/ribbons.md
View File

@@ -59,7 +59,7 @@ Using multiple classes at once will give you more position options. For example,
## Ribbon color
Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
Customize the ribbon's background color. You can click [here](/img/ui/base/colors) to see the list of available colors.
{% capture html -%}
<div class="card">

2
docs/content/ui/components/spinners.md
View File

@@ -23,7 +23,7 @@ Look at the example below to see how the spinner works:
## Colors
Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
{% capture html -%}
<div class="spinner-border text-blue" role="status"></div>

2
docs/content/ui/components/statuses.md
View File

@@ -6,7 +6,7 @@ description: Highlight interface elements with status dots.
## Default markup
Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
```html
<span class="status status-blue">Blue</span>

2
docs/content/ui/components/steps.md
View File

@@ -95,7 +95,7 @@ The example below demonstrates a progress tracker with tooltips for each step.
## Color
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/img/ui/base/colors) to see the range of available colors.
```html
<div class="steps steps-green">...</div>

2
docs/content/ui/components/tracking.md
View File

@@ -219,7 +219,7 @@ description: Monitor data activity visually.
## Tracking inside a card
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/docs/components/cards).
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/img/components/cards).
{% capture html -%}
<div class="card">

2
docs/content/ui/forms/form-color-check.md
View File

@@ -4,7 +4,7 @@ summary: The color check is a great way to make your form more user-friendly and
description: Enhance forms with color checks.
---
Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
Your input controls can come in a variety of colors, depending on your preferences. Click [here](/img/ui/base/colors) to see the list of available colors.
```html
<label class="form-colorinput">

16
docs/content/ui/forms/form-elements.md
View File

@@ -120,15 +120,13 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
You can remove borders from your form control by adding the `form-control-flush` class.
{% capture html -%}
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input
type="text"
class="form-control form-control-flush"
name="Form control flush"
placeholder="Text.."
/>
</div>
<label class="form-label">Form control flush</label>
<input
type="text"
class="form-control form-control-flush"
name="Form control flush"
placeholder="Text.."
/>
{%- endcapture %}
{% include "docs/example.html" html=html %}

2
docs/content/ui/forms/form-image-check.md
View File

@@ -144,7 +144,7 @@ If you want to use the image check as a radio button, you can change the input t
## Avatars
If you want to use the image check with avatars, you can use an [avatar component](/docs/ui/components/avatars) instead of an image.
If you want to use the image check with avatars, you can use an [avatar component](/img/ui/components/avatars) instead of an image.
{% capture html -%}
<div class="mb-3">

2
docs/content/ui/getting-started/how-to-contribute.md
View File

@@ -13,7 +13,7 @@ When contributing to Tabler, please adhere to the following guidelines:
1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
3. Contributions must be submitted via GitHub pull requests.
4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/img/ui/getting-started/browser-support)).
## Installation

2
docs/content/ui/getting-started/installation.md
View File

@@ -56,7 +56,7 @@ Update your HTML file to include these resources:
This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
You can also download the files and include them locally in your project. For more information, see the [Download](/img/ui/getting-started/download) page.
### Open in Your Browser

2
docs/content/ui/layout/page-layouts.md
View File

@@ -5,7 +5,7 @@ description: Learn to design dashboard layouts.
---
<Callout>
Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation).
Before you start with this section, make sure you have followed the [installation guideline](/img/ui/getting-started/installation).
</Callout>
## Sample layout

1
docs/eleventy.config.mjs
View File

@@ -267,7 +267,6 @@ export default function (eleventyConfig) {
eleventyConfig.addGlobalData("docs-links", [
{ title: 'Website', url: 'https://tabler.io', icon: 'world' },
{ title: 'Forum', url: '/', icon: 'messages' },
{ title: 'Support', url: 'https://tabler.io/support', icon: 'headset' },
]);

27
docs/scss/docs.scss
View File

@@ -8,6 +8,14 @@
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
}
.col-docs {
width: 15rem;
}
.bg-docs-gradient {
background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0 / 800px 800px !important;
}
.DocSearch-Button {
width: 100%;
box-shadow: 0 0 0 1px var(--tblr-border-color);
@@ -24,22 +32,21 @@
}
.no-transition {
* {
transition: none !important;
}
* {
transition: none !important;
}
}
.example>.modal,
.example>.offcanvas {
display: block !important;
position: relative !important;
.example > .modal,
.example > .offcanvas {
display: block !important;
position: relative !important;
}
.example>.offcanvas-backdrop {
position: absolute !important;
.example > .offcanvas-backdrop {
position: absolute !important;
}
.shiki {
background: var(--tblr-gray-900) !important;
color: var(--tblr-gray-300) !important;

8
shared/e11ty/filters.mjs
View File

@@ -229,4 +229,12 @@ export function appFilters(eleventyConfig) {
return ''
});
});
eleventyConfig.addPairedShortcode(`removeemptylines`, function (content) {
if (content) {
return content.split('\n').filter(line => line.trim() !== '').join('\n');
}
return '';
})
}

2
shared/includes/docs/download-button.html
View File

@@ -1,3 +1,3 @@
<div class="my-6 text-center">
<a href="{{ include.href }}" class="btn btn btn-primary">{{ include.title }}</a>
<a href="{{ include.href }}" class="btn btn btn-primary" target="_blank">{{ include.title }}</a>
</div>

2
shared/includes/docs/example.html
View File

@@ -1,5 +1,5 @@
<div
class="example border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
{%- unless include.raw -%}<div class="p-6 w-full{% if include.centered %} d-flex justify-content-center flex-fill flex-wrap{% if include.vertical %} flex-column{% endif %} gap-2{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
{{ html | remove-href }}
{%- unless include.raw -%}</div>{%- endunless -%}

6
shared/includes/docs/menu.html
View File

@@ -3,9 +3,11 @@
<nav class="space-y" id="menu">
{% for level1 in menu %}
<div>
<div class="h4 mb-2 cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level1.url | slug }}" aria-expanded="true">{{ level1.data.title }}</div>
<div class="subheader">
{{ level1.data.title }}
</div>
{% if level1.children %}
<nav class="nav nav-vertical nav-pills collapse{% if forloop.index == 1 %} show{% endif %}" id="collapse-{{ level1.url | slug }}" data-bs-parent="#menu">
<nav class="nav nav-vertical nav-pills">
{% for level2 in level1.children %}
<div>
<a class="nav-link{% if page.url == level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="false"{% endif %}>{{ level2.data.title }}</a>

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

@@ -16,6 +16,9 @@
</div>
<div class="col d-flex">
<ul class="navbar-nav ms-auto gap-2">
<div class="nav-item">
<a href="https://tabler.io/changelog" class="nav-link">Changelog</a>
</div>
<li class="nav-item hide-theme-dark">
<a href="?theme=dark" class="btn btn-icon">
{% include "ui/icon.html" icon="moon" %}

60
shared/includes/ui/alert.html
View File

@@ -1,23 +1,22 @@
{% assign icon = include.icon %}
{% unless icon %}
{% if include.type == 'success' %}
{% assign icon = 'check' %}
{% elsif include.type == 'warning' %}
{% assign icon = 'alert-triangle' %}
{% elsif include.type == 'danger' %}
{% assign icon = 'alert-circle' %}
{% elsif include.type == 'info' %}
{% assign icon = 'info-circle' %}
{% endif %}
{% endunless %}
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
{% removeemptylines %}
{%- assign icon = include.icon -%}
{%- assign type = include.type | default: 'success' -%}
{%- unless icon -%}
{%- if type == 'success' -%}
{%- assign icon = 'check' -%}
{%- elsif type == 'warning' -%}
{%- assign icon = 'alert-triangle' -%}
{%- elsif type == 'danger' -%}
{%- assign icon = 'alert-circle' -%}
{%- elsif type == 'info' -%}
{%- assign icon = 'info-circle' -%}
{%- endif -%}
{%- endunless -%}
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
<div class="alert-icon">
{% include "ui/icon.html" icon=icon class="alert-icon" %}
{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
</div>
{% if include.description or include.list %}
{% if include.description or include.list -%}
<div>
<h4 class="alert-heading">{{ include.title | default: "This is a custom alert box!" }}</h4>
<div class="alert-description">
@@ -32,23 +31,20 @@
{% endif %}
</div>
</div>
{% else %}
{%- else -%}
{{ include.title | default: "This is a custom alert box!" }}
{% if include.action %}
<a href="#" class="alert-action">
Link
</a>
{% endif %}
{% endif %}
{% if include.buttons %}
{% if include.action -%}
<a href="#" class="alert-action">{{ include.action | default: "Action" }}</a>
{%- elsif include.link -%}
<a href="#" class="alert-link">{{ include.link | default: "Link" }}</a>
{%- endif %}
{%- endif -%}
{%- if include.buttons -%}
<div class="btn-list">
<a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
{% endif %}
{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
{%- endif -%}
{%- if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif -%}
</div>
{% endremoveemptylines %}

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

@@ -35,9 +35,9 @@
<div class="flex-fill h-full">
<div class="container h-full">
<div class="row g-0 h-full">
<div class="col-3 h-full d-none d-lg-block border-end">
<div class="col-docs h-full d-none d-lg-block border-end">
<div class="py-4 h-full">
<div class="space-y h-full overflow-auto">
<div class="space-y h-full">
<div class="nav nav-vertical nav-pills">
{% for link in docs-links %}
<a href="{{ link.url }}" class="nav-link" target="_blank">
@@ -52,7 +52,7 @@
</div>
</div>
</div>
<div class="col">
<div class="col bg-docs-gradient">
<div class="py-lg-5 ps-lg-5">
<div class="py-6 ps-lg-6 p-xxl-6">
<div class="markdown" data-bs-spy="scroll" data-bs-target="#toc" data-bs-root-margin="50px 0px -0%" data-bs-smooth-scroll="true" tabindex="0">