cx 26.0.9 → 26.0.11

package/build/widgets/nav/Scroller.scss

@@ -1,148 +0,0 @@
-@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

@@ -1,82 +0,0 @@
-
-@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

@@ -1,84 +0,0 @@
-$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

@@ -1,22 +0,0 @@
-@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

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

package/build/widgets/nav/variables.scss

@@ -1,27 +0,0 @@
-@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

@@ -1,186 +0,0 @@
-@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

@@ -1,68 +0,0 @@
-@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();
-}