@energycap/components 0.37.7-ECAP-18600-ech-theme-updates.20230914-0840 → 0.37.7-ECAP-18600-ech-theme-updates.20230914-0921

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.37.7-ECAP-18600-ech-theme-updates.20230914-0840",
+  "version": "0.37.7-ECAP-18600-ech-theme-updates.20230914-0921",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_icons.scss

@@ -2,8 +2,8 @@ $icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
 
 // Deprecated SCSS variables and functions for legacy background-image icons.
 $icon-color-base: rgba(26, 26, 35, .66);
-$required-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
-$invalid-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+$required-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
+$invalid-icon: none !default; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
 
 // Unused function. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
 @function pending-icon() { 

package/src/styles/mixins/_control-base.scss

@@ -1,121 +0,0 @@
-@import '../core';
-
-$control-border-color: var(--ec-border-color-control);
-$control-border-width: rem-calc(1px);
-$control-color: var(--ec-color-primary-dark);
-$control-bg: var(--ec-background-color);
-$control-font-family: var(--ec-font-family);
-$control-font-size: var(--ec-font-size-body);
-$control-height: rem-calc(32px);
-$control-line-height: rem-calc(20px);
-$control-padding-x: rem-calc(8px);
-
-// Active State
-$control-bg-active: var(--ec-color-interactive);
-$control-text-active: var(--ec-color-primary-light);
-
-// Focused
-$control-bg-focused: var(--ec-color-disabled-dark);
-$control-border-color-focused: var(--ec-color-interactive);
-$control-shadow-focused: 0 0 0 $control-border-width $control-border-color-focused;
-
-// Disabled
-$control-bg-disabled: var(--ec-background-color-disabled);
-$control-color-disabled: var(--ec-color-secondary-dark);
-$control-opacity-disabled: .65;
-
-// Invalid
-$control-bg-invalid: var(--ec-background-color-control-invalid);
-$control-border-color-invalid: var(--ec-border-color-control-invalid);
-
-// Read only
-$control-bg-read-only: rgba($black, .12);
-
-/// Calculates the height, line-height and padding of a control
-/// @param {number} $font-size [$control-font-size] - The font size of the control
-/// @param {number | string} $height [$control-height] - The height of the control
-/// @param {number} $line-height [$control-line-height] - The line-height of the control
-/// @param {boolean} $borders [true] - Does the contorl have borders
-@mixin control-dimensions(
-  $font-size: $control-font-size,
-  $height: $control-height,
-  $line-height: $control-line-height,
-  $borders: true
-) {
-
-  // If $height is auto, set height to auto and reassign $control-height to $height for padding calculations
-  @if $height == auto {
-    height: $height;
-    $height: $control-height;
-  } @else {
-    height: $height;
-  }
-
-  // Remove units from $line height so it is relative to the control's font-size
-  line-height: strip-unit($line-height);
-
-  // Vertical padding should be the height minus the lineheight divided by two. If the control has borders, remove the border's width from the vertical padding
-  @if unit($line-height) != 'rem' {
-    @error "$line-height must be in rems in order to do calculations, was #{unit($line-height)}."
-  }
-
-  $padding-y: ($height - $line-height) * 0.5;
-  @if $borders {
-    $padding-y: (($height - $line-height) * 0.5) - $control-border-width;
-  }
-  padding: $padding-y $control-padding-x;
-}
-
-@mixin control-focus($borders: true) {
-  @if $borders {
-    border-color: $control-border-color-focused;
-    box-shadow: $control-shadow-focused;
-  } @else {
-    background-color: $control-bg-focused;
-  }
-  position: relative;
-  z-index: 1;
-}
-
-@mixin control-disabled($type, $borders: true) {
-  @if $borders {
-    background-color: $control-bg-disabled;
-    border-color: var(--ec-border-color-control-disabled);
-  }
-
-  color: $control-color-disabled;
-  opacity: $control-opacity-disabled;
-
-  @if $type == form {
-    
-  }
-}
-  
-@mixin control-invalid($borders: true) {
-  @if $borders {
-    &:not(:focus) {
-      border-color: $control-border-color-invalid;
-    }
-  }
-  background-color: $control-bg-invalid;
-}
-
-@mixin control-default($borders: true) {
-  @if $borders {
-    border-color: $control-border-color;
-  }
-  background-color: $control-bg;
-}
-
-@mixin control-active {
-  background-color: var(--ec-background-color-hover);
-}
-
-@mixin control-popup {
-  background-color: var(--ec-background-color);
-  border-radius: var(--ec-border-radius-card);
-  box-shadow: var(--ec-box-shadow-overlay);
-  margin-top: .25rem;
-  overflow: hidden;
-  z-index: var(--ec-z-index-popup);
-}

package/src/styles/mixins/_nav-control-base.scss

@@ -1,99 +0,0 @@
-@import 'control-base';
-
-$nav-font-size: var(--ec-font-size-action);
-$nav-item-bg: var(--ec-background-color);
-$nav-item-height: rem-calc(28px);
-$nav-item-line-height: rem-calc(18px);
-$nav-item-bg-hover: var(--ec-background-color-hover);
-$nav-item-bg-selected: var(--ec-background-color-selected);
-$nav-icon-height: var(--ec-font-size-icon);
-$nav-item-transition-duration: .2s;
-
-@mixin nav-hover($selector) {
-  @if $selector == button {
-
-  } @else {
-    background-color: $nav-item-bg-hover;
-  }
-}
-
-@mixin nav-active() {
-  background-color: $control-bg-active;
-  color: $control-text-active;
-}
-
-@mixin nav-selected() {
-  background-color: $nav-item-bg-selected;
-}
-
-@mixin nav-focus($borders) {
-  @include control-focus($borders);
-}
-
-@mixin nav-item-states($selector, $borders: false) {
-  cursor: pointer;
-
-  &.is-selected,
-  &.is-highlighted {
-    @include nav-selected();
-  }
-
-  &:hover {
-    @include nav-hover($selector);
-  }
-
-  &:focus {
-    @include nav-focus($borders);
-    outline: none;
-  }
-
-  &:active {
-    @include nav-active();
-  }
-
-  &:disabled,
-  &.is-disabled {
-    @include control-disabled('nav', $borders);
-    cursor: default;
-  }
-}
-
-@mixin nav-item(
-  $selector,
-  $bg: $nav-item-bg,
-  $font-size: $nav-font-size,
-  $height: $nav-item-height,
-  $line-height: $nav-item-line-height,
-  $borders: false
-) {
-
-  @include control-dimensions($font-size, $height, $line-height, $borders);
-
-  align-items: center;
-  background-color: $bg;
-  display: flex;
-
-  @include nav-item-states($selector, $borders);
-
-  .label {
-    align-items: center;
-    display: flex;
-    flex: auto;
-  }
-
-  .ec-icon {
-    flex: 0 0 auto;
-
-    & + .label {
-      margin: 0 rem-calc(6);
-    }
-  }
-}
-
-@mixin nav-group($font-size: $nav-font-size, $color: $control-color) {
-  color: $color;
-  font-size: $font-size;
-  font-family: $control-font-family;
-  padding: 0;
-  margin: 0;
-}