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 fixes

Browse Source
This commit is contained in:
codecalm
2020-11-06 23:49:13 +01:00
parent 5dd7d6b3e1
commit e76106a3dd
17 changed files with 128 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/_data/docs.yml
View File

@@ -1,12 +1,16 @@
index:
base:
title: Getting started
icon: brand-tabler
children:
index:
title: Introduction
icon: file
url: docs/index.html
colors:
title: Colors
url: docs/colors.html
typography:
title: Typography
url: docs/typography.html
components:
title: Components
@@ -33,12 +37,6 @@ components:
carousel:
title: Carousel
url: docs/carousel.html
colors:
title: Colors
url: docs/colors.html
cursors:
title: Cursors
url: docs/cursors.html
dropdowns:
title: Dropdowns
url: docs/dropdowns.html
@@ -93,13 +91,14 @@ components:
tooltips:
title: Tooltips
url: docs/tooltips.html
typography:
title: Typography
url: docs/typography.html
utilities:
utils:
title: Utilities
icon: flame
children:
cursors:
title: Cursors
url: docs/cursors.html
plugins:
title: Plugins

2
src/pages/_docs/colors.md
View File

@@ -1,6 +1,6 @@
---
title: Colors
menu: docs.components.colors
menu: docs.base.colors
description: 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.
bootstrap-link: utilities/colors/
---

3
src/pages/_docs/cursors.md
View File

@@ -1,10 +1,9 @@
---
title: Cursors
description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
menu: docs.components.cursors
menu: docs.utils.cursors
---
## Cursor utilities
Use one of the available cursor utilities depending on the action you want to indicate.

18
src/pages/_docs/divider.md
View File

@@ -12,14 +12,14 @@ Use dividers to visually separate content into parts. You can use a line only or
{% capture code %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="See also" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code wrapper="demo-dividers" %}
## Text position
@@ -28,7 +28,7 @@ You can modify the position of the text which is to be included in a separator a
{% capture code %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Left divider" position="left" %}
<p>
@@ -36,14 +36,14 @@ You can modify the position of the text which is to be included in a separator a
</p>
{% include ui/hr.html text="Centered divider" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Right divider" position="right" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code wrapper="demo-dividers" %}
## Divider color
@@ -56,11 +56,15 @@ Customize the color of dividers to make them go well with your design. Click [he
</p>
{% include ui/hr.html text="Green divider" color="green" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Red divider" color="red" %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Primary divider" color="primary" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endcapture %}
{% include example.html code=code %}
{% include example.html code=code wrapper="demo-dividers" %}

11
src/pages/_docs/empty.md
View File

@@ -20,6 +20,15 @@ Use the default empty state to engage users in the critical moments of their exp
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
{% capture code %}
{% include ui/empty.html illustration=true %}
{% include ui/empty.html illustration=true title="Invoices are managed from here" description="You can see which ones are sent, viewed, partially or fully paid." button-icon="plus" button-text="New invoice" %}
{% endcapture %}
{% include example.html code=code %}
## Empty state with header
Instead of adding an icon or illustration you can simply give the text:
{% capture code %}
{% include ui/empty.html icon-text="404" title="Oops… You just found an error page" description="We are sorry but the page you are looking for was not found" button-text="Take me home" button-icon="arrow-left" %}
{% endcapture %}
{% include example.html code=code %}

2
src/pages/_docs/index.md
View File

@@ -1,6 +1,6 @@
---
title: Introduction
menu: docs.index.index
menu: docs.base.index
icon: flag
redirect_from: docs.html
---

2
src/pages/_docs/typography.md
View File

@@ -1,6 +1,6 @@
---
title: Typography
menu: docs.components.typography
menu: docs.base.typography
description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
bootstrap-link: content/typography/
---

20
src/pages/_includes/forms/form-elements-5.html
View File

@@ -9,27 +9,27 @@
<label class="form-check mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Default checkbox
</div>
<div class="form-check-description">
</span>
<span class="form-check-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</span>
</label>
<label class="form-check mb-2">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Longer checkbox item that wraps on to two separate lines
</div>
<div class="form-check-description">
</span>
<span class="form-check-description">
Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
</div>
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<div class="form-check-label">
<span class="form-check-label">
Default checkbox without description
</div>
</span>
</label>
</div>

40
src/pages/_includes/ui/empty.html
View File

@@ -1,23 +1,23 @@
{% assign icon = include.icon | default: "search" %}
{% assign icon = include.icon | default: "mood-sad" %}
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<div class="empty-icon">
{% if include.illustration %}
{% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
{% include ui/illustration.html image=illustration-src class="mb-4" %}
{% elsif include.icon-text %}
<div class="display-4">{{ include.icon-text }}</div>
{% else %}
{% include ui/icon.html icon=icon %}
{% endif %}
</div>
<p class="empty-title">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle text-muted">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>
<div class="empty-action">
{% assign button-text = include.button-text | default: "Search again" %}
{% assign button-icon = include.button-icon | default: "search" %}
{% include ui/button.html text=button-text color="primary" icon=button-icon href="." %}
</div>
{% if include.illustration %}
{% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
<div class="empty-img">{% include ui/illustration.html image=illustration-src %}</div>
{% elsif include.icon-text %}
<div class="empty-header">{{ include.icon-text }}</div>
{% else %}
<div class="empty-icon">{% include ui/icon.html icon=icon %}</div>
{% endif %}
<p class="empty-title">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle text-muted">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>
<div class="empty-action">
{% assign button-text = include.button-text | default: "Search again" %}
{% assign button-icon = include.button-icon | default: "search" %}
{% include ui/button.html text=button-text color="primary" icon=button-icon href="." %}
</div>
</div>

2
src/pages/_layouts/docs.html
View File

@@ -7,7 +7,7 @@ page-header: Documentation
{% assign current-url = page.url | replace_regex: "^/", "" %}
<div class="row g-4">
<div class="row g-5">
<div class="d-none d-lg-block col-lg-3">
{% include docs/menu.html %}
</div>

2
src/scss/_variables.scss
View File

@@ -200,7 +200,7 @@ $link-hover-decoration: underline !default;
//Typography
$headings-font-weight: $font-weight-medium !default;
$hr-opacity: .1 !default;
$hr-opacity: $border-opacity !default;
$hr-margin-y: 2rem !default;
$caret-spacing: .4em !default;

7
src/scss/demo.scss
View File

@@ -36,4 +36,11 @@ body.no-transitions * {
margin: 0 auto;
display: block;
}
}
.demo-dividers {
>p {
opacity: .2;
user-select: none;
}
}

1
src/scss/demo/_examples.scss
View File

@@ -22,6 +22,7 @@
.example-content {
font-size: $font-size-base;
line-height: $line-height-base;
color: $body-color;
flex: 1;
max-width: 100%;
}

63
src/scss/ui/_empty.scss
View File

@@ -10,30 +10,55 @@
@include media-breakpoint-up(md) {
padding: 3rem;
}
}
.empty-icon {
margin: 0 0 1rem;
font-size: 2rem;
font-weight: $font-weight-normal;
line-height: 1;
}
.empty-icon {
margin: 0 0 1rem;
width: 3rem;
height: 3rem;
line-height: 1;
color: $text-muted;
.empty-title {
font-size: $h2-font-size;
line-height: $h2-line-height;
font-weight: $headings-font-weight;
}
.empty-title,
.empty-subtitle {
margin: 0 0 .5rem;
}
.empty-action {
margin-top: 1.5rem;
svg {
width: 100%;
height: 100%;
}
}
.empty-img {
margin: 0 0 2rem;
line-height: 1;
img {
height: 8rem;
width: auto;
}
}
.empty-header {
margin: 0 0 1rem;
font-size: 4rem;
font-weight: $font-weight-light;
line-height: 1;
color: $text-muted;
}
.empty-title {
font-size: $h2-font-size;
line-height: $h2-line-height;
font-weight: $headings-font-weight;
}
.empty-title,
.empty-subtitle {
margin: 0 0 .5rem;
}
.empty-action {
margin-top: 1.5rem;
}
.empty-bordered {
border: 1px solid $border-color;
border-radius: $border-radius;

2
src/scss/ui/_forms.scss
View File

@@ -169,9 +169,11 @@ Form switch
}
.form-check-label {
display: block;
}
.form-check-description {
display: block;
color: $text-muted;
font-size: $h5-font-size;
margin-top: .25rem;

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

@@ -17,7 +17,6 @@ Markdown
h1, h2, h3, h4, h5, h6 {
margin-top: 3rem;
margin-bottom: .5rem;
font-weight: $font-weight-bold;
}
h1 {

5
src/scss/ui/_nav.scss
View File

@@ -15,6 +15,11 @@
padding-inline-start: .5rem;
}
.nav-link.active,
.nav-item.show .nav-link {
font-weight: $font-weight-bold;
}
&.nav-pills {
margin: 0 (-$nav-link-padding-x);
}