cx 24.10.2 → 24.10.4

package/src/widgets/form/MonthPicker.scss

@@ -1,118 +1,118 @@
-@mixin cx-monthpicker($name: "monthpicker", $state-style-map: $cx-input-state-style-map, $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      overflow-y: scroll;
-      overflow-x: hidden;
-      min-height: 10em;
-      max-height: 30em; //100vh;
-      height: 100%;
-      position: relative;
-      width: 23em;
-      overflow-anchor: none;
-      touch-action: pan-y;
-
-      @include cxe-field-input($besm, $state-style-map, $input: false);
-
-      table {
-         border-spacing: 0;
-         width: 100%;
-         font-size: 0.9em;
-      }
-
-      $border-color: cx-get-state-rule($state-style-map, default, border-color);
-
-      th,
-      td {
-         border-top: 1px solid transparentize($border-color, 0.5);
-         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
-
-      tbody:not(:first-child) {
-         tr:first-child {
-            th,
-            td {
-               border-top: 1px solid $border-color;
-            }
-         }
-      }
-
-      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;
-      }
-
-      th {
-         padding: 0 0.5em;
-         color: lightgray;
-      }
-
-      .#{$element}#{$name}-year {
-         font-size: 120%;
-         color: gray;
-      }
-
-      td {
-         padding: 0.5em 1em;
-      }
-
-      td.#{$state}outside {
-         color: lightgray;
-      }
-
-      td.#{$state}unselectable {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-
-      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);
-      }
-
-      &: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);
-         }
-      }
-
-      td.#{$state}handle {
-         //@include cx-add-state-rules($cx-list-item, selected-cursor);
-         touch-action: none;
-      }
-   }
-
-   .#{$block}#{$name}.#{$state}disabled {
-      background-color: transparent;
-      border-color: transparent;
-      color: darken(#fff, 18);
-      pointer-events: none;
-   }
-}
-
-@if (cx-should-include("cx/widgets/MonthPicker")) {
-   @include cx-monthpicker();
-}
+@mixin cx-monthpicker($name: "monthpicker", $state-style-map: $cx-input-state-style-map, $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      overflow-y: scroll;
+      overflow-x: hidden;
+      min-height: 10em;
+      max-height: 30em; //100vh;
+      height: 100%;
+      position: relative;
+      width: 23em;
+      overflow-anchor: none;
+      touch-action: pan-y;
+
+      @include cxe-field-input($besm, $state-style-map, $input: false);
+
+      table {
+         border-spacing: 0;
+         width: 100%;
+         font-size: 0.9em;
+      }
+
+      $border-color: cx-get-state-rule($state-style-map, default, border-color);
+
+      th,
+      td {
+         border-top: 1px solid transparentize($border-color, 0.5);
+         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      tbody:not(:first-child) {
+         tr:first-child {
+            th,
+            td {
+               border-top: 1px solid $border-color;
+            }
+         }
+      }
+
+      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;
+      }
+
+      th {
+         padding: 0 0.5em;
+         color: lightgray;
+      }
+
+      .#{$element}#{$name}-year {
+         font-size: 120%;
+         color: gray;
+      }
+
+      td {
+         padding: 0.5em 1em;
+      }
+
+      td.#{$state}outside {
+         color: lightgray;
+      }
+
+      td.#{$state}unselectable {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+
+      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);
+      }
+
+      &: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);
+         }
+      }
+
+      td.#{$state}handle {
+         //@include cx-add-state-rules($cx-list-item, selected-cursor);
+         touch-action: none;
+      }
+   }
+
+   .#{$block}#{$name}.#{$state}disabled {
+      background-color: transparent;
+      border-color: transparent;
+      color: darken(#fff, 18);
+      pointer-events: none;
+   }
+}
+
+@if (cx-should-include("cx/widgets/MonthPicker")) {
+   @include cx-monthpicker();
+}