cx 26.2.1 → 26.2.3

package/src/widgets/maps.scss

@@ -0,0 +1,139 @@
+@use "./variables.scss" as *;
+
+// HEADING
+$cx-caption-style-map: () !default;
+
+$cx-caption-level-style-map: (
+   1: (
+      margin: 0,
+      padding: 0,
+   ),
+   2: (
+      margin: 0,
+      padding: 0,
+   ),
+   3: (
+      margin: 0,
+      padding: 0,
+   ),
+   4: (
+      margin: 0,
+      padding: 0,
+   ),
+   5: (
+      margin: 0,
+      padding: 0,
+   ),
+   6: (
+      margin: 0,
+      padding: 0,
+   ),
+) !default;
+
+// SECTION
+$cx-section-styles: () !default;
+
+$cx-section-header-state-style-map: (
+   default: (
+      margin: $cx-default-section-header-margin,
+      padding: $cx-default-section-header-padding,
+      border-bottom-width: $cx-default-section-header-border-width,
+      border-bottom-style: solid,
+      border-bottom-color: $cx-default-section-header-border-color,
+      font-weight: $cx-default-section-header-font-weight,
+   ),
+) !default;
+
+$cx-section-footer-state-style-map: (
+   default: (
+      margin: $cx-default-section-footer-margin,
+      padding: $cx-default-section-footer-padding,
+      border-top-width: $cx-default-section-footer-border-width,
+      border-top-style: solid,
+      border-top-color: $cx-default-section-footer-border-color,
+   ),
+) !default;
+
+$cx-section-body-state-style-map: (
+   default: (
+      padding: $cx-default-section-body-padding,
+   ),
+) !default;
+
+$cx-section-mods: (
+   card: (
+      default: (
+         background-color: rgba(255, 255, 255, 0.9),
+         border-radius: 3px,
+      ),
+   ),
+   well: (
+      default: (
+         background-color: rgba(255, 255, 255, 0.9),
+         border-radius: 3px,
+      ),
+   ),
+   warning: (
+      default: (
+         color: #fff,
+         background-color: #f09037,
+         border-radius: 3px,
+      ),
+   ),
+   primary: (
+      default: (
+         color: #fff,
+         background-color: #1f99f8,
+         border-radius: 3px,
+      ),
+   ),
+   success: (
+      default: (
+         color: #fff,
+         background-color: #5cb85c,
+         border-radius: 3px,
+      ),
+   ),
+   error: (
+      default: (
+         color: #fff,
+         background-color: #d9534f,
+         border-radius: 3px,
+      ),
+   ),
+) !default;
+
+$cx-progressbar-state-style-map: (
+   default: (
+      position: relative,
+      width: $cx-default-progressbar-width,
+      min-height: $cx-default-progressbar-height,
+      background-color: $cx-default-progressbar-background-color,
+      color: $cx-default-progressbar-color,
+      border-style: solid,
+      border-color: $cx-default-progressbar-border-color,
+      border-width: $cx-default-progressbar-border-width,
+      border-radius: $cx-default-progressbar-border-radius,
+      font-size: $cx-default-progressbar-font-size,
+      text-align: center,
+      line-height: $cx-default-progressbar-height,
+   ),
+   disabled: (
+      opacity: 0.2,
+   ),
+);
+
+$cx-progressbar-mods: ();
+
+$cx-highlighedsearchtext-style-map: (
+   font-weight: bold,
+) !default;
+
+@forward "./lists.scss";
+@forward "./Button.maps.scss";
+
+@forward "./drag-drop/maps.scss";
+@forward "./form/maps.scss";
+@forward "./grid/maps.scss";
+@forward "./nav/maps.scss";
+@forward "./overlay/maps.scss";

package/src/widgets/nav/Link.scss

@@ -1,6 +1,19 @@
 @use "sass:map";
+@use "sass:math";
+@use "../box.scss" 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 *;
+@use "./maps.scss" as *;
 
-@mixin cx-link($name: "link", $besm: $cx-besm, $state-style-map: $cx-link-state-style-map) {
+@mixin cx-link(
+   $name: "link",
+   $besm: $cx-besm,
+   $state-style-map: $cx-link-state-style-map
+) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);

package/src/widgets/nav/Menu.scss

@@ -1,6 +1,18 @@
+@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/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-menu($name: "menu", $state-style-map: $cx-menu-state-style-map, $besm: $cx-besm) {
+@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);
@@ -37,12 +49,6 @@
       }
 
       .#{$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;

package/src/widgets/nav/Menu.variables.scss

@@ -1,20 +1,9 @@
+@use "../../util/scss/include" as *;
 @use "sass:map";
 
 // MENU
-$cx-menu-state-style-map: $cx-list !default;
 $cx-default-menu-separator-color: lightgray !default;
 
-// MENU ITEM
-$cx-menu-padding-options: (
-   xsmall: $cx-default-padding-extra-small 2 * $cx-default-padding-extra-small,
-   small: $cx-default-padding-small 2 * $cx-default-padding-small,
-   medium: $cx-default-padding-medium 2 * $cx-default-padding-medium,
-   large: $cx-default-padding-large 2 * $cx-default-padding-large,
-   xlarge: $cx-default-padding-extra-large 2 * $cx-default-padding-extra-large,
-) !default;
-
-$cx-menu-list-item: () !default;
-
 $cx-dependencies: map.merge(
    $cx-dependencies,
    (

package/src/widgets/nav/MenuItem.scss

@@ -1,8 +1,17 @@
+@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-deep-map-merge($cx-list-item, $cx-menu-list-item),
+   $state-style-map: $cx-menu-list-item,
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
@@ -50,6 +59,12 @@
          }
       }
 
+      & > 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,
@@ -69,11 +84,11 @@
             }
 
             &.#{$state}empty {
-               padding-right: cx-calc($icon-size) * 0.5;
+               padding-right: cx-multiply($icon-size, 0.5);
             }
 
             & > .#{$element}#{$name}-arrow {
-               right: cx-right($value) * 0.5;
+               right: cx-multiply(cx-right($value), 0.5);
             }
 
             & > .#{$element}#{$name}-button {
@@ -88,7 +103,7 @@
       width: $icon-size;
       height: $icon-size;
       top: 50%;
-      margin-top: -$icon-size * 0.5;
+      margin-top: cx-multiply($icon-size, -0.5);
 
       .#{$state}vertical > & {
          transform: rotate(-90deg);
@@ -117,8 +132,8 @@
       height: $icon-size;
       top: 50%;
       left: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: -$icon-size * 0.5;
+      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;

package/src/widgets/nav/Scroller.scss

@@ -1,4 +1,13 @@
+@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-scroller(
    $name: "scroller",
@@ -138,8 +147,8 @@
       top: 50%;
       left: 50%;
       position: absolute;
-      margin-left: -$icon-size * 0.5;
-      margin-top: -$icon-size * 0.5;
+      margin-left: cx-multiply($icon-size, -0.5);
+      margin-top: cx-multiply($icon-size, -0.5);
    }
 }
 

package/src/widgets/nav/Tab.maps.scss

@@ -0,0 +1,78 @@
+@use "../variables" as *;
+@use "../lists.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+
+$cx-tab-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         color: $cx-default-tab-color,
+         font-size: $cx-default-tab-font-size,
+         line-height: $cx-default-box-line-height,
+         font-weight: $cx-default-tab-font-weight,
+         text-decoration: none,
+         cursor: pointer,
+         text-align: center,
+         background-color: $cx-default-tab-background-color,
+         border-radius: $cx-default-tab-border-radius,
+         padding: $cx-default-tab-padding,
+         border-width: $cx-default-tab-border-width,
+         border-color: $cx-default-tab-border-color,
+         border-style: solid,
+         box-shadow: $cx-default-tab-box-shadow,
+      ),
+      hover: (
+         text-decoration: none,
+      ),
+      disabled: (
+         background-color: transparent,
+         pointer-events: none,
+      ),
+   )
+) !default;
+
+$cx-tab-mods: (
+   classic: (
+      default: (
+         position: relative,
+         border-width: 1px,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      selected: (
+         border-color: $cx-default-border-color,
+         background-color: $cx-default-cover-background-color,
+      ),
+   ),
+   line: (
+      default: (
+         background-color: transparent !important,
+         border-left-color: transparent !important,
+         border-right-color: transparent !important,
+         border-top-color: transparent !important,
+         border-left-width: 0,
+         border-right-width: 0,
+         border-bottom-width: 2px,
+         border-top-width: 0,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+         border-radius: 0,
+      ),
+      hover: (
+         border-color: rgba(128, 128, 128, 0.2),
+      ),
+      cursor: (
+         border-color: rgba(123, 190, 255, 0.3),
+      ),
+      selected: (
+         border-color: rgba(128, 128, 128, 0.4),
+      ),
+      selected-cursor: (
+         border-color: rgba(123, 190, 255, 0.7),
+      ),
+      active: (),
+      disabled: (
+         border-color: transparent,
+      ),
+   ),
+) !default;

package/src/widgets/nav/Tab.scss

@@ -1,9 +1,16 @@
-
+@use "sass:math";
 @use "sass:map";
-@import "cover";
+@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/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "cover" as *;
 
 @mixin cx-tab(
-   $name: 'tab',
+   $name: "tab",
    $state-style-map: $cx-tab-state-style-map,
    $besm: $cx-besm
 ) {
@@ -18,7 +25,6 @@
 
       @include cx-add-state-rules($state-style-map, default);
 
-
       &:hover {
          @include cx-add-state-rules($state-style-map, hover);
       }
@@ -66,7 +72,7 @@
       }
 
       &.#{$mod}classic.#{$state}active:after {
-         content: ' ';
+         content: " ";
          position: absolute;
          top: 100%;
          left: 0;
@@ -77,6 +83,6 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/Tab')) {
+@if (cx-should-include("cx/widgets/Tab")) {
    @include cx-tab();
 }

package/src/widgets/nav/Tab.variables.scss

@@ -1,3 +1,7 @@
+@use "../../util/scss/defaults" as *;
+@use "../../util/scss/clockwise" as *;
+@use "../box" as *;
+
 $cx-default-tab-color: inherit !default;
 $cx-default-tab-font-size: null !default;
 $cx-default-tab-font-weight: inherit !default;
@@ -5,80 +9,7 @@ $cx-default-tab-background-color: transparent !default;
 $cx-default-tab-border-width: $cx-default-box-border-width !default;
 $cx-default-tab-border-color: transparent !default;
 $cx-default-tab-border-radius: $cx-default-border-radius !default;
-$cx-default-tab-padding: cx-top($cx-default-box-padding) 2 * cx-right($cx-default-box-padding)
-   cx-bottom($cx-default-box-padding) 2 * cx-left($cx-default-box-padding) !default;
+$cx-default-tab-padding: $cx-default-box-padding-top 2 *
+   $cx-default-box-padding-right $cx-default-box-padding-bottom 2 *
+   $cx-default-box-padding-left !default;
 $cx-default-tab-box-shadow: none !default;
-
-$cx-tab-state-style-map: cx-deep-map-merge(
-   $cx-list-item,
-   (
-      default: (
-         color: $cx-default-tab-color,
-         font-size: $cx-default-tab-font-size,
-         line-height: $cx-default-box-line-height,
-         font-weight: $cx-default-tab-font-weight,
-         text-decoration: none,
-         cursor: pointer,
-         text-align: center,
-         background-color: $cx-default-tab-background-color,
-         border-radius: $cx-default-tab-border-radius,
-         padding: $cx-default-tab-padding,
-         border-width: $cx-default-tab-border-width,
-         border-color: $cx-default-tab-border-color,
-         border-style: solid,
-         box-shadow: $cx-default-tab-box-shadow,
-      ),
-      hover: (
-         text-decoration: none,
-      ),
-      disabled: (
-         background-color: transparent,
-         pointer-events: none,
-      ),
-   )
-) !default;
-
-$cx-tab-mods: (
-   classic: (
-      default: (
-         position: relative,
-         border-width: 1px,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      selected: (
-         border-color: $cx-default-border-color,
-         background-color: $cx-default-cover-background-color,
-      ),
-   ),
-   line: (
-      default: (
-         background-color: transparent !important,
-         border-left-color: transparent !important,
-         border-right-color: transparent !important,
-         border-top-color: transparent !important,
-         border-left-width: 0,
-         border-right-width: 0,
-         border-bottom-width: 2px,
-         border-top-width: 0,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      hover: (
-         border-color: rgba(128, 128, 128, 0.2),
-      ),
-      cursor: (
-         border-color: rgba(123, 190, 255, 0.3),
-      ),
-      selected: (
-         border-color: rgba(128, 128, 128, 0.4),
-      ),
-      selected-cursor: (
-         border-color: rgba(123, 190, 255, 0.7),
-      ),
-      active: (),
-      disabled: (
-         border-color: transparent,
-      ),
-   ),
-) !default;

package/src/widgets/nav/cover.scss

@@ -1,8 +1,9 @@
 @use "sass:map";
+@use "../variables" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
-@mixin cx-cover(
-   $besm: $cx-besm
-) {
+@mixin cx-cover($besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -17,6 +18,7 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/cover')) {  // check path
+@if (cx-should-include("cx/widgets/cover")) {
+   // check path
    @include cx-cover();
 }

package/src/widgets/nav/index.scss

@@ -1,6 +1,6 @@
-@import 'cover';
-@import 'Tab';
-@import 'Menu';
-@import 'MenuItem';
-@import 'Link';
-@import 'Scroller';
+@use 'cover';
+@use 'Tab';
+@use 'Menu';
+@use 'MenuItem';
+@use 'Link';
+@use 'Scroller';

package/src/widgets/nav/maps.scss

@@ -0,0 +1,32 @@
+@use "../variables" as *;
+@use "../lists.scss" as *;
+@use "../../util/scss/padding" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+
+$cx-link-state-style-map: (
+   active: (
+      font-weight: bold,
+   ),
+) !default;
+
+@forward "./Tab.maps.scss";
+
+$cx-menu-state-style-map: $cx-list !default;
+
+// MENU ITEM
+$cx-menu-padding-options: (
+   xsmall: $cx-default-padding-extra-small 2 * $cx-default-padding-extra-small,
+   small: $cx-default-padding-small 2 * $cx-default-padding-small,
+   medium: $cx-default-padding-medium 2 * $cx-default-padding-medium,
+   large: $cx-default-padding-large 2 * $cx-default-padding-large,
+   xlarge: $cx-default-padding-extra-large 2 * $cx-default-padding-extra-large,
+) !default;
+
+$cx-menu-list-item: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         padding: null,
+      ),
+   )
+) !default;

package/src/widgets/nav/variables.scss

@@ -1,3 +1,5 @@
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/include.scss" as *;
 @use "sass:map";
 
 // COVER
@@ -6,17 +8,8 @@ $cx-default-cover-background-color: white !default;
 
 $cx-default-scroller-button-size: 20px !default;
 
-$cx-link-state-style-map: (
-   active: (
-      font-weight: bold,
-   ),
-) !default;
-
-//MENU
-@import "Menu.variables";
-
-// TAB
-@import "Tab.variables";
+@forward "Menu.variables";
+@forward "Tab.variables";
 
 $cx-dependencies: map.merge(
    $cx-dependencies,

package/src/widgets/overlay/ContextMenu.ts

@@ -1,4 +1,5 @@
 import { Store } from "../../data/Store";
+import { Localization } from "../../ui/Localization";
 import { Instance } from "../../ui/Instance";
 import { Dropdown, DropdownConfig } from "./Dropdown";
 import { getCursorPos } from "./captureMouse";
@@ -20,6 +21,8 @@ ContextMenu.prototype.autoFocus = true;
 ContextMenu.prototype.autoFocusFirstChild = false;
 ContextMenu.prototype.focusable = true;
 
+Localization.registerPrototype("cx/widgets/ContextMenu", ContextMenu);
+
 export const openContextMenu = (
    e: React.MouseEvent,
    content: any,