cx 24.9.1 → 24.9.2

package/src/widgets/form/NumberField.scss

@@ -1,61 +1,61 @@
-@mixin cx-numberfield(
-   $name: "numberfield",
-   $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,
-   $tool-state-style-map: $cx-input-right-icon-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);
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
-   }
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
-
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-         -webkit-appearance: none;
-         margin: 0;
-      }
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none;
-      @include cxe-field-button($besm, $tool-state-style-map);
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-
-   .#{$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}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-}
-
-@if (cx-should-include("cx/widgets/NumberField")) {
-   @include cx-numberfield();
-}
+@mixin cx-numberfield(
+   $name: "numberfield",
+   $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,
+   $tool-state-style-map: $cx-input-right-icon-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);
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$block}#{$name} {
+      @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
+   }
+
+   .#{$element}#{$name}-input {
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+         -webkit-appearance: none;
+         margin: 0;
+      }
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+   }
+
+   .#{$element}#{$name}-tool {
+      pointer-events: none;
+      @include cxe-field-button($besm, $tool-state-style-map);
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+
+   .#{$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}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+}
+
+@if (cx-should-include("cx/widgets/NumberField")) {
+   @include cx-numberfield();
+}

package/src/widgets/form/Select.scss

@@ -1,99 +1,99 @@
-@import "../overlay/Dropdown";
-
-@mixin cx-select(
-   $name: "select",
-   $state-style-map: $cx-std-field-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $width: $cx-default-input-width,
-   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
-   $clear-state-style-map: $cx-clear-state-style-map,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $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: $state-style-map, $width: $width, $input: true);
-
-      .#{$element}#{$name}-left-icon {
-         pointer-events: none;
-         @include cxe-field-button($besm, $left-icon-state-style-map);
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, "padding");
-
-   .#{$element}#{$name}-select {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $overrides: (
-            padding: cx-top($cx-default-input-padding)
-               calc(
-                  #{cx-right($cx-default-input-padding)} + #{$cx-default-clear-size} - #{cx-right(
-                        $cx-default-input-padding
-                     )}
-               )
-               cx-bottom($cx-default-input-padding) cx-left($cx-default-input-padding),
-            -webkit-appearance: none,
-            -moz-appearance: none,
-            -ms-appearance: none,
-            appearance: none
-         )
-      );
-
-      .#{$state}icon > & {
-         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
-      }
-
-      .#{$state}empty > & {
-         @include cx-add-rules($placeholder);
-      }
-
-      &::-ms-expand {
-         display: none;
-         margin: 0;
-         padding: 0;
-      }
-
-      option {
-         background-color: $cx-default-dropdown-background-color;
-         color: cx-get-state-rule($state-style-map, default, color);
-      }
-   }
-
-   .#{$element}#{$name}-clear {
-      @include cxe-field-button($besm, $clear-state-style-map);
-   }
-
-   .#{$element}#{$name}-placeholder {
-      @include cx-add-rules($placeholder);
-   }
-
-   .#{$element}#{$name}-tool {
-      pointer-events: none; //cannot call open-dropdown on native element
-      @include cxe-field-button($besm, $tool-state-style-map);
-
-      .#{$state}disabled > & {
-         border-width: 0;
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-      .#{$state}focus > & {
-         @include cx-add-state-rules($tool-state-style-map, focus);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      @include cxe-field-button-icon($besm, $icon-size);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Select")) {
-   @include cx-select;
-}
+@import "../overlay/Dropdown";
+
+@mixin cx-select(
+   $name: "select",
+   $state-style-map: $cx-std-field-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $width: $cx-default-input-width,
+   $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
+   $clear-state-style-map: $cx-clear-state-style-map,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $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: $state-style-map, $width: $width, $input: true);
+
+      .#{$element}#{$name}-left-icon {
+         pointer-events: none;
+         @include cxe-field-button($besm, $left-icon-state-style-map);
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, "padding");
+
+   .#{$element}#{$name}-select {
+      @include cxe-field-input(
+         $besm,
+         $state-style-map,
+         $placeholder: $placeholder,
+         $overrides: (
+            padding: cx-top($cx-default-input-padding)
+               calc(
+                  #{cx-right($cx-default-input-padding)} + #{$cx-default-clear-size} - #{cx-right(
+                        $cx-default-input-padding
+                     )}
+               )
+               cx-bottom($cx-default-input-padding) cx-left($cx-default-input-padding),
+            -webkit-appearance: none,
+            -moz-appearance: none,
+            -ms-appearance: none,
+            appearance: none
+         )
+      );
+
+      .#{$state}icon > & {
+         padding-left: cx-calc(2 * cx-left($padding), $icon-size);
+      }
+
+      .#{$state}empty > & {
+         @include cx-add-rules($placeholder);
+      }
+
+      &::-ms-expand {
+         display: none;
+         margin: 0;
+         padding: 0;
+      }
+
+      option {
+         background-color: $cx-default-dropdown-background-color;
+         color: cx-get-state-rule($state-style-map, default, color);
+      }
+   }
+
+   .#{$element}#{$name}-clear {
+      @include cxe-field-button($besm, $clear-state-style-map);
+   }
+
+   .#{$element}#{$name}-placeholder {
+      @include cx-add-rules($placeholder);
+   }
+
+   .#{$element}#{$name}-tool {
+      pointer-events: none; //cannot call open-dropdown on native element
+      @include cxe-field-button($besm, $tool-state-style-map);
+
+      .#{$state}disabled > & {
+         border-width: 0;
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+      .#{$state}focus > & {
+         @include cx-add-state-rules($tool-state-style-map, focus);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      @include cxe-field-button-icon($besm, $icon-size);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Select")) {
+   @include cx-select;
+}

package/src/widgets/form/Slider.scss

@@ -1,118 +1,118 @@
-@mixin cx-slider(
-   $name: "slider",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-slider-handle-styles,
-   $width: $cx-default-input-width,
-   $size: $cx-default-slider-handle-size,
-   $axis-size: $cx-default-slider-axis-size,
-   $axis-background-color: $cx-default-slider-axis-background-color,
-   $range-background-color: $cx-default-slider-range-background-color,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      width: $width;
-      user-select: none;
-
-      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
-
-      &.#{$state}vertical {
-         width: 28px;
-         height: $width;
-      }
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-   }
-
-   .#{$element}#{$name}-axis {
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: $size * 0.5;
-      box-sizing: border-box;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: $size * 0.5;
-         right: $size * 0.5;
-         top: calc(50% - #{$axis-size * 0.5});
-         height: $axis-size;
-         padding: 0 $axis-size * 0.5;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         top: $size * 0.5;
-         bottom: $size * 0.5;
-         width: $axis-size;
-         left: calc(50% - #{$axis-size * 0.5});
-         padding: $axis-size * 0.5 0;
-      }
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-
-      background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         height: 100%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         width: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $size;
-      height: $size;
-      margin-left: -$size * 0.5;
-      margin-top: -$size * 0.5;
-      margin-bottom: -$size * 0.5;
-      touch-action: none;
-
-      @include cx-add-state-rules($styles, default);
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: 0;
-         top: 50%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         left: 50%;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      &:focus {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      &[disabled] {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Slider")) {
-   @include cx-slider();
-}
+@mixin cx-slider(
+   $name: "slider",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-slider-handle-styles,
+   $width: $cx-default-input-width,
+   $size: $cx-default-slider-handle-size,
+   $axis-size: $cx-default-slider-axis-size,
+   $axis-background-color: $cx-default-slider-axis-background-color,
+   $range-background-color: $cx-default-slider-range-background-color,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      width: $width;
+      user-select: none;
+
+      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
+
+      &.#{$state}vertical {
+         width: 28px;
+         height: $width;
+      }
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+   }
+
+   .#{$element}#{$name}-axis {
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: $size * 0.5;
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: $size * 0.5;
+         right: $size * 0.5;
+         top: calc(50% - #{$axis-size * 0.5});
+         height: $axis-size;
+         padding: 0 $axis-size * 0.5;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         top: $size * 0.5;
+         bottom: $size * 0.5;
+         width: $axis-size;
+         left: calc(50% - #{$axis-size * 0.5});
+         padding: $axis-size * 0.5 0;
+      }
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+
+      background-color: $range-background-color;
+      border-radius: $axis-size * 0.5;
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         height: 100%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         width: 100%;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $size;
+      height: $size;
+      margin-left: -$size * 0.5;
+      margin-top: -$size * 0.5;
+      margin-bottom: -$size * 0.5;
+      touch-action: none;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$block}#{$name}.#{$state}horizontal & {
+         left: 0;
+         top: 50%;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical & {
+         left: 50%;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      &[disabled] {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Slider")) {
+   @include cx-slider();
+}