cx 26.0.6 → 26.0.8

package/build/widgets/nav/Scroller.scss

@@ -0,0 +1,148 @@
+@use "sass:map";
+
+@mixin cx-scroller(
+   $name: "scroller",
+   $icon-size: $cx-default-icon-size,
+   $button-size: $cx-default-scroller-button-size,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   .#{$block}#{$name} {
+      position: relative;
+      user-select: none;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+
+      &.#{$state}horizontal {
+         white-space: nowrap;
+
+         &.#{$state}horizontal.#{$state}scrollable {
+            padding-left: $button-size;
+            padding-right: $button-size;
+         }
+      }
+
+      &.#{$state}vertical {
+         &.#{$state}scrollable {
+            padding-top: $button-size;
+            padding-bottom: $button-size;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-clip {
+      overflow: hidden;
+      box-sizing: border-box;
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+      flex: 1 1 0%;
+   }
+
+   .#{$element}#{$name}-scroller {
+      box-sizing: border-box;
+
+      .#{$block}#{$name}.#{$state}horizontal > .#{$element}#{$name}-clip > & {
+         overflow-x: auto;
+      }
+
+      .#{$block}#{$name}.#{$state}vertical > .#{$element}#{$name}-clip > & {
+         overflow-y: auto;
+         flex: 1 1 0%;
+      }
+
+      &::-webkit-scrollbar {
+         display: none;
+      }
+   }
+
+   .#{$element}#{$name}-left-arrow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-right-arrow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(-90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-top-arrow {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         transform: rotate(180deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-bottom-arrow {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: $button-size;
+      cursor: pointer;
+      display: none;
+
+      & > .#{$element}#{$name}-icon {
+         //transform: rotate(-90deg);
+      }
+
+      .#{$state}scrollable > & {
+         display: block;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      height: $icon-size;
+      width: $icon-size;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      margin-left: -$icon-size * 0.5;
+      margin-top: -$icon-size * 0.5;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Scroller")) {
+   @include cx-scroller();
+}

package/build/widgets/nav/Tab.scss

@@ -0,0 +1,82 @@
+
+@use "sass:map";
+@import "cover";
+
+@mixin cx-tab(
+   $name: 'tab',
+   $state-style-map: $cx-tab-state-style-map,
+   $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;
+      display: inline-block;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, cursor);
+      }
+
+      &.#{$state}active {
+         @include cx-add-state-rules($state-style-map, selected);
+
+         &:focus {
+            @include cx-add-state-rules($state-style-map, selected-cursor);
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      @each $name, $config in $cx-tab-mods {
+         &.#{$mod}#{$name} {
+            @include cx-add-state-rules($config, default);
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, cursor);
+            }
+
+            &.#{$state}active {
+               @include cx-add-state-rules($config, selected);
+
+               &:focus {
+                  @include cx-add-state-rules($config, selected-cursor);
+               }
+            }
+
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+         }
+      }
+
+      &.#{$mod}classic.#{$state}active:after {
+         content: ' ';
+         position: absolute;
+         top: 100%;
+         left: 0;
+         right: 0;
+         height: 2px;
+         background: inherit;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Tab')) {
+   @include cx-tab();
+}

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

@@ -0,0 +1,84 @@
+$cx-default-tab-color: inherit !default;
+$cx-default-tab-font-size: null !default;
+$cx-default-tab-font-weight: inherit !default;
+$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-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/build/widgets/nav/cover.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+
+@mixin cx-cover(
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$mod}cover {
+      background-color: $cx-default-cover-background-color;
+      border-color: $cx-default-cover-border-color;
+      border-style: solid;
+      fill: $cx-default-cover-background-color;
+      stroke: $cx-default-cover-border-color;
+   }
+}
+
+@if (cx-should-include('cx/widgets/cover')) {  // check path
+   @include cx-cover();
+}

package/build/widgets/nav/index.scss

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

package/build/widgets/nav/variables.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+
+// COVER
+$cx-default-cover-border-color: $cx-default-border-color !default;
+$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";
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/HScroller": "cx/widgets/Scroller",
+      "cx/widgets/VScroller": "cx/widgets/Scroller",
+   )
+);

package/build/widgets/overlay/Dropdown.scss

@@ -0,0 +1,186 @@
+@use "sass:map";
+
+@mixin cx-dropdown-arrows(
+   $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);
+
+   $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: $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: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         right: 100%;
+         top: 50%;
+         border-right-color: currentColor;
+         margin-top: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$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: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 100%;
+         top: 50%;
+         border-left-color: currentColor;
+         margin-top: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$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-default-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: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         top: 100%;
+         border-top-color: currentColor;
+         margin-left: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$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: -$arrow-size;
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: 50%;
+         bottom: 100%;
+         border-bottom-color: currentColor;
+         margin-left: cx-calc(-$border-width, -$arrow-size);
+      }
+   }
+
+   .#{$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-default-dropdown-arrow-offset);
+      }
+
+      & > .#{$element}#{$name}-arrow-border {
+         left: cx-calc(100%, -$cx-default-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} {
+      @extend %cxb-overlay;
+      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-container-padding;
+      }
+   }
+
+   .#{$element}#{$name}-beacon {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      visibility: hidden;
+   }
+
+   @include cx-dropdown-arrows($name, $styles, $arrow-size, $besm);
+}
+
+@if (cx-should-include("cx/widgets/Dropdown")) {
+   @include cx-dropdown();
+}

package/build/widgets/overlay/Overlay.scss

@@ -0,0 +1,68 @@
+@use "sass:map";
+
+@mixin cx-overlay($name: "overlay", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+
+   %cxb-overlay {
+      left: calc(50% - 250px); //guess
+      top: calc(50% - 100px); //guess
+      min-width: 10px;
+      min-height: 10px;
+      position: fixed;
+      overflow: visible;
+      box-sizing: border-box;
+
+      &.#{$state}draggable {
+         cursor: pointer;
+         touch-action: none;
+      }
+
+      &.#{$state}shadow {
+         position: absolute;
+      }
+
+      &:focus {
+         outline: none;
+      }
+   }
+
+   %cxe-overlay-modal-backdrop {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100vh;
+   }
+
+   %cxe-overlay-shadow {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(128, 128, 128, 0.3);
+      overflow: auto;
+   }
+
+   .#{$block}#{$name} {
+      @extend %cxb-overlay;
+
+      &.#{$state}pad {
+         padding: $cx-default-container-padding;
+      }
+   }
+
+   .#{$element}#{$name}-modal-backdrop {
+      @extend %cxe-overlay-modal-backdrop;
+   }
+
+   .#{$element}#{$name}-shadow {
+      @extend %cxe-overlay-shadow;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Overlay")) {
+   @include cx-overlay();
+}