feat: add pill-style sort control styling to match grid slider

33eb69d046a013cefb55ecf2233237745eace0f5 · 2026-06-22 21:41:41 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 33eb69d046a013cefb55ecf2233237745eace0f5
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 21:41:41 2026 -0700

    feat: add pill-style sort control styling to match grid slider
---
 public/index.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/public/index.html b/public/index.html
index deaa913..5fe38f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -806,6 +806,30 @@ loadGridPage();
      DW UNIVERSAL CONTACT MODULE — fashion-house UX
      Inject before   <script src="/hero-4grid.js" defer></script>
 <script src="/dw-theme-nav.js" defer></script>
+
+<!-- SORT CONTROL PILL STYLING — Complements grid density slider -->
+<script>
+(function() {
+  const style = document.createElement('style');
+  style.textContent = `
+    /* Sort control pill styling — matches grid slider button aesthetic */
+    select[data-sort], select[aria-label*="sort" i], .sort-select, .collection-sort-select {
+      display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #ddd; border-radius: 20px; background: #fff; color: #333;
+      font-weight: 500; font-size: 13px; cursor: pointer; transition: all 0.15s ease; appearance: none; -webkit-appearance: none;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+      background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; padding-right: 32px;
+    }
+    select[data-sort]:hover, select[aria-label*="sort" i]:hover, .sort-select:hover, .collection-sort-select:hover {
+      border-color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    select[data-sort]:focus, select[aria-label*="sort" i]:focus, .sort-select:focus, .collection-sort-select:focus {
+      outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
+    }
+    .collection-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+  `;
+  document.head.appendChild(style);
+})();
+</script>
 </body> in every DW-family sister site.
      Self-contained: CSS + 4 modals + JS submission handlers.
      Uses host site's CSS vars (--bg, --fg, --gold, --rule).

← 5b9dc32 fix: improve grid density slider CSS to prevent overlap with · back to Apartmentwallpaper · fix: prevent sort dropdown cutoff on left edge af766ed →