@allxsmith/bestax-bulma 2.6.2 → 3.0.2

package/src/scss/form/_autocomplete.scss

@@ -0,0 +1,261 @@
+// Autocomplete component styles
+// Custom-styled autocomplete with dropdown suggestions
+// Follows Bulma v1 CSS variable convention (see _dialog.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Autocomplete-specific SCSS variables
+$autocomplete-dropdown-z-index: 20 !default;
+$autocomplete-dropdown-offset: 4px !default;
+$autocomplete-dropdown-background: cv.getVar("scheme-main") !default;
+$autocomplete-dropdown-radius: cv.getVar("radius") !default;
+$autocomplete-dropdown-shadow: cv.getVar("shadow") !default;
+$autocomplete-dropdown-padding-y: 0.5rem !default;
+$autocomplete-item-padding: 0.375rem 1rem !default;
+$autocomplete-item-color: cv.getVar("text") !default;
+$autocomplete-item-hover-background: hsla(0, 0%, 50%, 0.13) !default;
+$autocomplete-item-hover-color: cv.getVar("text-strong") !default;
+$autocomplete-item-disabled-color: cv.getVar("text-weak") !default;
+$autocomplete-item-disabled-opacity: 0.5 !default;
+$autocomplete-header-footer-padding: 0.5rem 1rem !default;
+$autocomplete-header-footer-color: cv.getVar("text-weak") !default;
+$autocomplete-header-footer-size: cv.getVar("size-small") !default;
+$autocomplete-border-color: cv.getVar("border") !default;
+$autocomplete-border-hover-color: cv.getVar("border-hover") !default;
+$autocomplete-icon-hover-color: cv.getVar("text-strong") !default;
+$autocomplete-loader-border-color: cv.getVar("border") !default;
+$autocomplete-loader-active-color: cv.getVar("primary") !default;
+$autocomplete-loader-duration: 0.6s !default;
+$autocomplete-empty-color: cv.getVar("text-weak") !default;
+$autocomplete-scrollbar-width: 8px !default;
+$autocomplete-scrollbar-track: cv.getVar("scheme-main-bis") !default;
+$autocomplete-scrollbar-thumb: cv.getVar("border") !default;
+$autocomplete-scrollbar-thumb-hover: cv.getVar("border-hover") !default;
+$autocomplete-item-small-padding: 0.25rem 0.75rem !default;
+$autocomplete-item-medium-padding: 0.5rem 1.25rem !default;
+$autocomplete-item-large-padding: 0.625rem 1.5rem !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}autocomplete {
+  @include cv.register-vars(
+    (
+      "autocomplete-dropdown-z-index": #{$autocomplete-dropdown-z-index},
+      "autocomplete-dropdown-offset": #{$autocomplete-dropdown-offset},
+      "autocomplete-dropdown-background": #{$autocomplete-dropdown-background},
+      "autocomplete-dropdown-radius": #{$autocomplete-dropdown-radius},
+      "autocomplete-dropdown-shadow": #{$autocomplete-dropdown-shadow},
+      "autocomplete-dropdown-padding-y": #{$autocomplete-dropdown-padding-y},
+      "autocomplete-item-padding": #{$autocomplete-item-padding},
+      "autocomplete-item-color": #{$autocomplete-item-color},
+      "autocomplete-item-hover-background": #{$autocomplete-item-hover-background},
+      "autocomplete-item-hover-color": #{$autocomplete-item-hover-color},
+      "autocomplete-item-disabled-color": #{$autocomplete-item-disabled-color},
+      "autocomplete-item-disabled-opacity": #{$autocomplete-item-disabled-opacity},
+      "autocomplete-header-footer-padding": #{$autocomplete-header-footer-padding},
+      "autocomplete-header-footer-color": #{$autocomplete-header-footer-color},
+      "autocomplete-header-footer-size": #{$autocomplete-header-footer-size},
+      "autocomplete-border-color": #{$autocomplete-border-color},
+      "autocomplete-border-hover-color": #{$autocomplete-border-hover-color},
+      "autocomplete-icon-hover-color": #{$autocomplete-icon-hover-color},
+      "autocomplete-loader-border-color": #{$autocomplete-loader-border-color},
+      "autocomplete-loader-active-color": #{$autocomplete-loader-active-color},
+      "autocomplete-loader-duration": #{$autocomplete-loader-duration},
+      "autocomplete-empty-color": #{$autocomplete-empty-color},
+      "autocomplete-scrollbar-width": #{$autocomplete-scrollbar-width},
+      "autocomplete-scrollbar-track": #{$autocomplete-scrollbar-track},
+      "autocomplete-scrollbar-thumb": #{$autocomplete-scrollbar-thumb},
+      "autocomplete-scrollbar-thumb-hover": #{$autocomplete-scrollbar-thumb-hover},
+      "autocomplete-item-small-padding": #{$autocomplete-item-small-padding},
+      "autocomplete-item-medium-padding": #{$autocomplete-item-medium-padding},
+      "autocomplete-item-large-padding": #{$autocomplete-item-large-padding},
+    )
+  );
+}
+
+// Main autocomplete component
+.#{iv.$class-prefix}autocomplete {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+
+  // Control wrapper
+  .#{iv.$class-prefix}control {
+    width: 100%;
+
+    &.#{iv.$class-prefix}is-expanded {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    &.#{iv.$class-prefix}has-icons-right {
+      .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
+        pointer-events: auto;
+        cursor: pointer;
+
+        &.#{iv.$class-prefix}is-clickable:hover {
+          color: cv.getVar("autocomplete-icon-hover-color");
+        }
+
+        svg {
+          width: 1em;
+          height: 1em;
+        }
+      }
+    }
+  }
+
+  // Input styling
+  .#{iv.$class-prefix}input {
+    width: 100%;
+  }
+
+  // Dropdown menu
+  .#{iv.$class-prefix}dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: cv.getVar("autocomplete-dropdown-z-index");
+    display: none;
+    padding-top: cv.getVar("autocomplete-dropdown-offset");
+
+    &.#{iv.$class-prefix}is-active {
+      display: block;
+    }
+  }
+
+  // Dropdown content
+  .#{iv.$class-prefix}dropdown-content {
+    background-color: cv.getVar("autocomplete-dropdown-background");
+    border-radius: cv.getVar("autocomplete-dropdown-radius");
+    box-shadow: cv.getVar("autocomplete-dropdown-shadow");
+    padding-bottom: cv.getVar("autocomplete-dropdown-padding-y");
+    padding-top: cv.getVar("autocomplete-dropdown-padding-y");
+    overflow-y: auto;
+
+    // Scrollbar styling
+    &::-webkit-scrollbar {
+      width: cv.getVar("autocomplete-scrollbar-width");
+    }
+
+    &::-webkit-scrollbar-track {
+      background: cv.getVar("autocomplete-scrollbar-track");
+      border-radius: cv.getVar("autocomplete-dropdown-radius");
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: cv.getVar("autocomplete-scrollbar-thumb");
+      border-radius: cv.getVar("autocomplete-dropdown-radius");
+
+      &:hover {
+        background: cv.getVar("autocomplete-scrollbar-thumb-hover");
+      }
+    }
+  }
+
+  // Dropdown items
+  .#{iv.$class-prefix}dropdown-item {
+    display: block;
+    padding: cv.getVar("autocomplete-item-padding");
+    color: cv.getVar("autocomplete-item-color");
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+
+    &:hover,
+    &.#{iv.$class-prefix}is-active {
+      background-color: cv.getVar("autocomplete-item-hover-background");
+      color: cv.getVar("autocomplete-item-hover-color");
+    }
+
+    &.#{iv.$class-prefix}is-disabled {
+      color: cv.getVar("autocomplete-item-disabled-color");
+      cursor: not-allowed;
+      opacity: cv.getVar("autocomplete-item-disabled-opacity");
+
+      &:hover {
+        background-color: transparent;
+        color: cv.getVar("autocomplete-item-disabled-color");
+      }
+    }
+  }
+
+  // Header and footer
+  .#{iv.$class-prefix}dropdown-header,
+  .#{iv.$class-prefix}dropdown-footer {
+    padding: cv.getVar("autocomplete-header-footer-padding");
+    font-size: cv.getVar("autocomplete-header-footer-size");
+    color: cv.getVar("autocomplete-header-footer-color");
+  }
+
+  .#{iv.$class-prefix}dropdown-header {
+    border-bottom: 1px solid cv.getVar("autocomplete-border-color");
+    margin-bottom: 0.25rem;
+  }
+
+  .#{iv.$class-prefix}dropdown-footer {
+    border-top: 1px solid cv.getVar("autocomplete-border-color");
+    margin-top: 0.25rem;
+  }
+
+  // Size modifiers
+  &.#{iv.$class-prefix}is-small {
+    .#{iv.$class-prefix}input {
+      font-size: cv.getVar("size-small");
+    }
+
+    .#{iv.$class-prefix}dropdown-item {
+      font-size: cv.getVar("size-small");
+      padding: cv.getVar("autocomplete-item-small-padding");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    .#{iv.$class-prefix}input {
+      font-size: cv.getVar("size-medium");
+    }
+
+    .#{iv.$class-prefix}dropdown-item {
+      font-size: cv.getVar("size-medium");
+      padding: cv.getVar("autocomplete-item-medium-padding");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    .#{iv.$class-prefix}input {
+      font-size: cv.getVar("size-large");
+    }
+
+    .#{iv.$class-prefix}dropdown-item {
+      font-size: cv.getVar("size-large");
+      padding: cv.getVar("autocomplete-item-large-padding");
+    }
+  }
+
+  // Loading state
+  .#{iv.$class-prefix}loader {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 2px solid cv.getVar("autocomplete-loader-border-color");
+    border-radius: 50%;
+    border-top-color: cv.getVar("autocomplete-loader-active-color");
+    animation: autocomplete-spin cv.getVar("autocomplete-loader-duration") linear infinite;
+  }
+
+  @keyframes autocomplete-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // Empty state
+  .#{iv.$class-prefix}has-text-grey {
+    color: cv.getVar("autocomplete-empty-color");
+    font-style: italic;
+  }
+}

package/src/scss/form/_checkbox.scss

@@ -0,0 +1,217 @@
+// Themed Checkbox styles
+// Custom-styled checkbox with colors, sizes, and visual states
+// Follows Bulma v1 CSS variable convention (see _dialog.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Checkbox-specific SCSS variables
+$checkbox-size: 1.25em !default;
+$checkbox-border-width: 2px !default;
+$checkbox-radius: cv.getVar("radius-small") !default;
+$checkbox-border-color: cv.getVar("border") !default;
+$checkbox-background: transparent !default;
+$checkbox-check-color: cv.getVar("scheme-invert") !default;
+$checkbox-active-color: cv.getVar("primary") !default;
+$checkbox-label-gap: 0.5em !default;
+$checkbox-focus-shadow-size: 0 0 0 0.125em !default;
+$checkbox-transition-duration: cv.getVar("duration") !default;
+$checkbox-indeterminate-color: cv.getVar("primary") !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}styled-checkbox {
+  @include cv.register-vars(
+    (
+      "checkbox-size": #{$checkbox-size},
+      "checkbox-border-width": #{$checkbox-border-width},
+      "checkbox-radius": #{$checkbox-radius},
+      "checkbox-border-color": #{$checkbox-border-color},
+      "checkbox-background": #{$checkbox-background},
+      "checkbox-check-color": #{$checkbox-check-color},
+      "checkbox-active-color": #{$checkbox-active-color},
+      "checkbox-label-gap": #{$checkbox-label-gap},
+      "checkbox-focus-shadow-size": #{$checkbox-focus-shadow-size},
+      "checkbox-transition-duration": #{$checkbox-transition-duration},
+      "checkbox-indeterminate-color": #{$checkbox-indeterminate-color},
+    )
+  );
+}
+
+// Main checkbox label
+.#{iv.$class-prefix}styled-checkbox {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  line-height: 1.5;
+
+  // Hidden native input
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    // Checked state
+    &:checked + .check {
+      background-color: cv.getVar("checkbox-active-color");
+      border-color: cv.getVar("checkbox-active-color");
+
+      // SVG checkmark
+      &::after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    // Indeterminate state
+    &:indeterminate + .check {
+      background-color: cv.getVar("checkbox-indeterminate-color");
+      border-color: cv.getVar("checkbox-indeterminate-color");
+
+      &::after {
+        opacity: 0;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 60%;
+        height: cv.getVar("checkbox-border-width");
+        background-color: cv.getVar("checkbox-check-color");
+        border-radius: 1px;
+      }
+    }
+
+    // Focus-visible state (keyboard only)
+    &:focus-visible + .check {
+      outline: 2px solid cv.getVar("checkbox-active-color");
+      outline-offset: 2px;
+    }
+
+    // Disabled state
+    &:disabled + .check {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .control-label {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Custom check indicator
+  .check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    width: cv.getVar("checkbox-size");
+    height: cv.getVar("checkbox-size");
+    min-width: 24px;
+    min-height: 24px;
+    background-color: cv.getVar("checkbox-background");
+    border: cv.getVar("checkbox-border-width") solid cv.getVar("checkbox-border-color");
+    border-radius: cv.getVar("checkbox-radius");
+    transition-property: background-color, border-color;
+    transition-duration: cv.getVar("checkbox-transition-duration");
+    transition-timing-function: ease;
+
+    // Checkmark via SVG background-image
+    &::after {
+      content: "";
+      position: absolute;
+      width: 85%;
+      height: 85%;
+      opacity: 0;
+      transform: scale(0.5);
+      transition-property: opacity, transform;
+      transition-duration: cv.getVar("checkbox-transition-duration");
+      transition-timing-function: ease;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+  }
+
+  // Label text
+  .control-label {
+    margin-left: cv.getVar("checkbox-label-gap");
+    line-height: 1.5;
+  }
+}
+
+// Color variants
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}styled-checkbox.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "checkbox-active-color": #{cv.getVar($name)},
+        "checkbox-indeterminate-color": #{cv.getVar($name)},
+      )
+    );
+  }
+}
+
+// Size variants
+.#{iv.$class-prefix}styled-checkbox.#{iv.$class-prefix}is-small {
+  font-size: cv.getVar("size-small");
+}
+
+.#{iv.$class-prefix}styled-checkbox.#{iv.$class-prefix}is-medium {
+  font-size: cv.getVar("size-medium");
+}
+
+.#{iv.$class-prefix}styled-checkbox.#{iv.$class-prefix}is-large {
+  font-size: cv.getVar("size-large");
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}styled-checkbox {
+    .check {
+      border-color: ButtonText;
+    }
+
+    input[type="checkbox"]:checked + .check {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    input[type="checkbox"]:focus-visible + .check {
+      outline-color: Highlight;
+    }
+
+    input[type="checkbox"]:disabled + .check {
+      border-color: GrayText;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}styled-checkbox {
+    .check,
+    .check::after {
+      transition: none;
+    }
+  }
+}
+
+// Vertical alignment for horizontal-field layouts.
+// Match `.field-label.is-normal`'s `padding-top: 0.375em` so the checkbox
+// group baseline lines up with the field-label text.
+.#{iv.$class-prefix}field.#{iv.$class-prefix}is-horizontal {
+  .#{iv.$class-prefix}field-body {
+    .#{iv.$class-prefix}checkboxes {
+      padding-top: 0.375em;
+    }
+  }
+}