cx 26.2.2 → 26.2.4

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

@@ -1,3 +1,6 @@
+@use "../box" as *;
+@use "./Field.variables.scss" as *;
+@use "../../util/scss/defaults.scss" as *;
 
 $cx-default-calendar-font-size: $cx-default-box-font-size !default;
 $cx-default-calendar-background-color: $cx-default-input-background-color !default;
@@ -16,49 +19,3 @@ $cx-default-calendar-header-background-color: transparent !default;
 //day
 $cx-default-calendar-day-font-size: $cx-default-calendar-font-size !default;
 $cx-default-calendar-day-border-radius: $cx-default-calendar-border-radius !default;
-
-// CALENDAR
-$cx-calendar-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    font-size: $cx-default-calendar-font-size,
-    background-color: $cx-default-calendar-background-color,
-    border-style: solid,
-    border-width: $cx-default-calendar-border-width,
-    border-color: $cx-default-calendar-border-color,
-    border-radius: $cx-default-calendar-border-radius,
-    box-shadow: $cx-default-calendar-box-shadow,
-    padding: $cx-default-calendar-padding
-  ),
-  hover: (
-    
-  ),
-  header: (
-    font-size: $cx-default-calendar-header-font-size,
-    font-weight: $cx-default-calendar-header-font-weight,
-    color: $cx-default-calendar-header-color,
-    background-color: $cx-default-calendar-header-background-color, 
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
-    outline: none
-  )
-)) !default;
-
-// calendar day field styles
-$cx-calendar-day-state-style-map: cx-deep-map-merge($cx-list-item, (
-  default: (
-    font-size: $cx-default-calendar-day-font-size,
-    background-color: transparent,
-    border-radius: $cx-default-calendar-day-border-radius
-  ),
-  today: (
-    background-color: rgba(220, 250, 183, 0.5),
-  ),
-  outside: (
-    color: rgba(0, 0, 0, 0.3)
-  ), 
-  today-hover: (
-      
-  )
-));

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

@@ -0,0 +1,34 @@
+@use "../variables" as *;
+@use "./Field.maps.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+@use "../../util/scss/add-rules.scss" as *;
+
+$cx-checkbox-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         color: $cx-default-checkbox-color,
+         background-color: $cx-default-checkbox-background-color,
+         border-width: $cx-default-checkbox-border-width,
+         border-color: $cx-default-checkbox-border-color,
+      ),
+      checked: (),
+      checked-focus: (),
+      focus: (
+         border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
+         outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
+         box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow),
+      ),
+      disabled: (
+         background: rgb(235, 235, 228),
+         color: rgb(84, 84, 84),
+      ),
+      disabled-checked: (),
+      error: (
+         border-color: rgba(220, 0, 9, 0.8),
+      ),
+      error-focus: (
+         box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
+      ),
+   )
+) !default;

package/src/widgets/form/Checkbox.scss

@@ -1,4 +1,14 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.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-checkbox(
    $name: "checkbox",
@@ -19,7 +29,8 @@
       $state-style-map,
       (
          default: (
-            border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
+            border-width: $cx-default-box-border-width-top 0
+               $cx-default-box-border-width-bottom 0,
          ),
       )
    );
@@ -34,7 +45,7 @@
       margin: 0 !important;
       width: $size;
       height: $size;
-      top: calc(50% - #{$size * 0.5});
+      top: calc(50% - #{cx-multiply($size, 0.5)});
       left: 0;
       display: inline-block;
       position: absolute;
@@ -77,7 +88,7 @@
    .#{$element}#{$name}-input {
       width: $size;
       height: $size;
-      top: calc(50% - #{$size * 0.5});
+      top: calc(50% - #{cx-multiply($size, 0.5)});
       left: 0;
       display: inline-block;
       position: absolute;

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

@@ -1,40 +1,8 @@
+@use "../box" as *;
+@use "./Field.variables.scss" as *;
 
+$cx-default-checkbox-size: 14px !default;
 $cx-default-checkbox-color: $cx-default-input-color !default;
 $cx-default-checkbox-background-color: $cx-default-input-background-color !default;
-$cx-default-checkbox-border-width: cx-get-state-rule($cx-input-state-style-map, default, border-width) !default;
+$cx-default-checkbox-border-width: $cx-default-box-border-width !default;
 $cx-default-checkbox-border-color: $cx-default-input-border-color !default;
-
-$cx-checkbox-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    color: $cx-default-checkbox-color,
-    background-color: $cx-default-checkbox-background-color,
-    border-width: $cx-default-checkbox-border-width,
-    border-color: $cx-default-checkbox-border-color
-  ),
-  checked: (
-
-  ),
-  checked-focus: (
-    
-  ),
-  focus: (
-    border-color: cx-get-state-rule($cx-input-state-style-map, focus, border-color),
-    outline: cx-get-state-rule($cx-input-state-style-map, focus, outline),
-    box-shadow: cx-get-state-rule($cx-input-state-style-map, focus, box-shadow)
-  ),
-
-  disabled: (
-    background: rgb(235, 235, 228),
-    color: rgb(84, 84, 84)
-  ),
-  disabled-checked: (
-    
-  ),
-  error: (
-    border-color: rgba(220, 0, 9, 0.8)
-  ),
-
-  error-focus: (
-    box-shadow: 0 0 2px rgba(220, 0, 9, 0.8)
-  )
-)) !default;

package/src/widgets/form/ColorField.scss

@@ -1,4 +1,16 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/call-once.scss" 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 *;
+@use "./ColorPicker.scss" as *;
 
 @mixin cx-colorfield(
    $name: "colorfield",
@@ -31,8 +43,14 @@
             default: (
                font-family: $cx-default-colorfield-font-family,
                font-size: 11px,
-               padding: cx-top($padding) cx-calc(cx-right($padding), $cx-default-clear-size) cx-bottom($padding)
-                  cx-calc(cx-left($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
+               padding: cx-top($padding)
+                  cx-calc(cx-right($padding), $cx-default-clear-size)
+                  cx-bottom($padding)
+                  cx-calc(
+                     cx-left($padding),
+                     $cx-default-input-left-tool-size,
+                     $cx-default-input-left-tool-spacing
+                  ),
             )
          )
       );
@@ -81,6 +99,7 @@
       div {
          width: 100%;
          height: 100%;
+         border-radius: inherit;
       }
    }