cx 26.2.1 → 26.2.3

package/src/widgets/overlay/Window.maps.scss

@@ -0,0 +1,51 @@
+@use "../variables" as *;
+
+$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,
+      align-items: center,
+   ),
+   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,
+   ),
+) !default;
+
+$cx-window-mods: (
+   alert: (
+      frame: (
+         min-width: 300px,
+      ),
+      body: (
+         padding: 2.5rem,
+         text-align: center,
+      ),
+      footer: (
+         text-align: center,
+      ),
+   ),
+) !default;

package/src/widgets/overlay/Window.scss

@@ -1,4 +1,14 @@
+@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 *;
+@use "./Overlay.scss" as *;
 
 @mixin cx-window(
    $name: "window",
@@ -15,7 +25,7 @@
    $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
-      @extend %cxb-overlay;
+      @include cxb-overlay($name, $besm);
       display: flex;
       flex-direction: column;
 
@@ -26,17 +36,12 @@
             @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;
 
@@ -67,10 +72,6 @@
          content: " ";
          height: 0;
       }
-
-      .#{$mod}alert & {
-         text-align: center;
-      }
    }
 
    .#{$element}#{$name}-body {
@@ -95,11 +96,6 @@
       &.#{$state}pad {
          padding: $padding;
       }
-
-      .#{$mod}alert & {
-         padding: 2.5rem;
-         text-align: center;
-      }
    }
 
    @each $modname, $config in $mods {
@@ -116,11 +112,15 @@
    }
 
    .#{$element}#{$name}-modal-backdrop {
-      @extend %cxe-overlay-modal-backdrop;
+      @include cxe-overlay-modal-backdrop;
    }
 
    .#{$element}#{$name}-shadow {
-      @extend %cxe-overlay-shadow;
+      @include cxe-overlay-shadow;
+   }
+
+   .#{$element}#{$name}-beacon {
+      @include cxe-overlay-beacon;
    }
 }