add selectlist page

nus3 · Oct 19, 2023 · a315897 · a315897
1 parent cdbcc62
commit a315897
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -15,6 +15,7 @@ <h1>Top Page</h1>
         <li><a href="./anchor-position/">CSS Anchor positioning</a></li>
         <li><a href="./scroll-driven/">Scroll driven animations</a></li>
         <li><a href="./scheduler-yield/">scheduler.yield</a></li>
+        <li><a href="./selectlist/">selectlist</a></li>
       </ul>
     </main>
     <script type="module" src="./main.ts"></script>

diff --git a/src/selectlist/index.html b/src/selectlist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>selectlist | nus3 UI Labs</title>
+  </head>
+  <body>
+    <header>
+      <h1>selectlist</h1>
+    </header>
+    <main>
+      <section>
+        <h2>Before</h2>
+        <select>
+          <option value="" hidden class="hidden">undefined</option>
+          <optgroup label="nus">
+            <option>nus1</option>
+            <option>nus2</option>
+            <option>nus3</option>
+            <option>nus4</option>
+          </optgroup>
+          <optgroup label="foo">
+            <option>foo1</option>
+            <option>foo2</option>
+            <option>foo3</option>
+            <option>foo4</option>
+          </optgroup>
+        </select>
+      </section>
+      <section>
+        <h2>After</h2>
+        <selectlist class="selectlist">
+          <button type="selectlist" class="selectlist-button">
+            Current Value:
+            <selectedoption></selectedoption>
+          </button>
+          <listbox class="listbox">
+            <option value="" hidden class="hidden">undefined</option>
+            <div>
+              <h3 class="option-category">nus</h3>
+              <div class="options">
+                <option>nus1</option>
+                <option>nus2</option>
+                <option>nus3</option>
+                <option>nus4</option>
+              </div>
+            </div>
+            <div>
+              <h3 class="option-category">foo</h3>
+              <div class="options">
+                <option>foo1</option>
+                <option>foo2</option>
+                <option>foo3</option>
+                <option>foo4</option>
+              </div>
+            </div>
+          </listbox>
+        </selectlist>
+      </section>
+    </main>
+    <footer>
+      <a href="../">TOP</a>
+    </footer>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/src/selectlist/main.ts b/src/selectlist/main.ts
@@ -0,0 +1 @@
+import './style.css'
diff --git a/src/selectlist/style.css b/src/selectlist/style.css
@@ -0,0 +1,122 @@
+:root {
+  --primary-color: hsl(160 55% 55%);
+  --primary-color-opacity: hsl(160 55% 55% / 0.6);
+  --primary-color-opacity-low: hsl(160 55% 55% / 0.2);
+  --primary-color-hover-opacity: hsl(160 55% 55% / 0.8);
+  --secondary-color: hsl(42 100% 70%);
+  --secondary-color-opacity: hsl(42 100% 70% / 0.2);
+  --secondary-color-hover-opacity: hsl(42 100% 70% / 0.8);
+  --bg-color: hsl(216 18% 16%);
+  --bg-color-opacity: hsl(216 18% 16% / 0.4);
+  --bg-light-color: hsl(216 10% 24%);
+  --button-shadow: 0px 6px 11px 1px rgba(31, 37, 45, 0.6);
+  --text-color: hsl(0 0% 93%);
+}
+
+body {
+  margin: 0;
+  background-color: var(--bg-color);
+  margin: 0;
+  color: var(--text-color);
+  padding: 2rem;
+}
+
+h1 {
+  color: var(--primary-color);
+}
+
+ul {
+  list-style: none;
+}
+
+ul > li {
+  margin-bottom: 1rem;
+}
+
+ul > li:last-child {
+  margin-bottom: 0;
+}
+
+
+button {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--primary-color);
+  background-color: var(--primary-color-opacity);
+  cursor: pointer;
+  color: inherit;
+  padding: 0.6rem;
+  font-size: 1.2rem;
+}
+
+button:hover {
+  background-color: var(--primary-color-hover-opacity);
+}
+
+footer {
+  position: fixed;
+  inset-block-end: 0;
+  padding: 2rem;
+  padding-left: 0;
+}
+
+a {
+  color: var(--secondary-color);
+  font-size: 1.4rem;
+}
+
+.selectlist {
+  &:open {
+    .listbox {
+      .options {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 4px;
+      }
+    }
+  }
+}
+
+.selectlist-button {
+  width: 300px;
+}
+
+.listbox {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--secondary-color);
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--text-color);
+
+  .option-category {
+    margin: 0;
+    margin-bottom: 8px;
+  }
+
+  .options {
+    > option {
+      display: grid;
+      place-content: center;
+      padding: 0.6rem;
+      border-radius: 4px;
+      background-color: var(--secondary-color-opacity);
+
+      &:hover {
+        color: var(--text-color);
+        background-color: var(--secondary-color-hover-opacity);
+        cursor: pointer;
+      }
+      &:focus-visible {
+        outline: 2px dotted var(--secondary-color);
+      }
+      &:checked {
+        background-color: var(--secondary-color-hover-opacity);
+      }
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
         anchorPosition: resolve(root, 'anchor-position', 'index.html'),
         scrollDriven: resolve(root, 'scroll-driven', 'index.html'),
         schedulerYield: resolve(root, 'scheduler-yield', 'index.html'),
+        selectlist: resolve(root, 'selectlist', 'index.html'),
       },
     },
   },