@allxsmith/bestax-bulma 5.26.5 → 5.27.0

package/src/scss/form/_dateinput.scss

@@ -16,6 +16,19 @@ $dateinput-header-padding: 0.5rem 0 !default;
 $dateinput-day-name-color: cv.getVar('text-weak') !default;
 $dateinput-day-name-size: cv.getVar('size-7') !default;
 $dateinput-nav-button-size: 1.75rem !default;
+// A range's band: the days between its ends, tinted from the selection fill
+// so a `color` variant re-tints it too. A preview, while the end is still
+// being picked, is fainter.
+$dateinput-cell-range-bg: color-mix(
+  in srgb,
+  #{cv.getVar('dateinput-cell-selected-bg')} 18%,
+  transparent
+) !default;
+$dateinput-cell-range-preview-bg: color-mix(
+  in srgb,
+  #{cv.getVar('dateinput-cell-selected-bg')} 9%,
+  transparent
+) !default;
 
 .#{iv.$class-prefix}dateinput {
   @include cv.register-vars(
@@ -35,6 +48,8 @@ $dateinput-nav-button-size: 1.75rem !default;
       'dateinput-day-name-color': #{$dateinput-day-name-color},
       'dateinput-day-name-size': #{$dateinput-day-name-size},
       'dateinput-nav-button-size': #{$dateinput-nav-button-size},
+      'dateinput-cell-range-bg': #{$dateinput-cell-range-bg},
+      'dateinput-cell-range-preview-bg': #{$dateinput-cell-range-preview-bg},
     )
   );
 }
@@ -50,8 +65,7 @@ $dateinput-nav-button-size: 1.75rem !default;
 // (no popover wrapper), give it a subtle frame so the grid doesn't look
 // orphaned on the page. Mirrors the popover's visual weight without the
 // drop-shadow / animation.
-.#{iv.$class-prefix}dateinput-container
-  > .#{iv.$class-prefix}dateinput {
+.#{iv.$class-prefix}dateinput-container > .#{iv.$class-prefix}dateinput {
   background-color: cv.getVar('scheme-main');
   border: 1px solid cv.getVar('border');
   border-radius: cv.getVar('radius');
@@ -132,13 +146,20 @@ $dateinput-nav-button-size: 1.75rem !default;
   }
 }
 
+// The day names and each week of the grid lay out in seven columns. The
+// grid stacks its weeks, which are rows so it can own them as a grid must.
 .#{iv.$class-prefix}dateinput-day-names,
-.#{iv.$class-prefix}dateinput-grid {
+.#{iv.$class-prefix}dateinput-week {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
 
+.#{iv.$class-prefix}dateinput-grid {
+  display: grid;
+  gap: 2px;
+}
+
 .#{iv.$class-prefix}dateinput-day-name {
   text-align: center;
   font-size: cv.getVar('dateinput-day-name-size');
@@ -216,6 +237,40 @@ $dateinput-nav-button-size: 1.75rem !default;
     cursor: not-allowed;
     opacity: 0.55;
   }
+  // A range: its ends take the selected fill above, and the days between
+  // them the band. The hover rule above replaces a cell's fill and outranks
+  // a bare class, so each band state repeats under `:hover`, where it ties
+  // that rule and comes later, and the hover overlay is painted on top of
+  // the band as an image rather than in its place.
+  &.#{iv.$class-prefix}is-in-range {
+    &,
+    &:hover:not(:disabled) {
+      background-color: cv.getVar('dateinput-cell-range-bg');
+    }
+  }
+  // A preview, while the end is still being picked: a fainter band, and an
+  // outline on the day it would end on, which isn't picked yet. On the
+  // pointer path that day is the one under the pointer.
+  &.#{iv.$class-prefix}is-in-range.#{iv.$class-prefix}is-preview,
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    &,
+    &:hover:not(:disabled) {
+      background-color: cv.getVar('dateinput-cell-range-preview-bg');
+    }
+  }
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    border-style: dashed;
+    border-color: cv.getVar('dateinput-cell-selected-bg');
+  }
+  &.#{iv.$class-prefix}is-in-range,
+  &.#{iv.$class-prefix}is-range-end.#{iv.$class-prefix}is-preview {
+    &:hover:not(:disabled) {
+      background-image: linear-gradient(
+        cv.getVar('dateinput-cell-hover-bg'),
+        cv.getVar('dateinput-cell-hover-bg')
+      );
+    }
+  }
 }
 
 .#{iv.$class-prefix}dateinput-years-grid {

package/src/scss/form/_daterangeinput.scss

@@ -0,0 +1,63 @@
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// DateRangeInput's field: two inputs and a separator inside one Bulma
+// `.input`. The calendar's range styles live with the rest of the calendar's,
+// in `_dateinput.scss`, so a calendar portaled out of the field keeps them.
+$daterangeinput-gap: 0.5em !default;
+$daterangeinput-separator-color: cv.getVar('text-weak') !default;
+
+.#{iv.$class-prefix}daterangeinput {
+  @include cv.register-vars(
+    (
+      'daterangeinput-gap': #{$daterangeinput-gap},
+      'daterangeinput-separator-color': #{$daterangeinput-separator-color},
+    )
+  );
+}
+
+// Bulma's `.input` already lays its content out in a row and draws its focus
+// ring for `:focus-within`, so the field shows focus wherever it is inside.
+.#{iv.$class-prefix}daterangeinput-field {
+  gap: cv.getVar('daterangeinput-gap');
+  cursor: text;
+}
+
+// The inputs are bare: the field around them is the input the user sees.
+.#{iv.$class-prefix}daterangeinput-input {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+
+  &::placeholder {
+    color: cv.getVar('input-placeholder-color');
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}daterangeinput-separator {
+  flex: none;
+  color: cv.getVar('daterangeinput-separator-color');
+}
+
+// A div takes no `disabled`, so the field is marked by class and given
+// Bulma's disabled input look from Bulma's own variables.
+.#{iv.$class-prefix}daterangeinput-field.#{iv.$class-prefix}is-disabled {
+  background-color: cv.getVar('input-disabled-background-color');
+  border-color: cv.getVar('input-disabled-border-color');
+  box-shadow: none;
+  color: cv.getVar('input-disabled-color');
+  cursor: not-allowed;
+
+  .#{iv.$class-prefix}daterangeinput-input::placeholder {
+    color: cv.getVar('input-disabled-placeholder-color');
+  }
+}

package/src/scss/form/_file.scss

@@ -0,0 +1,37 @@
+// File Component Styles
+// Bulma already styles the file input; this adds its keyboard focus ring
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Keyboard focus ring for File. The focusable element is the <input>, which
+// Bulma lays transparent over the whole widget, so the ring goes on the CTA
+// you see instead. The .file-label around them hides its overflow, which
+// clips a ring drawn outside the CTA, so the ring is drawn inside it, with
+// Bulma's focus colour, style and width. :focus-visible keeps it to the
+// keyboard: a click shows none.
+.#{iv.$class-prefix}file-input:focus-visible + .#{iv.$class-prefix}file-cta {
+  outline-color: hsl(cv.getVar("focus-h"), cv.getVar("focus-s"), cv.getVar("focus-l"));
+  outline-style: cv.getVar("focus-style");
+  outline-width: cv.getVar("focus-width");
+  outline-offset: calc(-1 * #{cv.getVar("focus-width")});
+}
+
+// A coloured File fills its CTA with that colour, which can be the focus
+// colour itself (it is the link colour by default), so its ring takes the
+// CTA's text colour (currentColor, which Bulma sets to read on the fill) and
+// sits one ring width further in, keeping a band of the fill outside it to
+// set it off from the page around the CTA. The colours are the ones File's
+// `color` prop takes, and the placeholder joins them into one rule.
+%file-focus-ring-on-fill {
+  outline-color: currentColor;
+  outline-offset: calc(-2 * #{cv.getVar("focus-width")});
+}
+
+@each $name in "primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white" {
+  .#{iv.$class-prefix}file.#{iv.$class-prefix}is-#{$name}
+    .#{iv.$class-prefix}file-input:focus-visible
+    + .#{iv.$class-prefix}file-cta {
+    @extend %file-focus-ring-on-fill;
+  }
+}

package/src/scss/form/_index.scss

@@ -14,3 +14,5 @@
 @use 'dateinput';
 @use 'timeinput';
 @use 'datetimeinput';
+@use 'daterangeinput';
+@use 'file';