cx 26.2.2 → 26.2.4

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

@@ -0,0 +1,21 @@
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+
+$cx-colorpicker-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         font-family: $cx-default-colorpicker-font-family,
+         font-size: $cx-default-colorpicker-font-size,
+         background-color: $cx-default-colorpicker-background-color,
+         border-width: $cx-default-colorpicker-border-width,
+         border-color: $cx-default-colorpicker-border-color,
+         box-shadow: $cx-default-colorpicker-box-shadow,
+         padding: 2px,
+      ),
+      hover: (),
+   )
+) !default;

package/src/widgets/form/ColorPicker.scss

@@ -1,3 +1,12 @@
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
 //@if cx-call-once("cx/widgets/checker-background") {
 //   %cx-checker-bg {
 //      background-repeat: repeat;
@@ -8,8 +17,10 @@
 @use "sass:map";
 
 @mixin cx-checker-background($tile-size: 4px, $color: rgba(gray, 0.5)) {
-   background-image: linear-gradient(45deg, $color 25%, transparent 25%),
-      linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%),
+   background-image:
+      linear-gradient(45deg, $color 25%, transparent 25%),
+      linear-gradient(-45deg, $color 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, $color 75%),
       linear-gradient(-45deg, transparent 75%, $color 75%);
    background-size: 2 * $tile-size 2 * $tile-size;
    background-position:
@@ -32,6 +43,9 @@
    $size: 220px;
 
    .#{$block}#{$name} {
+      display: inline-flex;
+      flex-direction: column;
+
       $styles: cx-deep-map-merge(
          $state-style-map,
          (
@@ -40,10 +54,6 @@
             ),
          )
       );
-
-      display: inline-flex;
-      flex-direction: column;
-
       @include cx-add-state-rules($styles, default);
 
       @media screen and (min-width: 500px) {
@@ -87,7 +97,11 @@
             hsla(0, 0%, 0%, 0) 50%,
             hsl(0, 0%, 0%) 100%
          ),
-         -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+         -webkit-linear-gradient(
+               left,
+               hsl(0, 0%, 50%) 0%,
+               hsla(0, 0%, 50%, 0) 100%
+            );
       background:
          -moz-linear-gradient(
             top,
@@ -96,7 +110,11 @@
             hsla(0, 0%, 0%, 0) 50%,
             hsl(0, 0%, 0%) 100%
          ),
-         -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+         -moz-linear-gradient(
+               left,
+               hsl(0, 0%, 50%) 0%,
+               hsla(0, 0%, 50%, 0) 100%
+            );
       background:
          -ms-linear-gradient(
             top,
@@ -184,7 +202,6 @@
 
    .#{$element}#{$name}-alpha {
       height: 16px;
-      //@extend %cx-checker-bg;
       @include cx-checker-background();
       position: relative;
       touch-action: none;

package/src/widgets/form/ColorPicker.variables.scss

@@ -1,22 +1,9 @@
+@use "../box" as *;
+@use "./Field.variables.scss" as *;
+
 $cx-default-colorpicker-font-family: "Consolas", monospace !default;
 $cx-default-colorpicker-font-size: 11px !default;
 $cx-default-colorpicker-background-color: $cx-default-input-background-color !default;
 $cx-default-colorpicker-border-width: $cx-default-box-border-width !default;
 $cx-default-colorpicker-border-color: $cx-default-input-border-color !default;
 $cx-default-colorpicker-box-shadow: none !default;
-
-$cx-colorpicker-state-style-map: cx-deep-map-merge(
-   $cx-input-state-style-map,
-   (
-      default: (
-         font-family: $cx-default-colorpicker-font-family,
-         font-size: $cx-default-colorpicker-font-size,
-         background-color: $cx-default-colorpicker-background-color,
-         border-width: $cx-default-colorpicker-border-width,
-         border-color: $cx-default-colorpicker-border-color,
-         box-shadow: $cx-default-colorpicker-box-shadow,
-         padding: 2px,
-      ),
-      hover: (),
-   )
-) !default;

package/src/widgets/form/DateTimeField.scss

@@ -1,8 +1,17 @@
-
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.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-datetimefield(
-   $name: 'datetimefield',
+   $name: "datetimefield",
    $input-state-style-map: $cx-std-field-state-style-map,
    $placeholder: $cx-input-placeholder,
    $empty-text: $cx-empty-text,
@@ -18,17 +27,35 @@
    $state: map.get($besm, state);
 
    .#{$block}#{$name} {
-      @include cxb-field($besm, $input-state-style-map, $width: $width, $input: true);
+      @include cxb-field(
+         $besm,
+         $input-state-style-map,
+         $width: $width,
+         $input: true
+      );
    }
 
-   $padding: cx-get-state-rule($input-state-style-map, default, 'padding');
+   $padding: cx-get-state-rule($input-state-style-map, default, "padding");
 
    .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $input-state-style-map,
+      @include cxe-field-input(
+         $besm,
+         $input-state-style-map,
          $placeholder: $placeholder,
          $overrides: (
             default: (
-               padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding) cx-calc(2 * cx-left($padding), $icon-size)
+               padding: cx-top($padding)
+                  cx-calc(
+                     cx-right($padding),
+                     $cx-default-clear-size,
+                     $cx-default-clear-spacing
+                  )
+                  cx-bottom($padding)
+                  cx-calc(
+                     cx-left($padding),
+                     $cx-default-input-left-tool-size,
+                     $cx-default-input-left-tool-spacing
+                  ),
             )
          )
       );
@@ -38,43 +65,49 @@
       @include cxe-field-button($besm, $clear-state-style-map);
 
       .#{$state}focus > & {
-        @include cx-add-state-rules($clear-state-style-map, focus);
+         @include cx-add-state-rules($clear-state-style-map, focus);
       }
       .#{$state}error > & {
-        @include cx-add-state-rules($clear-state-style-map, error);
+         @include cx-add-state-rules($clear-state-style-map, error);
       }
    }
 
    .#{$element}#{$name}-left-icon {
-      @include cxe-field-button($besm, cx-deep-map-merge($left-icon-state-style-map, (
-         default: (
-            cursor: pointer
+      @include cxe-field-button(
+         $besm,
+         cx-deep-map-merge(
+            $left-icon-state-style-map,
+            (
+               default: (
+                  cursor: pointer,
+               ),
+            )
          )
-      )));
+      );
 
       .#{$state}disabled > & {
-        @include cx-add-state-rules($input-state-style-map, disabled);
-        border-width: 0;
+         @include cx-add-state-rules($input-state-style-map, disabled);
+         border-width: 0;
       }
       .#{$state}focus > & {
-        @include cx-add-state-rules($left-icon-state-style-map, focus);
+         @include cx-add-state-rules($left-icon-state-style-map, focus);
       }
       .#{$state}error > & {
-        @include cx-add-state-rules($left-icon-state-style-map, error);
+         @include cx-add-state-rules($left-icon-state-style-map, error);
       }
    }
 
    .#{$element}#{$name}-right-icon {
       @include cxe-field-button($besm, $right-icon-state-style-map);
       .#{$state}disabled > & {
-        @include cx-add-state-rules($input-state-style-map, disabled);
-        border-width: 0;
+         @include cx-add-state-rules($input-state-style-map, disabled);
+         border-width: 0;
       }
       .#{$state}focus > & {
-        @include cx-add-state-rules($right-icon-state-style-map, focus);
+         @include cx-add-state-rules($right-icon-state-style-map, focus);
       }
       .#{$state}error > & {
-        @include cx-add-state-rules($right-icon-state-style-map, error);
+         @include cx-add-state-rules($right-icon-state-style-map, error);
       }
    }
 
@@ -87,6 +120,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/DateTimeField')) {
+@if (cx-should-include("cx/widgets/DateTimeField")) {
    @include cx-datetimefield();
 }