add component to example page

2026-01-21 15:19:38 +02:00
parent c9660f4bd8
commit d833fdbcc2
5 changed files with 23 additions and 7 deletions
@@ -37,7 +37,6 @@ async function html() {
 }

 async function css() {
-    console.log('restyling ...')
     return src(['./src/pages/**/*.css', './src/components/**/*.css'])
         .pipe(concat('styles.css'))
         .pipe(postcss([combineMq]))
@@ -1,4 +1,14 @@
 .list-container{
    display: flex;
    flex-direction: column;
+    border: 1px solid var(--def-border-color);
+    border-radius: var(--def-radius);
+    padding: 2px;
+    width: var(--form-mid-width);
+}
+
+.list-option{
+    padding: 0.4rem 0.6rem;
+    cursor: pointer;
+    border-radius: var(--def-radius);
 }
@@ -1,9 +1,9 @@
 <div class="listbox">
    <ul class="list-container">
-        <li>New York</li>
-        <li>Rome</li>
-        <li>London</li>
-        <li>Istanbul</li>
-        <li>Paris</li>
+        <li class="list-option">New York</li>
+        <li class="list-option">Rome</li>
+        <li class="list-option">London</li>
+        <li class="list-option">Istanbul</li>
+        <li class="list-option">Paris</li>
    </ul>
 </div>
@@ -8,4 +8,9 @@

  --def-radius: 4px;
  --def-border-color: #e5e7eb;
+
+  --form-small-width: 132px;
+  --form-mid-width: 264px;
+  --form-big-width: 528px;
+
 }
@@ -8,7 +8,9 @@
 </head>
 <body>
    <div id="main">
-        <div class="preview"></div>
+        <div class="preview">
+            @@include('../../components/form/listbox/listbox.html')
+        </div>
    </div>
 </body>
 </html>