cx 26.0.6 → 26.0.9

package/build/variables.scss

@@ -0,0 +1,217 @@
+// FUNCTIONS
+@import "util/scss/index";
+
+// SCREEN SIZE
+$cx-screen-size-small: 400px !default;
+$cx-screen-size-medium: 800px !default;
+$cx-screen-size-large: 1300px !default;
+$cx-screen-size-extra-large: 1800px !default;
+
+//
+// BESM
+//
+// B - block - top level HTML element
+// E - element - part of the component (block)
+// S - state - indicator of the component state which affects the appearance
+// M - mod - user supplied instruction which overrides default appearance
+//
+
+$cx-besm: (
+   block: "cxb-",
+   element: "cxe-",
+   state: "cxs-",
+   mod: "cxm-"
+) !default;
+
+//
+// Boxes
+// -----
+//
+// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
+// These elements should have the same height in order to avoid problems when put together in a toolbar
+// or a complex form.
+//
+// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
+//
+// For elements which do not have a natural border, such as checkboxes, radios and buttons,
+// border-color should be set to transparent.
+//
+//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
+//
+// Some browsers do not respect the line-height being set and therefore explicit height value is
+// calculated and set on all box elements.
+//
+// Hint: Use em units to make the box height grow with the font-size, but note that the elements
+//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
+//
+
+$cx-default-box-font-size: 13px !default;
+$cx-default-box-font-family: inherit !default;
+$cx-default-box-line-height: 16px !default;
+$cx-default-box-padding: 5px !default; //should not be a list
+$cx-default-box-border-width: 1px !default;
+
+// Borders
+// -------
+
+$cx-default-border-color: #bfbfbf !default;
+$cx-default-border-radius: 0 !default;
+$cx-default-border-width: 1px !default;
+
+// Padding
+// -------
+
+$cx-default-container-padding: 5px !default;
+
+// Empty Texts
+// ------------
+//
+// Displayed instead of whitespace
+
+$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
+
+$cx-empty-text: (
+   color: $cx-default-empty-text-color
+) !default;
+
+//Icons
+$cx-default-icon-size: 16px !default;
+
+//Selection
+$cx-selection-background-color: rgba(135, 206, 250, 0.6);
+
+//List
+$cx-default-list-item-padding: 5px 10px !default;
+
+//Lists
+$cx-list: (
+   default: (
+      -webkit-overflow-scrolling: touch
+   ),
+   hover: (),
+   focus: (
+      outline: none
+   )
+);
+
+$cx-list-item: (
+   default: (),
+   hover: (
+      background-color: rgba(128, 128, 128, 0.1),
+      outline: none,
+      cursor: pointer
+   ),
+   cursor: (
+      background-color: rgba(123, 190, 255, 0.15),
+      outline: none
+   ),
+   selected: (
+      background-color: rgba(123, 190, 255, 0.4)
+   ),
+   selected-hover: (
+      background-color: rgba(123, 190, 255, 0.2)
+   ),
+   selected-cursor: (
+      background-color: rgba(123, 190, 255, 0.3),
+      outline: none
+   ),
+   disabled: (
+      cursor: default,
+      opacity: 0.5,
+      pointer-events: none
+   ),
+   active: (
+      //causes flickering
+         //background: rgba(123,190,255, 0.7)
+   )
+) !default;
+
+$cx-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+   "Helvetica Neue", Arial, sans-serif !default;
+
+$cx-default-font-size: 14px !default;
+$cx-default-color: #373a3c !default;
+
+$cx-element-style-map: (
+   html: (
+      font-family: $cx-default-font-family,
+      font-size: $cx-default-font-size,
+      height: 100%,
+      background-color: #eee
+   ),
+   body: (
+      margin: 0,
+      padding: 0,
+      height: 100%,
+      color: $cx-default-color
+   ),
+   h1: (
+      font-size: 2rem,
+      line-height: 1.1,
+      margin: 0 0 0.75rem 0,
+      font-weight: 500
+   ),
+   h2: (
+      font-size: 1.75rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h3: (
+      font-size: 1.5rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h4: (
+      font-size: 1.3rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h5: (
+      font-size: 1.15rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h6: (
+      font-size: 1rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   p: (
+      margin: 0 0 1rem 0
+   ),
+   a: (
+      text-decoration: none,
+      color: #0275d8
+   ),
+   "a:hover": (
+      text-decoration: underline
+   ),
+   ul: (
+      margin: 0 0 1rem 0
+   ),
+   ol: (
+      margin: 0 0 1rem 0
+   ),
+   th: (
+      font-weight: 500
+   ),
+   text: (
+      fill: currentColor,
+      stroke: none
+   ),
+   table: (
+      font-size: inherit
+   )
+) !default;
+
+$cx-default-cover-border-color: $cx-default-border-color !default;
+$cx-default-cover-background-color: white !default;
+
+@import "charts/variables";
+@import "ui/variables";
+@import "widgets/variables";

package/build/widgets/Button.scss

@@ -0,0 +1,119 @@
+@use "sass:map";
+
+@mixin cx-button(
+   $name: "button",
+   $state-style-map: $cx-button-state-style-map,
+   $mods: $cx-button-mods,
+   $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} {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-block;
+
+      $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
+      $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
+      $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
+
+      height: cx-calc(
+         $line-height,
+         cx-top($padding),
+         cx-bottom($padding),
+         cx-top($border-width),
+         cx-bottom($border-width)
+      );
+
+      @include cx-add-state-rules($state-style-map, "default");
+
+      &::-moz-focus-inner {
+         border: 0;
+         padding: 0;
+         margin: -1px;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, "hover");
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, "focus");
+      }
+
+      &:hover:focus {
+         @include cx-add-state-rules($state-style-map, "hover-focus");
+      }
+
+      &:active,
+      &.#{$state}pressed {
+         @include cx-add-state-rules($state-style-map, "active");
+      }
+
+      &[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);
+
+            &[disabled],
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, focus);
+            }
+
+            &:active,
+            &.#{$state}pressed {
+               @include cx-add-state-rules($config, active);
+            }
+         }
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, padding);
+
+   .#{$element}#{$name}-icon {
+      display: inline-block;
+      position: absolute;
+      top: 50%;
+      left: cx-left($padding) * 0.5;
+      margin-top: -$icon-size * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      width: 1px;
+      margin-left: -1px;
+   }
+
+   .#{$block}#{$name}.#{$state}icon {
+      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
+
+      &.#{$state}empty {
+         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
+            cx-calc(cx-left($padding) * 0.5, $icon-size);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Button")) {
+   @include cx-button;
+}

package/build/widgets/Button.variables.scss

@@ -0,0 +1,117 @@
+@use "sass:color";
+@use "sass:map";
+
+$cx-default-button-font-family: $cx-default-box-font-family !default;
+$cx-default-button-font-size: $cx-default-box-font-size !default;
+$cx-default-button-font-weight: normal !default;
+$cx-default-button-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-button-border-width: $cx-default-box-border-width !default;
+$cx-default-button-line-height: $cx-default-box-line-height !default;
+$cx-default-button-background-color: #eee !default;
+$cx-default-button-border-color: #ccc !default;
+$cx-default-button-border-radius: $cx-default-border-radius !default;
+$cx-default-button-color: null !default;
+$cx-default-button-box-shadow: inset 0 -2px rgba(128, 128, 128, 0.1) !default;
+
+$cx-button-state-style-map: (
+   default: (
+      background-color: $cx-default-button-background-color,
+      box-shadow: $cx-default-button-box-shadow,
+      border-color: $cx-default-button-border-color,
+      border-width: $cx-default-button-border-width,
+      border-radius: $cx-default-button-border-radius,
+      border-style: solid,
+      user-select: none,
+      color: $cx-default-button-color,
+      font-family: $cx-default-button-font-family,
+      font-size: $cx-default-button-font-size,
+      font-weight: $cx-default-button-font-weight,
+      line-height: $cx-default-button-line-height,
+      padding: $cx-default-button-padding,
+      cursor: pointer,
+      -webkit-appearance: none,
+      -moz-appearance: none,
+      appearance: none,
+      white-space: nowrap,
+      text-decoration: none,
+   ),
+   hover: (
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
+      text-decoration: none,
+   ),
+   focus: (
+      outline: none,
+      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
+   ),
+   hover-focus: (),
+   disabled: (
+      color: gray,
+      box-shadow: none,
+      pointer-events: none,
+   ),
+   active: (
+      top: 1px,
+      box-shadow: none,
+   ),
+) !default;
+
+$cx-button-mods: (
+   primary: (
+      default: (
+         background-color: #1f99f8,
+         border-color: #1e88e5,
+         color: white,
+      ),
+      disabled: (
+         background-color: color.adjust(#1f99f8, $alpha: -0.5),
+         border-color: color.adjust(#1e88e5, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.4),
+      ),
+      hover: (
+         background-color: #1f99f8,
+      ),
+   ),
+   danger: (
+      default: (
+         background-color: #d32f2f,
+         border-color: #c62828,
+         color: white,
+      ),
+      disabled: (
+         background-color: color.adjust(#d32f2f, $alpha: -0.4),
+         border-color: color.adjust(#c62828, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.5),
+      ),
+      hover: (
+         background-color: #d32f2f,
+      ),
+   ),
+   hollow: (
+      default: (
+         background-color: transparent,
+         border-color: transparent,
+         color: inherit,
+         box-shadow: none,
+      ),
+      hover:
+         map.merge(
+            map.get($cx-list-item, hover),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      focus:
+         map.merge(
+            map.get($cx-list-item, selected-cursor),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      disabled: (
+         color: rgba(128, 128, 128, 0.5),
+      ),
+   ),
+) !default;

package/build/widgets/CxCredit.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+
+@mixin cx-cxcredit($name: "cxcredit", $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: 50px;
+      height: 50px;
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+      background: rgba(255, 255, 255, 0.1);
+      cursor: pointer;
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+
+      &:hover {
+         opacity: 1;
+      }
+
+      &.#{$mod}inline {
+         position: relative;
+         bottom: auto;
+         right: auto;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      width: 100%;
+      height: 100%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/CxCredit")) {
+   @include cx-cxcredit();
+}

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();
+}