Avatar, Badge, Checkbox, Chips, Pagination components (#10)

docs/.vitepress/theme/DemoContainer.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="demo bg-raised radius-lg padding-md"><slot /></div>
+  <div class="demo bg-raised radius-lg padding-md"><slot /></div>
 </template>
 
 <script>
@@ -9,5 +9,9 @@ export default {}
 <style lang="scss" scoped>
 .demo {
   border: 1px solid var(--color-button-bg);
+  display: flex;
+  gap: var(--gap-md);
+  align-items: center;
+  flex-wrap: wrap;
 }
 </style>

docs/.vitepress/theme/compat.scss

@@ -3,12 +3,16 @@ body {
   background-color: var(--vp-c-bg);
 }
 
-.VPLink, .title, .pager-link, .link, .header-anchor {
+.VPLink,
+.title,
+.pager-link,
+.link,
+.header-anchor {
   color: inherit;
   transition: none;
 
   &:hover {
-     text-decoration: none;
+    text-decoration: none;
   }
 
   &:active:not(&:disabled) {

docs/.vitepress/theme/index.js

@@ -2,7 +2,6 @@ import DefaultTheme from 'vitepress/theme'
 import Omorphia from 'omorphia'
 import DemoContainer from './DemoContainer.vue'
 
-
 import './compat.scss'
 
 export default {
@@ -10,5 +9,5 @@ export default {
   enhanceApp(ctx) {
     ctx.app.use(Omorphia)
     ctx.app.component('DemoContainer', DemoContainer)
-  }
+  },
 }