docs fixes

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

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

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.

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

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

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

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

src/pages/_includes/forms/form-elements-5.html

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

src/pages/_includes/ui/empty.html

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

src/pages/_layouts/docs.html

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

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;

src/scss/demo.scss

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

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

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;
+  svg {
+    width: 100%;
+    height: 100%;
   }
+}
 
-  .empty-title,
-  .empty-subtitle {
-    margin: 0 0 .5rem;
-  }
+.empty-img {
+  margin: 0 0 2rem;
+  line-height: 1;
 
-  .empty-action {
-    margin-top: 1.5rem;
+  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;

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;

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 {

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);
   }