diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index b4dfc1d50..6ac949247 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -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 diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index 0b4058b91..4e2c2e0a4 100644 --- a/src/pages/_docs/colors.md +++ b/src/pages/_docs/colors.md @@ -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/ --- diff --git a/src/pages/_docs/cursors.md b/src/pages/_docs/cursors.md index e2615af2c..3f09c77a6 100644 --- a/src/pages/_docs/cursors.md +++ b/src/pages/_docs/cursors.md @@ -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. diff --git a/src/pages/_docs/divider.md b/src/pages/_docs/divider.md index dc443e9a0..3efacafc8 100644 --- a/src/pages/_docs/divider.md +++ b/src/pages/_docs/divider.md @@ -12,14 +12,14 @@ Use dividers to visually separate content into parts. You can use a line only or {% capture code %}

- 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.

{% include ui/hr.html text="See also" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{% 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 %}

- 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.

{% include ui/hr.html text="Left divider" position="left" %}

@@ -36,14 +36,14 @@ You can modify the position of the text which is to be included in a separator a

{% include ui/hr.html text="Centered divider" %}

- 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.

{% include ui/hr.html text="Right divider" position="right" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{% 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

{% include ui/hr.html text="Green divider" color="green" %}

- 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!

{% include ui/hr.html text="Red divider" color="red" %} +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. +

+{% include ui/hr.html text="Primary divider" color="primary" %}

Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!

{% endcapture %} -{% include example.html code=code %} +{% include example.html code=code wrapper="demo-dividers" %} diff --git a/src/pages/_docs/empty.md b/src/pages/_docs/empty.md index accba6558..26e3c7cd8 100644 --- a/src/pages/_docs/empty.md +++ b/src/pages/_docs/empty.md @@ -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 %} diff --git a/src/pages/_docs/index.md b/src/pages/_docs/index.md index f6ec6c9fe..0f49964ff 100644 --- a/src/pages/_docs/index.md +++ b/src/pages/_docs/index.md @@ -1,6 +1,6 @@ --- title: Introduction -menu: docs.index.index +menu: docs.base.index icon: flag redirect_from: docs.html --- diff --git a/src/pages/_docs/typography.md b/src/pages/_docs/typography.md index b563dea87..05f68ea64 100644 --- a/src/pages/_docs/typography.md +++ b/src/pages/_docs/typography.md @@ -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/ --- diff --git a/src/pages/_includes/forms/form-elements-5.html b/src/pages/_includes/forms/form-elements-5.html index 64ef3af9c..c33195487 100644 --- a/src/pages/_includes/forms/form-elements-5.html +++ b/src/pages/_includes/forms/form-elements-5.html @@ -9,27 +9,27 @@ diff --git a/src/pages/_includes/ui/empty.html b/src/pages/_includes/ui/empty.html index 29db87b2c..17384eac5 100644 --- a/src/pages/_includes/ui/empty.html +++ b/src/pages/_includes/ui/empty.html @@ -1,23 +1,23 @@ -{% assign icon = include.icon | default: "search" %} +{% assign icon = include.icon | default: "mood-sad" %}
-
- {% 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 %} -
{{ include.icon-text }}
- {% else %} - {% include ui/icon.html icon=icon %} - {% endif %} -
-

{{ include.title | default: "No results found" }}

-

- {{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }} -

-
- {% 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="." %} -
+ {% if include.illustration %} + {% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %} +
{% include ui/illustration.html image=illustration-src %}
+ {% elsif include.icon-text %} +
{{ include.icon-text }}
+ {% else %} +
{% include ui/icon.html icon=icon %}
+ {% endif %} + + +

{{ include.title | default: "No results found" }}

+

+ {{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }} +

+
+ {% 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="." %} +
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html index 2b388b6b6..4c07e883b 100644 --- a/src/pages/_layouts/docs.html +++ b/src/pages/_layouts/docs.html @@ -7,7 +7,7 @@ page-header: Documentation {% assign current-url = page.url | replace_regex: "^/", "" %} -
+
{% include docs/menu.html %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5579070ae..be81c2cc3 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/scss/demo.scss b/src/scss/demo.scss index 57bb4193e..a2a2bd1cd 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -36,4 +36,11 @@ body.no-transitions * { margin: 0 auto; display: block; } +} + +.demo-dividers { + >p { + opacity: .2; + user-select: none; + } } \ No newline at end of file diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss index 3a3263c40..5d64949a9 100644 --- a/src/scss/demo/_examples.scss +++ b/src/scss/demo/_examples.scss @@ -22,6 +22,7 @@ .example-content { font-size: $font-size-base; line-height: $line-height-base; + color: $body-color; flex: 1; max-width: 100%; } diff --git a/src/scss/ui/_empty.scss b/src/scss/ui/_empty.scss index f5de2dee4..6b13dc58b 100644 --- a/src/scss/ui/_empty.scss +++ b/src/scss/ui/_empty.scss @@ -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; diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss index 4bc3ab5a1..33dbb5a9d 100644 --- a/src/scss/ui/_forms.scss +++ b/src/scss/ui/_forms.scss @@ -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; diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss index 210c30890..24ea2eef7 100644 --- a/src/scss/ui/_markdown.scss +++ b/src/scss/ui/_markdown.scss @@ -17,7 +17,6 @@ Markdown h1, h2, h3, h4, h5, h6 { margin-top: 3rem; margin-bottom: .5rem; - font-weight: $font-weight-bold; } h1 { diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss index cc35ffb48..281c3cad9 100644 --- a/src/scss/ui/_nav.scss +++ b/src/scss/ui/_nav.scss @@ -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); }