@energycap/components 0.45.2-multi-select-component.20260305-1130 → 0.46.0

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

@@ -1,206 +1,206 @@
-@import '../mixins/text.scss';
-
-$button-padding-y: 0.3125rem;
-$button-padding-x: 0.5rem;
-
-@mixin button {
-  font-size: var(--ec-font-size-action);
-  height: 2rem;
-  line-height: 1.25rem;
-  padding: $button-padding-y $button-padding-x;
-  border: 0;
-  border-radius: var(--ec-border-radius);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  .label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    flex: auto;
-  }
-
-  .ec-icon {
-    flex: none;
-  }
-
-  .ec-icon + .label {
-    flex: none;
-    margin-left: .25rem;
-  }
-
-  &.has-badge {
-    padding-right: 0.0625rem;
-  }
-
-  &:focus {
-    outline: none;
-    position: relative;
-    z-index: 1;
-  }
-
-  &:disabled {
-    background-color: var(--ec-background-color-disabled);
-    border: 1px solid var(--ec-form-control-border-color-disabled);
-    color: var(--ec-color-disabled-dark);
-    opacity: var(--ec-form-control-opacity-disabled);
-    cursor: default;
-
-    .ec-icon {
-      color: var(--ec-color-disabled-dark);
-    }
-  }
-}
-
-@mixin primary-button {
-  background-color: var(--ec-button-background-color-primary, var(--ec-color-gray-8));
-  color: var(--ec-button-color-primary, var(--ec-color-primary-light));
-
-  &:active:not(:disabled) {
-    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
-    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
-    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
-  }
-
-  &:focus {
-    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white)));
-  }
-
-  .ec-icon {
-    color: var(--ec-button-color-icon-primary, var(--ec-color-primary-light));
-  }
-}
-
-@mixin secondary-button {
-  background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
-  border: 1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));
-  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
-
-  &:active:not(:disabled) {
-    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
-    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
-    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
-    border-color: transparent;
-  }
-
-  &:focus {
-    box-shadow: var(--ec-button-box-shadow-focus-secondary, (0 0 0 2px var(--ec-border-color-focus)));
-    border-color: var(--ec-button-border-color-secondary-focus, transparent);
-  }
-
-  .ec-icon {
-    color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
-  }
-}
-
-// Deprecated
-@mixin common-button {
-  @include secondary-button();
-}
-
-@mixin danger-button {
-  background-color: var(--ec-color-danger);
-  color: var(--ec-color-primary-light);
-
-  .ec-icon {
-    color: var(--ec-button-color-icon, inherit);
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
-    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
-    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
-  }
-
-  &:focus {
-    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white)));
-  }
-}
-
-@mixin icon-button{
-  background-color: transparent;
-  color: var(--ec-button-color-icon, var(--ec-color-icon));
-  width: 2rem;
-  padding: 0;
-
-  .ec-icon {
-    height: 1rem;
-    margin: 0;
-    padding: 0;
-    color: inherit
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--ec-background-color-hover);
-
-    .ec-icon {
-      color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
-    }
-  }
-
-  &:active:not(:disabled),
-  &:focus {
-    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
-  }
-
-  &:active:not(:disabled) {
-    background-color: var(--ec-background-color-selected);
-  }
-
-  &:disabled {
-    background-color: transparent;
-    border-color: transparent;
-
-    .ec-icon {
-      color: var(--ec-color-disabled-dark);
-    }
-  }
-
-  &.has-badge {
-    width: auto;
-    min-width: 2rem;
-    padding-right: 0;
-    padding-left: 0.375rem;
-  }
-}
-
-@mixin text-button(
-  $type: 'text',
-  $color: var(--ec-color-primary-dark),
-  $icon-color: inherit
-) {
-  background-color: transparent;
-  color: var(--ec-button-color-text, $color);
-
-  .ec-icon {
-    color: var(--ec-button-color-icon-#{$type}, $icon-color);
-  }
-
-  &:active:not(:disabled),
-  &:focus {
-    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
-  }
-
-  &:disabled {
-    background-color: transparent;
-    border-color: transparent;
-  }
-}
-
-@mixin card-button {
-  @include secondary-button;
-  @include text-body-1;
-  padding: 1rem;
-  height: auto;
-  border: 1px solid var(--ec-border-color);
-  border-radius: var(--ec-border-radius);
-  text-align: start;
-
-  &:hover:not(:disabled):not(:focus) {
-    box-shadow: none;
-    border-color: var(--ec-border-color-control-hover);
-  }
-}
+@import '../mixins/text.scss';
+
+$button-padding-y: 0.3125rem;
+$button-padding-x: 0.5rem;
+
+@mixin button {
+  font-size: var(--ec-font-size-action);
+  height: 2rem;
+  line-height: 1.25rem;
+  padding: $button-padding-y $button-padding-x;
+  border: 0;
+  border-radius: var(--ec-border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex: auto;
+  }
+
+  .ec-icon {
+    flex: none;
+  }
+
+  .ec-icon + .label {
+    flex: none;
+    margin-left: .25rem;
+  }
+
+  &.has-badge {
+    padding-right: 0.0625rem;
+  }
+
+  &:focus {
+    outline: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  &:disabled {
+    background-color: var(--ec-background-color-disabled);
+    border: 1px solid var(--ec-form-control-border-color-disabled);
+    color: var(--ec-color-disabled-dark);
+    opacity: var(--ec-form-control-opacity-disabled);
+    cursor: default;
+
+    .ec-icon {
+      color: var(--ec-color-disabled-dark);
+    }
+  }
+}
+
+@mixin primary-button {
+  background-color: var(--ec-button-background-color-primary, var(--ec-color-gray-8));
+  color: var(--ec-button-color-primary, var(--ec-color-primary-light));
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white)));
+  }
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-primary, var(--ec-color-primary-light));
+  }
+}
+
+@mixin secondary-button {
+  background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
+  border: 1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));
+  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+    border-color: transparent;
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-secondary, (0 0 0 2px var(--ec-border-color-focus)));
+    border-color: var(--ec-button-border-color-secondary-focus, transparent);
+  }
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
+  }
+}
+
+// Deprecated
+@mixin common-button {
+  @include secondary-button();
+}
+
+@mixin danger-button {
+  background-color: var(--ec-color-danger);
+  color: var(--ec-color-primary-light);
+
+  .ec-icon {
+    color: var(--ec-button-color-icon, inherit);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-button-background-color-active, var(--ec-background-color-selected));
+    color: var(--ec-button-color-active, var(--ec-color-primary-dark));
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-focus-primary, (0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white)));
+  }
+}
+
+@mixin icon-button{
+  background-color: transparent;
+  color: var(--ec-button-color-icon, var(--ec-color-icon));
+  width: 2rem;
+  padding: 0;
+
+  .ec-icon {
+    height: 1rem;
+    margin: 0;
+    padding: 0;
+    color: inherit
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--ec-background-color-hover);
+
+    .ec-icon {
+      color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
+    }
+  }
+
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--ec-background-color-selected);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+
+    .ec-icon {
+      color: var(--ec-color-disabled-dark);
+    }
+  }
+
+  &.has-badge {
+    width: auto;
+    min-width: 2rem;
+    padding-right: 0;
+    padding-left: 0.375rem;
+  }
+}
+
+@mixin text-button(
+  $type: 'text',
+  $color: var(--ec-color-primary-dark),
+  $icon-color: inherit
+) {
+  background-color: transparent;
+  color: var(--ec-button-color-text, $color);
+
+  .ec-icon {
+    color: var(--ec-button-color-icon-#{$type}, $icon-color);
+  }
+
+  &:active:not(:disabled),
+  &:focus {
+    box-shadow: var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+@mixin card-button {
+  @include secondary-button;
+  @include text-body-1;
+  padding: 1rem;
+  height: auto;
+  border: 1px solid var(--ec-border-color);
+  border-radius: var(--ec-border-radius);
+  text-align: start;
+
+  &:hover:not(:disabled):not(:focus) {
+    box-shadow: none;
+    border-color: var(--ec-border-color-control-hover);
+  }
+}

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

@@ -1,40 +1,40 @@
-@mixin card {
-  background-color: var(--ec-background-color);
-  background-clip: padding-box;
-  border: var(--ec-border-width) solid var(--ec-border-color-hint);
-  border-radius: var(--ec-border-radius-card);
-  overflow: auto;
-  box-shadow: var(--ec-box-shadow);
-}
-
-@mixin card-header {
-  display: flex;
-  align-items: center;
-  min-height: 2.5rem;
-}
-
-@mixin card-title {
-  @extend .text-heading-2;
-  @include truncate;
-  cursor: default;
-  display: flex;
-  align-items: center;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  flex: 1 1;
-  min-height: 0;
-  min-width: 0;
-}
-
-@mixin card-footer {
-  @extend .text-caption-1;
-  border-top: 1px solid var(--ec-border-color);
-  min-height: 2rem;
-  padding: .5rem;
-}
-
-@mixin card-actions {
-  padding: .25rem;
-  display: flex;
-  margin-left: auto;
-}
+@mixin card {
+  background-color: var(--ec-background-color);
+  background-clip: padding-box;
+  border: var(--ec-border-width) solid var(--ec-border-color-hint);
+  border-radius: var(--ec-border-radius-card);
+  overflow: auto;
+  box-shadow: var(--ec-box-shadow);
+}
+
+@mixin card-header {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+}
+
+@mixin card-title {
+  @extend .text-heading-2;
+  @include truncate;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  flex: 1 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+@mixin card-footer {
+  @extend .text-caption-1;
+  border-top: 1px solid var(--ec-border-color);
+  min-height: 2rem;
+  padding: .5rem;
+}
+
+@mixin card-actions {
+  padding: .25rem;
+  display: flex;
+  margin-left: auto;
+}

package/src/styles/mixins/_common.scss

@@ -1,52 +1,52 @@
-////
-/// Common mixins to be shared by many components
-////
-
-/// Truncates text
-@mixin truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Clips text
-@mixin clip {
-  overflow: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
-}
-
-@mixin flex-grow {
-  flex: 1 1;
-  min-height: 0;
-  min-width: 0;
-}
-
-@mixin indicator($color, $condensed:false) {
-  border: solid 2px $color;
-  background-color: rgba($color, .25);
-  display: block;
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
-
-  @if $condensed {
-    width: .5rem;
-    height: .5rem;
-    border-width: 1px;
-  }
-}
-
-@mixin ul-reset {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-@mixin count-display {
-  color: var(--ec-color-accent);
-  font-size: 2rem;
-  font-style: normal;
-  font-weight: bold;
-  line-height: 1;
+////
+/// Common mixins to be shared by many components
+////
+
+/// Truncates text
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Clips text
+@mixin clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+@mixin flex-grow {
+  flex: 1 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+@mixin indicator($color, $condensed:false) {
+  border: solid 2px $color;
+  background-color: rgba($color, .25);
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+
+  @if $condensed {
+    width: .5rem;
+    height: .5rem;
+    border-width: 1px;
+  }
+}
+
+@mixin ul-reset {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+@mixin count-display {
+  color: var(--ec-color-accent);
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 1;
 }