@allxsmith/bestax-bulma 2.6.2 → 3.0.2

package/src/scss/form/_timeinput.scss

@@ -0,0 +1,374 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$timeinput-wheel-width: 3rem !default;
+$timeinput-wheel-item-height: 2rem !default;
+$timeinput-wheel-gap: 0.4rem !default;
+$timeinput-wheel-bg: cv.getVar('scheme-main') !default;
+$timeinput-wheel-color: cv.getVar('text') !default;
+$timeinput-wheel-dim-color: cv.getVar('text-weak') !default;
+$timeinput-wheel-hover-bg: hsla(0, 0%, 50%, 0.13) !default;
+$timeinput-wheel-selected-bg: cv.getVar('primary') !default;
+$timeinput-wheel-selected-color: cv.getVar('primary-invert') !default;
+$timeinput-wheel-radius: cv.getVar('radius') !default;
+// The per-item depth fade applied inline in TimeWheels.tsx now does the heavy
+// lifting of dimming away-from-centre values. The mask just trims the very
+// edges so partial items at the top/bottom don't get a hard cut-off — keep
+// the transparent band thin so the fade and the mask don't compound and make
+// near-edge items vanish before they reach the edge.
+$timeinput-wheel-mask: linear-gradient(
+  180deg,
+  transparent 0,
+  black 18%,
+  black 82%,
+  transparent 100%
+) !default;
+$timeinput-separator-color: cv.getVar('text-weak') !default;
+$timeinput-separator-size: cv.getVar('size-5') !default;
+$timeinput-footer-padding: 0.5rem 0 0 !default;
+
+.#{iv.$class-prefix}timeinput {
+  @include cv.register-vars(
+    (
+      'timeinput-wheel-width': #{$timeinput-wheel-width},
+      'timeinput-wheel-item-height': #{$timeinput-wheel-item-height},
+      'timeinput-wheel-gap': #{$timeinput-wheel-gap},
+      'timeinput-wheel-bg': #{$timeinput-wheel-bg},
+      'timeinput-wheel-color': #{$timeinput-wheel-color},
+      'timeinput-wheel-dim-color': #{$timeinput-wheel-dim-color},
+      'timeinput-wheel-hover-bg': #{$timeinput-wheel-hover-bg},
+      'timeinput-wheel-selected-bg': #{$timeinput-wheel-selected-bg},
+      'timeinput-wheel-selected-color': #{$timeinput-wheel-selected-color},
+      'timeinput-wheel-radius': #{$timeinput-wheel-radius},
+      'timeinput-wheel-mask': #{$timeinput-wheel-mask},
+      'timeinput-separator-color': #{$timeinput-separator-color},
+      'timeinput-separator-size': #{$timeinput-separator-size},
+      'timeinput-footer-padding': #{$timeinput-footer-padding},
+    )
+  );
+}
+
+.#{iv.$class-prefix}timeinput {
+  display: inline-block;
+}
+
+// Inline rendering: when the panel is a direct child of the container
+// (no popover wrapper), give it a subtle frame so the wheels don't look
+// orphaned on the page. Mirrors the popover's visual weight without the
+// drop-shadow / animation.
+.#{iv.$class-prefix}timeinput-container
+  > .#{iv.$class-prefix}timeinput-panel {
+  display: inline-block;
+  background-color: cv.getVar('scheme-main');
+  border: 1px solid cv.getVar('border');
+  border-radius: cv.getVar('radius');
+  padding: 0.75rem;
+}
+
+.#{iv.$class-prefix}timeinput-wheels {
+  display: flex;
+  align-items: center;
+  gap: cv.getVar('timeinput-wheel-gap');
+  // Stop the browser from interpreting touches on the empty space inside
+  // this row (left/right of the wheels, between columns) as page-scroll
+  // gestures. The parent component routes those drags to the nearest
+  // wheel column via the `startDrag` ref method, matching the iOS native
+  // picker where the whole picker surface is grabbable.
+  touch-action: none;
+}
+
+.#{iv.$class-prefix}timeinput-wheel {
+  position: relative;
+  width: cv.getVar('timeinput-wheel-width');
+  outline: none;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  -webkit-mask-image: cv.getVar('timeinput-wheel-mask');
+  mask-image: cv.getVar('timeinput-wheel-mask');
+
+  // Soft cylinder vignette: the wheel surface stays clean in the middle
+  // and gradually darkens toward the top and bottom, suggesting depth like
+  // the surface of a rotating drum. Kept very subtle (low alpha) so the
+  // numbers themselves stay fully readable — the depth cue comes from the
+  // background, not from fading the digits. Sits above the items and the
+  // band (z-index 2) with pointer-events disabled so clicks still land.
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      hsla(0, 0%, 0%, 0.22) 0%,
+      hsla(0, 0%, 0%, 0) 50%,
+      hsla(0, 0%, 0%, 0.22) 100%
+    );
+  }
+
+  // Focus emphasis uses `:focus-visible` so keyboard users see a clear ring
+  // while mouse/touch users (who have the stationary centre band as their
+  // visual anchor) don't get a distracting outline. The per-item box-shadow
+  // that used to live here was removed when the band became the indicator —
+  // pinning a ring to the selected item caused a broken-outline artefact
+  // whenever position was mid-flight (item offset from band).
+  &:focus-visible {
+    outline: 2px solid cv.getVar('primary');
+    outline-offset: 2px;
+    border-radius: cv.getVar('timeinput-wheel-radius');
+  }
+
+  &.#{iv.$class-prefix}is-dragging .#{iv.$class-prefix}timeinput-wheel-item {
+    transition: none;
+  }
+
+  &.#{iv.$class-prefix}is-disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}timeinput-wheel-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border: 0;
+  background: transparent;
+  color: cv.getVar('timeinput-wheel-dim-color');
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  font-weight: cv.getVar('weight-medium');
+  cursor: pointer;
+  padding: 0;
+  border-radius: cv.getVar('timeinput-wheel-radius');
+  // Items render ABOVE the stationary band so the band tints them.
+  z-index: 1;
+  transition:
+    color 0.1s ease,
+    font-weight 0.1s ease;
+
+  &:hover:not(:disabled):not(.#{iv.$class-prefix}is-selected) {
+    color: cv.getVar('timeinput-wheel-color');
+  }
+
+  // The selected item (whichever is currently centred over the band) is
+  // emphasised by colour + weight only — the green fill belongs to the
+  // band beneath it now, so it doesn't visibly slide with the finger.
+  &.#{iv.$class-prefix}is-selected {
+    color: cv.getVar('timeinput-wheel-selected-color');
+    font-weight: cv.getVar('weight-semibold');
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    // Dim individually-disabled values (driven by `unselectableTimes` per
+    // column in TimeWheels) so users can see what's unavailable. The whole
+    // wheel's `is-disabled` modifier dims the entire column separately.
+    opacity: 0.35;
+  }
+}
+
+// Stationary selection band — sits at the centre of each wheel viewport and
+// does NOT move while items slide through it (iOS-native picker feel). The
+// vertical position and height are set inline by the JSX, so CSS only
+// provides the visual treatment.
+.#{iv.$class-prefix}timeinput-wheel-band {
+  background-color: cv.getVar('timeinput-wheel-selected-bg');
+  border-radius: cv.getVar('timeinput-wheel-radius');
+  z-index: 0;
+  // Explicit centre origin so the per-tick pulse animation (driven via WAI
+  // in TimeWheels.tsx) scales symmetrically rather than from a default
+  // corner. Defensive — current geometry centres the band, but this keeps
+  // future width / radius tweaks from skewing the pulse.
+  transform-origin: center;
+}
+
+.#{iv.$class-prefix}timeinput-separator {
+  font-size: cv.getVar('timeinput-separator-size');
+  font-weight: cv.getVar('weight-bold');
+  color: cv.getVar('timeinput-separator-color');
+  line-height: 1;
+  align-self: center;
+  padding: 0 0.1rem;
+}
+
+.#{iv.$class-prefix}timeinput-footer {
+  display: flex;
+  padding: cv.getVar('timeinput-footer-padding');
+
+  // Make the segmented button group span the full popover width: each
+  // child claims an equal share, so OK / Now / Cancel sit side-by-side
+  // across the bottom rather than huddling on the right.
+  > button {
+    flex: 1 1 0;
+  }
+}
+
+// Soft "primed" indicator on OK whenever any wheel column is focused (via
+// keyboard Tab or click — wheel root takes focus in both cases). Hint that
+// Enter on a wheel will activate OK. Deliberately subtle — just a faint
+// neutral background tint. Real focus on OK uses Bulma's default focus ring
+// (same as Now / Cancel) so the three buttons stay visually consistent.
+.#{iv.$class-prefix}timeinput-panel:has(
+    .#{iv.$class-prefix}timeinput-wheel:focus
+  )
+  .#{iv.$class-prefix}timeinput-footer-ok:not(:focus-visible) {
+  background-color: hsla(0, 0%, 50%, 0.12);
+}
+
+// Sizes scale the item height + wheel width.
+.#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-small {
+  width: 2.5rem;
+}
+.#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-medium {
+  width: 3.5rem;
+}
+.#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-large {
+  width: 4.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}timeinput-wheel-list {
+    transition: none;
+  }
+}
+
+// Mobile (small viewport): bigger touch targets, larger numbers, more iOS-native
+// feel. Item *height* is set inline by JS and bumped from 40px to 48px on small
+// viewports by TimeInputBase; the rules below adjust everything that's CSS-only
+// (font size, wheel width, gap, separator, mask intensity).
+@media (max-width: 768px) {
+  .#{iv.$class-prefix}timeinput {
+    --bestax-timeinput-wheel-width: 4rem;
+    --bestax-timeinput-wheel-gap: 0.5rem;
+    // Mobile mask: with the per-item depth fade already pulling brightness
+    // down toward the edges, the mask only needs to handle the final crop.
+    // Slightly tighter than desktop because mobile items are bigger and the
+    // edge taper benefits from a touch more softening.
+    --bestax-timeinput-wheel-mask: linear-gradient(
+      180deg,
+      transparent 0,
+      black 28%,
+      black 72%,
+      transparent 100%
+    );
+  }
+
+  .#{iv.$class-prefix}timeinput-wheel-item {
+    font-size: 1.1rem;
+  }
+
+  .#{iv.$class-prefix}timeinput-separator {
+    font-size: 1.4rem;
+    padding: 0 0.25rem;
+  }
+
+  // The wheel widths from .is-small / .is-medium / .is-large would otherwise
+  // override the mobile bump above. Re-apply the larger mobile widths so the
+  // size variants still scale around the iOS-native baseline.
+  .#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-small {
+    width: 3.25rem;
+  }
+  .#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-medium {
+    width: 4.5rem;
+  }
+  .#{iv.$class-prefix}timeinput-wheel.#{iv.$class-prefix}is-large {
+    width: 5.25rem;
+  }
+
+  // On mobile, the popover is wide and the panel is a column flex container
+  // (see below), so the timeinput root becomes a stretched flex item. For
+  // the wheels row to actually expose empty space on the sides (where we
+  // forward drag gestures to the nearest wheel), it has to span the full
+  // panel width — otherwise `display: flex` shrinks it to its content and
+  // `justify-content: center` has nothing to centre.
+  .#{iv.$class-prefix}timeinput {
+    display: block;
+    width: 100%;
+  }
+  .#{iv.$class-prefix}timeinput-wheels {
+    width: 100%;
+    justify-content: center;
+  }
+
+  // Wide bottom-anchored popover when it contains a TimeInput panel — the
+  // OS-native picker on iOS occupies almost the full screen width with the
+  // wheels centred, so we mirror that. `:has()` is supported on iOS 15.4+,
+  // Safari 15.4+, and all current Chromium / Firefox.
+  .#{iv.$class-prefix}picker-popover:has(.#{iv.$class-prefix}timeinput-panel) {
+    // Override the popover's registered radius var so border-radius (which
+    // already references `cv.getVar('picker-popover-radius')`) updates
+    // automatically. We use Bulma's `radius-large` scaled by 4 for an
+    // iOS-sheet-sized corner without hard-coding a px value.
+    --bestax-picker-popover-radius: calc(#{cv.getVar('radius-large')} * 4);
+    position: fixed;
+    left: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+    top: auto;
+    width: auto;
+    max-width: none;
+  }
+  .#{iv.$class-prefix}timeinput-panel {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    // Prevent the browser from interpreting touches anywhere on the panel
+    // (the wheels row, the gap between wheels and footer, and the footer
+    // itself) as page-scroll gestures. Taps on the footer buttons still
+    // work — touch-action only suppresses native pan/zoom, not clicks.
+    touch-action: none;
+  }
+
+  // iOS-style mobile footer: "Reset" text link on the left, blue circular
+  // checkmark on the right.
+  .#{iv.$class-prefix}timeinput-footer-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 0.25rem 0;
+  }
+
+  .#{iv.$class-prefix}timeinput-footer-reset {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.5rem 0.25rem;
+    font: inherit;
+    color: cv.getVar('text');
+    cursor: pointer;
+    border-radius: cv.getVar('radius');
+
+    &:hover,
+    &:focus-visible {
+      background-color: hsla(0, 0%, 50%, 0.12);
+    }
+  }
+
+  .#{iv.$class-prefix}timeinput-footer-done {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: cv.getVar('primary');
+    color: cv.getVar('primary-invert');
+    cursor: pointer;
+    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.18);
+    transition: transform 0.1s ease;
+
+    &:active {
+      transform: scale(0.94);
+    }
+    &:focus-visible {
+      outline: 2px solid cv.getVar('primary');
+      outline-offset: 2px;
+    }
+  }
+}

package/src/scss/helpers/_cursor.scss

@@ -0,0 +1,5 @@
+@use "bulma/sass/utilities/initial-variables" as iv;
+
+.#{iv.$class-prefix}is-cursor-help {
+  cursor: help !important;
+}

package/src/scss/helpers/_index.scss

@@ -0,0 +1,2 @@
+@use 'cursor';
+@use 'sizing';

package/src/scss/helpers/_sizing.scss

@@ -0,0 +1,5 @@
+@use "bulma/sass/utilities/initial-variables" as iv;
+
+.#{iv.$class-prefix}is-full-height {
+  height: 100% !important;
+}

package/src/scss/versions/bestax-bulma-prefixed.scss

@@ -0,0 +1,15 @@
+// Bestax Bulma-Prefixed - Combined Bulma + Extras with "bulma-" class prefix
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/versions/bestax-bulma-prefixed.css';
+//
+// All CSS classes will be prefixed with "bulma-", e.g. "bulma-button", "bulma-is-primary"
+
+@use 'bulma/sass' with ($class-prefix: "bulma-", $primary: #1e6b99);
+
+@use '../variables';
+@use '../mixins';
+@use '../components/index' as components;
+@use '../form/index' as form;
+@use '../elements/index' as elements;
+@use '../helpers/index' as helpers;

package/src/scss/versions/bestax-no-dark-mode.scss

@@ -0,0 +1,32 @@
+// Bestax No Dark Mode - Combined Bulma + Extras, light theme only
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css';
+//
+// Includes only the light theme, reducing CSS bundle size
+
+// Configure utilities (primary override) before themes load it transitively
+@use "bulma/sass/utilities" with ($primary: #1e6b99);
+@use "bulma/sass/themes/light";
+@use "bulma/sass/themes/setup";
+@use '../variables';
+@use '../mixins';
+@use '../components/index' as components;
+@use '../form/index' as form;
+@use '../elements/index' as elements;
+@use '../helpers/index' as helpers;
+
+@forward "bulma/sass/utilities";
+@forward "bulma/sass/base";
+@forward "bulma/sass/elements";
+@forward "bulma/sass/form";
+@forward "bulma/sass/components";
+@forward "bulma/sass/grid";
+@forward "bulma/sass/layout";
+@forward "bulma/sass/base/skeleton";
+@forward "bulma/sass/helpers";
+
+:root {
+  @include light.light-theme;
+  @include setup.setup-theme;
+}

package/src/scss/versions/bestax-no-helpers-prefixed.scss

@@ -0,0 +1,22 @@
+// Bestax No Helpers, Prefixed - Combined Bulma + Extras with "bestax-" prefix, no helpers
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/versions/bestax-no-helpers-prefixed.css';
+//
+// Excludes helper classes and prefixes all CSS classes with "bestax-"
+
+@use "bulma/sass/utilities" with ($class-prefix: "bestax-", $primary: #1e6b99);
+@forward "bulma/sass/themes";
+@forward "bulma/sass/base";
+@forward "bulma/sass/elements";
+@forward "bulma/sass/form";
+@forward "bulma/sass/components";
+@forward "bulma/sass/grid";
+@forward "bulma/sass/layout";
+@forward "bulma/sass/base/skeleton";
+
+@use '../variables';
+@use '../mixins';
+@use '../components/index' as components;
+@use '../form/index' as form;
+@use '../elements/index' as elements;

package/src/scss/versions/bestax-no-helpers.scss

@@ -0,0 +1,23 @@
+// Bestax No Helpers - Combined Bulma + Extras without helper classes
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css';
+//
+// Excludes Bulma helper classes (spacing, typography, color utilities, etc.)
+
+@use "bulma/sass/utilities" with ($primary: #1e6b99);
+@forward "bulma/sass/utilities";
+@forward "bulma/sass/themes";
+@forward "bulma/sass/base";
+@forward "bulma/sass/elements";
+@forward "bulma/sass/form";
+@forward "bulma/sass/components";
+@forward "bulma/sass/grid";
+@forward "bulma/sass/layout";
+@forward "bulma/sass/base/skeleton";
+
+@use '../variables';
+@use '../mixins';
+@use '../components/index' as components;
+@use '../form/index' as form;
+@use '../elements/index' as elements;

package/src/scss/versions/bestax-prefixed.scss

@@ -0,0 +1,15 @@
+// Bestax Prefixed - Combined Bulma + Extras with "bestax-" class prefix
+//
+// Usage (pre-built CSS):
+//   import '@allxsmith/bestax-bulma/versions/bestax-prefixed.css';
+//
+// All CSS classes will be prefixed with "bestax-", e.g. "bestax-button", "bestax-is-primary"
+
+@use 'bulma/sass' with ($class-prefix: "bestax-", $primary: #1e6b99);
+
+@use '../variables';
+@use '../mixins';
+@use '../components/index' as components;
+@use '../form/index' as form;
+@use '../elements/index' as elements;
+@use '../helpers/index' as helpers;