cx 26.4.0 → 26.4.2

package/src/widgets/overlay/Dropdown.scss

@@ -1,217 +1,218 @@
-@use "sass:math";
-@use "sass:map";
-@use "../variables" as *;
-@use "../maps" as *;
-@use "../../util/scss/add-rules.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/besm.scss" as *;
-@use "../../util/scss/include.scss" as *;
-@use "./Overlay.scss" as *;
-
-@mixin cx-dropdown-arrow-shadow($name, $element, $shadow-color, $shadow-size, $dx, $dy) {
-   @if ($shadow-color) {
-      & > .#{$element}#{$name}-arrow-border {
-         filter: drop-shadow(#{$dx} #{$dy} #{$shadow-size} $shadow-color);
-      }
-   }
-}
-
-@mixin cx-dropdown-arrows(
-   $name: "dropdown",
-   $styles: $cx-dropdown-styles,
-   $arrow-size: $cx-default-dropdown-arrow-size,
-   $arrow-shadow-color: $cx-default-dropdown-arrow-shadow-color,
-   $arrow-shadow-size: $cx-default-dropdown-arrow-shadow-size,
-   $arrow-shadow-offset: $cx-default-dropdown-arrow-shadow-offset,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   $border-width: map.get($styles, border-width);
-
-   .#{$element}#{$name}-arrow-border,
-   .#{$element}#{$name}-arrow-fill {
-      border-style: solid;
-      border-color: transparent;
-      content: " ";
-      height: 0;
-      width: 0;
-      position: absolute;
-      pointer-events: none;
-   }
-
-   .#{$element}#{$name}-arrow-border {
-      color: map.get($styles, border-color);
-      border-width: cx-calc($border-width, $arrow-size);
-   }
-
-   .#{$element}#{$name}-arrow-fill {
-      color: map.get($styles, background-color);
-      border-width: $arrow-size;
-   }
-
-   .#{$state}place-right,
-   .#{$state}place-right-up,
-   .#{$state}place-right-down {
-      & > .#{$element}#{$name}-arrow-fill {
-         right: 100%;
-         top: 50%;
-         border-right-color: currentColor;
-         margin-top: cx-multiply($arrow-size, -1);
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         right: 100%;
-         top: 50%;
-         border-right-color: currentColor;
-         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
-      }
-
-      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, cx-multiply($arrow-shadow-offset, -1), 0);
-   }
-
-   .#{$state}place-left,
-   .#{$state}place-left-down,
-   .#{$state}place-left-up {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 100%;
-         top: 50%;
-         border-left-color: currentColor;
-         margin-top: cx-multiply($arrow-size, -1);
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 100%;
-         top: 50%;
-         border-left-color: currentColor;
-         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
-      }
-
-      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, $arrow-shadow-offset, 0);
-   }
-
-   .#{$state}place-right-down,
-   .#{$state}place-left-down {
-      & > .#{$element}#{$name}-arrow-fill {
-         top: $cx-default-dropdown-arrow-offset;
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         top: $cx-default-dropdown-arrow-offset;
-      }
-   }
-
-   .#{$state}place-right-up,
-   .#{$state}place-left-up {
-      & > .#{$element}#{$name}-arrow-fill,
-      & > .#{$element}#{$name}-arrow-border {
-         top: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
-      }
-   }
-
-   .#{$state}place-up,
-   .#{$state}place-up-left,
-   .#{$state}place-up-right {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 50%;
-         top: 100%;
-         border-top-color: currentColor;
-         margin-left: cx-multiply($arrow-size, -1);
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 50%;
-         top: 100%;
-         border-top-color: currentColor;
-         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
-      }
-
-      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, $arrow-shadow-offset);
-   }
-
-   .#{$state}place-down,
-   .#{$state}place-down-left,
-   .#{$state}place-down-right {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: 50%;
-         bottom: 100%;
-         border-bottom-color: currentColor;
-         margin-left: cx-multiply($arrow-size, -1);
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: 50%;
-         bottom: 100%;
-         border-bottom-color: currentColor;
-         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
-      }
-
-      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, cx-multiply($arrow-shadow-offset, -1));
-   }
-
-   .#{$state}place-down-right,
-   .#{$state}place-up-right {
-      & > .#{$element}#{$name}-arrow-fill,
-      & > .#{$element}#{$name}-arrow-border {
-         left: $cx-default-dropdown-arrow-offset;
-      }
-   }
-
-   .#{$state}place-down-left,
-   .#{$state}place-up-left {
-      & > .#{$element}#{$name}-arrow-fill {
-         left: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
-      }
-
-      & > .#{$element}#{$name}-arrow-border {
-         left: cx-calc(100%, cx-multiply($cx-default-dropdown-arrow-offset, -1));
-      }
-   }
-}
-
-@mixin cx-dropdown(
-   $name: "dropdown",
-   $styles: $cx-dropdown-styles,
-   $arrow-size: $cx-default-dropdown-arrow-size,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-overlay($name, $besm);
-      display: block;
-      left: -10000px;
-      top: -10000px;
-
-      @include cx-add-rules($styles);
-
-      &.#{$state}place-screen-center {
-         box-shadow:
-            0 0 10px 1px rgba(0, 0, 0, 0.29),
-            0 0 1000px 1000px rgba(128, 128, 128, 0.3);
-      }
-
-      &.#{$state}pad {
-         padding: $cx-default-dropdown-padding;
-      }
-   }
-
-   .#{$element}#{$name}-beacon {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      visibility: hidden;
-   }
-
-   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm: $besm);
-
-}
-
-@if (cx-should-include("cx/widgets/Dropdown")) {
-   @include cx-dropdown();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Overlay.scss" as *;
+
+@mixin cx-dropdown-arrow-shadow($name, $element, $shadow-color, $shadow-size, $dx, $dy) {
+   @if ($shadow-color) {
+      & > .#{$element}#{$name}-arrow-border {
+         filter: drop-shadow(#{$dx} #{$dy} #{$shadow-size} $shadow-color);
+      }
+   }
+}
+
+@mixin cx-dropdown-arrows(
+   $name: "dropdown",
+   $styles: $cx-dropdown-styles,
+   $arrow-size: $cx-default-dropdown-arrow-size,
+   $arrow-shadow-color: $cx-default-dropdown-arrow-shadow-color,
+   $arrow-shadow-size: $cx-default-dropdown-arrow-shadow-size,
+   $arrow-shadow-offset: $cx-default-dropdown-arrow-shadow-offset,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   $border-width: map.get($styles, border-width);
+
+   .#{$element}#{$name}-arrow-border,
+   .#{$element}#{$name}-arrow-fill {
+      border-style: solid;
+      border-color: transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+   }
+
+   .#{$element}#{$name}-arrow-border {
+      color: map.get($styles, border-color);
+      border-width: cx-calc($border-width, $arrow-size);
+   }
+
+   .#{$element}#{$name}-arrow-fill {
+      color: map.get($styles, background-color);
+      border-width: $arrow-size;
+   }
+
+   .#{$state}place-right,
+   .#{$state}place-right-up,
+   .#{$state}place-right-down {
+      & > .#{$element}#{$name}-arrow-fill {
+         right: 100%;
+         top: 50%;
+         border-right-color: currentColor;
+         margin-top: cx-multiply($arrow-size, -1);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         right: 100%;
+         top: 50%;
+         border-right-color: currentColor;
+         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
+      }
+
+      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, cx-multiply($arrow-shadow-offset, -1), 0);
+   }
+
+   .#{$state}place-left,
+   .#{$state}place-left-down,
+   .#{$state}place-left-up {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 100%;
+         top: 50%;
+         border-left-color: currentColor;
+         margin-top: cx-multiply($arrow-size, -1);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 100%;
+         top: 50%;
+         border-left-color: currentColor;
+         margin-top: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
+      }
+
+      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, $arrow-shadow-offset, 0);
+   }
+
+   .#{$state}place-right-down,
+   .#{$state}place-left-down {
+      & > .#{$element}#{$name}-arrow-fill {
+         top: var(--cx-scss-dropdown-arrow-offset);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         top: var(--cx-scss-dropdown-arrow-offset);
+      }
+   }
+
+   .#{$state}place-right-up,
+   .#{$state}place-left-up {
+      & > .#{$element}#{$name}-arrow-fill,
+      & > .#{$element}#{$name}-arrow-border {
+         top: calc(100% - var(--cx-scss-dropdown-arrow-offset));
+      }
+   }
+
+   .#{$state}place-up,
+   .#{$state}place-up-left,
+   .#{$state}place-up-right {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 50%;
+         top: 100%;
+         border-top-color: currentColor;
+         margin-left: cx-multiply($arrow-size, -1);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         top: 100%;
+         border-top-color: currentColor;
+         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
+      }
+
+      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, $arrow-shadow-offset);
+   }
+
+   .#{$state}place-down,
+   .#{$state}place-down-left,
+   .#{$state}place-down-right {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: 50%;
+         bottom: 100%;
+         border-bottom-color: currentColor;
+         margin-left: cx-multiply($arrow-size, -1);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         bottom: 100%;
+         border-bottom-color: currentColor;
+         margin-left: cx-calc(cx-multiply($border-width, -1), cx-multiply($arrow-size, -1));
+      }
+
+      @include cx-dropdown-arrow-shadow($name, $element, $arrow-shadow-color, $arrow-shadow-size, 0, cx-multiply($arrow-shadow-offset, -1));
+   }
+
+   .#{$state}place-down-right,
+   .#{$state}place-up-right {
+      & > .#{$element}#{$name}-arrow-fill,
+      & > .#{$element}#{$name}-arrow-border {
+         left: var(--cx-scss-dropdown-arrow-offset);
+      }
+   }
+
+   .#{$state}place-down-left,
+   .#{$state}place-up-left {
+      & > .#{$element}#{$name}-arrow-fill {
+         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: calc(100% - var(--cx-scss-dropdown-arrow-offset));
+      }
+   }
+}
+
+@mixin cx-dropdown(
+   $name: "dropdown",
+   $styles: $cx-dropdown-styles,
+   $arrow-size: $cx-default-dropdown-arrow-size,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-overlay($name, $besm);
+      display: block;
+      left: -10000px;
+      top: -10000px;
+      --cx-scss-dropdown-arrow-offset: var(--cx-js-dropdown-arrow-offset, #{$cx-default-dropdown-arrow-offset});
+
+      @include cx-add-rules($styles);
+
+      &.#{$state}place-screen-center {
+         box-shadow:
+            0 0 10px 1px rgba(0, 0, 0, 0.29),
+            0 0 1000px 1000px rgba(128, 128, 128, 0.3);
+      }
+
+      &.#{$state}pad {
+         padding: $cx-default-dropdown-padding;
+      }
+   }
+
+   .#{$element}#{$name}-beacon {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      visibility: hidden;
+   }
+
+   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm: $besm);
+
+}
+
+@if (cx-should-include("cx/widgets/Dropdown")) {
+   @include cx-dropdown();
+}