cx 24.8.6 → 24.9.0

package/src/widgets/form/Slider.scss

@@ -1,119 +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} {
-      @include cxb-field($besm, $state-style-map, $input: false, $box: true);
-
-      width: $width;
-
-      &.#{$state}vertical {
-         width: 28px;
-         height: $width;
-      }
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-
-      user-select: none;
-   }
-
-   .#{$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;
-
-      .#{$block}#{$name}.#{$state}horizontal & {
-         left: 0;
-         top: 50%;
-      }
-
-      .#{$block}#{$name}.#{$state}vertical & {
-         left: 50%;
-      }
-
-      @include cx-add-state-rules($styles, default);
-
-      &: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();
+}

package/src/widgets/form/Switch.scss

@@ -1,140 +1,140 @@
-@mixin cx-switch(
-   $name: "switch",
-   $state-style-map: $cx-input-state-style-map,
-   $styles: $cx-switch-handle-styles,
-   $width: $cx-default-switch-width,
-   $handle-size: $cx-default-switch-handle-size,
-   $axis-size: $cx-default-switch-axis-size,
-   $axis-background-color: $cx-default-switch-axis-background-color,
-   $range-background-color: $cx-default-switch-range-background-color,
-   $empty-text: $cx-empty-text,
-   $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);
-   $border-width: cx-get-state-rule($state-style-map, default, border-width);
-
-   $outer-styles: cx-deep-map-merge(
-      $state-style-map,
-      (
-         default: (
-            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
-            padding: cx-top($padding) 0 cx-bottom($padding) 0,
-         ),
-      )
-   );
-
-   .#{$block}#{$name} {
-      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
-
-      cursor: pointer;
-      min-width: cx-calc($width, $handle-size);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      &.#{$state}disabled {
-         pointer-events: none;
-         opacity: 0.5;
-      }
-
-      &:focus {
-         outline: none;
-      }
-   }
-
-   .#{$element}#{$name}-text {
-      display: inline-block;
-      margin-left: cx-calc($width, $handle-size);
-      padding: 0 cx-right($padding) 0 cx-left($padding);
-   }
-
-   .#{$element}#{$name}-empty-text {
-      @include cxe-field-empty-text($empty-text);
-   }
-
-   .#{$element}#{$name}-axis {
-      user-select: none;
-      position: absolute;
-      background-color: $axis-background-color;
-      border-radius: $axis-size * 0.5;
-      box-sizing: border-box;
-      width: $width;
-
-      left: $handle-size * 0.5;
-      right: $handle-size * 0.5;
-      top: calc(50% - #{$axis-size * 0.5});
-      height: $axis-size;
-      padding: 0 $axis-size * 0.5;
-   }
-
-   .#{$element}#{$name}-space {
-      position: relative;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-range {
-      position: absolute;
-      background-color: $range-background-color;
-      border-radius: $axis-size * 0.5;
-      height: 100%;
-      left: 0;
-      width: 0;
-      opacity: 0;
-      transform: scale(0);
-
-      transition: all 200ms;
-
-      .#{$state}on & {
-         width: 100%;
-         opacity: 1;
-         transform: none;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      box-sizing: border-box;
-      width: $handle-size;
-      height: $handle-size;
-      margin-left: -$handle-size * 0.5;
-      margin-top: -$handle-size * 0.5;
-      left: 0;
-      top: 50%;
-      transition: left 200ms;
-
-      .#{$state}on & {
-         left: 100%;
-         @include cx-add-state-rules($styles, on);
-      }
-
-      .#{$state}on:active & {
-         @include cx-add-state-rules($styles, on-active);
-      }
-
-      @include cx-add-state-rules($styles, default);
-
-      &:hover {
-         @include cx-add-state-rules($styles, hover);
-      }
-
-      .#{$block}#{$name}:focus & {
-         @include cx-add-state-rules($styles, focus);
-      }
-
-      .#{$block}#{$name}.#{$state}disabled & {
-         @include cx-add-state-rules($styles, disabled);
-      }
-
-      &:active {
-         @include cx-add-state-rules($styles, active);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Switch")) {
-   @include cx-switch();
-}
+@mixin cx-switch(
+   $name: "switch",
+   $state-style-map: $cx-input-state-style-map,
+   $styles: $cx-switch-handle-styles,
+   $width: $cx-default-switch-width,
+   $handle-size: $cx-default-switch-handle-size,
+   $axis-size: $cx-default-switch-axis-size,
+   $axis-background-color: $cx-default-switch-axis-background-color,
+   $range-background-color: $cx-default-switch-range-background-color,
+   $empty-text: $cx-empty-text,
+   $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);
+   $border-width: cx-get-state-rule($state-style-map, default, border-width);
+
+   $outer-styles: cx-deep-map-merge(
+      $state-style-map,
+      (
+         default: (
+            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
+            padding: cx-top($padding) 0 cx-bottom($padding) 0,
+         ),
+      )
+   );
+
+   .#{$block}#{$name} {
+      cursor: pointer;
+      min-width: cx-calc($width, $handle-size);
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cxb-field($besm, $outer-styles, $input: false, $box: true);
+
+      &.#{$state}disabled {
+         pointer-events: none;
+         opacity: 0.5;
+      }
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   .#{$element}#{$name}-text {
+      display: inline-block;
+      margin-left: cx-calc($width, $handle-size);
+      padding: 0 cx-right($padding) 0 cx-left($padding);
+   }
+
+   .#{$element}#{$name}-empty-text {
+      @include cxe-field-empty-text($empty-text);
+   }
+
+   .#{$element}#{$name}-axis {
+      user-select: none;
+      position: absolute;
+      background-color: $axis-background-color;
+      border-radius: $axis-size * 0.5;
+      box-sizing: border-box;
+      width: $width;
+
+      left: $handle-size * 0.5;
+      right: $handle-size * 0.5;
+      top: calc(50% - #{$axis-size * 0.5});
+      height: $axis-size;
+      padding: 0 $axis-size * 0.5;
+   }
+
+   .#{$element}#{$name}-space {
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-range {
+      position: absolute;
+      background-color: $range-background-color;
+      border-radius: $axis-size * 0.5;
+      height: 100%;
+      left: 0;
+      width: 0;
+      opacity: 0;
+      transform: scale(0);
+
+      transition: all 200ms;
+
+      .#{$state}on & {
+         width: 100%;
+         opacity: 1;
+         transform: none;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      box-sizing: border-box;
+      width: $handle-size;
+      height: $handle-size;
+      margin-left: -$handle-size * 0.5;
+      margin-top: -$handle-size * 0.5;
+      left: 0;
+      top: 50%;
+      transition: left 200ms;
+
+      @include cx-add-state-rules($styles, default);
+
+      .#{$state}on & {
+         left: 100%;
+         @include cx-add-state-rules($styles, on);
+      }
+
+      .#{$state}on:active & {
+         @include cx-add-state-rules($styles, on-active);
+      }
+
+      &:hover {
+         @include cx-add-state-rules($styles, hover);
+      }
+
+      .#{$block}#{$name}:focus & {
+         @include cx-add-state-rules($styles, focus);
+      }
+
+      .#{$block}#{$name}.#{$state}disabled & {
+         @include cx-add-state-rules($styles, disabled);
+      }
+
+      &:active {
+         @include cx-add-state-rules($styles, active);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Switch")) {
+   @include cx-switch();
+}

package/src/widgets/form/TextArea.scss

@@ -1,60 +1,43 @@
-
-@mixin cx-textarea(
-   $name: 'textarea',
-   $state-style-map: $cx-textarea-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $empty-text: $cx-empty-text,
-   $tool-state-style-map: $cx-input-right-icon-state-style-map,
-   $icon-size: $cx-default-input-icon-size,
-   $width: $cx-default-textarea-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,
-         $input: false
-      );
-      line-height: 0;
-      width: $width;
-   }
-
-   .#{$element}#{$name}-input {
-      @include cxe-field-input(
-         $besm,
-         $state-style-map,
-         $placeholder: $placeholder,
-         $input: false
-      );
-
-      width: 100%;
-      height: 100%;
-   }
-
-   .#{$element}#{$name}-tool {
-      @include cxe-field-button($besm, $tool-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/TextArea')) {
-   @include cx-textarea;
-}
-
-
-
-
-
+@mixin cx-textarea(
+   $name: "textarea",
+   $state-style-map: $cx-textarea-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $empty-text: $cx-empty-text,
+   $tool-state-style-map: $cx-input-right-icon-state-style-map,
+   $icon-size: $cx-default-input-icon-size,
+   $width: $cx-default-textarea-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} {
+      line-height: 0;
+      width: $width;
+      @include cxb-field($besm, $state-style-map, $input: false);
+   }
+
+   .#{$element}#{$name}-input {
+      width: 100%;
+      height: 100%;
+      @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder, $input: false);
+   }
+
+   .#{$element}#{$name}-tool {
+      @include cxe-field-button($besm, $tool-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/TextArea")) {
+   @include cx-textarea;
+}