Merge pull request bootstrap-vue-next#1164 from StirStudios/main

Small theming update for purple navbar

Author: VividLemon

apps/docs/.vitepress/theme/Layout.vue

@@ -110,7 +110,7 @@
             <b-container>
               <b-row>
                 <b-col>
-                  <Content class="bd-content" />
+                  <Content class="doc-content" />
                 </b-col>
               </b-row>
             </b-container>
@@ -206,7 +206,24 @@ const globalData = inject(appInfoKey, {
 
 <style lang="scss">
 #app {
-  .bd-content > div > {
+  --bvn-primary: #6528e0;
+  --black: #000000;
+  --white: #ffffff;
+  --pink: #e83e8c;
+  --bvn-bg-primary: linear-gradient(rgba(var(--bvn-primary), 1), rgba(var(--bvn-primary), 0.95));
+  .bg-primary {
+    background-color: var(--bvn-primary) !important;
+    border-color: var(--bvn-primary);
+    color: var(--white);
+  }
+  @mixin hover-focus-active() {
+    &:hover,
+    &:focus,
+    &:active {
+      @content;
+    }
+  }
+  .doc-content > div > {
     h2,
     h3,
     h4,
@@ -261,6 +278,46 @@ const globalData = inject(appInfoKey, {
       }
     }
   }
+  .component-reference {
+    .display-6 {
+      font-size: 1.5rem;
+      display: block;
+      margin: 0.75rem 0 1rem;
+    }
+    h2 {
+      margin-top: 2rem;
+    }
+    ul {
+      li {
+        margin-bottom: 0.4rem;
+      }
+    }
+    h5 > a {
+      color: var(--bs-body-color);
+      text-decoration: none;
+    }
+    .table {
+      margin-top: 0.5rem;
+      font-size: 0.9rem;
+      & > tbody > tr > td,
+      & > tbody > tr > th,
+      & > tfoot > tr > td,
+      & > tfoot > tr > th,
+      & > thead > tr > td,
+      & > thead > tr > th {
+        padding: 0.5rem;
+      }
+      & > tbody > tr > td:first-child {
+        color: var(--pink);
+      }
+    }
+  }
+  .anchorjs-link {
+    text-decoration: none;
+    &::after {
+      content: '#';
+    }
+  }
   .card {
     margin-bottom: 3rem;
     pre {
@@ -289,14 +346,14 @@ const globalData = inject(appInfoKey, {
   .card-link {
     text-decoration: none;
   }
-  // Short term fix for navbar modes.
+  // Navbar.
   .navbar {
-    color: #fff;
+    color: var(--white);
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
     .nav-link,
     .navbar-brand,
     .btn {
-      color: #fff;
+      color: var(--white);
     }
   }
   [class^='language-'] {
@@ -360,6 +417,7 @@ const globalData = inject(appInfoKey, {
       }
     }
   }
+  // Sidebar.
   .offcanvas {
     .list-group {
       padding: 0 0 1.5rem 0;
@@ -391,7 +449,7 @@ const globalData = inject(appInfoKey, {
     }
   }
 }
-// TOC
+// Sidebar onscreen.
 @media (min-width: 992px) {
   .bd-layout {
     display: grid !important;
@@ -422,17 +480,28 @@ const globalData = inject(appInfoKey, {
     .bd-main {
       display: grid;
       grid-area: main;
-      grid-template-areas: 'intro toc' 'content toc';
+      grid-template-areas: 'content toc';
       grid-template-rows: auto 1fr;
       grid-template-columns: 4fr 1fr;
       .bd-content {
         grid-area: content;
         min-width: 1px;
       }
     }
+    .bd-toc {
+      grid-area: toc;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 5rem;
+      right: 0;
+      z-index: 2;
+      height: calc(100vh - 7rem);
+      overflow-y: auto;
+    }
   }
 }
-.offcanvas.offcanvas-start {
+// Sidebar width.
+.bd-sidebar .offcanvas.offcanvas-start {
   width: 200px !important;
 }
 </style>

apps/docs/src/components/ComponentReference.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid class="p-0">
+  <b-container fluid class="p-0 component-reference">
     <b-row>
       <b-col>
         <h2>Component Reference</h2>
@@ -10,29 +10,21 @@
         <b-container v-for="component in sortData" :key="component.component" fluid class="p-0">
           <b-row>
             <b-col>
-              <h3>
-                {{ component.component }}
-              </h3>
+              <code class="display-6">{{ `<` + component.component + `>` }}</code>
             </b-col>
           </b-row>
           <b-row>
             <b-col>
               <ul>
                 <li v-for="section in sections" :key="section">
-                  <h4>
-                    <b-link :to="buildCompReferenceLink(`${component.component}-${section}`)">
-                      &lt;{{ component.component }}&gt; {{ section }}
-                    </b-link>
-                  </h4>
+                  <b-link :to="buildCompReferenceLink(`${component.component}-${section}`)">
+                    &lt;{{ component.component }}&gt; {{ section }}
+                  </b-link>
                 </li>
               </ul>
             </b-col>
           </b-row>
-          <b-row
-            v-for="section in sections"
-            :key="section"
-            class="border-bottom border-secondary my-3"
-          >
+          <b-row v-for="section in sections" :key="section" class="my-3">
             <b-col>
               <b-container fluid>
                 <b-row>
@@ -50,7 +42,14 @@
                 </b-row>
                 <b-row>
                   <b-col>
-                    <b-table :items="component[sectionToComponentItem(section)]" />
+                    <b-table
+                      :items="component[sectionToComponentItem(section)]"
+                      hover
+                      small
+                      responsive
+                      bordered
+                      striped
+                    />
                   </b-col>
                 </b-row>
               </b-container>
@@ -79,9 +78,9 @@ const sortData = computed(() =>
       props: el.props
         .map((inner) => ({
           prop: inner.prop,
-          description: inner.description,
           type: inner.type,
           default: inner.default,
+          description: inner.description,
         }))
         .sort((a, b) => a.prop.localeCompare(b.prop)),
       emits: el.emits

apps/docs/src/docs.md

@@ -201,7 +201,7 @@ app.mount('#app')
 
 </b-card>
 
-### <a id="nuxtjs"></a> Installation - Nuxt.js 3
+### Installation - Nuxt.js 3 <a id="nuxtjs" class="anchorjs-link"></a>
 
 In your Nuxt3 application, install the necessary packages for `bootstrap-vue-next`.
 

apps/docs/src/index.md

@@ -40,7 +40,7 @@ With more than 35 components, several directives and composibles (and growing),
 
 <div class="d-flex gap-2 mt-4">
   <b-button :to="withBase('/docs')" variant="primary">Get Started</b-button>
-  <b-button :href="globalData.githubUrl" target="_blank" rel="noopener" variant="outline-secondary">GitHub</b-button>
+  <b-button :href="globalData.githubUrl" target="_blank" aria-label="Open Github" rel="noopener" variant="outline-secondary">GitHub</b-button>
 </div>
 
 ## Integrate with Nuxt.js