kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/checkbox/_checkboxes.scss

@@ -1,281 +1,172 @@
-/* Checkboxes */
+/* Material Design 3 checkboxes, adapted to native Materialize markup. */
 
 @at-root {
   :root {
-    --checkbox-size: 18px; // 18px
+    --checkbox-size: 20px;
     --checkbox-shape: 2px;
+    --checkbox-state-layer-size: 44px;
   }
 }
 
 input[type="checkbox"] {
-  /* Add if not using autoprefixer */
-  -webkit-appearance: none;
-  appearance: none;
-  /* For iOS < 15 to remove gradient background */
-  // background-color: #fff;
-  margin: 0;
+  box-sizing: border-box;
   position: relative;
-  cursor: pointer;
-}
-
-input[type="checkbox"]:focus {
-  outline: 3px solid var(--md-sys-color-secondary);
-  border-radius: 50%;
-  outline-offset: 0.5rem;
-}
-
-input[type="checkbox"]:before {
-  opacity: 1;
-  position: absolute;
-  display: block;
+  z-index: 0;
+  flex: 0 0 var(--checkbox-size);
   width: var(--checkbox-size);
   height: var(--checkbox-size);
-  border: 2px solid var(--md-sys-color-on-surface-variant);
-  border-radius: var(--checkbox-shape);
-  content: "";
-  // background: #fff;
-}
-
-input[type="checkbox"]:after {
-  position: relative;
-  display: block;
-  // left: 2px;
-  // top: -11px;
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  // border-width: 2px;
-  // border-style: solid;
-  // border-color: var(--md-sys-color-on-surface-variant);
-  content: "";
-  // background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--checkbox-selected-icon-color, var(--md-sys-color-on-primary));
+  background: transparent;
+  border: 2px solid var(--checkbox-outline-color, var(--md-sys-color-on-surface-variant));
   border-radius: var(--checkbox-shape);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-input[type="checkbox"]:checked:after {
-  background-color: var(--md-sys-color-primary);
-  clip-path: polygon(0 48%, 0 0, 56% 0, 74% 17%, 40% 64%, 23% 50%, 14% 61%, 42% 82%, 81% 31%, 32% 0, 100% 0, 100% 100%, 0 100%, 0 49%);
-}
-
-[type="checkbox"]:indeterminate:after {
-  background-color: var(--md-sys-color-primary);
-  clip-path: polygon(0% 0%, 0% 100%, 18% 100%, 16% 43%, 83% 42%, 83% 63%, 16% 63%, 16% 100%, 100% 100%, 100% 0%);
-}
-
-// Disabled
-input[type="checkbox"]:disabled:before {
-  filter: opacity(0.2);
-}
-input[type="checkbox"]:disabled:after {
-  filter: opacity(0.2);
-}
-
-// Hover
-input[type="checkbox"]:not(:disabled):checked:hover:after{
-  // background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
-  background-color: var(--md-sys-color-primary);
-}
-
-input[type="checkbox"]:not(:disabled):hover:after{
-  // background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
-  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
-}
-
-input[type="checkbox"]:not(:disabled):hover:before{
-  border-color: #3D7591;
-}
-
-/*
-// Checkbox Styles
-[type="checkbox"] {
-  // Text Label Style
-  + span:not(.lever) {
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    height: var(--checkbox-size);
-    line-height: var(--checkbox-size);    
-    padding-left: var(--checkbox-size);    
-    // background-color: red;
-    font-size: 1rem;
-    user-select: none;
-  }
+  outline: none;
+  cursor: pointer;
+  transition: background-color 150ms linear, border-color 150ms linear;
+  -webkit-tap-highlight-color: transparent;
 
-  // checkbox aspect
-  + span:not(.lever):before,
-  &:not(.filled-in) + span:not(.lever):after {
-    content: '';
+  // The visual box stays compact while interaction feedback occupies 44px.
+  &::before {
+    content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--checkbox-size);
-    height: var(--checkbox-size);
-    z-index: 0;
-    border: 2px solid var(--md-sys-color-on-surface-variant);
-    border-radius: 1px;
-    transition: .2s;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    width: var(--checkbox-state-layer-size);
+    height: var(--checkbox-state-layer-size);
+    background: transparent;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0.8);
+    transition: background-color 150ms linear, transform 150ms ease;
+    pointer-events: none;
   }
 
-  &:not(.filled-in) + span:not(.lever):after {
-    border: 0;
-    transform: scale(0);
+  // Check mark; the indeterminate state replaces it with a short bar.
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 6px;
+    box-sizing: border-box;
+    width: 5px;
+    height: 10px;
+    border: solid currentColor;
+    border-width: 0 2px 2px 0;
+    opacity: 0;
+    transform: rotate(45deg) scale(0.6);
+    transform-origin: center;
+    transition: opacity 50ms linear, transform 350ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
   }
 
-  &:not(:checked):disabled + span:not(.lever):before {
-    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  &:checked,
+  &:indeterminate {
+    background: var(--checkbox-selected-container-color, var(--md-sys-color-primary));
+    border-color: var(--checkbox-selected-container-color, var(--md-sys-color-primary));
   }
 
-  &:disabled + span:not(.lever) {
-    color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  &:checked::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1);
   }
 
-  // Focused styles
-  &.tabbed:focus + span:not(.lever):after {
-    transform: scale(1);
+  &:indeterminate::after {
+    top: 7px;
+    left: 3px;
+    width: 10px;
+    height: 2px;
+    background: currentColor;
     border: 0;
-    border-radius: 50%;
-    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.12);
-    background-color: rgba(0, 0, 0, 0.12);
+    opacity: 1;
+    transform: scale(1);
   }
-}
 
-[type="checkbox"]:checked {
-  + span:not(.lever):before {
-    top: -4px;
-    left: -5px;
-    width: 12px;
-    height: 22px;
-    border-top: 2px solid transparent;
-    border-left: 2px solid transparent;
-    border-right: 2px solid var(--md-sys-color-primary);
-    border-bottom: 2px solid var(--md-sys-color-primary);
-    transform: rotate(40deg);
-    backface-visibility: hidden;
-    transform-origin: 100% 100%;
+  &:not(:disabled):hover::before {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+    transform: translate(-50%, -50%) scale(1);
   }
 
-  &:disabled + span:before {
-    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
-    border-bottom: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  &:not(:disabled):is(:checked, :indeterminate):hover::before {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
   }
-}
 
-// Indeterminate checkbox
-[type="checkbox"]:indeterminate {
-  + span:not(.lever):before {
-    top: -11px;
-    left: -12px;
-    width: 10px;
-    height: 22px;
-    border-top: none;
-    border-left: none;
-    border-right: 2px solid var(--md-sys-color-primary);
-    border-bottom: none;
-    transform: rotate(90deg);
-    backface-visibility: hidden;
-    transform-origin: 100% 100%;
+  &:not(:disabled):active::before {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    transform: translate(-50%, -50%) scale(1);
   }
 
-  // Disabled indeterminate
-  &:disabled + span:not(.lever):before {
-    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
-    background-color: transparent;
+  &:not(:disabled):is(:checked, :indeterminate):active::before {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
   }
-}
 
-// Filled in Style
-[type="checkbox"].filled-in {
-  // General
-  + span:not(.lever):after {
-    border-radius: 2px;
+  &:focus-visible::before,
+  &.tabbed:focus::before {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    transform: translate(-50%, -50%) scale(1);
   }
 
-  + span:not(.lever):before,
-  + span:not(.lever):after {
-    content: '';
-    left: 0;
-    position: absolute;
-    // .1s delay is for check animation
-    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
-    z-index: 1;
+  &:is(:checked, :indeterminate):focus-visible::before,
+  &:is(:checked, :indeterminate).tabbed:focus::before {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
   }
 
-  // Unchecked style
-  &:not(:checked) + span:not(.lever):before {
-    width: 0;
-    height: 0;
-    border: 3px solid transparent;
-    left: 6px;
-    top: 10px;
-    transform: rotateZ(37deg);
-    transform-origin: 100% 100%;
+  &:disabled {
+    cursor: default;
+    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   }
 
-  &:not(:checked) + span:not(.lever):after {
-    height: 20px;
-    width: 20px;
-    background-color: transparent;
-    border: 2px solid var(--md-sys-color-on-surface-variant);
-    top: 0px;
-    z-index: 0;
+  &:disabled:is(:checked, :indeterminate) {
+    color: var(--md-sys-color-surface);
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    border-color: transparent;
   }
+}
 
-  // Checked style
-  &:checked {
-    + span:not(.lever):before {
-      top: 0;
-      left: 1px;
-      width: 8px;
-      height: 13px;
-      border-top: 2px solid transparent;
-      border-left: 2px solid transparent;
-      border-right: 2px solid var(--md-sys-color-on-primary);
-      border-bottom: 2px solid var(--md-sys-color-on-primary);
-      transform: rotateZ(37deg);
-      transform-origin: 100% 100%;
-    }
-
-    + span:not(.lever):after {
-      top: 0;
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-primary);
-      z-index: 0;
-    }
-  }
+// Material has one checkbox type; keep this legacy class API visually unified.
+input[type="checkbox"].filled-in {
+  border-radius: var(--checkbox-shape);
+}
 
-  // Focused styles
-  &.tabbed:focus + span:not(.lever):after {
-    border-radius: 2px;
-    border-color: var(--md-sys-color-on-surface-variant)r;
-    background-color: rgba(0, 0, 0, 0.12);
-  }
+// Match the 20px box with a 48px accessible row target. The :not(.lever)
+// sibling keeps these layout rules away from Materialize switches.
+label:has(> input[type="checkbox"]):has(> span:not(.lever)) {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  color: var(--md-sys-color-on-surface);
+  font-size: 16px;
+  cursor: pointer;
+  user-select: none;
 
-  &.tabbed:checked:focus + span:not(.lever):after {
-    border-radius: 2px;
-    background-color: var(--md-sys-color-primary);
-    border-color: var(--md-sys-color-primary);
+  > span:not(.lever) {
+    padding: 0;
+    line-height: 24px;
   }
 
-  // Disabled style
-  &:disabled:not(:checked) + span:not(.lever):before {
-    background-color: transparent;
-    border: 2px solid transparent;
+  > .checkbox-icon {
+    flex: 0 0 auto;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 20px;
+    line-height: 24px;
   }
 
-  &:disabled:not(:checked) + span:not(.lever):after {
-    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  > input[type="checkbox"]:disabled ~ span:not(.lever),
+  > input[type="checkbox"]:disabled ~ .checkbox-icon {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
   }
 
-  &:disabled:checked + span:not(.lever):before {
-    background-color: transparent;
+  &:has(> input[type="checkbox"]:disabled) {
+    cursor: default;
   }
+}
 
-  &:disabled:checked + span:not(.lever):after {
-    background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
-    border: none;
-  }
+// The 48px label already provides Material's touch target. Remove the default
+// paragraph margins when a paragraph is used only as a checkbox row.
+p:has(> label:has(> input[type="checkbox"]):has(> span:not(.lever))) {
+  margin-block: 0;
 }
-*/

package/components/collapsible/_collapsible.scss

@@ -4,11 +4,24 @@
 .collapsible {
   padding-left: 0;
   list-style-type: none;
+  background-color: var(--md-sys-color-surface);
   border-top: 1px solid var(--md-sys-color-outline-variant);
   border-right: 1px solid var(--md-sys-color-outline-variant);
   border-left: 1px solid var(--md-sys-color-outline-variant);
   margin: $element-top-margin 0 $element-bottom-margin 0;
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Matches the 12px corner radius used across cards, dropdowns and
+  // collections instead of square corners.
+  border-radius: 12px;
   @extend .z-depth-1;
+
+  // @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+  // Only clip to the rounded corners while every item is closed - an open
+  // last item's body needs to be able to grow past the list's own bottom
+  // edge instead of being cut off by it.
+  &:not(:has(li:last-child.active)) {
+    overflow: hidden;
+  }
 }
 
 .collapsible-header {
@@ -61,6 +74,43 @@
   overflow: hidden;
 }
 
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/component_enhance.scss
+// Round the corners of the first/last item's own header/body so they
+// follow the list's rounded outline instead of showing a square edge
+// inside it. Longhand corners (not the `border-radius` shorthand) so that
+// a single-item accordion - where the same <li> is both first and last -
+// gets all 4 corners rounded instead of the last-child rule's shorthand
+// wiping out the top corners the first-child rule just set.
+.collapsible > li:first-child .collapsible-header {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.collapsible > li:last-child {
+  &:not(.active) .collapsible-header {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    transition-delay: 250ms;
+    transition-property: border-radius;
+  }
+
+  &.active .collapsible-body {
+    border-radius: 0 0 12px 12px;
+  }
+}
+
+// CSS resolves border-radius per-corner, not per-rule: once the
+// :not(.active) rule above stops matching, nothing here fixes the bottom
+// corners back to square, so a more specific rule elsewhere (e.g. the
+// sidenav's `li > a { border-radius: 100px; }` pill styling, which also
+// matches .collapsible-header since it's an <a> inside a sidenav <li>)
+// is free to fill that gap and leave the header rounded on all 4 corners
+// while expanded. Force it explicitly instead of leaving it implicit.
+.collapsible > li.active .collapsible-header {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 // Popout Collapsible
 
 .collapsible.popout {

package/components/color-input/_color-input.scss

@@ -0,0 +1,124 @@
+@use '../../sass/variables' as *;
+
+:root {
+  --color-input-width: 40px;
+  --color-input-height: 32px;
+}
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/enhancement/pickr_materializecss.scss
+// Reskins Pickr's own DOM (it doesn't read Materialize's own tokens) to
+// match the rest of kmaterialize - source used --md-sys-color-on-tertiary
+// for the popup background, swapped here for --md-sys-color-surface since
+// that's what every other popup/menu surface in kmaterialize already uses
+// (a color meant for text-on-tertiary looked wrong as a popup background).
+.pickr button.pcr-button {
+  // Match the native fallback below: a compact filled colour surface with
+  // Materialize's underline retained as its focus/field affordance.
+  width: var(--color-input-width);
+  height: var(--color-input-height);
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+  border-radius: 6px 6px 0 0;
+
+  &::before,
+  &::after {
+    border-radius: 0;
+  }
+
+  // Pickr's default focus treatment stacks two shadows outside the rounded
+  // button, which appears as mismatched grey arcs around the top corners.
+  &:focus,
+  &.pcr-active {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -2px;
+  }
+}
+
+// While Pickr is loading (or when its optional peer is unavailable), make
+// the native colour input use the same compact, fully-filled presentation.
+input[type="color"][data-color-picker] {
+  width: var(--color-input-width);
+  height: var(--color-input-height);
+  min-width: 0;
+  // Override the higher-specificity generic text-input padding, including
+  // its focused state, which otherwise adds a 20px inset above the swatch.
+  padding: 0 !important;
+  margin: 0;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 6px 6px 0 0;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch,
+  &::-moz-color-swatch {
+    border: 0;
+    border-radius: 6px 6px 0 0;
+  }
+}
+
+// The swatch button replaces a hidden `<input type="color">`, so
+// Materialize's usual floating label (meant to sit inside/over a live text
+// input, floating up on focus/value) has nothing correct to float relative
+// to - left alone it overlaps the swatch. Lay the whole field out as a row
+// instead - swatch (and any prefix/suffix icon placed alongside it) then
+// the label to its right, vertically centered - and reset the label itself
+// out of Materialize's floating positioning.
+.input-field:has(> input[type="color"][data-color-picker]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+input[type="color"][data-color-picker] ~ label {
+  position: static;
+  display: inline-block;
+  transform: none;
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+// Disabled - dim the swatch and make the intent obvious; Pickr's own base
+// CSS already sets cursor:not-allowed on .pcr-button.disabled.
+.pickr button.pcr-button.disabled {
+  opacity: 0.38;
+}
+
+.pcr-app {
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 6px;
+  box-shadow:
+    0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent),
+    0 10px 28px color-mix(in srgb, var(--md-sys-color-shadow) 22%, transparent);
+
+  .pcr-interaction {
+    .pcr-result {
+      height: 25px;
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-variant);
+    }
+
+    input {
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-variant);
+    }
+
+    .pcr-save {
+      background-color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+  }
+}