cx 26.4.2 → 26.4.3

package/src/widgets/grid/variables.scss

@@ -1,47 +1,47 @@
-@use "sass:map";
-@use "../box" as *;
-@use "../../util/scss/defaults" as *;
-@use "../../util/scss/include" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-
-// GRID
-$cx-default-grid-font-size: $cx-default-box-font-size !default;
-$cx-default-grid-border-color: $cx-default-border-color !default;
-$cx-default-grid-background: null !default;
-$cx-default-grid-border-radius: null !default;
-$cx-default-grid-box-shadow: null !default;
-
-// header
-$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
-$cx-default-grid-header-font-weight: normal !default;
-$cx-default-grid-header-line-height: null !default;
-$cx-default-grid-header-color: $cx-default-color !default;
-$cx-default-grid-header-background-color: #eee !default;
-$cx-default-grid-header-border-color: $cx-default-border-color !default;
-$cx-default-grid-header-box-shadow: null !default;
-$cx-default-grid-header-padding: null !default;
-
-// data
-$cx-default-grid-data-font-size: null !default;
-$cx-default-grid-data-font-weight: null !default;
-$cx-default-grid-data-line-height: null !default;
-$cx-default-grid-data-background-color: transparent !default;
-$cx-default-grid-data-alternate-background-color: null !default;
-$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
-$cx-default-grid-data-padding: 5px !default;
-$cx-default-grid-scroll-wrapper-padding-top: 0 !default;
-$cx-default-grid-caption-gap: 15px !default;
-
-// pagination
-$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
-$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
-$cx-grid-pagination-default-border-radius: null !default;
-$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
-$cx-grid-pagination-default-padding: $cx-default-box-padding-top cx-multiply(2, $cx-default-box-padding-top) !default;
-
-@include cx-register-dependencies(
-   (
-      "cx/widgets/Grid": "cx/widgets/DragClone",
-   )
-);
+@use "sass:map";
+@use "../box" as *;
+@use "../../util/scss/defaults" as *;
+@use "../../util/scss/include" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+
+// GRID
+$cx-default-grid-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-border-color: $cx-default-border-color !default;
+$cx-default-grid-background: null !default;
+$cx-default-grid-border-radius: null !default;
+$cx-default-grid-box-shadow: null !default;
+
+// header
+$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-header-font-weight: normal !default;
+$cx-default-grid-header-line-height: null !default;
+$cx-default-grid-header-color: $cx-default-color !default;
+$cx-default-grid-header-background-color: #eee !default;
+$cx-default-grid-header-border-color: $cx-default-border-color !default;
+$cx-default-grid-header-box-shadow: null !default;
+$cx-default-grid-header-padding: null !default;
+
+// data
+$cx-default-grid-data-font-size: null !default;
+$cx-default-grid-data-font-weight: null !default;
+$cx-default-grid-data-line-height: null !default;
+$cx-default-grid-data-background-color: transparent !default;
+$cx-default-grid-data-alternate-background-color: null !default;
+$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
+$cx-default-grid-data-padding: 5px !default;
+$cx-default-grid-scroll-wrapper-padding-top: 0 !default;
+$cx-default-grid-caption-gap: 15px !default;
+
+// pagination
+$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
+$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
+$cx-grid-pagination-default-border-radius: null !default;
+$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
+$cx-grid-pagination-default-padding: $cx-default-box-padding-top cx-multiply(2, $cx-default-box-padding-top) !default;
+
+@include cx-register-dependencies(
+   (
+      "cx/widgets/Grid": "cx/widgets/DragClone",
+   )
+);

package/src/widgets/index.ts

@@ -1,63 +1,63 @@
-import { Widget } from "../ui/Widget";
-import { Text } from "../ui/Text";
-import { StaticText } from "../ui/StaticText";
-import { PureContainer } from "../ui/PureContainer";
-import { IsolatedScope } from "../ui/IsolatedScope";
-import { DetachedScope } from "../ui/DetachedScope";
-import { Restate, PrivateStore } from "../ui/Restate";
-import { DataProxy } from "../ui/DataProxy";
-import { Content } from "../ui/layout/Content";
-import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-import { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
-import { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
-import { ContentResolver } from "../ui/ContentResolver";
-import { Rescope } from "../ui/Rescope";
-import { Repeater } from "../ui/Repeater";
-
-//re-export widgets defined in ui namespace
-export {
-   Widget,
-   StaticText,
-   Text,
-   PureContainer,
-   Content,
-   ContentPlaceholder,
-   ContentPlaceholderScope,
-   ContentResolver,
-   Rescope,
-   Repeater,
-   IsolatedScope,
-   DetachedScope,
-   Restate,
-   PrivateStore,
-   DataProxy,
-   LabelsTopLayout,
-   LabelsTopLayoutCell,
-   LabelsLeftLayout,
-};
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-export * from "./ReactElementWrapper";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
+import { Widget } from "../ui/Widget";
+import { Text } from "../ui/Text";
+import { StaticText } from "../ui/StaticText";
+import { PureContainer } from "../ui/PureContainer";
+import { IsolatedScope } from "../ui/IsolatedScope";
+import { DetachedScope } from "../ui/DetachedScope";
+import { Restate, PrivateStore } from "../ui/Restate";
+import { DataProxy } from "../ui/DataProxy";
+import { Content } from "../ui/layout/Content";
+import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+import { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
+import { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
+import { ContentResolver } from "../ui/ContentResolver";
+import { Rescope } from "../ui/Rescope";
+import { Repeater } from "../ui/Repeater";
+
+//re-export widgets defined in ui namespace
+export {
+   Widget,
+   StaticText,
+   Text,
+   PureContainer,
+   Content,
+   ContentPlaceholder,
+   ContentPlaceholderScope,
+   ContentResolver,
+   Rescope,
+   Repeater,
+   IsolatedScope,
+   DetachedScope,
+   Restate,
+   PrivateStore,
+   DataProxy,
+   LabelsTopLayout,
+   LabelsTopLayoutCell,
+   LabelsLeftLayout,
+};
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";

package/src/widgets/nav/MenuItem.scss

@@ -1,150 +1,150 @@
-@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/deep-merge.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-
-@mixin cx-menuitem(
-   $name: "menuitem",
-   $state-style-map: $cx-menu-list-item,
-   $icon-size: $cx-default-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} {
-      box-sizing: border-box;
-      cursor: pointer;
-      position: relative;
-      border-radius: $cx-default-border-radius;
-
-      &:focus {
-         outline: none;
-      }
-
-      & > a:hover {
-         text-decoration: none;
-      }
-
-      .#{$state}focusable > &.#{$state}cursor {
-         @include cx-add-state-rules($state-style-map, default);
-
-         &:hover {
-            @include cx-add-state-rules($state-style-map, hover);
-         }
-      }
-
-      .#{$state}focusable.#{$state}cursor > &.#{$state}cursor {
-         @include cx-add-state-rules($state-style-map, selected-cursor);
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-
-      & > a {
-         text-decoration: none;
-         color: inherit;
-
-         &:focus {
-            outline: none;
-         }
-      }
-
-      & > hr {
-         border: none;
-         border-top: 1px solid $cx-default-menu-separator-color;
-         margin: map.get($cx-menu-padding-options, medium);
-      }
-
-      @each $size, $value in $cx-menu-padding-options {
-         &.#{$state}#{$size}-padding {
-            & > a,
-            & > span {
-               padding: $value;
-               line-height: $cx-default-box-line-height;
-               border: $cx-default-box-border-width solid transparent;
-               display: block;
-            }
-
-            &.#{$state}arrow {
-               padding-right: cx-calc($icon-size);
-            }
-
-            &.#{$state}icon {
-               padding-left: cx-calc(
-                  max(1lh, $icon-size),
-                  cx-top($value),
-                  cx-top($value),
-                  cx-multiply(cx-left($value), -1)
-               );
-            }
-
-            &.#{$state}empty {
-               padding-right: cx-multiply($icon-size, 0.5);
-            }
-
-            & > .#{$element}#{$name}-arrow {
-               right: cx-multiply(cx-right($value), 0.5);
-            }
-
-            & > .#{$element}#{$name}-button {
-               width: cx-calc(cx-top($value), max($icon-size, 1lh), cx-top($value));
-            }
-         }
-      }
-   }
-
-   .#{$element}#{$name}-arrow {
-      position: absolute;
-      width: $icon-size;
-      height: $icon-size;
-      top: 50%;
-      margin-top: cx-multiply($icon-size, -0.5);
-
-      .#{$state}vertical > & {
-         transform: rotate(-90deg);
-      }
-   }
-
-   .#{$element}#{$name}-button {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-   }
-
-   .#{$element}#{$name}-baseline {
-      display: inline-block;
-      width: 1px;
-      margin-left: -1px;
-      visibility: hidden;
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-   }
-
-   .#{$element}#{$name}-icon {
-      position: absolute;
-      width: $icon-size;
-      height: $icon-size;
-      top: 50%;
-      left: 50%;
-      margin-top: cx-multiply($icon-size, -0.5);
-      margin-left: cx-multiply($icon-size, -0.5);
-      text-align: center;
-      line-height: 1;
-      font-size: $icon-size;
-   }
-}
-
-@if (cx-should-include("cx/widgets/MenuItem")) {
-   @include cx-menuitem();
-}
+@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/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+
+@mixin cx-menuitem(
+   $name: "menuitem",
+   $state-style-map: $cx-menu-list-item,
+   $icon-size: $cx-default-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} {
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      border-radius: $cx-default-border-radius;
+
+      &:focus {
+         outline: none;
+      }
+
+      & > a:hover {
+         text-decoration: none;
+      }
+
+      .#{$state}focusable > &.#{$state}cursor {
+         @include cx-add-state-rules($state-style-map, default);
+
+         &:hover {
+            @include cx-add-state-rules($state-style-map, hover);
+         }
+      }
+
+      .#{$state}focusable.#{$state}cursor > &.#{$state}cursor {
+         @include cx-add-state-rules($state-style-map, selected-cursor);
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      & > a {
+         text-decoration: none;
+         color: inherit;
+
+         &:focus {
+            outline: none;
+         }
+      }
+
+      & > hr {
+         border: none;
+         border-top: 1px solid $cx-default-menu-separator-color;
+         margin: map.get($cx-menu-padding-options, medium);
+      }
+
+      @each $size, $value in $cx-menu-padding-options {
+         &.#{$state}#{$size}-padding {
+            & > a,
+            & > span {
+               padding: $value;
+               line-height: $cx-default-box-line-height;
+               border: $cx-default-box-border-width solid transparent;
+               display: block;
+            }
+
+            &.#{$state}arrow {
+               padding-right: cx-calc($icon-size);
+            }
+
+            &.#{$state}icon {
+               padding-left: cx-calc(
+                  max(1lh, $icon-size),
+                  cx-top($value),
+                  cx-top($value),
+                  cx-multiply(cx-left($value), -1)
+               );
+            }
+
+            &.#{$state}empty {
+               padding-right: cx-multiply($icon-size, 0.5);
+            }
+
+            & > .#{$element}#{$name}-arrow {
+               right: cx-multiply(cx-right($value), 0.5);
+            }
+
+            & > .#{$element}#{$name}-button {
+               width: cx-calc(cx-top($value), max($icon-size, 1lh), cx-top($value));
+            }
+         }
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      position: absolute;
+      width: $icon-size;
+      height: $icon-size;
+      top: 50%;
+      margin-top: cx-multiply($icon-size, -0.5);
+
+      .#{$state}vertical > & {
+         transform: rotate(-90deg);
+      }
+   }
+
+   .#{$element}#{$name}-button {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      width: 1px;
+      margin-left: -1px;
+      visibility: hidden;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+   }
+
+   .#{$element}#{$name}-icon {
+      position: absolute;
+      width: $icon-size;
+      height: $icon-size;
+      top: 50%;
+      left: 50%;
+      margin-top: cx-multiply($icon-size, -0.5);
+      margin-left: cx-multiply($icon-size, -0.5);
+      text-align: center;
+      line-height: 1;
+      font-size: $icon-size;
+   }
+}
+
+@if (cx-should-include("cx/widgets/MenuItem")) {
+   @include cx-menuitem();
+}