cx 26.0.9 → 26.0.10

package/build/widgets/overlay/Toast.scss

@@ -1,164 +0,0 @@
-@use "sass:map";
-
-@mixin cx-toast(
-   $name: 'toast',
-   $besm: $cx-besm,
-   $mods: $cx-toast-mods
-) {
-
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      color: $cx-default-toast-color;
-      background-color: $cx-default-toast-background-color;
-      box-sizing: border-box;
-      position: relative;
-      pointer-events: all;
-      transition: all 0.2s ease-in-out;
-      box-shadow: $cx-default-toast-box-shadow;
-      border-style: solid;
-      border-width: $cx-default-toast-border-width;
-      border-color: $cx-default-toast-border-color;
-      border-radius: $cx-default-border-radius;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &.#{$state}pad {
-         padding: $cx-default-toast-padding;
-      }
-
-      &.#{$state}animate {
-         animation: cx-toast-enter-animation 0.2s;
-      }
-
-      &.#{$state}animate-enter {
-         //animation-fill-mode: forwards;
-      }
-
-      &.#{$state}animate-leave {
-         animation: cx-toast-leave-animation 0.2s;
-         animation-fill-mode: forwards;
-      }
-
-      @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-
-          &[disabled], &.#{$state}disabled {
-              @include cx-add-state-rules($config, disabled);
-          }
-
-          &:hover {
-              @include cx-add-state-rules($config, hover);
-          }
-
-          &:focus {
-              @include cx-add-state-rules($config, focus);
-          }
-
-          &:active, &.#{$state}pressed {
-              @include cx-add-state-rules($config, active);
-          }
-        }
-      }
-   }
-}
-
-@keyframes cx-toast-enter-animation {
-   from {
-      transform: scale(0);
-      opacity: 0;
-   }
-
-   to {
-      transform: scale(1);
-      opacity: 1;
-   }
-}
-
-@keyframes cx-toast-leave-animation {
-   to {
-      transform: scale(0);
-      opacity: 0;
-   }
-
-   from {
-      transform: scale(1);
-      opacity: 1;
-   }
-}
-
-@mixin cx-toaster(
-   $name: 'toaster',
-   $besm: $cx-besm
-) {
-
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      position: fixed;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      overflow: hidden;
-      z-index: 1000000;
-
-      &.#{$state}placement-right {
-         justify-content: center;
-         align-items: flex-end;
-      }
-
-      &.#{$state}placement-left {
-         justify-content: center;
-         align-items: flex-start;
-      }
-
-      &.#{$state}placement-bottom {
-         flex-direction: column-reverse;
-      }
-
-      &.#{$state}placement-top-left {
-         align-items: flex-start;
-      }
-
-      &.#{$state}placement-top-right {
-         align-items: flex-end;
-      }
-
-      &.#{$state}placement-bottom-left {
-         justify-content: flex-end;
-         align-items: flex-start;
-      }
-
-      &.#{$state}placement-bottom-right {
-         justify-content: flex-end;
-         align-items: flex-end;
-      }
-   }
-
-   .#{$element}#{$name}-item {
-      margin: 0;
-      height: 0;
-      transition: all 0.2s ease-in-out;
-
-      &.#{$state}live {
-         margin: 10px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/Toast')) {
-   @include cx-toast();
-   @include cx-toaster();
-}

package/build/widgets/overlay/Tooltip.scss

@@ -1,177 +0,0 @@
-@use "sass:map";
-
-@keyframes cx-tooltip-enter-animation {
-   from {
-      transform: scale(0.9);
-      opacity: 0;
-   }
-
-   to {
-      transform: scale(1);
-      opacity: 1;
-   }
-}
-
-@keyframes cx-tooltip-leave-animation {
-   from {
-      transform: scale(1);
-      opacity: 1;
-   }
-
-   to {
-      transform: scale(0.9);
-      opacity: 0;
-   }
-}
-
-@mixin cx-tooltip(
-   $name: 'tooltip',
-   $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} {
-      @extend %cxb-overlay;
-      display: block;
-      left: -10000px;
-      top: -10000px;
-      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
-      background-color: $cx-tooltip-background-color;
-      border: $cx-tooltip-border-width solid $cx-tooltip-border-color;
-      color: $cx-tooltip-color;
-      padding: $cx-tooltip-padding;
-      border-radius: $cx-tooltip-border-radius;
-      font-size: smaller;
-      transition: opacity 0.2s ease-in;
-      max-width: 400px;
-      pointer-events: none;
-
-      &.#{$state}animate {
-         animation: cx-tooltip-enter-animation 0.2s;
-      }
-
-      &.#{$state}animate-leave {
-         animation: cx-tooltip-leave-animation 0.2s;
-         animation-fill-mode: forwards;
-      }
-
-      &.#{$state}mouse-trap {
-         pointer-events: auto;
-      }
-
-      &.#{$mod}error {
-         background-color: $cx-tooltip-background-color-error;
-         border-color: $cx-tooltip-border-color-error;
-         color: $cx-tooltip-color-error;
-
-         .#{$element}#{$name}-arrow-border {
-            color: $cx-tooltip-border-color-error;
-         }
-
-         .#{$element}#{$name}-arrow-fill {
-            color: $cx-tooltip-background-color-error;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-title {
-      font-weight: bold;
-      font-size: 100%;
-   }
-
-   @include cx-dropdown-arrows($name, (
-      border-width: $cx-tooltip-border-width,
-      border-color: $cx-tooltip-border-color,
-      border-style: solid,
-      background-color: $cx-tooltip-background-color
-   ), $cx-tooltip-arrow-size, $besm)
-
-   //.#{$element}#{$name}-arrow-border, .#{$element}#{$name}-arrow-fill {
-   //   border: solid transparent;
-   //   content: " ";
-   //   height: 0;
-   //   width: 0;
-   //   position: absolute;
-   //}
-   //
-   //.#{$element}#{$name}-arrow-border {
-   //   color: $cx-tooltip-border-color;
-   //   border-width: $cx-tooltip-border-width + $cx-tooltip-arrow-size;
-   //}
-   //
-   //.#{$element}#{$name}-arrow-fill {
-   //   color: $cx-tooltip-background-color;
-   //   border-width: $cx-tooltip-arrow-size;
-   //}
-   //
-   //.#{$state}place-right {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      right: 100%;
-   //      top: 50%;
-   //      border-right-color: currentColor;
-   //      margin-top: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      right: 100%;
-   //      top: 50%;
-   //      border-right-color: currentColor;
-   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-left {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 100%;
-   //      top: 50%;
-   //      border-left-color: currentColor;
-   //      margin-top: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 100%;
-   //      top: 50%;
-   //      border-left-color: currentColor;
-   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-up {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 50%;
-   //      top: 100%;
-   //      border-top-color: currentColor;
-   //      margin-left: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 50%;
-   //      top: 100%;
-   //      border-top-color: currentColor;
-   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-down {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 50%;
-   //      bottom: 100%;
-   //      border-bottom-color: currentColor;
-   //      margin-left: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 50%;
-   //      bottom: 100%;
-   //      border-bottom-color: currentColor;
-   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-}
-
-@if (cx-should-include('cx/widgets/Tooltip')) {
-   @include cx-tooltip();
-}

package/build/widgets/overlay/Window.scss

@@ -1,129 +0,0 @@
-@use "sass:map";
-
-@mixin cx-window(
-   $name: "window",
-   $state-style-map: $cx-window-state-style-map,
-   $header-state-style-map: $cx-window-header-state-style-map,
-   $body-state-style-map: $cx-window-body-state-style-map,
-   $footer-state-style-map: $cx-window-footer-state-style-map,
-   $mods: $cx-window-mods,
-   $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} {
-      @extend %cxb-overlay;
-      display: flex;
-      flex-direction: column;
-
-      @include cx-add-state-rules($state-style-map, default);
-
-      &.#{$state}resizable {
-         &.#{$state}active {
-            @include cx-add-state-rules($state-style-map, resizable);
-         }
-      }
-
-      &.#{$mod}alert {
-         min-width: 300px;
-      }
-   }
-
-   .#{$element}#{$name}-header {
-      position: relative; //put on top of modal backdrop
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      flex: none;
-      touch-action: none;
-
-      @include cx-add-state-rules($header-state-style-map, default);
-
-      .#{$state}draggable & {
-         cursor: pointer;
-      }
-
-      .#{$state}active & {
-         @include cx-add-state-rules($header-state-style-map, active);
-      }
-   }
-
-   .#{$element}#{$name}-footer {
-      position: relative;
-      box-sizing: border-box;
-      flex: none;
-
-      @include cx-add-state-rules($footer-state-style-map, default);
-
-      //TODO: Extract common autoclear
-      &:after {
-         clear: both;
-         visibility: hidden;
-         display: block;
-         font-size: 0;
-         content: " ";
-         height: 0;
-      }
-
-      .#{$mod}alert & {
-         text-align: center;
-      }
-   }
-
-   .#{$element}#{$name}-body {
-      overflow: auto;
-      position: relative; //put on top of modal backdrop
-      box-sizing: border-box;
-      flex: auto;
-
-      $padding: cx-get-state-rule($body-state-style-map, default, "padding");
-
-      $noPad: cx-deep-map-merge(
-         $body-state-style-map,
-         (
-            default: (
-               padding: null,
-            ),
-         )
-      );
-
-      @include cx-add-state-rules($noPad, default);
-
-      &.#{$state}pad {
-         padding: $padding;
-      }
-
-      .#{$mod}alert & {
-         padding: 2.5rem;
-         text-align: center;
-      }
-   }
-
-   @each $modname, $config in $mods {
-      .#{$block}#{$name}.#{$mod}#{$modname} {
-         @include cx-add-state-rules($config, frame);
-
-         .#{$element}#{$name}-body {
-            @include cx-add-state-rules($config, body);
-         }
-         .#{$element}#{$name}-footer {
-            @include cx-add-state-rules($config, footer);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-modal-backdrop {
-      @extend %cxe-overlay-modal-backdrop;
-   }
-
-   .#{$element}#{$name}-shadow {
-      @extend %cxe-overlay-shadow;
-   }
-}
-
-@if (cx-should-include("cx/widgets/Window")) {
-   @include cx-window();
-}

package/build/widgets/overlay/Window.variables.scss

@@ -1,62 +0,0 @@
-$cx-default-window-background-color: transparent !default;
-$cx-default-window-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.29) !default;
-$cx-default-window-border-radius: $cx-default-border-radius !default;
-
-//header
-$cx-default-window-header-color: null !default;
-$cx-default-window-header-background-color: rgba(246, 246, 246, 0.9) !default;
-$cx-default-window-header-padding: 10px 15px !default;
-$cx-default-window-header-font-size: 16px !default;
-
-//body
-$cx-default-window-body-padding: $cx-default-window-header-padding !default;
-$cx-default-window-body-background-color: white !default;
-
-//footer
-$cx-default-window-footer-color: null !default;
-$cx-default-window-footer-background-color: rgba(246, 246, 246, 0.9) !default;
-$cx-default-window-footer-padding: $cx-default-window-header-padding !default;
-$cx-default-window-footer-font-size: 16px !default;
-
-$cx-window-state-style-map: (
-   default: (
-      box-shadow: $cx-default-window-box-shadow,
-      background-color: $cx-default-window-background-color,
-      border-radius: $cx-default-window-border-radius,
-   ),
-   resizable: (
-      box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.29),
-   ),
-) !default;
-
-$cx-window-header-state-style-map: (
-   default: (
-      color: $cx-default-window-header-color,
-      background: $cx-default-window-header-background-color,
-      padding: $cx-default-window-header-padding,
-      font-size: $cx-default-window-header-font-size,
-   ),
-   active: (),
-) !default;
-
-$cx-window-footer-state-style-map: (
-   default: (
-      background: $cx-default-window-footer-background-color,
-      padding: $cx-default-window-footer-padding,
-   ),
-) !default;
-
-$cx-window-body-state-style-map: (
-   default: (
-      background: $cx-default-window-body-background-color,
-      padding: $cx-default-window-body-padding,
-   ),
-) !default;
-
-$cx-window-mods: (
-   alert: (
-      frame: (),
-      body: (),
-      footer: (),
-   ),
-);

package/build/widgets/overlay/captureMouse.scss

@@ -1,13 +0,0 @@
-
-@if cx-call-once("cx/widgets/captureMouse") {
-
-   .cxb-mousecapture {
-      position: fixed;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      z-index: 1000000;
-   }
-
-}

package/build/widgets/overlay/index.scss

@@ -1,15 +0,0 @@
-
-@import 'captureMouse';
-@import 'Overlay';
-@import 'Dropdown';
-@import 'Window';
-@import 'Tooltip';
-@import 'Toast';
-
-
-
-
-
-
-
-

package/build/widgets/overlay/variables.scss

@@ -1,85 +0,0 @@
-@use "sass:map";
-
-// TOOLTIP
-$cx-tooltip-background-color: white !default;
-$cx-tooltip-border-color: #d5d5d5 !default;
-$cx-tooltip-border-width: 1px !default;
-$cx-tooltip-border-radius: 5px !default;
-$cx-tooltip-arrow-size: 5px !default;
-$cx-tooltip-color: null !default;
-$cx-tooltip-padding: 10px !default;
-
-$cx-tooltip-background-color-error: white !default;
-$cx-tooltip-border-color-error: #e63001 !default;
-$cx-tooltip-color-error: null !default;
-
-// DROPDOWN
-$cx-default-dropdown-color: $cx-default-color !default;
-$cx-default-dropdown-background-color: white !default;
-$cx-default-dropdown-arrow-size: 6px !default;
-$cx-default-dropdown-arrow-offset: 16px !default;
-
-$cx-dropdown-styles: (
-   color: $cx-default-dropdown-color,
-   background-color: $cx-default-dropdown-background-color,
-   border-radius: $cx-default-border-radius,
-   border-color: $cx-default-border-color,
-   border-width: 0,
-   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.29),
-   white-space: normal,
-   font-weight: normal,
-   font-size: $cx-default-font-size,
-   text-align: left,
-   line-height: normal,
-) !default;
-
-// TOAST
-$cx-default-toast-color: $cx-default-color !default;
-$cx-default-toast-background-color: rgb(255, 255, 255) !default;
-$cx-default-toast-border-width: 0 !default;
-$cx-default-toast-border-color: rgba(255, 255, 255, 0) !default;
-$cx-default-toast-box-shadow: 0 0 5px 1px rgba(128, 128, 128, 0.3) !default;
-$cx-default-toast-padding: 10px !default;
-
-$cx-toast-mods: (
-   warning: (
-      default: (
-         color: #fff,
-         background-color: #f09037,
-      ),
-   ),
-   primary: (
-      default: (
-         color: #fff,
-         background-color: #1f99f8,
-      ),
-   ),
-   success: (
-      default: (
-         color: #fff,
-         background-color: #5cb85c,
-      ),
-   ),
-   error: (
-      default: (
-         color: #fff,
-         background-color: #d9534f,
-      ),
-   ),
-) !default;
-
-// WINDOW
-@import "Window.variables";
-
-$cx-dependencies: map.merge(
-   $cx-dependencies,
-   (
-      "cx/widgets/Overlay": "cx/widgets/captureMouse",
-      "cx/widgets/Dropdown": "cx/widgets/Overlay",
-      "cx/widgets/Window": "cx/widgets/Overlay",
-      "cx/widgets/Tooltip": "cx/widgets/Dropdown",
-      "cx/widgets/enableMsgBoxAlerts": "cx/widgets/MsgBox",
-      "cx/widgets/MsgBox": "cx/widgets/Window" "cx/widgets/FlexRow",
-      "cx/widgets/Toast": "cx/widgets/Overlay",
-   )
-);