cx 26.0.5 → 26.0.8

package/build/util/scss/call-once.scss

@@ -0,0 +1,13 @@
+@use "sass:map";
+
+$cx-call-once-data: () !default;
+
+@function cx-call-once($name) {
+   $result: map.get($cx-call-once-data, $name);
+   $cx-call-once-data: map.merge($cx-call-once-data, ($name: true)) !global;
+   @return $result != true;
+}
+
+@function cx-called-once($name) {
+   @return map.get($cx-call-once-data, $name);
+}

package/build/util/scss/clockwise.scss

@@ -0,0 +1,49 @@
+@use "sass:list";
+
+@function cx-top($list) {
+   @if (list.length($list) > 0) {
+      @return list.nth($list, 1);
+   }
+   @return null;
+}
+
+@function cx-right($list) {
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
+   }
+   @if (list.length($list) > 1) {
+      @return list.nth($list, 2);
+   }
+   @return null;
+}
+
+@function cx-bottom($list) {
+   @if (list.length($list) > 2) {
+      @return list.nth($list, 3);
+   }
+
+   @if (list.length($list) >= 1) {
+      @return list.nth($list, 1);
+   }
+
+   @return null;
+}
+
+@function cx-left($list) {
+   @if (list.length($list) == 1) {
+      @return list.nth($list, 1);
+   }
+
+   @if (list.length($list) == 2) {
+      @return list.nth($list, 2);
+   }
+
+   @if (list.length($list) == 3) {
+      @return list.nth($list, 2);
+   }
+
+   @if (list.length($list) == 4) {
+      @return list.nth($list, 4);
+   }
+   @return null;
+}

package/build/util/scss/colors.scss

@@ -0,0 +1,10 @@
+
+@use "sass:color";
+
+@function cx-whiten($color, $percentage) {
+   @return color.mix(white, $color, $percentage);
+}
+
+@function cx-blacken($color, $percentage) {
+   @return color.mix(black, $color, $percentage);
+}

package/build/util/scss/deep-get.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+@function cx-map-deep-get($map, $keys...){
+   @each $key in $keys {
+      $map: map.get($map, $key)
+   }
+   @if $map != null {
+      @return $map
+   } @else {
+      @return null
+   }
+};

package/build/util/scss/deep-merge.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:meta";
+
+@function cx-deep-map-merge($parent-map, $child-map) {
+	$result: $parent-map;
+	@each $key, $value in $child-map {
+		//If the parent map does not have the child map's key, or
+		//If their type don't match, or
+		//If they are not both maps,
+		@if (not map.has-key($result, $key)) or (meta.type-of(map.get($result, $key)) != meta.type-of($value)) or (not (meta.type-of(map.get($result, $key)) == map and meta.type-of($value) == map)) {
+			//Simply add that key to the parent map.
+			$result: map.merge($result, ($key: $value));
+		}
+		@else {
+			//If they are both maps, we need another non-destructive merger.
+			//Recursive, yay!
+			$result: map.merge($result, ($key: cx-deep-map-merge(map.get($result, $key), $value)));
+		}
+	}
+	@return $result;
+}

package/build/util/scss/divide.scss

@@ -0,0 +1,3 @@
+@function cx-divide($a, $b) {
+   @return $a / $b;
+}

package/build/util/scss/include.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@import "call-once";
+@import "colors";
+
+$cx-include-all: true !default;
+
+$cx-excluded: () !default;
+$cx-used: null !default;
+
+$cx-dependencies: () !default;
+
+@function cx-should-include($name, $once: true) {
+   @return (
+       (map.get($cx-excluded, $name) != true) and
+       ($cx-include-all or
+       ($cx-used != null and map.get($cx-used, $name) == true))
+   )
+   and ($once != true or cx-call-once($name));
+}
+
+@function cx-included($name) {
+   @return cx-called-once($name);
+}
+
+@function cx-widget($name) {
+   @if (map.get($cx-excluded, $name)) {
+      @return 0;
+   }
+   $cx-used: map.merge($cx-used, ($name: true)) !global;
+   $dummy: 1;
+   $deps: map.get($cx-dependencies, $name);
+   @if ($deps == null) {
+      @return 0;
+   }
+   @each $dep in $deps {
+      $dummy: cx-widget($dep);
+   }
+   @return $dummy;
+}
+
+@mixin cx-widgets($names...) {
+   $dummy: 1;
+   $cx-used: () !default !global;
+
+   @each $name in $names {
+      $dummy: cx-widget($name)
+   }
+}

package/build/util/scss/index.scss

@@ -0,0 +1,9 @@
+@import "add-rules";
+@import "calc";
+@import "call-once";
+@import "clockwise";
+@import "colors";
+@import "deep-merge";
+@import "deep-get";
+@import "include";
+@import "divide";

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