docs: update theme

Author: mrholek

packages/docs/.vuepress/theme-coreui/src/client/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <CSidebar position="fixed" size="lg" class="docs-sidebar elevation-0 border-end ps-xl-4">
+  <CSidebar position="fixed" size="lg" class="docs-sidebar border-end px-xl-4 elevation-0">
     <CSidebarBrand class="justify-content-start ps-3">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -17,8 +17,8 @@
         </g>
       </svg>
     </CSidebarBrand>
-    <div class="text-body-secondary ms-3 me-5 mb-2 small fw-semibold">Framework:</div>
-    <CDropdown class="ms-3 me-5 mb-4">
+    <div class="text-body-secondary mx-3 mb-2 small fw-semibold">Framework:</div>
+    <CDropdown class="mx-3 mb-4">
       <CDropdownToggle color="primary" variant="outline"> Vue.js </CDropdownToggle>
       <CDropdownMenu class="w-100">
         <CDropdownItem href="https://coreui.io/angular/docs/4.0/" target="_blank">

packages/docs/.vuepress/theme-coreui/src/client/styles/_component-examples.scss

@@ -109,6 +109,14 @@
   .pagination {
     margin-bottom: 0;
   }
+
+  // Spinners
+  > .spinner-grow + .spinner-border,
+  > .spinner-border + .spinner-grow,
+  > .spinner-border + .spinner-border,
+  > .spinner-grow + .spinner-grow {
+    margin-left: .25rem;
+  }
 }
 
 //
@@ -347,7 +355,6 @@
 // Code snippets
 //
 
-div[class^="language-"],
 .highlight {
   position: relative;
   padding: .75rem ($cd-gutter-x * .5);
@@ -381,14 +388,13 @@ div[class^="language-"],
 .docs-code-snippet {
   margin: 0 ($cd-gutter-x * -.5) $spacer;
 
-  div[class^="language-"],
   .highlight {
     margin-bottom: 0;
   }
 
-  .docs-example ~ div[class^="language-"],
   .docs-example ~ .highlight {
-    border: 0;
+    border: solid var(--cui-border-color);
+    border-width: 1px 0 0;
     @include border-top-radius(0);
   }
 
@@ -414,11 +420,6 @@ div[class^="language-"],
   }
 }
 
-.docs-example {
-  border-bottom-width: 0;
-}
-
-.docs-example + div[class^="language-"],
 .docs-example + .highlight {
   border-top-width: 0;
   @include border-top-radius(0);

packages/docs/.vuepress/theme-coreui/src/client/styles/_sidebar.scss

@@ -2,15 +2,31 @@
   --cui-sidebar-bg: var(--cui-tertiary-bg);
   --cui-sidebar-brand-bg: transparent;
   --cui-sidebar-brand-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-color: var(--cui-body-color);
-  --cui-sidebar-nav-link-active-bg: transparent;
-  --cui-sidebar-nav-link-active-color: var(--cui-primary);
-  --cui-sidebar-nav-link-hover-bg: transparent;
-  --cui-sidebar-nav-link-hover-color: var(--cui-primary);
-  --cui-sidebar-nav-group-bg: transparent;
-  --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
 
-  .nav-group-items {
+  .sidebar-nav {
     --cui-sidebar-nav-link-color: var(--cui-body-color);
+    --cui-sidebar-nav-link-active-bg: transparent;
+    --cui-sidebar-nav-link-active-color: var(--cui-primary);
+    --cui-sidebar-nav-link-hover-bg: transparent;
+    --cui-sidebar-nav-link-hover-color: var(--cui-primary);
+    --cui-sidebar-nav-link-icon-margin: 1rem;
+    --cui-sidebar-nav-group-bg: transparent;
+    --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);
+
+    .compact .nav-link {
+      --cui-sidebar-nav-link-padding-y: .375rem;
+    }
+
+    .nav-group-items {
+      --cui-sidebar-nav-link-color: var(--cui-body-color);
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .docs-sidebar {
+      --cui-sidebar-bg: var(--cui-body-bg);
+    }
   }
 }

packages/docs/.vuepress/theme-coreui/src/client/styles/_variables.scss

@@ -1,14 +1,3 @@
-// responsive breakpoints
-$MQNarrow: 959px !default;
-$MQMobile: 719px !default;
-$MQMobileNarrow: 419px !default;
-
-// code languages
-$codeLang: 'c' 'cpp' 'cs' 'css' 'dart' 'docker' 'fs' 'go' 'html' 'java' 'js'
-  'json' 'kt' 'less' 'makefile' 'md' 'php' 'py' 'rb' 'rs' 'sass' 'scss' 'sh'
-  'styl' 'ts' 'toml' 'vue' 'yml' !default;
-
-
 // stylelint-disable scss/dollar-variable-default
 
 // Local docs variables