cx 26.3.3 → 26.3.5

package/src/widgets/form/TextField.scss

@@ -1,78 +1,66 @@
-@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/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Field.scss" as *;
-
-@mixin cx-textfield(
-   $name: "textfield",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-input-width,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder
-      );
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(
-            cx-left($padding),
-            $cx-default-input-left-tool-size,
-            $cx-default-input-left-tool-spacing
-         );
-      }
-
-      .#{$state}clear > & {
-         padding-right: cx-calc(
-            cx-right($padding),
-            $cx-default-clear-size,
-            $cx-default-clear-spacing
-         );
-      }
-   }
-
-   .#{$element}#{$name}-left-icon {
-      pointer-events: none;
-      @include cxe-field-button($besm, $left-icon-state-style-map);
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/TextField")) {
-   @include cx-textfield();
-}
+@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/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Field.scss" as *;
+
+@mixin cx-textfield(
+   $name: "textfield",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-input-width,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
+      }
+
+      .#{$state}clear > & {
+         padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
+      }
+   }
+
+   .#{$element}#{$name}-left-icon {
+      pointer-events: none;
+      @include cxe-field-button($besm, $left-icon-state-style-map);
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/TextField")) {
+   @include cx-textfield();
+}

package/src/widgets/form/variables.scss

@@ -1,111 +1,110 @@
-@use "sass:map";
-@use "../../util/scss/include.scss" as *;
-@use "../../util/scss/defaults.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../box.scss" as *;
-@use "./Field.variables.scss" as *;
-
-// Label
-$cx-default-label-padding: $cx-default-box-padding 0 !default;
-$cx-default-label-font-size: $cx-default-box-font-size !default;
-$cx-default-label-font-family: $cx-default-box-font-family !default;
-$cx-default-label-font-weight: normal !default;
-$cx-default-label-line-height: $cx-default-box-line-height !default;
-$cx-default-label-color: null !default;
-$cx-default-label-asterisk-color: #a80000 !default;
-
-// DATE TIME PICKER
-$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
-$cx-default-datetimepicker-background-color: #fff !default;
-$cx-default-datetimepicker-border-width: 1px !default;
-$cx-default-datetimepicker-border-radius: 0 !default;
-$cx-default-datetimepicker-border-color: #d3d3d3 !default;
-$cx-default-datetimepicker-padding: 0 5px !default;
-
-// wheel
-$cx-default-wheel-clip-background-color: #fff !default;
-$cx-default-wheel-clip-border-width: 1px !default;
-$cx-default-wheel-clip-border-radius: 0 !default;
-$cx-default-wheel-clip-border-color: #d3d3d3 !default;
-
-$cx-wheel-selection-state-style-map: (
-   default: (
-      border-width: 2px 0 2px 0,
-      border-style: solid,
-      border-color: #9bc8ff,
-      background-color: rgba(#9bc8ff, 0.1),
-   ),
-   active: (
-      border-color: #3c7eff,
-      background: rgba(#3c7eff, 0.1),
-   ),
-) !default;
-
-// COLORFIELD
-$cx-default-colorfield-font-family: "Consolas", monospace !default;
-
-// MONTHPICKER
-@forward "./MonthPicker.variables.scss";
-
-// SLIDER
-$cx-default-slider-axis-size: 8px !default;
-$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
-$cx-default-slider-range-background-color: #98d4ff !default;
-
-// handle
-$cx-default-slider-handle-size: 18px !default;
-$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
-$cx-default-slider-handle-border-width: 1px !default;
-$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
-$cx-default-slider-handle-border-radius: 50% !default;
-$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-// SWITCH
-$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
-$cx-default-switch-range-background-color: #87cc8a !default;
-$cx-default-switch-axis-size: 20px !default;
-$cx-default-switch-width: 32px !default;
-
-$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
-$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
-$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
-$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
-$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
-$cx-default-switch-handle-size: 18px !default;
-
-// TEXTAREA
-$cx-default-textarea-width: 300px !default;
-
-// LOOKUPFIELD TAG
-$cx-default-input-tag-spacing: 3px !default;
-$cx-default-input-tag-font-size: null !default;
-$cx-default-input-tag-background-color: #eee !default;
-$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
-$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
-
-// Note: Field.variables.scss is @use'd above, not @forward'd here
-// to avoid "module already loaded" errors with @forward...with() configuration
-@forward "./Calendar.variables.scss";
-@forward "./Checkbox.variables.scss";
-@forward "./Radio.variables.scss";
-@forward "./ColorPicker.variables.scss";
-
-$cx-dependencies: map.merge(
-   $cx-dependencies,
-   (
-      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
-      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
-         "cx/widgets/Dropdown",
-      "cx/widgets/DateField": "cx/widgets/DateTimeField",
-      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
-      "cx/widgets/TextField": "cx/widgets/Field",
-      "cx/widgets/NumberField": "cx/widgets/Field",
-      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
-      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
-      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
-      "cx/widgets/Select": "cx/widgets/Field",
-      "cx/widgets/Slider": "cx/widgets/Field",
-      "cx/widgets/Switch": "cx/widgets/Field",
-   )
-);
+@use "sass:map";
+@use "../../util/scss/include.scss" as *;
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../box.scss" as *;
+@use "./Field.variables.scss" as *;
+
+// Label
+$cx-default-label-padding: $cx-default-box-padding 0 !default;
+$cx-default-label-font-size: $cx-default-box-font-size !default;
+$cx-default-label-font-family: $cx-default-box-font-family !default;
+$cx-default-label-font-weight: normal !default;
+$cx-default-label-line-height: $cx-default-box-line-height !default;
+$cx-default-label-color: null !default;
+$cx-default-label-asterisk-color: #a80000 !default;
+
+// DATE TIME PICKER
+$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
+$cx-default-datetimepicker-background-color: #fff !default;
+$cx-default-datetimepicker-border-width: 1px !default;
+$cx-default-datetimepicker-border-radius: 0 !default;
+$cx-default-datetimepicker-border-color: #d3d3d3 !default;
+$cx-default-datetimepicker-padding: 0 5px !default;
+
+// wheel
+$cx-default-wheel-clip-background-color: #fff !default;
+$cx-default-wheel-clip-border-width: 1px !default;
+$cx-default-wheel-clip-border-radius: 0 !default;
+$cx-default-wheel-clip-border-color: #d3d3d3 !default;
+
+$cx-wheel-selection-state-style-map: (
+   default: (
+      border-width: 2px 0 2px 0,
+      border-style: solid,
+      border-color: #9bc8ff,
+      background-color: rgba(#9bc8ff, 0.1),
+   ),
+   active: (
+      border-color: #3c7eff,
+      background: rgba(#3c7eff, 0.1),
+   ),
+) !default;
+
+// COLORFIELD
+$cx-default-colorfield-font-family: "Consolas", monospace !default;
+
+// MONTHPICKER
+@forward "./MonthPicker.variables.scss";
+
+// SLIDER
+$cx-default-slider-axis-size: 8px !default;
+$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
+$cx-default-slider-range-background-color: #98d4ff !default;
+
+// handle
+$cx-default-slider-handle-size: 18px !default;
+$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
+$cx-default-slider-handle-border-width: 1px !default;
+$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
+$cx-default-slider-handle-border-radius: 50% !default;
+$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+// SWITCH
+$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
+$cx-default-switch-range-background-color: #87cc8a !default;
+$cx-default-switch-axis-size: 20px !default;
+$cx-default-switch-width: 32px !default;
+
+$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
+$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
+$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
+$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
+$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
+$cx-default-switch-handle-size: 18px !default;
+
+// TEXTAREA
+$cx-default-textarea-width: 300px !default;
+
+// LOOKUPFIELD TAG
+$cx-default-input-tag-spacing: 3px !default;
+$cx-default-input-tag-font-size: null !default;
+$cx-default-input-tag-background-color: #eee !default;
+$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
+$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
+
+// Note: Field.variables.scss is @use'd above, not @forward'd here
+// to avoid "module already loaded" errors with @forward...with() configuration
+@forward "./Calendar.variables.scss";
+@forward "./Checkbox.variables.scss";
+@forward "./Radio.variables.scss";
+@forward "./ColorPicker.variables.scss";
+
+@include cx-register-dependencies(
+   (
+      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
+      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
+         "cx/widgets/Dropdown",
+      "cx/widgets/DateField": "cx/widgets/DateTimeField",
+      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
+      "cx/widgets/TextField": "cx/widgets/Field",
+      "cx/widgets/NumberField": "cx/widgets/Field",
+      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
+      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
+      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
+      "cx/widgets/Select": "cx/widgets/Field",
+      "cx/widgets/Slider": "cx/widgets/Field",
+      "cx/widgets/Switch": "cx/widgets/Field",
+   )
+);