cx 26.2.2 → 26.2.3

package/src/widgets/form/MonthPicker.maps.scss

@@ -0,0 +1,50 @@
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../lists.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+@use "../../util/scss/add-rules.scss" as *;
+
+// MONTHPICKER - container
+$cx-monthpicker-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         width: $cx-default-monthpicker-width,
+         font-size: $cx-default-monthpicker-font-size,
+         background-color: $cx-default-monthpicker-background-color,
+         border-style: solid,
+         border-width: $cx-default-monthpicker-border-width,
+         border-color: $cx-default-monthpicker-border-color,
+         border-radius: $cx-default-monthpicker-border-radius,
+         padding: $cx-default-monthpicker-padding,
+      ),
+      hover: (),
+      focus: (
+         outline: none,
+      ),
+   )
+) !default;
+
+// MONTHPICKER - cell styles
+$cx-monthpicker-cell-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         padding: $cx-default-monthpicker-cell-padding,
+         line-height: $cx-default-monthpicker-cell-line-height,
+      ),
+      quarter: (
+         color: $cx-default-monthpicker-quarter-color,
+      ),
+      outside: (
+         opacity: 0.5,
+      ),
+      year: (
+         font-size: $cx-default-monthpicker-year-font-size,
+         font-weight: $cx-default-monthpicker-year-font-weight,
+         color: $cx-default-monthpicker-year-color,
+      ),
+   )
+) !default;
+
+$cx-monthpicker-mods: () !default;

package/src/widgets/form/MonthPicker.scss

@@ -1,35 +1,55 @@
 @use "sass:map";
 @use "sass:color";
-
-@mixin cx-monthpicker($name: "monthpicker", $state-style-map: $cx-input-state-style-map, $besm: $cx-besm) {
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-monthpicker(
+   $name: "monthpicker",
+   $state-style-map: $cx-monthpicker-state-style-map,
+   $cell-style-map: $cx-monthpicker-cell-state-style-map,
+   $besm: $cx-besm
+) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
 
    .#{$block}#{$name} {
+      display: inline-block;
       overflow-y: scroll;
       overflow-x: hidden;
       min-height: 10em;
-      max-height: 30em; //100vh;
+      max-height: 30em;
       height: 100%;
       position: relative;
-      width: 23em;
       overflow-anchor: none;
       touch-action: pan-y;
+      vertical-align: top;
 
-      @include cxe-field-input($besm, $state-style-map, $input: false);
+      @include cx-add-state-rules($state-style-map, default);
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, focus);
+      }
 
       table {
          border-spacing: 0;
          width: 100%;
-         font-size: 0.9em;
+         font-size: inherit;
       }
 
       $border-color: cx-get-state-rule($state-style-map, default, border-color);
 
       th,
       td {
-         border-top: 1px solid color.adjust($border-color, $alpha: -0.5);
+         border-top: 1px solid
+            color-mix(in srgb, $border-color 50%, transparent);
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
 
@@ -45,36 +65,34 @@
       th,
       td {
          text-align: center;
-         font-size: $cx-default-monthpicker-font-size;
-         font-weight: $cx-default-monthpicker-font-weight;
-         line-height: 2em;
          cursor: pointer;
          -webkit-user-select: none;
          -ms-user-select: none;
          -moz-user-select: none;
          user-select: none;
+         @include cx-add-state-rules($cell-style-map, default);
       }
 
       th {
          padding: 0 0.5em;
-         color: lightgray;
+         @include cx-add-state-rules($cell-style-map, quarter);
       }
 
-      th.#{$state}unselectable {
-         @include cx-add-state-rules($cx-list-item, disabled);
+      td:hover,
+      th:hover {
+         @include cx-add-state-rules($cell-style-map, hover);
       }
 
-      .#{$element}#{$name}-year {
-         font-size: 120%;
-         color: gray;
+      th.#{$state}unselectable {
+         @include cx-add-state-rules($cell-style-map, disabled);
       }
 
-      td {
-         padding: 0.5em 1em;
+      .#{$element}#{$name}-year {
+         @include cx-add-state-rules($cell-style-map, year);
       }
 
       td.#{$state}outside {
-         color: lightgray;
+         @include cx-add-state-rules($cell-style-map, outside);
       }
 
       td.#{$state}unselectable {
@@ -83,31 +101,22 @@
 
       td.#{$state}selected {
          border-color: transparent;
-         @include cx-add-state-rules($cx-list-item, selected);
-
-         &:hover {
-            @include cx-add-state-rules($cx-list-item, selected-hover);
-         }
-      }
-
-      td.#{$state}cursor,
-      th.#{$state}cursor {
-         @include cx-add-state-rules($cx-list-item, hover);
+         @include cx-add-state-rules($cell-style-map, selected);
       }
 
       &:focus {
-         td.#{$state}selected {
-            @include cx-add-state-rules($cx-list-item, selected);
-         }
-
          td.#{$state}cursor,
          th.#{$state}cursor {
-            @include cx-add-state-rules($cx-list-item, selected-cursor);
+            @include cx-add-state-rules($cx-list-item, cursor);
+
+            &.#{$state}selected {
+               border-color: transparent;
+               @include cx-add-state-rules($cell-style-map, selected-cursor);
+            }
          }
       }
 
       td.#{$state}handle {
-         //@include cx-add-state-rules($cx-list-item, selected-cursor);
          touch-action: none;
       }
    }