@energycap/components 0.42.4-esbuild.20250131-1219 → 0.42.4-esbuild.20250131-1441

package/src/styles/mixins/_login.scss

@@ -0,0 +1,74 @@
+@import '../core';
+
+@mixin login(
+  $container-selector: '.ec-login-container', 
+  $content-selector: '.ec-login-content', 
+  $card-selector: '.ec-login-card', 
+  $card-header-selector: '.ec-login-card-header', 
+  $logo-selector: '.ec-login-logo', 
+  $banner-selector: '.ec-login-banner', 
+  $form-selector: '.ec-login-form',
+  $form-control-selector: '.ec-login-form-control',
+  $form-footer-selector: '.ec-login-form-footer',
+  $card-footer-selector: '.ec-login-card-footer',
+  $form-submit-button-selector: '.ec-login-submit'
+) {
+  #{$container-selector} {
+    background: var(--ec-background-splash);
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+  }
+  
+  #{$content-selector} {
+    margin: 0 auto;
+    width: calc(100% - 4rem);
+    max-width: 25rem;
+  }
+  
+  #{$card-selector} {
+    background-color: var(--ec-background-color);
+    border-radius: var(--ec-border-radius-dialog);
+    box-shadow: 0 0 12px rgba($black, .66);
+  }
+  
+  #{$card-header-selector} {
+    padding: 3rem 2rem 2rem;
+    text-align: center;
+  }
+
+  #{$logo-selector} {
+    max-width: 100%;
+    height: 2.5rem;
+  }
+  
+  #{$form-selector} {
+    padding: 0 2rem;
+  }
+
+  #{$banner-selector} {
+    margin-bottom: 1rem;
+  }
+
+  #{$form-control-selector} {
+    margin-bottom: 1rem;
+  }
+
+  #{$form-footer-selector} {
+    padding: 1.5rem 0 3rem;
+    display: flex;
+    align-items: center;
+  }
+
+  #{$form-submit-button-selector} {
+    --ec-button-color-primary: var(--ec-color-brand-green);
+    margin-left: auto;
+  }
+  
+  #{$card-footer-selector} {
+    border-top: 1px solid var(--ec-border-color);
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,153 @@
+@import '../../styles/mixins/common';
+
+@function get-item-padding($height, $line-height) {
+  @return (($height - $line-height) * 0.5) .5rem;
+}
+
+$menu-item-height: 1.75rem;
+$menu-item-line-height: 1.25rem;
+$menu-item-color: var(--ec-color-secondary-dark);
+$menu-item-font-size: var(--ec-menu-font-size, var(--ec-font-size-action));
+$menu-item-padding: get-item-padding($menu-item-height, $menu-item-line-height);
+
+@mixin menu-item {
+  cursor: inherit;
+  line-height: $menu-item-line-height;
+  min-height: $menu-item-height;
+  padding: $menu-item-padding;
+  border-radius: var(--ec-border-radius);
+  display: flex;
+
+  .label {
+    margin-right: auto;
+
+    & + .ec-icon {
+      margin-left: .5rem;
+    }
+  }
+
+  .ec-icon {
+    margin-top: calc(calc(#{$menu-item-line-height} - #{map-get($icon-sizes, default)}) / 2);
+    flex: none;
+
+    & + .label {
+      margin-left: .5rem;
+    }
+  }
+  
+  .ec-icon-sm {
+    margin-top: calc(calc(#{$menu-item-line-height} - #{map-get($icon-sizes, sm)}) / 2);
+  }
+}
+
+@mixin menu-ul {
+  @include ul-reset;
+  flex: auto;
+  height: 100%;
+  overflow-y: auto;
+
+  li {
+    cursor: pointer;
+    padding: 0 .25rem;
+
+    a {
+      color: inherit;
+      border-bottom: 0;
+      text-decoration: none;
+    }
+
+    &.is-selected,
+    &.is-highlighted {
+      .item-wrapper {
+        background-color: var(--ec-background-color-selected);
+      }
+    }
+
+    &:hover .item-wrapper {
+      background-color: var(--ec-background-color-hover);
+    }
+
+    &:focus .item-wrapper{
+      outline: none;
+      background-color: var(--ec-color-disabled-dark);
+      position: relative;
+      z-index: 1;
+    }
+
+    &.is-disabled .item-wrapper {
+      color: var(--ec-color-disabled-dark);
+      opacity: var(--ec-form-control-opacity-disabled);
+    }
+
+    &.is-disabled,
+    &.is-readonly {
+      cursor: default;
+
+      .item-wrapper {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+
+    &.is-checked {
+      .icon-check {
+        opacity: 1;
+      }
+    }
+
+    &.heading {
+      cursor: default;
+
+      .item-wrapper {
+        background-color: transparent;
+      }
+
+      &:not(:first-child) {
+        margin-top: .5rem;
+      }
+    }
+
+    &.divider:not(:last-child) {
+      border-bottom: 1px solid var(--ec-border-color);
+      padding-bottom: .25rem;
+      margin-bottom: .25rem;
+    }
+
+    // The :not(.divider + .divider-top) prevents a double border from appearing when the previous item has a bottom divider
+    &.divider-top:not(:first-child):not(.divider + .divider-top) {
+      border-top: 1px solid var(--ec-border-color);
+      padding-top: .25rem;
+      margin-top: .25rem;
+    }
+
+    @each $index in (1, 2, 3) {
+      $padding: $index + .5; 
+      &.indent-#{$index} .item-wrapper {
+        padding-left: #{$padding}rem;
+      }
+    }
+  }
+}
+
+@mixin menu-parent {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  position: relative;
+  max-width: 100%;
+
+  > header {
+    cursor: pointer;
+
+    &.is-selected,
+    &.is-highlighted {
+      .item-wrapper {
+        background-color: var(--ec-background-color-selected);
+      }
+    }
+
+    &:hover .item-wrapper {
+      background-color: var(--ec-background-color-hover);
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+$overlay-padding-x: 4rem;
+$overlay-padding-y: 3rem;
+
+@mixin overlay($bg: var(--ec-overlay-background-color, var(--ec-background-color)), $padding-x: $overlay-padding-x, $padding-y: $overlay-padding-y) {
+    align-items: center;
+    background-color: $bg;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: $padding-y $padding-x;
+    z-index: var(--ec-z-index-overlay);
+
+    // @deprecated when the ng1 overlay goes away
+    right: 0;
+    top: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+@mixin overlay-container {
+    position: relative;
+}
+
+@mixin overlay-message($color: var(--ec-color-secondary-dark), $font-size: var(--ec-font-size-title)) {
+    color: $color;
+    font-size: $font-size;
+}
+
+@mixin overlay-empty-wrapper {
+    max-width: 30rem;
+    margin: 0 auto;
+}

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

@@ -0,0 +1,57 @@
+@import '../core';
+
+@mixin resizable-wrapper {
+  position: relative;
+  @content;
+}
+
+@mixin resizable-handle-hover {
+  &::after {
+    background-color: var(--ec-color-interactive);
+  }
+}
+
+@mixin resizable-handle {
+  .handle {
+    position: absolute;
+    right: -7px;
+    width: 13px;
+    height: 100%;
+    top: 0;
+    padding: 0 5px;
+    z-index: var(--ec-z-index-splitter);
+
+    &::after {
+      content: '';
+      display: block;
+      transition: background-color .3s ease;
+      height: 100%;
+      position: relative;
+    }
+
+    &:hover {
+      cursor: col-resize;
+      @include resizable-handle-hover();
+    }
+
+    @content;
+  }
+}
+
+@mixin resizable-content {
+  .content {
+    overflow: hidden;
+    @content;
+  }
+}
+
+@mixin resizable-active {
+  &.is-active {
+    user-select: none;
+
+    .handle {
+      @include resizable-handle-hover();
+    }
+  }
+}
+

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

@@ -0,0 +1,34 @@
+// Animation
+@use "sass:math";
+
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+        opacity: 0;
+    } 40% {
+        opacity: 1;
+    }
+}
+
+@mixin spinner-dot($dot-size: .75rem) {
+    width: $dot-size;
+    height: $dot-size;
+    background-color: var(--ec-spinner-color, var(--ec-color-purple-5));
+    animation: sk-bouncedelay 1.7s infinite ease-in-out both;
+    margin-right: math.div($dot-size, 3);
+
+    &:nth-child(1) {
+        animation-delay: -0.60s;
+    }
+
+    &:nth-child(2) {
+        animation-delay: -0.40s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: -0.20s;
+    }
+}
+
+@mixin spinner {
+    display: flex;
+}

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

@@ -0,0 +1,298 @@
+@import '../core';
+
+$table-row-bg-selected: var(--ec-background-color-selected);
+$table-row-bg-hover: var(--ec-background-color-hover);
+$table-row-bg-heading: #EBEDEE;
+$table-cell-padding-x: .5rem;
+$table-cell-padding-y: .5rem;
+
+$table-z-indexes: (
+  th-resizable: var(--ec-z-index-sticky-header),
+  td-locked: calc(var(--ec-z-index-sticky-header) + 1),
+  th-locked: calc(var(--ec-z-index-sticky-header) + 2)
+);
+
+@mixin table-cell($type) {
+  height: 2rem;
+  line-height: 1rem;
+  padding: $table-cell-padding-x $table-cell-padding-y;
+  @include truncate;
+
+  @if $type == th {
+    border-bottom: 1px solid var(--ec-border-color-dark);
+    color: var(--ec-color-secondary-dark);
+    font-weight: normal;
+    vertical-align: middle;
+  }
+
+  @if $type == td {
+    border-top: 1px solid var(--ec-border-color);
+    vertical-align: top;
+  }
+
+  &:first-child {
+    padding-left: $table-cell-padding-x * 2;
+  }
+
+  &:last-child {
+    padding-right: $table-cell-padding-x * 2;
+  }
+}
+
+@mixin table-base {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  font-size: var(--ec-font-size-label);
+
+  th {
+    @include table-cell(th);
+  }
+
+  td {
+    @include table-cell(td);
+  }
+
+  tbody > tr:first-child td {
+    
+    border-top: 0;
+  }
+
+  tbody {
+    > tr.is-error {
+      @include table-row-status(error);
+    }
+
+    > tr.is-success {
+      @include table-row-status(success);
+    }
+  }
+
+  tfoot td {
+    font-weight: bold;
+  }
+}
+
+@mixin table-selectable {
+  thead th {
+    height: 3rem;
+  }
+
+  tbody > tr:hover {
+    > td {
+      background-color: $table-row-bg-hover;
+      border-color: transparent;
+      cursor: pointer;
+    }
+
+    &.is-selected {
+      background-color: $table-row-bg-selected;
+    }
+
+    & + tr > td {
+      border-color: $table-row-bg-hover;
+    }
+  }
+}
+
+@mixin table-condensed() {
+  th,
+  td {
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+    height: 1.5rem;
+  }
+}
+
+@mixin table-row-heading {
+  color: var(--ec-color-secondary-dark);
+  font-size: var(--ec-font-size-label);
+  font-weight: var(--ec-font-weight-bold);
+  line-height: 1.333333333;
+  text-transform: uppercase;
+  padding-bottom: 0;
+  vertical-align: bottom;
+  border-top: 0;
+}
+
+@mixin table-row-selected {
+  background-color: $table-row-bg-selected;
+}
+
+@mixin table-scrollable {
+  position: relative;
+
+  > thead th {
+    background-color: var(--ec-background-color);
+    position: sticky !important;
+    top: 0;
+    z-index: var(--ec-z-index-sticky-header);
+  }
+
+  > tfoot td {
+    background-color: var(--ec-background-color);
+    position: sticky !important;
+    bottom: 0;
+    z-index: var(--ec-z-index-sticky-header);
+  }
+}
+
+@mixin table-col-sort-icon() {
+  width: .875rem;
+  height: .875rem;
+  margin: 0 .25rem;
+  font-size: .75rem;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin icon-sort-asc {
+	font: var(--fa-font-solid);
+	content: "\f062";
+}
+
+@mixin table-col-sort() {
+  &.is-resizable {
+    .content-wrapper {
+      display: flex;
+      cursor: pointer;
+    }
+
+    .content {
+      flex: 0 1 auto;
+    }
+
+    .content-wrapper::after {
+      flex: none;
+      @include table-col-sort-icon;
+    }
+
+    &.is-sorted-desc,
+    &.is-sorted-asc {
+      .content-wrapper::after {
+        @include icon-sort-asc;
+        display: inline-flex;
+      }
+    }
+
+    &.is-sorted-desc {
+      .content-wrapper::after {
+        transform: scaleY(-1);
+      }
+    }
+
+    &.text-right {
+      .content-wrapper {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+
+  &:not(.is-resizable) {
+    cursor: pointer;
+
+    &::after {
+      @include table-col-sort-icon;
+    }
+
+    &.is-sorted-desc,
+    &.is-sorted-asc {
+      &::after {
+        @include icon-sort-asc;
+        display: inline-flex;
+      }
+    }
+
+    &.is-sorted-desc::after {
+      transform: scaleY(-1);
+    }
+
+    &.text-right {
+      &::after {
+        content: '';
+        display: none !important;
+      }
+
+      &::before {
+        @include table-col-sort-icon;
+      }
+      
+      &.is-sorted-desc,
+      &.is-sorted-asc {
+        &::before {
+          @include icon-sort-asc;
+          display: inline-block;
+        }
+      }
+
+      &.is-sorted-desc::before {
+        transform: scaleY(-1);
+      }
+    }
+  }
+}
+
+@mixin table-action-widths($selector: '.actions') {
+  $action-width: 2rem;
+  @each $n in (1, 2, 3, 4, 5) {
+    #{$selector}-#{$n} {
+      width: ($action-width * $n) + .0625rem;
+    }
+  }
+}
+
+@mixin table-master-cell {
+  width: 1.5rem;
+  padding: .25rem 0 !important;
+  vertical-align: top;
+}
+
+@mixin table-detail-row() {
+  background-color: var(--ec-background-color-detail);
+}
+
+@mixin table-detail-content() {
+  background-color: transparent;
+  border-top: 1px solid var(--ec-border-color);
+  padding: 1rem 2rem 1rem 0 !important;
+}
+
+@mixin form-table() {
+  td {
+    padding-bottom: .25rem;
+    padding-top: .25rem;
+    height: 2.5rem;
+    line-height: 2rem;
+    border-top: 0;
+    font-size: var(--ec-font-size-body);
+  }
+
+  tr:first-child {
+    td {
+      padding-top: .5rem;
+      height: 2.75rem;
+    }
+  }
+
+  tr:last-child {
+    td {
+      padding-bottom: .5rem;
+      height: 2.75rem;
+    }
+  }
+}
+
+@mixin table-row-status($status) {
+  $bg-color: var(--ec-background-color-caution);
+
+  @if $status == error {
+    $bg-color: var(--ec-background-color-danger);
+  } @else if $status == success {
+    $bg-color: var(--ec-background-color-success);
+  }
+
+  td {
+    background-color: $bg-color;
+  }
+}