chore: style section

steve-lebleu · Mar 30, 2024 · 2878009 · 2878009
1 parent ae486a3
commit 2878009
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 5 deletions.
diff --git a/demo.css b/demo.css
@@ -0,0 +1,65 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans");
+@import url("https://fonts.googleapis.com/css?family=Thasadith");
+.kompletr .container--search-results {
+  position: absolute;
+  margin: 0;
+  width: 100%; }
+
+.kompletr .item--row {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  border-left: none;
+  border-right: none;
+  font-size: 100%; }
+  .kompletr .item--row:last-child {
+    border-bottom: none !important; }
+  .kompletr .item--row:hover, .kompletr .item--row.focus {
+    cursor: pointer;
+    -webkit-transition: all 0.2s ease-in-out ease-in-out;
+    transition: all 0.2s ease-in-out ease-in-out; }
+  .kompletr .item--row .item--property {
+    flex: 50%; }
+    .kompletr .item--row .item--property:nth-child(even) {
+      text-align: right; }
+    .kompletr .item--row .item--property:nth-child(n+0) {
+      font-weight: 600; }
+    .kompletr .item--row .item--property:nth-child(n+2) {
+      font-weight: normal; }
+
+.kompletr.light .item--row {
+  color: #333;
+  border-bottom: 1px dashed #dfdfdf;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(255, 255, 255, 0.8); }
+  .kompletr.light .item--row .item--property:nth-child(n+0) {
+    color: #333; }
+  .kompletr.light .item--row .item--property:nth-child(n+2) {
+    color: #9e9e9e; }
+  .kompletr.light .item--row:hover, .kompletr.light .item--row.focus {
+    backdrop-filter: blur(26px) saturate(120%);
+    -webkit-backdrop-filter: blur(26px) saturate(120%);
+    background-color: rgba(255, 255, 255, 0.4); }
+    .kompletr.light .item--row:hover .item--property:nth-child(n+0), .kompletr.light .item--row:hover .item--property:nth-child(n+2), .kompletr.light .item--row.focus .item--property:nth-child(n+0), .kompletr.light .item--row.focus .item--property:nth-child(n+2) {
+      color: #333; }
+
+.kompletr.dark .item--row {
+  color: #dfdfdf;
+  border-bottom: 1px dashed #444;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(51, 51, 51, 0.8); }
+  .kompletr.dark .item--row .item--property:nth-child(n+0) {
+    color: #dfdfdf; }
+  .kompletr.dark .item--row .item--property:nth-child(n+2) {
+    color: #777; }
+  .kompletr.dark .item--row:hover, .kompletr.dark .item--row.focus {
+    backdrop-filter: blur(26px) saturate(120%);
+    -webkit-backdrop-filter: blur(26px) saturate(120%);
+    background-color: rgba(51, 51, 51, 0.4); }
+    .kompletr.dark .item--row:hover .item--property:nth-child(n+0), .kompletr.dark .item--row:hover .item--property:nth-child(n+2), .kompletr.dark .item--row.focus .item--property:nth-child(n+0), .kompletr.dark .item--row.focus .item--property:nth-child(n+2) {
+      color: #fff; }
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -28,7 +28,8 @@ export default defineConfig({
           collapsed: false,
           items: [
             { text: 'Installation', link: '/guide/getting-started#installation' },
-            { text: 'Usage', link: '/guide/getting-started#usage' }
+            { text: 'Usage', link: '/guide/getting-started#usage' },
+            { text: 'Styling', link: '/guide/getting-started#styling' }
           ]
         },
         {

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -24,13 +24,13 @@
 :::tabs
 == jsdelivr
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/kompletr@2.0.11/dist/js/kompletr.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/kompletr@2.0.9/dist/css/kompletr.min.js" rel="stylesheet" type="text/css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/kompletr@latest/dist/js/kompletr.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/kompletr@latest/dist/css/kompletr.min.js" rel="stylesheet" type="text/css" />
 ```
 == unpkg
 ```html
-<script type="module" src="https://unpkg.com/kompletr@2.0.11/dist/js/kompletr.min.js"></script>
-<link href="https://unpkg.com/kompletr@2.0.9/dist/css/kompletr.min.js" rel="stylesheet" type="text/css" />
+<script type="module" src="https://unpkg.com/kompletr@latest/dist/js/kompletr.min.js"></script>
+<link href="https://unpkg.com/kompletr@latest/dist/css/kompletr.min.js" rel="stylesheet" type="text/css" />
 ```
 :::
 
@@ -96,3 +96,85 @@ import styles from './kompletr.min.css';
   });
 </script>
 ```
+
+## Styling
+
+Play with Kompletr style is quite easy and conventionnal. Please notice following remarks:
+
+- Kompletr doesn't embedd (yet) CSSinJS
+- The styling of the main *input* element is at your own
+- Two base themes availables as option: *light* (default) and *dark*
+- Easy customization by CSS override
+
+### CSS definition
+
+FYI
+
+```css
+@import url("https://fonts.googleapis.com/css?family=Open+Sans");
+@import url("https://fonts.googleapis.com/css?family=Thasadith");
+.kompletr .container--search-results {
+  position: absolute;
+  margin: 0;
+  width: 100%; }
+
+.kompletr .item--row {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  border-left: none;
+  border-right: none;
+  font-size: 100%; }
+  .kompletr .item--row:last-child {
+    border-bottom: none !important; }
+  .kompletr .item--row:hover, .kompletr .item--row.focus {
+    cursor: pointer;
+    -webkit-transition: all 0.2s ease-in-out ease-in-out;
+    transition: all 0.2s ease-in-out ease-in-out; }
+  .kompletr .item--row .item--property {
+    flex: 50%; }
+    .kompletr .item--row .item--property:nth-child(even) {
+      text-align: right; }
+    .kompletr .item--row .item--property:nth-child(n+0) {
+      font-weight: 600; }
+    .kompletr .item--row .item--property:nth-child(n+2) {
+      font-weight: normal; }
+
+.kompletr.light .item--row {
+  color: #333;
+  border-bottom: 1px dashed #dfdfdf;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(255, 255, 255, 0.8); }
+  .kompletr.light .item--row .item--property:nth-child(n+0) {
+    color: #333; }
+  .kompletr.light .item--row .item--property:nth-child(n+2) {
+    color: #9e9e9e; }
+  .kompletr.light .item--row:hover, .kompletr.light .item--row.focus {
+    backdrop-filter: blur(26px) saturate(120%);
+    -webkit-backdrop-filter: blur(26px) saturate(120%);
+    background-color: rgba(255, 255, 255, 0.4); }
+    .kompletr.light .item--row:hover .item--property:nth-child(n+0), .kompletr.light .item--row:hover .item--property:nth-child(n+2), .kompletr.light .item--row.focus .item--property:nth-child(n+0), .kompletr.light .item--row.focus .item--property:nth-child(n+2) {
+      color: #333; }
+
+.kompletr.dark .item--row {
+  color: #dfdfdf;
+  border-bottom: 1px dashed #444;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(51, 51, 51, 0.8); }
+  .kompletr.dark .item--row .item--property:nth-child(n+0) {
+    color: #dfdfdf; }
+  .kompletr.dark .item--row .item--property:nth-child(n+2) {
+    color: #777; }
+  .kompletr.dark .item--row:hover, .kompletr.dark .item--row.focus {
+    backdrop-filter: blur(26px) saturate(120%);
+    -webkit-backdrop-filter: blur(26px) saturate(120%);
+    background-color: rgba(51, 51, 51, 0.4); }
+    .kompletr.dark .item--row:hover .item--property:nth-child(n+0), .kompletr.dark .item--row:hover .item--property:nth-child(n+2), .kompletr.dark .item--row.focus .item--property:nth-child(n+0), .kompletr.dark .item--row.focus .item--property:nth-child(n+2) {
+      color: #fff; }
+
+```