cx 26.0.5 → 26.0.8

package/build/widgets/FlexBox.scss

@@ -0,0 +1,148 @@
+@use "sass:map";
+
+@mixin cx-flexbox-spacing($divider, $besm: $cx-besm) {
+   $state: map.get($besm, state);
+   @each $pad, $size in $cx-pad-size {
+      &.#{$state}#{$pad}-hspacing {
+         margin-left: cx-divide(-$size, $divider);
+         margin-right: cx-divide(-$size, $divider);
+
+         & > * {
+            margin-left: cx-divide($size, $divider);
+            margin-right: cx-divide($size, $divider);
+         }
+      }
+
+      &.#{$state}#{$pad}-vspacing {
+         margin-top: cx-divide(-$size, $divider);
+         margin-bottom: cx-divide(-$size, $divider);
+
+         & > * {
+            margin-top: cx-divide($size, $divider);
+            margin-bottom: cx-divide($size, $divider);
+         }
+      }
+   }
+}
+
+@mixin cx-flexbox($name: "flexbox", $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;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      &.#{$state}nested {
+         overflow: hidden;
+
+         & > div {
+            overflow: auto;
+         }
+      }
+
+      @each $pad, $size in $cx-pad-size {
+         &.#{$state}#{$pad}-hpad {
+            padding-left: $size;
+            padding-right: $size;
+         }
+
+         &.#{$state}#{$pad}-vpad {
+            padding-top: $size;
+            padding-bottom: $size;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-flexbox {
+      display: flex;
+      flex: 1 1 auto;
+
+      &.#{$state}column {
+         flex-direction: column;
+      }
+
+      &.#{$state}row {
+         flex-direction: row;
+      }
+
+      &.#{$state}row-reverse {
+         flex-direction: row-reverse;
+      }
+
+      @include cx-flexbox-spacing(2, $besm);
+
+      &.#{$state}align-center {
+         align-items: center;
+      }
+
+      &.#{$state}align-start {
+         align-items: flex-start;
+      }
+
+      &.#{$state}align-end {
+         align-items: flex-end;
+      }
+
+      &.#{$state}align-baseline {
+         align-items: baseline;
+      }
+
+      &.#{$state}wrap {
+         flex-wrap: wrap;
+      }
+
+      &.#{$state}justify-center {
+         justify-content: center;
+      }
+
+      &.#{$state}justify-start {
+         justify-content: flex-start;
+      }
+
+      &.#{$state}justify-end {
+         justify-content: flex-end;
+      }
+
+      &.#{$state}justify-space-between {
+         justify-content: space-between;
+      }
+
+      &.#{$state}justify-space-around {
+         justify-content: space-around;
+      }
+
+      &.#{$state}justify-space-evenly {
+         justify-content: space-evenly;
+      }
+
+      &.#{$state}target-phone {
+         @media not screen and (min-width: $cx-screen-size-small) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+
+      &.#{$state}target-tablet {
+         @media not screen and (min-width: $cx-screen-size-medium) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+
+      &.#{$state}target-desktop {
+         @media not screen and (min-width: $cx-screen-size-large) {
+            display: block;
+            @include cx-flexbox-spacing(1, $besm);
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/FlexBox")) {
+   @include cx-flexbox();
+}

package/build/widgets/Heading.scss

@@ -0,0 +1,40 @@
+@use "sass:map";
+
+@mixin cxb-heading($name: "heading", $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} {
+      @include cx-add-rules($cx-caption-style-map);
+
+      &.#{$state}level-1 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 1);
+      }
+
+      &.#{$state}level-2 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 2);
+      }
+
+      &.#{$state}level-3 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 3);
+      }
+
+      &.#{$state}level-4 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 4);
+      }
+
+      &.#{$state}level-5 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 5);
+      }
+
+      &.#{$state}level-6 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 6);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Heading")) {
+   @include cxb-heading();
+}

package/build/widgets/HighlightedSearchText.scss

@@ -0,0 +1,20 @@
+@use "sass:map";
+
+@mixin cxb-highlightedsearchtext(
+   $name: "highlightedsearchtext",
+   $styles: $cx-highlightedsearchtext-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} {
+      @include cx-add-rules($styles);
+   }
+}
+
+@if (cx-should-include("cx/widgets/HighlightedSearchText")) {
+   @include cxb-highlightedsearchtext();
+}

package/build/widgets/Icon.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+
+@mixin cx-icon($name: "icon", $size: $cx-default-icon-size, $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} {
+      width: $size;
+      height: $size;
+      font-size: $size;
+      line-height: 1;
+      text-align: center;
+      vertical-align: middle;
+      display: inline-block;
+   }
+}
+
+@if (cx-should-include("cx/widgets/Icon")) {
+   @include cx-icon();
+}

package/build/widgets/List.scss

@@ -0,0 +1,93 @@
+@use "sass:map";
+
+@mixin cx-list($name: "list", $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} {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
+      border: 0 solid $cx-default-border-color;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:hover {
+         @include cx-add-state-rules($cx-list, hover);
+      }
+
+      &.#{$state}focused {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+
+      &.#{$mod}bordered {
+         border-width: 1px;
+
+         & > .#{$element}#{$name}-item:not(:first-child) {
+            border-top-width: 1px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-item {
+      margin: 0;
+      border: 0 solid $cx-default-border-color;
+
+      @include cx-add-state-rules($cx-list-item, default);
+
+      &.#{$state}pad {
+         padding: $cx-default-list-item-padding;
+      }
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($cx-list-item, hover);
+      }
+
+      &.#{$state}cursor {
+         @include cx-add-state-rules($cx-list-item, hover);
+
+         .#{$block}#{$name}.#{$state}focused > &,
+         .#{$block}#{$name}:focus > & {
+            @include cx-add-state-rules($cx-list-item, cursor);
+
+            &:active {
+               @include cx-add-state-rules($cx-list-item, active);
+            }
+         }
+      }
+
+      &.#{$state}selected {
+         @include cx-add-state-rules($cx-list-item, selected);
+
+         &.#{$state}cursor {
+            @include cx-add-state-rules($cx-list-item, selected-hover);
+
+            .#{$block}#{$name}.#{$state}focused > &,
+            .#{$block}#{$name}:focus > & {
+               @include cx-add-state-rules($cx-list-item, selected-cursor);
+            }
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+   }
+
+   .#{$element}#{$name}-empty-text {
+      padding: $cx-default-list-item-padding;
+      color: $cx-default-empty-text-color;
+   }
+}
+
+@if (cx-should-include("cx/widgets/List")) {
+   @include cx-list();
+}

package/build/widgets/ProgressBar.scss

@@ -0,0 +1,51 @@
+@use "sass:map";
+
+@mixin cx-progressbar(
+   $name: 'progressbar',
+   $state-style-map: $cx-progressbar-state-style-map,
+   $mods: $cx-progressbar-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} {
+      box-sizing: border-box;
+
+      @include cx-add-state-rules($state-style-map, default);
+        
+      &[disabled], &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }      
+   }
+
+   .#{$element}#{$name}-indicator {
+      background-color: $cx-default-progressbar-indicator-background-color;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+   }
+
+   .#{$element}#{$name}-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      line-height: $cx-default-progressbar-height - cx-top($cx-default-progressbar-border-width) - cx-bottom($cx-default-progressbar-border-width);
+      width: 100%;
+      text-align: center;
+   }
+}
+
+@if (cx-should-include('cx/widgets/ProgressBar')) {
+   @include cx-progressbar();
+}

package/build/widgets/Resizer.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+@mixin cx-resizer(
+   $name: 'resizer',
+   $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} {
+      position: relative;
+      flex-shrink: 0;
+
+      &.#{$state}vertical {
+         width: 5px;
+         cursor: col-resize;
+      }
+
+
+      &.#{$state}horizontal {
+         height: 5px;
+         cursor: row-resize;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+
+      &.#{$state}dragged {
+         background: rgba(gray, 0.5);
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Resizer')) {
+   @include cx-resizer();
+}

package/build/widgets/Section.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+
+@mixin cx-section(
+   $name: 'section',
+   $mods: $cx-section-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} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }
+      
+   }
+
+   .#{$element}#{$name}-header {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         padding: 1rem 1.5rem;
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-top: 1px solid rgba(128, 128, 128, 0.3);
+   }
+}
+
+@if (cx-should-include('cx/widgets/Section')) {
+   @include cx-section();
+}

package/build/widgets/animations.scss

@@ -0,0 +1,11 @@
+@if cx-call-once('cx/widgets/animations') {
+   @keyframes cx-rotate {
+      from {
+         transform: rotate(0);
+      }
+
+      to {
+         transform: rotate(360deg);
+      }
+   }
+}

package/build/widgets/drag-drop/DragClone.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+@mixin cx-dragclone(
+   $name: 'dragclone',
+   $style: $cx-dragclone-style,
+   $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} {
+
+      @include cx-add-rules($style);
+
+      pointer-events: none;
+      background: $cx-default-dragclone-background-color;
+      min-width: 10px;
+      min-height: 10px;
+      position: fixed;
+      opacity: 0.9;
+      box-shadow: $cx-default-dragclone-box-shadow;
+      display: flex;
+
+      & > * {
+         margin: 0 !important;
+         display: block;
+         flex: auto;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragClone')) {
+   @include cx-dragclone();
+}

package/build/widgets/drag-drop/DragHandle.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+
+@mixin cx-draghandle(
+   $name: 'draghandle',
+   $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} {
+      touch-action: none;
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragHandle')) {
+   @include cx-draghandle();
+}

package/build/widgets/drag-drop/DragSource.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+
+@mixin cx-dragsource(
+   $name: 'dragsource',
+   $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;
+
+      &.#{$state}dragged {
+         opacity: 0.3;
+      }
+
+      &.#{$state}draggable {
+         touch-action: none;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DragSource')) {
+   @include cx-dragsource();
+}

package/build/widgets/drag-drop/DropZone.scss

@@ -0,0 +1,77 @@
+@use "sass:map";
+
+@mixin cx-dropzone(
+   $name: 'dropzone',
+   $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;
+      position: relative;
+
+      &.#{$mod}hline {
+         height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}vline {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         display: inline-block;
+         vertical-align: middle;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}block {
+         height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            height: 25px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+
+      &.#{$mod}inline-block {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         position: relative;
+         display: inline-block;
+         vertical-align: top;
+         align-self: stretch;
+
+         &:after {
+            content: ' ';
+         }
+
+         &.#{$state}over {
+            width: 50px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/DropZone')) {
+   @include cx-dropzone();
+}

package/build/widgets/drag-drop/index.scss

@@ -0,0 +1,4 @@
+@import "DragSource";
+@import "DropZone";
+@import "DragHandle";
+@import "DragClone";

package/build/widgets/drag-drop/variables.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+
+$cx-default-dragclone-background-color: rgba(white, 0.9) !default;
+$cx-default-dragclone-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+$cx-dragclone-style: (
+   background-color: $cx-default-dragclone-background-color,
+   box-shadow: $cx-default-dragclone-box-shadow,
+   opacity: 0.9
+) !default;
+
+$cx-dependencies: map.merge($cx-dependencies, (
+   'cx/widgets/DragSource': 'cx/widgets/DragClone'
+))