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

package/src/styles/mixins/_login.scss

@@ -1,74 +0,0 @@
-@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

@@ -1,153 +0,0 @@
-@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

@@ -1,33 +0,0 @@
-$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

@@ -1,57 +0,0 @@
-@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

@@ -1,34 +0,0 @@
-// 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

@@ -1,298 +0,0 @@
-@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;
-  }
-}