@dodlhuat/basix 1.0.0 → 1.1.0

package/css/push-menu.scss

@@ -1,28 +1,36 @@
 @use "properties";
 @use "parameters" as *;
 
+$menu-width: 280px;
+$menu-easing: cubic-bezier(0.4, 0, 0.2, 1);
+$menu-duration: 280ms;
+
 .push-content {
-  transition: all 200ms ease-in;
+  transition: transform $menu-duration $menu-easing;
+  will-change: transform;
 }
 
 nav {
   position: fixed;
   top: 0;
   left: 0;
-  width: 250px;
+  width: $menu-width;
   height: 100%;
-  margin: 0 0 0 -250px;
-  transition: all 200ms ease-in;
+  transform: translateX(-100%);
+  transition: transform $menu-duration $menu-easing,
+              box-shadow $menu-duration $menu-easing;
+  z-index: 10;
 }
 
 nav ul {
-  width: 250px;
+  width: 100%;
   height: 100%;
-  padding: 0;
+  padding: calc($spacing * 4.5) 0 $spacing;
   margin: 0;
   list-style: none;
   background: var(--primary-dark);
-  overflow: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 nav li {
@@ -30,21 +38,36 @@ nav li {
 }
 
 nav a {
-  color: var(--primary-text);
-  font-size: 1.8em;
+  color: var(--accent-color-text);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
   text-decoration: none;
-  display: block;
-  padding: $spacing calc($spacing * 1.5);
-  letter-spacing: 2px;
-  border-bottom: 1px solid var(--primary);
+  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: var(--accent-text);
+    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);
@@ -53,25 +76,41 @@ nav a {
     text-align: center;
     top: 0;
     left: 0;
-    transition: all 200ms ease-in;
     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;
 
-  input[type="checkbox"]:checked ~ label {
-    left: 250px;
+  &.pushed {
+    opacity: 1;
+    visibility: visible;
   }
 }
 
 nav.pushed {
-  margin: 0;
+  transform: translateX(0);
+  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.3);
 }
 
 .push-content.pushed {
-  transform: translate3d(250px, 0, 0);
+  transform: translate3d($menu-width, 0, 0);
 }
 
 .main-header {
@@ -79,12 +118,14 @@ nav.pushed {
   background: var(--secondary-background);
   width: 100%;
   right: 0;
-  transition: width 200ms ease-in;
+  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: 3px solid var(--secondary-text);
+  border-bottom: 1px solid var(--divider);
   top: 0;
 
   & > div:first-child {
@@ -106,7 +147,7 @@ nav.pushed {
   }
 
   &.pushed {
-    width: calc(100% - 250px);
+    width: calc(100% - $menu-width);
   }
 
   .navigation-controls {
@@ -118,10 +159,16 @@ nav.pushed {
       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/radiobutton.scss

@@ -1,64 +1,86 @@
-@use "properties";
-@use "parameters" as *;
-
-$radio-size: 1.15rem;
-$radio-dot-size: 0.6rem;
-
-.radio-button-container {
-  display: block;
-  position: relative;
-  padding-left: 2rem;
-  line-height: 1.6rem;
-  margin-bottom: calc($spacing / 2);
-  cursor: pointer;
-  font-size: $spacing;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-
-    &:checked ~ .checkmark {
-      border-color: var(--accent-color);
-
-      &::after {
-        display: block;
-      }
-    }
-
-    &:focus-visible ~ .checkmark {
-      outline: 2px solid var(--accent-color);
-      outline-offset: 2px;
-    }
-  }
-
-  &:hover input ~ .checkmark {
-    border-color: var(--secondary-text);
-  }
-
-  .checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: $radio-size;
-    width: $radio-size;
-    background-color: transparent;
-    border-radius: 50%;
-    border: 2px solid var(--divider);
-    transition: border-color 0.2s ease;
-
-    &::after {
-      content: "";
-      position: absolute;
-      display: none;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: $radio-dot-size;
-      height: $radio-dot-size;
-      border-radius: 50%;
-      background: var(--accent-color);
-    }
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+$radio-size: 1.15rem;
+$radio-dot-size: 0.55rem;
+
+.radio-button-container {
+  display: block;
+  position: relative;
+  padding-left: 2rem;
+  line-height: 1.6rem;
+  margin-bottom: calc($spacing / 2);
+  cursor: pointer;
+  font-size: $spacing;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+
+    &:checked ~ .checkmark {
+      border-color: var(--accent-color);
+
+      &::after {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+      }
+    }
+
+    &:focus-visible ~ .checkmark {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      border-color: var(--accent-color);
+    }
+
+    &:disabled ~ .checkmark {
+      border-color: var(--disabled);
+      cursor: not-allowed;
+
+      &::after {
+        background: var(--disabled);
+      }
+    }
+
+    &:disabled:checked ~ .checkmark {
+      border-color: var(--disabled);
+    }
+  }
+
+  &:hover input:not(:disabled):not(:checked) ~ .checkmark {
+    border-color: var(--accent-color);
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    color: var(--secondary-text);
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    height: $radio-size;
+    width: $radio-size;
+    background-color: var(--background);
+    border-radius: 50%;
+    border: 2px solid var(--divider);
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      opacity: 0;
+      width: $radio-dot-size;
+      height: $radio-dot-size;
+      border-radius: 50%;
+      background: var(--accent-color);
+      transition: transform 0.15s ease, opacity 0.15s ease;
+    }
+  }
+}

package/css/range-slider.scss

@@ -0,0 +1,136 @@
+@use "properties";
+@use "parameters" as *;
+
+$track-height: 4px;
+$thumb-size: 1.1rem;
+
+.range-slider {
+  width: 100%;
+
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+    cursor: pointer;
+    padding: calc($spacing / 2) 0;
+    margin: 0;
+    display: block;
+    // reset form.scss overrides
+    min-height: auto;
+    border: none;
+    box-shadow: none;
+    outline: none;
+
+    // ── Track ────────────────────────────────────────────────
+    &::-webkit-slider-runnable-track {
+      height: $track-height;
+      border-radius: $track-height;
+      background: linear-gradient(
+        to right,
+        var(--accent-color) var(--range-fill, 0%),
+        var(--divider) var(--range-fill, 0%)
+      );
+    }
+
+    &::-moz-range-track {
+      height: $track-height;
+      border-radius: $track-height;
+      background: var(--divider);
+    }
+
+    &::-moz-range-progress {
+      height: $track-height;
+      border-radius: $track-height;
+      background: var(--accent-color);
+    }
+
+    // ── Thumb ─────────────────────────────────────────────────
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: $thumb-size;
+      height: $thumb-size;
+      border-radius: 50%;
+      background: var(--accent-color);
+      border: 2px solid var(--background);
+      margin-top: calc(($thumb-size - $track-height) / -2);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+      transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    &::-moz-range-thumb {
+      width: $thumb-size;
+      height: $thumb-size;
+      border-radius: 50%;
+      background: var(--accent-color);
+      border: 2px solid var(--background);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+      transition: transform 0.15s ease, box-shadow 0.15s ease;
+      cursor: pointer;
+    }
+
+    // ── Hover ─────────────────────────────────────────────────
+    &:hover::-webkit-slider-thumb {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    }
+
+    // ── Active ────────────────────────────────────────────────
+    &:active::-webkit-slider-thumb {
+      transform: scale(1.22);
+      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+    }
+
+    &:active::-moz-range-thumb {
+      transform: scale(1.22);
+      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+    }
+
+    // ── Focus ─────────────────────────────────────────────────
+    &:focus-visible::-webkit-slider-thumb {
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+    }
+
+    // ── Disabled ──────────────────────────────────────────────
+    &:disabled {
+      cursor: not-allowed;
+
+      &::-webkit-slider-runnable-track {
+        background: var(--divider);
+      }
+
+      &::-webkit-slider-thumb {
+        background: var(--disabled);
+        border-color: var(--secondary-background);
+        box-shadow: none;
+        transform: none;
+      }
+
+      &::-moz-range-track {
+        background: var(--divider);
+      }
+
+      &::-moz-range-progress {
+        background: var(--disabled);
+      }
+
+      &::-moz-range-thumb {
+        background: var(--disabled);
+        border-color: var(--secondary-background);
+        box-shadow: none;
+        transform: none;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/css/scrollbar.scss

@@ -1,69 +1,69 @@
-@use "properties";
-
-:root {
-  --track-width: 12px;
-  --track-radius: 8px;
-  --thumb-min: 28px;
-  --track-gap: 8px;
-}
-
-.scroll-container {
-  position: relative;
-  background: var(--secondary-background);
-  border-radius: 8px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
-  overflow: hidden;
-
-  .viewport {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-    padding-right: calc(var(--track-width) + var(--track-gap));
-    box-sizing: content-box;
-
-    .content {
-      margin: 0;
-    }
-  }
-
-  .viewport::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  .viewport {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .scrollbar {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    bottom: 8px;
-    width: var(--track-width);
-    pointer-events: none;
-  }
-
-  .track {
-    position: relative;
-    height: 100%;
-    border-radius: var(--track-radius);
-    width: 100%;
-    pointer-events: auto;
-  }
-
-  .thumb {
-    position: absolute;
-    left: 2px;
-    right: 2px;
-    top: 0px;
-    height: 40px;
-    border-radius: calc(var(--track-radius) - 2px);
-    background: var(--secondary-text);
-    cursor: pointer;
-    pointer-events: auto;
-    touch-action: none;
-  }
-}
-
+@use "properties";
+@use "parameters" as *;
+
+:root {
+  --track-width: 12px;
+  --track-radius: 8px;
+  --thumb-min: 28px;
+  --track-gap: 8px;
+}
+
+.scroll-container {
+  position: relative;
+  background: var(--secondary-background);
+  border-radius: $border-radius;
+  box-shadow: $shadow;
+  overflow: hidden;
+
+  .viewport {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+
+    .content {
+      margin: 0;
+      margin-right: calc(var(--track-width) + var(--track-gap));
+    }
+  }
+
+  .viewport::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .viewport {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .scrollbar {
+    position: absolute;
+    top: var(--track-gap);
+    right: var(--track-gap);
+    bottom: var(--track-gap);
+    width: var(--track-width);
+    pointer-events: none;
+  }
+
+  .track {
+    position: relative;
+    height: 100%;
+    border-radius: var(--track-radius);
+    width: 100%;
+    pointer-events: auto;
+  }
+
+  .thumb {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 0;
+    height: 40px;
+    border-radius: calc(var(--track-radius) - 2px);
+    background: var(--secondary-text);
+    cursor: pointer;
+    pointer-events: auto;
+    touch-action: none;
+  }
+}