@dodlhuat/basix 1.2.0 → 1.2.1

package/css/push-menu.scss

@@ -1,174 +1,302 @@
-@use "properties";
-@use "parameters" as *;
-
-$menu-width: 280px;
-$menu-easing: cubic-bezier(0.4, 0, 0.2, 1);
-$menu-duration: 280ms;
-
-.push-content {
-  transition: transform $menu-duration $menu-easing;
-  will-change: transform;
-}
-
-nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: $menu-width;
-  height: 100%;
-  transform: translateX(-100%);
-  transition: transform $menu-duration $menu-easing,
-              box-shadow $menu-duration $menu-easing;
-  z-index: 10;
-}
-
-nav ul {
-  width: 100%;
-  height: 100%;
-  padding: calc($spacing * 4.5) 0 $spacing;
-  margin: 0;
-  list-style: none;
-  background: var(--primary-dark);
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-nav li {
-  margin: 0;
-}
-
-nav a {
-  color: var(--accent-color-text);
-  font-size: 0.9rem;
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  text-decoration: none;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  padding: calc($spacing * 0.85) calc($spacing * 1.5);
-  transition: background $menu-duration $menu-easing,
-              color 160ms ease;
-  -webkit-tap-highlight-color: transparent;
-
-  &:hover {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.06);
-  }
-
-  &:active {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-nav li + li a {
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.navigation-controls {
-  line-height: inherit;
-
-  label {
-    display: block;
-    width: calc($spacing * 1.5);
-    height: 100%;
-    color: var(--primary-text);
-    text-align: center;
-    top: 0;
-    left: 0;
-    z-index: 500;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  input[type="checkbox"] {
-    display: none;
-  }
-}
-
-// Backdrop overlay
-.push-menu-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity $menu-duration $menu-easing,
-              visibility $menu-duration $menu-easing;
-  z-index: 9;
-  -webkit-tap-highlight-color: transparent;
-
-  &.pushed {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-nav.pushed {
-  transform: translateX(0);
-  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.3);
-}
-
-.push-content.pushed {
-  transform: translate3d($menu-width, 0, 0);
-}
-
-.main-header {
-  position: fixed;
-  background: var(--secondary-background);
-  width: 100%;
-  right: 0;
-  transition: width $menu-duration $menu-easing,
-              transform $menu-duration $menu-easing,
-              box-shadow $menu-duration $menu-easing;
-  height: calc($spacing * 3);
-  display: flex;
-  z-index: 2;
-  gap: $spacing;
-  border-bottom: 1px solid var(--divider);
-  top: 0;
-
-  & > div:first-child {
-    margin-left: $spacing;
-  }
-
-  & > div:last-child {
-    margin-right: $spacing;
-  }
-
-  & > div {
-    display: flex;
-    align-items: center;
-    line-height: calc($spacing * 3);
-  }
-
-  .last {
-    margin-left: auto;
-  }
-
-  &.pushed {
-    width: calc(100% - $menu-width);
-  }
-
-  .navigation-controls {
-    height: calc($spacing * 2.5);
-
-    label {
-      display: block;
-      position: relative;
-      background: initial;
-      width: inherit;
-      height: inherit;
-      border-radius: $border-radius;
-      transition: background 160ms ease;
-
-      &:active {
-        background: rgba(0, 0, 0, 0.06);
-      }
-    }
-
-    input[type="checkbox"]:checked ~ label {
-      left: 0;
-    }
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+$menu-width: 280px;
+$menu-easing: cubic-bezier(0.4, 0, 0.2, 1);
+$menu-duration: 300ms;
+
+// ─── Outer nav shell ───────────────────────────────────────────────────────
+
+nav.push-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: $menu-width;
+  height: 100%;
+  overflow: hidden; // clip sliding panels
+  transform: translateX(-100%);
+  transition: transform $menu-duration $menu-easing,
+              box-shadow $menu-duration $menu-easing;
+  z-index: 10;
+
+  &.pushed {
+    transform: translateX(0);
+    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
+  }
+}
+
+.push-content {
+  transition: transform $menu-duration $menu-easing;
+  will-change: transform;
+
+  &.pushed {
+    transform: translate3d($menu-width, 0, 0);
+  }
+}
+
+// ─── Panel system ──────────────────────────────────────────────────────────
+// Three states:
+//   (no class)  → translateX(105%)  hidden to the right
+//   .is-prev    → translateX(-20%)  parallax depth, previous level
+//   .is-active  → translateX(0)     current visible panel
+
+.push-menu-panel {
+  position: absolute;
+  inset: 0;
+  background: var(--primary-dark);
+  transform: translateX(105%);
+  transition: transform $menu-duration $menu-easing;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  will-change: transform;
+
+  &.is-active {
+    transform: translateX(0);
+  }
+
+  &.is-prev {
+    transform: translateX(-20%);
+  }
+}
+
+// ─── Root panel list ───────────────────────────────────────────────────────
+
+.push-menu-panel[data-level="0"] > ul {
+  padding-top: calc($spacing * 4.5); // clear the fixed header
+  padding-bottom: $spacing;
+  margin: 0;
+  list-style: none;
+  width: 100%;
+}
+
+// ─── Sub-panel header (back button + title) ────────────────────────────────
+
+.push-menu-panel-header {
+  display: flex;
+  align-items: center;
+  gap: calc($spacing * 0.75);
+  padding: calc($spacing * 4.5) calc($spacing * 1.5) calc($spacing * 1) calc($spacing * 1.25);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  position: sticky;
+  top: 0;
+  background: var(--primary-dark);
+  z-index: 1;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+
+    .push-menu-back {
+      background: rgba(255, 255, 255, 0.14);
+      color: #fff;
+    }
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.08);
+
+    .push-menu-back {
+      transform: scale(0.92);
+    }
+  }
+}
+
+.push-menu-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: calc($border-radius * 0.75);
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.65);
+  pointer-events: none; // header handles the click
+  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.push-menu-panel-title {
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// ─── Sub-panel list ────────────────────────────────────────────────────────
+
+.push-menu-panel:not([data-level="0"]) > ul {
+  padding: calc($spacing * 0.5) 0;
+  margin: 0;
+  list-style: none;
+  width: 100%;
+}
+
+// ─── List items ────────────────────────────────────────────────────────────
+
+nav li {
+  margin: 0;
+}
+
+// Shared styles: anchor links and submenu trigger spans
+nav a,
+.push-menu-item {
+  color: var(--accent-color-text);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-decoration: none;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  padding: calc($spacing * 0.85) calc($spacing * 1.5);
+  transition: background $menu-duration $menu-easing,
+              color 160ms ease;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+
+  &:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+nav li + li a,
+nav li + li .push-menu-item {
+  border-top: 1px solid rgba(255, 255, 255, 0.055);
+}
+
+// ─── Chevron for parent items ───────────────────────────────────────────────
+
+.push-menu-chevron {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.35;
+  transition: opacity 160ms ease, transform 200ms $menu-easing;
+
+}
+
+.push-menu-item:hover .push-menu-chevron {
+  opacity: 0.7;
+  transform: translateX(2px);
+}
+
+// ─── Navigation controls (hamburger) ───────────────────────────────────────
+
+.navigation-controls {
+  line-height: inherit;
+
+  label {
+    display: block;
+    width: calc($spacing * 1.5);
+    height: 100%;
+    color: var(--primary-text);
+    text-align: center;
+    top: 0;
+    left: 0;
+    z-index: 500;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+}
+
+// ─── Backdrop ──────────────────────────────────────────────────────────────
+
+.push-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity $menu-duration $menu-easing,
+              visibility $menu-duration $menu-easing;
+  z-index: 9;
+  -webkit-tap-highlight-color: transparent;
+
+  &.pushed {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// ─── Main header ───────────────────────────────────────────────────────────
+
+.main-header {
+  position: fixed;
+  background: var(--secondary-background);
+  width: 100%;
+  right: 0;
+  transition: width $menu-duration $menu-easing,
+              transform $menu-duration $menu-easing,
+              box-shadow $menu-duration $menu-easing;
+  height: calc($spacing * 3);
+  display: flex;
+  z-index: 2;
+  gap: $spacing;
+  border-bottom: 1px solid var(--divider);
+  top: 0;
+
+  & > div:first-child {
+    margin-left: $spacing;
+  }
+
+  & > div:last-child {
+    margin-right: $spacing;
+  }
+
+  & > div {
+    display: flex;
+    align-items: center;
+    line-height: calc($spacing * 3);
+  }
+
+  .last {
+    margin-left: auto;
+  }
+
+  &.pushed {
+    width: calc(100% - $menu-width);
+  }
+
+  .navigation-controls {
+    height: calc($spacing * 2.5);
+
+    label {
+      display: block;
+      position: relative;
+      background: initial;
+      width: inherit;
+      height: inherit;
+      border-radius: $border-radius;
+      transition: background 160ms ease;
+
+      &:active {
+        background: rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    input[type="checkbox"]:checked ~ label {
+      left: 0;
+    }
+  }
+}

package/css/reset.scss

@@ -1,40 +1,40 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-}
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote::before, blockquote::after,
-q::before, q::after {
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote::before, blockquote::after,
+q::before, q::after {
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
 }

package/css/scrollbar.scss

@@ -5,7 +5,7 @@
   --track-width: 12px;
   --track-radius: 8px;
   --thumb-min: 28px;
-  --track-gap: 8px;
+  --track-gap: 6px;
 }
 
 .scroll-container {
@@ -49,21 +49,78 @@
   .track {
     position: relative;
     height: 100%;
-    border-radius: var(--track-radius);
     width: 100%;
+    border-radius: var(--track-radius);
+    background: transparent;
     pointer-events: auto;
+    transition: background 0.3s ease;
+
+    // Direct hover over the track lane → more intent, wider thumb
+    &:hover {
+      background: var(--hover);
+
+      .thumb {
+        opacity: 0.7;
+        transform: scaleX(0.7);
+      }
+    }
   }
 
   .thumb {
     position: absolute;
-    left: 2px;
-    right: 2px;
+    left: 0;
+    right: 0;
     top: 0;
     height: 40px;
-    border-radius: calc(var(--track-radius) - 2px);
+    border-radius: var(--track-radius);
     background: var(--secondary-text);
+    opacity: 0.2;
     cursor: pointer;
     pointer-events: auto;
     touch-action: none;
+
+    // Thin sliver at rest, grows rightward on interaction
+    transform: scaleX(0.3);
+    transform-origin: right center;
+    transition:
+      opacity 0.4s ease,
+      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+      background 0.2s ease,
+      box-shadow 0.25s ease;
+    will-change: top, height, transform, opacity;
+  }
+
+  // Hover over the container → reveal thumb gently
+  &:hover .thumb {
+    opacity: 0.45;
+    transform: scaleX(0.5);
+  }
+
+  // JS: user is actively scrolling (fades out ~800ms after last scroll)
+  &.is-scrolling .thumb {
+    opacity: 0.6;
+    transform: scaleX(0.5);
+  }
+
+  // JS: thumb is being dragged
+  &.is-dragging {
+    cursor: grabbing;
+
+    .track {
+      background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+    }
+
+    .thumb {
+      opacity: 1;
+      transform: scaleX(1);
+      background: var(--accent-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      cursor: grabbing;
+      transition:
+        opacity 0.15s ease,
+        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+        background 0.15s ease,
+        box-shadow 0.2s ease;
+    }
   }
 }