@allxsmith/bestax-bulma 5.49.1 → 5.51.0

package/src/scss/elements/_descriptionlist.scss

@@ -0,0 +1,153 @@
+// Bestax Extras - DescriptionList Styles
+// Facts about one thing, each a label and its value: a `<dl>` with a `<div>`
+// per item, a `<dt>` per label and a `<dd>` per value. Bulma styles a `<dl>`
+// only inside `.content`, where it indents the values, so this lays one out.
+//
+// The list is a grid, and each item spans it on `subgrid`, so every label
+// sits in the first column and every value in the last. Stacked, the grid
+// has one column; beside, it has two, the labels' as wide as the longest
+// label. The columns are all an orientation changes. The grid follows the
+// writing direction, so a right-to-left page needs no rules of its own, and
+// the gaps are in em, so `textSize` on the list scales them with the text.
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+@use "bulma/sass/utilities/mixins" as mx;
+
+// Between items.
+$description-list-gap: 0.75em !default;
+// Between the labels' column and the values', side by side.
+$description-list-column-gap: 1.5em !default;
+// Between a label and its value stacked, and between several labels or
+// several values in one item.
+$description-list-row-gap: 0.25em !default;
+// The most the labels' column takes side by side. Longer labels wrap.
+$description-list-label-max-width: 40% !default;
+$description-list-label-color: cv.getVar("text-weak") !default;
+$description-list-label-weight: cv.getVar("weight-normal") !default;
+$description-list-value-color: cv.getVar("text") !default;
+$description-list-divider-color: cv.getVar("border-weak") !default;
+$description-list-divider-width: 1px !default;
+
+.#{iv.$class-prefix}description-list {
+  @include cv.register-vars(
+    (
+      "description-list-gap": #{$description-list-gap},
+      "description-list-column-gap": #{$description-list-column-gap},
+      "description-list-row-gap": #{$description-list-row-gap},
+      "description-list-label-max-width": #{$description-list-label-max-width},
+      "description-list-label-color": #{$description-list-label-color},
+      "description-list-label-weight": #{$description-list-label-weight},
+      "description-list-value-color": #{$description-list-value-color},
+      "description-list-divider-color": #{$description-list-divider-color},
+      "description-list-divider-width": #{$description-list-divider-width},
+    )
+  );
+}
+
+// ---- The two orientations, as the list's columns ----------------------------
+
+@mixin -vertical {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@mixin -horizontal {
+  grid-template-columns: fit-content(#{cv.getVar("description-list-label-max-width")}) minmax(0, 1fr);
+}
+
+// ---- Structure ----------------------------------------------------------------
+
+.#{iv.$class-prefix}description-list {
+  display: grid;
+  @include -vertical;
+  column-gap: cv.getVar("description-list-column-gap");
+  row-gap: cv.getVar("description-list-gap");
+  margin: 0;
+  padding: 0;
+  // On the root, so a `textColor` helper's class outranks it and the values
+  // inherit either.
+  color: cv.getVar("description-list-value-color");
+
+  &:not(:last-child) {
+    margin-bottom: cv.getVar("block-spacing");
+  }
+}
+
+.#{iv.$class-prefix}description-list-item {
+  display: grid;
+  grid-column: 1 / -1;
+  // A browser without `subgrid` keeps this one column, so its items stay
+  // stacked at every width rather than misplace a value.
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: subgrid;
+  // Each label from the top of the first column and each value from the top
+  // of the last, so several of either line up from the item's first line.
+  grid-auto-flow: row dense;
+  align-items: baseline;
+  row-gap: cv.getVar("description-list-row-gap");
+}
+
+// Through the root, so it outranks Bulma's `.content dd` indent.
+.#{iv.$class-prefix}description-list .#{iv.$class-prefix}description-list-label {
+  grid-column: 1 / 2;
+  margin: 0;
+  color: cv.getVar("description-list-label-color");
+  font-weight: cv.getVar("description-list-label-weight");
+}
+
+.#{iv.$class-prefix}description-list .#{iv.$class-prefix}description-list-value {
+  grid-column: -2 / -1;
+  margin: 0;
+  // An order number, an email or a URL wraps rather than widen the list.
+  overflow-wrap: anywhere;
+}
+
+.#{iv.$class-prefix}description-list.#{iv.$class-prefix}has-dividers
+  > .#{iv.$class-prefix}description-list-item
+  + .#{iv.$class-prefix}description-list-item {
+  border-block-start: cv.getVar("description-list-divider-width") solid cv.getVar("description-list-divider-color");
+  padding-block-start: cv.getVar("description-list-gap");
+}
+
+// ---- Orientation ----------------------------------------------------------------
+
+// With no orientation given: stacked on a phone, beside from tablet up.
+@include mx.tablet {
+  .#{iv.$class-prefix}description-list {
+    @include -horizontal;
+  }
+}
+
+@mixin -orientations($suffix) {
+  .#{iv.$class-prefix}description-list.#{iv.$class-prefix}is-vertical#{$suffix} {
+    @include -vertical;
+  }
+
+  .#{iv.$class-prefix}description-list.#{iv.$class-prefix}is-horizontal#{$suffix} {
+    @include -horizontal;
+  }
+}
+
+// `orientation` at every width, then each viewport's prop from its own
+// breakpoint, narrowest first, so where several apply the widest one wins.
+@include -orientations("");
+
+@include mx.mobile {
+  @include -orientations("-mobile");
+}
+
+@include mx.tablet {
+  @include -orientations("-tablet");
+}
+
+@include mx.desktop {
+  @include -orientations("-desktop");
+}
+
+@include mx.widescreen {
+  @include -orientations("-widescreen");
+}
+
+@include mx.fullhd {
+  @include -orientations("-fullhd");
+}

package/src/scss/elements/_index.scss

@@ -2,9 +2,11 @@
 // Import all element partials here
 
 // Element Components
+@use 'descriptionlist';
 @use 'kbd';
 @use 'linkbutton';
 @use 'loader';
 @use 'notification';
 @use 'progress';
+@use 'ringprogress';
 @use 'skeleton';

package/src/scss/elements/_ringprogress.scss

@@ -0,0 +1,160 @@
+// Bestax Extras - RingProgress Styles
+// A value drawn as a ring, with anything the app passes in the middle. Bulma
+// has a linear progress bar and no ring.
+//
+// The ring is an SVG: a track circle, and an arc per value whose length and
+// start the component sets as custom properties, in percent of the way
+// round. Each arc has `pathLength="100"`, so a percentage is a dash length
+// as it is, and nothing is measured. Forced colors leaves SVG strokes in the
+// author's colours, so a rule here gives them the system's.
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+$ring-progress-size: 5rem !default;
+$ring-progress-size-small: 3.5rem !default;
+$ring-progress-size-medium: 7rem !default;
+$ring-progress-size-large: 9rem !default;
+// In the ring's own units: the ring is 100 across and its circle has a
+// radius of 42, so a thickness up to 16 fits.
+$ring-progress-thickness: 10 !default;
+// The unfilled ring, the color Bulma gives a progress bar's track.
+$ring-progress-track-color: cv.getVar("border-weak") !default;
+$ring-progress-arc-color: cv.getVar("primary") !default;
+$ring-progress-duration: cv.getVar("duration") !default;
+$ring-progress-label-color: cv.getVar("text-strong") !default;
+$ring-progress-label-weight: cv.getVar("weight-semibold") !default;
+// A fifth of the ring, so the middle grows and shrinks with it: 1rem at the
+// default size.
+$ring-progress-label-size: calc(#{cv.getVar("ring-progress-size")} / 5) !default;
+
+.#{iv.$class-prefix}ring-progress {
+  @include cv.register-vars(
+    (
+      "ring-progress-size": #{$ring-progress-size},
+      "ring-progress-thickness": #{$ring-progress-thickness},
+      "ring-progress-track-color": #{$ring-progress-track-color},
+      "ring-progress-arc-color": #{$ring-progress-arc-color},
+      "ring-progress-duration": #{$ring-progress-duration},
+      "ring-progress-label-color": #{$ring-progress-label-color},
+      "ring-progress-label-weight": #{$ring-progress-label-weight},
+      "ring-progress-label-size": #{$ring-progress-label-size},
+    )
+  );
+}
+
+@each $size, $value in ("small": $ring-progress-size-small, "medium": $ring-progress-size-medium, "large": $ring-progress-size-large) {
+  .#{iv.$class-prefix}ring-progress.#{iv.$class-prefix}is-#{$size} {
+    @include cv.register-vars(
+      (
+        "ring-progress-size": #{$value},
+      )
+    );
+  }
+}
+
+// ---- The ring and its middle ---------------------------------------------------
+
+// One grid cell holds both the ring and the label, so the label sits in the
+// middle at any size.
+.#{iv.$class-prefix}ring-progress {
+  display: inline-grid;
+  place-items: center;
+  inline-size: cv.getVar("ring-progress-size");
+  block-size: cv.getVar("ring-progress-size");
+  vertical-align: middle;
+  // On the root, so a `textColor` helper's class outranks it and the middle
+  // inherits either.
+  color: cv.getVar("ring-progress-label-color");
+  // The gap between sections, in percent of the way round: none until
+  // forced colors needs one, below.
+  --ring-progress-gap: 0;
+}
+
+.#{iv.$class-prefix}ring-progress-ring,
+.#{iv.$class-prefix}ring-progress-label {
+  grid-area: 1 / 1;
+}
+
+.#{iv.$class-prefix}ring-progress-ring {
+  inline-size: 100%;
+  block-size: 100%;
+  // A circle's path starts at three o'clock and runs clockwise; this puts
+  // the start at the top.
+  transform: rotate(-90deg);
+}
+
+.#{iv.$class-prefix}ring-progress-track,
+.#{iv.$class-prefix}ring-progress-arc {
+  fill: none;
+  stroke-width: cv.getVar("ring-progress-thickness");
+}
+
+.#{iv.$class-prefix}ring-progress-track {
+  stroke: cv.getVar("ring-progress-track-color");
+}
+
+.#{iv.$class-prefix}ring-progress-arc {
+  stroke: cv.getVar("ring-progress-arc-color");
+  // In px, which here are the circle's path units: Firefox drops a
+  // dasharray whose calc() works in bare numbers.
+  stroke-dasharray: max(0px, calc((var(--ring-progress-length) - var(--ring-progress-gap)) * 1px)) 100px;
+  stroke-dashoffset: calc(var(--ring-progress-start) * -1px);
+  transition-property: stroke-dasharray, stroke-dashoffset;
+  transition-duration: cv.getVar("ring-progress-duration");
+}
+
+.#{iv.$class-prefix}ring-progress.#{iv.$class-prefix}is-rounded .#{iv.$class-prefix}ring-progress-arc {
+  stroke-linecap: round;
+}
+
+.#{iv.$class-prefix}ring-progress-label {
+  font-size: cv.getVar("ring-progress-label-size");
+  font-weight: cv.getVar("ring-progress-label-weight");
+  line-height: 1.2;
+  text-align: center;
+  // Inside the ring, clear of the arc.
+  max-inline-size: 70%;
+}
+
+// ---- Colors ----------------------------------------------------------------------
+
+// On the root, the color of every arc; on an arc, that section's own.
+@each $name in "primary", "link", "info", "success", "warning", "danger", "black", "dark", "light", "white" {
+  .#{iv.$class-prefix}ring-progress.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "ring-progress-arc-color": #{cv.getVar($name)},
+      )
+    );
+  }
+
+  .#{iv.$class-prefix}ring-progress-arc.#{iv.$class-prefix}is-#{$name} {
+    stroke: cv.getVar($name);
+  }
+}
+
+// ---- Media ---------------------------------------------------------------------
+
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}ring-progress-arc {
+    transition: none;
+  }
+}
+
+// SVG strokes keep the author's colours in forced colors, so the ring takes
+// the system's, and sections, now one colour, get gaps between them.
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}ring-progress.#{iv.$class-prefix}has-sections {
+    --ring-progress-gap: 1.5;
+  }
+
+  .#{iv.$class-prefix}ring-progress-track {
+    stroke: GrayText;
+  }
+
+  // Through the root, so it outranks a section's own color class.
+  .#{iv.$class-prefix}ring-progress .#{iv.$class-prefix}ring-progress-arc {
+    stroke: CanvasText;
+  }
+}