docs: update theme

Author: mrholek

config.yml

@@ -2,7 +2,13 @@ languageCode:           "en"
 title:                  "CoreUI"
 baseURL:                "https://coreui.io/docs/"
 canonifyURLs:           true
-enableInlineShortcodes: true
+
+security:
+  enableInlineShortcodes: true
+  funcs:
+    getenv:
+      - ^HUGO_
+      - NETLIFY
 
 markup:
   goldmark:

docs/assets/scss/_layout.scss

@@ -8,9 +8,9 @@
 .docs-layout {
   @include media-breakpoint-up(md) {
     display: grid;
-    gap: $grid-gutter-width;
     grid-template-areas: "sidebar main";
     grid-template-columns: 1fr 3fr;
+    gap: $grid-gutter-width;
   }
 
   @include media-breakpoint-up(lg) {
@@ -27,20 +27,20 @@
 
   @include media-breakpoint-up(md) {
     display: grid;
-    gap: inherit;
     grid-template-areas:
       "intro"
       "toc"
       "content";
     grid-template-rows: auto auto 1fr;
+    gap: inherit;
   }
 
   @include media-breakpoint-up(lg) {
     grid-template-areas:
       "intro   toc"
       "content toc";
-    grid-template-columns: 4fr 1fr;
     grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
   }
 }
 

docs/assets/scss/_placeholder-img.scss

@@ -6,8 +6,8 @@
 
 .docs-placeholder-img {
   @include font-size(1.125rem);
-  text-anchor: middle;
   user-select: none;
+  text-anchor: middle;
 }
 
 .docs-placeholder-img-lg {

docs/assets/scss/docs.scss

@@ -1,6 +1,6 @@
 /*!
  * CoreUI Docs (https://coreui.io/docs/)
- * Copyright 2021 creativeLabs Łukasz Holeczek
+ * Copyright 2022 creativeLabs Łukasz Holeczek
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
@@ -39,25 +39,20 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 
 // Load docs components
 @import "variables";
-// @import "navbar";
 @import "subnav";
 @import "masthead";
-@import "ads";
 @import "content";
 @import "skippy";
 @import "sidebar";
 @import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";
-// @import "buttons";
 @import "callouts";
-@import "brand";
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
 
 // Load docs dependencies
 @import "syntax";
 @import "anchor";
-// @import "algolia";

docs/content/components/buttons.md

@@ -149,8 +149,6 @@ Disabled buttons using the `<a>` element act a little different:
 <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
-{{< callout warning >}}
-
 ### Link functionality caveat
 
 To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

docs/content/components/sidebar.md

@@ -12,8 +12,9 @@ toc: true
 
 Here's what you need to know before getting started with the sidebar:
 
-- Sidebar requires a wrapping `.sidebar-`.
-- Sidebar is hidden by default. Force it to be shown by adding `.sidebar-{-sm|-md|-lg|-xl|-xxl}-show` or `.sidebar-show` to the `.sidebar`.
+- Sidebar requires a wrapping `.sidebar`.
+- Sidebar is hidden by default on mobile devices. Force it to be shown by adding `.show` to the `.sidebar`.
+- Sidebar is shown by default on desktop devices. Force it to be hidden by adding `.hide` to the `.sidebar`.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to `.sidebar-nav` to explicitly identify it as a landmark region for users of assistive technologies.
 
 Read on for an example and list of supported sub-components.
@@ -79,12 +80,6 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
 {{< /sidebar.inline >}}
 {{< /example >}}
 
-## Responsive behaviors
-
-Sidebar can utilize `.sidebar-{-sm|-md|-lg|-xl|-xxl}-show` classes to change whether is visible or hidden. You can easily choose when to show or hide sidebar.
-
-For sidebar that is always visible, add the `.sidebar-show` class on the sidebar
-
 ## JavaScript behavior
 
 ### Methods

docs/layouts/_default/docs.html

@@ -3,10 +3,10 @@
   <main class="docs-main order-1">
     <div class="docs-intro ps-lg-4">
       {{ partial "breadcrumb" . }}
-      <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
+      <!-- <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
         <a class="btn btn-sm btn-outline-secondary mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/docs/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
         <h1 class="docs-title" id="content">{{ .Title | markdownify }}</h1>
-      </div>
+      </div> -->
       <p class="docs-lead">{{ .Page.Params.Description | markdownify }}</p>
       {{ partial "ads" . }}
     </div>

docs/layouts/_default/section.html

@@ -3,6 +3,9 @@
     <ul class="docs-footer-links ps-0 mb-3">
       <li class="d-inline-block"><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
       <li class="d-inline-block ms-3"><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
+      <li class="d-inline-block ms-3 ps-3 border-start border-2"><a href="https://coreui.io/angular/">CoreUI for Angular</a></li>
+      <li class="d-inline-block ms-3"><a href="https://coreui.io/react/">CoreUI for React.js</a></li>
+      <li class="d-inline-block ms-3"><a href="https://coreui.io/vue/">CoreUI for Vue.js</a></li>
     </ul>
     <p class="mb-0">CoreUI is designed as the extension of <a href="https://getbootstrap.com">Bootstrap</a>. Special thanks for <a href="https://getbootstrap.com/docs/5.0/about/team/">Bootstrap team</a> and <a href="https://github.com/twbs/bootstrap/graphs/contributors">Bootstrap's contributors</a>.</p>
     <p class="mb-0">Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>

docs/layouts/partials/footer.html

@@ -8,7 +8,7 @@
       JavaScript / Vanilla JS
     </button>
     <ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
-      <li><a class="dropdown-item disabled" href="#" disabled>Angular <span class="badge bg-warning float-end mt-1">Work in Progress</span></a></li>
+      <li><a class="dropdown-item" href="https://coreui.io/angular/docs/4.0/getting-started/introduction">Angular</a></li>
       <li><a class="dropdown-item" href="https://coreui.io/react/docs/" target="_blank">React.js</a></li>
       <li><a class="dropdown-item" href="https://coreui.io/vue/docs/" target="_blank">Vue.js</a></li>
     </ul>