@c8y/style 1023.14.33 → 1023.14.37

package/styles/{_alerts.less → core/feedback/_alerts.less}

@@ -120,9 +120,7 @@
 // Alternate styles
 // Generate contextual modifier classes for colorizing the alert.
 .alert-success {
-  .alert-variant(
-    @alert-success-bg; @alert-success-border; @alert-success-text; @alert-success-icon
-  );
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text; @alert-success-icon);
 }
 
 .alert-info {
@@ -134,9 +132,7 @@
 }
 
 .alert-warning {
-  .alert-variant(
-    @alert-warning-bg; @alert-warning-border; @alert-warning-text; @alert-warning-icon
-  );
+  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text; @alert-warning-icon);
 }
 
 .alert-danger {

package/styles/core/feedback/_alerts.scss

@@ -0,0 +1,243 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/alert-variant";
+@use "../../mixins/c8y-scrollbar";
+@use "../../mixins/shadows-helper";
+
+/**
+ * Alerts - Alert/notification component styles
+ *
+ * Note: Uses $alert-* variables and $size-* tokens for spacing. Uses CSS custom properties for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Alert icon width (44px): Icon area specific size
+ * - Alert widths (280px, 480px): Component-specific responsive widths
+ * - Positioning offsets (-2px, -21px, 130px, 90px, 60px): Fine-tuning and breakpoint-specific positioning
+ * - Line-height (2.2): Typography ratio for icon alignment
+ * - Blur (3px): Backdrop filter effect
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values (1035): Stacking order
+ * - Percentages (50%): Color mixing
+ */
+
+// Shared mixin for prompt icon coloring
+@mixin prompt-icon-color($color) {
+  h3 > i,
+  h3 > [class^='dlt-c8y-icon-'],
+  h3 > [class*=' dlt-c8y-icon-'] {
+    color: $color;
+  }
+}
+
+.alert {
+  --c8y-btn-default-background-default: #{$alert-background};
+  margin-bottom: $size-base;
+  padding: $alert-padding;
+  max-width: $alert-max-width;
+  border-radius: $component-border-radius-base;
+  word-wrap: break-word;
+
+  overflow-wrap: break-word;
+  @include shadows-helper.boxShadowHelper(sm);
+
+  > span {
+    white-space: pre-line;
+  }
+
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: inline-flex;
+    justify-content: center;
+    width: 44px;
+    border-left: $alert-border-width $alert-border-style transparent;
+    text-align: center;
+    font-size: $alert-status-symbol-size;
+    font-family: $alert-icon-font-family;
+    line-height: 2.2;
+    transform: translate(0, 0);
+
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  // Headings for larger alerts
+  h4 {
+    margin-top: 0;
+    color: inherit;
+  }
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+  > p + p {
+    margin-top: $size-base;
+  }
+  > .close {
+    margin-left: $size-8;
+  }
+
+  &.c8y-prompt {
+    margin-bottom: 0;
+    padding: calc($size-base * 5);
+    &:before {
+      content: '' !important;
+    }
+    h3 {
+      font-weight: 500;
+      font-size: $size-20;
+      > [class^='dlt-c8y-icon-'],
+      > [class*=' dlt-c8y-icon-'] {
+        margin-right: $size-4;
+        font-size: $size-24;
+      }
+    }
+    .alert-footer {
+      padding: calc($size-base * 5) 0 0;
+      text-align: right;
+      button {
+        margin-bottom: 0 !important;
+      }
+    }
+    &.alert-success {
+      @include prompt-icon-color($alert-success-border);
+    }
+    &.alert-warning {
+      &:before {
+        z-index: 10;
+      }
+
+      @include prompt-icon-color($alert-warning-border);
+    }
+    &.alert-danger {
+      @include prompt-icon-color($alert-danger-border);
+    }
+    &.alert-info {
+      @include prompt-icon-color($alert-info-border);
+    }
+  }
+}
+
+// Dismissible alerts
+// Expand the right padding and account for the close button's positioning.
+.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
+.alert-dismissible {
+  padding-right: calc($component-padding + $size-20); // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px; //color: inherit;
+  }
+}
+
+// Alternate styles
+// Generate contextual modifier classes for colorizing the alert.
+.alert-success {
+  @include alert-variant.alert-variant($alert-success-bg, $alert-success-border, $alert-success-text, $alert-success-icon);
+}
+
+.alert-info {
+  @include alert-variant.alert-variant($alert-info-bg, $alert-info-border, $alert-info-text, $alert-info-icon);
+}
+
+.alert-system {
+  @include alert-variant.alert-variant($alert-system-bg, $alert-system-border, $alert-system-text, $alert-system-icon);
+}
+
+.alert-warning {
+  @include alert-variant.alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text, $alert-warning-icon);
+}
+
+.alert-danger {
+  @include alert-variant.alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text, $alert-danger-icon);
+}
+
+// Alerts
+.alerts {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  z-index: $zindex-alerts;
+  display: flex;
+  flex-flow: column;
+  max-width: 100vw;
+  pointer-events: none;
+  .static & {
+    position: static;
+    padding: 0;
+  }
+
+  > c8y-alert-outlet:not(:empty) {
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: $headerHeight;
+    padding: 0 $size-16 $size-16 $size-48;
+    max-height: calc(100vh - $headerHeight);
+    pointer-events: auto;
+
+    @include c8y-scrollbar.c8y-scrollbar();
+  }
+
+  .alert {
+    margin: $size-base $size-24 $size-16 auto;
+    width: 280px;
+    transition: width 0.35s ease-in-out;
+    pointer-events: auto;
+    @include shadows-helper.boxShadowHelper(md);
+    &.expanded {
+      width: 480px;
+      @media (max-width: $screen-xs-max) {
+        width: 280px;
+      }
+    }
+  }
+}
+
+.navigator.open ~ .alerts {
+  left: $navigatorWidth;
+}
+
+.overlay-center-vertically {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindex-dropdown - 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: color-mix(in srgb, var(--c8y-root-component-background-default), transparent 50%);
+  backdrop-filter: blur(3px);
+}
+
+// prevent double scroll bars on widgets when the alerts overlay is displayed
+.alerts-overlay {
+  .card-inner-scroll {
+    overflow: hidden !important;
+  }
+}
+
+// container to hold alerts on widgets
+.inner-alert {
+  position: absolute;
+  right: $size-16;
+  left: $size-16;
+  z-index: 1035;
+  .alert {
+    margin: 0 auto $size-10;
+  } // on data-explorer
+  .measurement-icon-bar & {
+    top: 130px;
+    @media (min-width: $screen-sm-min) {
+      top: 90px;
+    }
+    @media (min-width: $screen-md-min) {
+      top: 60px;
+    }
+  }
+}

package/styles/core/feedback/_badges.scss

@@ -0,0 +1,85 @@
+@use "../../../variables/index" as *;
+
+/**
+ * Badges - Small count and labeling component
+ *
+ * Note: Uses $badge-* variables and CSS custom properties (--c8y-unit-base) for sizing.
+ *
+ * Intentionally hardcoded values:
+ * - Box-shadow widths (1px, 2px): Border simulation via inset shadow
+ * - Padding (0.4em): Relative padding for scalability
+ * - Margin-left (3px): Fine-tuning for nav pills spacing
+ */
+
+// Shared mixin for badge variants
+@mixin badge-variant($bg-color, $text-color, $include-shadow: true) {
+  background-color: $bg-color;
+  color: $text-color;
+  @if $include-shadow {
+    box-shadow: inset 0 0 0 1px $text-color;
+  }
+}
+
+.badge {
+  display: inline-flex !important;
+  min-width: calc(var(--c8y-unit-base) * 2.25);
+  min-height: calc(var(--c8y-unit-base) * 2.25);
+  justify-content: center;
+  align-items: center;
+  border-radius: $badge-border-radius;
+  background-color: $badge-background-default;
+  color: $badge-color-default;
+  text-align: center;
+  white-space: nowrap;
+  font-weight: $badge-font-weight;
+  font-size: $badge-font-size;
+  line-height: $badge-line-height;
+  box-shadow: inset 0 0 0 1px $gray-50;
+  padding: 0 0.4em;
+
+  &.badge-success {
+    @include badge-variant($badge-background-success, $badge-color-success);
+  }
+
+  &.badge-danger {
+    @include badge-variant($badge-background-danger, $badge-color-danger);
+  }
+
+  &.badge-warning {
+    @include badge-variant($badge-background-warning, $badge-color-warning);
+  }
+
+  &.badge-system {
+    @include badge-variant($badge-background-system, $badge-color-system, $include-shadow: false);
+  }
+
+  &.badge-info {
+    @include badge-variant($badge-background-info, $badge-color-info);
+  }
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  a & {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  .list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    box-shadow: 0 0 0 2px $badge-color-focus;
+  }
+  .list-group-item > & {
+    float: right;
+  }
+  .list-group-item > & + & {
+    margin-right: $size-5;
+  }
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+}

package/styles/core/feedback/_close.scss

@@ -0,0 +1,54 @@
+@use "../../../variables/index" as *;
+
+/**
+ * Close - Close button component for dismissible elements
+ *
+ * Note: Uses $size-* tokens for sizing. Uses color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Outline width (2px): Standard focus indicator
+ * - Outline-offset (-2px): Inset positioning
+ */
+
+// Shared focus outline mixin
+@mixin close-focus-outline() {
+  outline: 2px solid $component-color-focus;
+  outline-offset: -2px;
+}
+
+.close {
+  float: right;
+  color: $gray-50;
+  font-weight: normal;
+  font-size: $size-20;
+  line-height: $size-16;
+
+  &:hover,
+  &:focus {
+    color: $link-color-hover;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  &:focus {
+    @include close-focus-outline();
+  }
+}
+
+/* Additional properties for button version
+   iOS requires the button element instead of an anchor tag.
+   If you want the anchor version, it requires `href="#"`.
+   See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile */
+
+button.close {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &:focus {
+    @include close-focus-outline();
+  }
+}

package/styles/{_labels.less → core/feedback/_labels.less}

@@ -64,7 +64,7 @@
   color: @label-color-info;
   .label-variant(@label-background-info);
   &.chip{
-    color: @status-info-dark;
+    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
   }
 }
 

package/styles/core/feedback/_labels.scss

@@ -0,0 +1,93 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/labels";
+
+/**
+ * Labels - Inline label/tag component (deprecated, to be replaced by Tag)
+ *
+ * Note: Uses CSS custom properties (--c8y-font-size-xs) and $size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - em-based padding/border-radius (0.2em, 0.6em, 0.25em): Relative sizing
+ * - Line-height (1): Unitless for proper alignment
+ * - Positioning offset (-1px): Fine-tuning
+ * - Gap (6px): Off-grid spacing for chip variant
+ */
+
+/* Remove after Codex launch. will be replaced by Tag */
+
+.label {
+  display: inline;
+  padding: 0.2em 0.6em 0.2em;
+  border-radius: 0.25em;
+  color: $label-color-dark;
+  vertical-align: baseline;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: var(--c8y-font-size-xs);
+  line-height: 1;
+  a & {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  &:empty {
+    display: none;
+  }
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  &.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: $size-20;
+    .btn-clean {
+      padding: 0 !important;
+    }
+    + .chip {
+      margin-left: $size-4;
+    }
+  }
+}
+
+// Colors
+// Contextual variations (linked labels get darker on :hover)
+.label-default {
+  color: $label-color-dark;
+
+  @include labels.label-variant($label-background-default);
+}
+
+.label-primary {
+  color: $component-background-default;
+  @include labels.label-variant($label-background-primary);
+}
+
+.label-success {
+  color: $label-color-success;
+  @include labels.label-variant($label-background-success);
+}
+
+.label-info {
+  color: $label-color-info;
+  @include labels.label-variant($label-background-info);
+  &.chip {
+    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
+  }
+}
+
+.label-warning {
+  color: $label-color-warning;
+  @include labels.label-variant($label-background-warning);
+}
+
+.label-danger {
+  color: $label-color-danger;
+  @include labels.label-variant($label-background-danger);
+}

package/styles/core/feedback/_progress-bars.scss

@@ -0,0 +1,96 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/gradients";
+@use "../../mixins/progress-bar";
+
+/**
+ * Progress Bars - Progress indicator component
+ *
+ * Note: Uses $progress-* and $line-height-computed variables.
+ *
+ * Intentionally hardcoded values:
+ * - Background positions (40px, 0): Animation stripe pattern positioning
+ * - Box-shadow values (1px, 2px, -1px): Shadow depth and positioning
+ * - Background-size (40px 40px): Stripe pattern dimensions
+ * - Animation duration (2s): Animation timing
+ * - Transition duration (0.6s): Animation timing
+ * - RGBA values: Shadow opacity
+ * - Percentages: Width values
+ */
+
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+// Bar itself
+.progress {
+  overflow: hidden;
+  margin-bottom: $line-height-computed;
+  height: $line-height-computed;
+  border-radius: $progress-border-radius;
+  background-color: $progress-bg;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+// Bar of progress
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  background-color: $progress-bar-bg;
+  color: $progress-bar-color;
+  text-align: center;
+  font-size: $font-size-small;
+  line-height: $line-height-computed;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  transition: width 0.6s ease;
+}
+
+// Striped bars
+// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar-striped` class, which you just add to an existing `.progress-bar`.
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  background-size: 40px 40px;
+
+  @include gradients.gradient-striped();
+}
+
+// Call animation for the active one
+// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the `.progress-bar.active` approach.
+.progress.active .progress-bar,
+.progress-bar.active {
+  animation: progress-bar-stripes 2s linear infinite;
+}
+
+// Variations
+.progress-bar-success {
+  @include progress-bar.progress-bar-variant($progress-bar-success-bg);
+}
+
+.progress-bar-info {
+  @include progress-bar.progress-bar-variant($progress-bar-info-bg);
+}
+
+.progress-bar-warning {
+  @include progress-bar.progress-bar-variant($progress-bar-warning-bg);
+}
+
+.progress-bar-danger {
+  @include progress-bar.progress-bar-variant($progress-bar-danger-bg);
+}

package/styles/{_tag.less → core/feedback/_tag.less}

@@ -67,7 +67,7 @@
   color: @tag--color-info;
   .tag--variant(@tag--background-info);
   &.chip{
-    color: @status-info-dark;
+    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
   }
 }
 

package/styles/core/feedback/_tag.scss

@@ -0,0 +1,103 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/tag";
+
+/**
+ * Tag - Tag/label component (replacement for Label)
+ *
+ * Note: Uses CSS custom properties (--c8y-font-size-xs) and $size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - em-based padding/border-radius (0.2em, 0.6em, 0.25em): Relative sizing
+ * - Line-height (1): Unitless for proper alignment
+ * - Positioning offset (-1px): Fine-tuning
+ * - Gap (6px): Off-grid spacing for chip variant
+ */
+
+.tag {
+  display: inline;
+  padding: 0.2em 0.6em 0.2em;
+  border-radius: 0.25em;
+  color: $tag--color-dark;
+  vertical-align: baseline;
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: var(--c8y-font-size-xs);
+  line-height: 1;
+  flex-shrink: 0;
+  align-self: flex-start;
+  .form-control & {
+    align-self: center;
+  }
+  a & {
+    &:hover,
+    &:focus {
+      color: $tag--link-hover-color;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  &:empty {
+    display: none;
+  }
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+  &.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: $size-20;
+    flex: 0 0 fit-content;
+    .btn-clean{
+      padding: 0!important;
+    }
+    + .chip{
+      margin-left: $size-4;
+    }
+  }
+}
+
+// Colors
+// Contextual variations (linked labels get darker on :hover)
+.tag--default {
+  color: $tag--color-dark;
+
+  @include tag.tag--variant($tag--background-default);
+}
+
+.tag--primary {
+  color: $component-background-default;
+  @include tag.tag--variant($tag--background-primary);
+}
+
+.tag--success {
+  color: $tag--color-success;
+  @include tag.tag--variant($tag--background-success);
+}
+
+.tag--info {
+  color: $tag--color-info;
+  @include tag.tag--variant($tag--background-info);
+  &.chip {
+    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
+  }
+}
+
+.tag--warning {
+  color: $tag--color-warning;
+  @include tag.tag--variant($tag--background-warning);
+}
+
+.tag--danger {
+  color: $tag--color-danger;
+  @include tag.tag--variant($tag--background-danger);
+}
+
+// Font size inherit
+.text--inherit {
+  font-size: inherit;
+}