cx 24.10.2 → 24.10.4

package/src/widgets/grid/Grid.scss

@@ -464,7 +464,7 @@
    }
 
    @for $i from 1 through 4 {
-      .#{$element}#{$name}-group-caption.#{$state}level-#{$i} {
+      .#{$element}#{$name}-group-caption.#{$state}level-#{$i} td {
          @include cx-add-state-rules($cx-grid-group-caption-level-style-map, level-#{$i});
       }
    }
@@ -479,7 +479,7 @@
    }
 
    @for $i from 1 through 4 {
-      .#{$element}#{$name}-group-footer.#{$state}level-#{$i} {
+      .#{$element}#{$name}-group-footer.#{$state}level-#{$i} td {
          @include cx-add-state-rules($cx-grid-group-footer-level-style-map, level-#{$i});
       }
    }

package/src/widgets/grid/TreeNode.scss

@@ -1,88 +1,88 @@
-@mixin cx-treenode(
-   $name: "treenode",
-   $icon-size: $cx-default-icon-size,
-   $handle-size: $cx-default-input-tool-size,
-   $handle-state-style-map: $cx-input-right-icon-state-style-map,
-   $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} {
-      padding-left: $handle-size + $icon-size * 0.25;
-      position: relative;
-
-      &.#{$state}icon {
-         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
-      }
-
-      @for $i from 1 through 20 {
-         &.#{$state}level-#{$i} {
-            margin-left: #{($i * 20)}px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-
-      @include cx-add-state-rules($handle-state-style-map, default);
-
-      left: 0;
-      top: 50%;
-      margin-top: -$handle-size * 0.5;
-      bottom: 0;
-      width: $handle-size + $icon-size;
-      height: $handle-size;
-
-      &:hover {
-         @include cx-add-state-rules($handle-state-style-map, hover);
-      }
-
-      &:active {
-         @include cx-add-state-rules($handle-state-style-map, active);
-      }
-   }
-
-   .#{$element}#{$name}-arrow {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size - $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      transform: rotate(-90deg);
-      transition: transform 0.2s;
-
-      .#{$state}expanded & {
-         transform: rotate(0);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size + $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-   }
-
-   .#{$block}grid.#{$mod}tree {
-      td {
-         border-top: none;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/TreeNode")) {
-   @include cx-treenode();
-}
+@mixin cx-treenode(
+   $name: "treenode",
+   $icon-size: $cx-default-icon-size,
+   $handle-size: $cx-default-input-tool-size,
+   $handle-state-style-map: $cx-input-right-icon-state-style-map,
+   $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} {
+      padding-left: $handle-size + $icon-size * 0.25;
+      position: relative;
+
+      &.#{$state}icon {
+         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
+      }
+
+      @for $i from 1 through 20 {
+         &.#{$state}level-#{$i} {
+            margin-left: #{($i * 20)}px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+
+      @include cx-add-state-rules($handle-state-style-map, default);
+
+      left: 0;
+      top: 50%;
+      margin-top: -$handle-size * 0.5;
+      bottom: 0;
+      width: $handle-size + $icon-size;
+      height: $handle-size;
+
+      &:hover {
+         @include cx-add-state-rules($handle-state-style-map, hover);
+      }
+
+      &:active {
+         @include cx-add-state-rules($handle-state-style-map, active);
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size - $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      transform: rotate(-90deg);
+      transition: transform 0.2s;
+
+      .#{$state}expanded & {
+         transform: rotate(0);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size + $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+   }
+
+   .#{$block}grid.#{$mod}tree {
+      td {
+         border-top: none;
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/TreeNode")) {
+   @include cx-treenode();
+}

package/src/widgets/nav/Menu.scss

@@ -1,74 +1,74 @@
-@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $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} {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      @include cx-add-state-rules($state-style-map, default);
-
-      &.#{$state}horizontal {
-         white-space: nowrap;
-
-         & > .#{$element}#{$name}-item {
-            display: inline-block;
-            user-select: none;
-
-            @each $size, $value in $cx-menu-padding-options {
-               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
-                  margin: 0 cx-right($value) 0 cx-left($value);
-               }
-            }
-         }
-      }
-
-      @each $size, $value in $cx-menu-padding-options {
-         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
-            margin: $value;
-            display: block;
-         }
-      }
-
-      .#{$element}#{$name}-item {
-         & > hr {
-            border: none;
-            border-top: 1px solid $cx-default-menu-separator-color;
-            margin: map-get($cx-menu-padding-options, medium);
-         }
-
-         &.#{$state}hidden {
-            visibility: hidden;
-            position: absolute;
-         }
-      }
-
-      &.#{$state}overflow {
-         overflow: hidden;
-         display: flex;
-
-         & > .#{$element}#{$name}-item:last-child {
-            visibility: hidden;
-            position: absolute;
-            max-height: 100%;
-         }
-
-         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
-            visibility: visible;
-            position: relative;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-spacer {
-      flex: 1 1 0%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/Menu")) {
-   @include cx-menu();
-}
+@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $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} {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+      &.#{$state}horizontal {
+         white-space: nowrap;
+
+         & > .#{$element}#{$name}-item {
+            display: inline-block;
+            user-select: none;
+
+            @each $size, $value in $cx-menu-padding-options {
+               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
+                  margin: 0 cx-right($value) 0 cx-left($value);
+               }
+            }
+         }
+      }
+
+      @each $size, $value in $cx-menu-padding-options {
+         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
+            margin: $value;
+            display: block;
+         }
+      }
+
+      .#{$element}#{$name}-item {
+         & > hr {
+            border: none;
+            border-top: 1px solid $cx-default-menu-separator-color;
+            margin: map-get($cx-menu-padding-options, medium);
+         }
+
+         &.#{$state}hidden {
+            visibility: hidden;
+            position: absolute;
+         }
+      }
+
+      &.#{$state}overflow {
+         overflow: hidden;
+         display: flex;
+
+         & > .#{$element}#{$name}-item:last-child {
+            visibility: hidden;
+            position: absolute;
+            max-height: 100%;
+         }
+
+         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
+            visibility: visible;
+            position: relative;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-spacer {
+      flex: 1 1 0%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Menu")) {
+   @include cx-menu();
+}