@c8y/style 1024.13.0 → 1024.14.0

package/styles/components/_markdown-content.less

@@ -1,95 +0,0 @@
-
-/**
- * Markdown Content - Styling for markdown rendered content
- *
- * Note: Uses rem units for vertical spacing to maintain consistent rhythm based on root font size.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions (800px): Max content width for readability
- * - Rem values (1rem, 2rem): Vertical rhythm using rem units (not px tokens)
- * - Border widths (1px): Standard borders
- * - Percentages (100%): Layout
- * - Opacity values (0.65): Visual effects for dark theme
- * - Font-weight values (500, 600): Typography weights
- */
-
-.markdown-content {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  p,
-  ul,
-  ol {
-    margin-bottom: 1rem;
-    max-width: 800px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    margin-bottom: 2rem;
-    font-weight: 500;
-  }
-
-  h2 {
-    margin: 2rem 0;
-    padding: 2rem 0;
-    border-top: 1px solid @gray-50;
-    border-bottom: 1px dotted @gray-50;
-  }
-
-  &--to-h3 {
-    h1,
-    h2 {
-      margin: 0 0 1rem;
-      padding: 2rem 0;
-      border-top: 1px dotted @gray-50;
-      font-weight: 600;
-      font-size: var(--c8y-font-size-h3);
-
-      &:first-child {
-        border-top: 0;
-      }
-
-      &:not(:first-child) {
-        margin-top: 2rem;
-      }
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .c8y-dark-theme & {
-    img {
-      opacity: 0.65;
-    }
-  }
-
-  table{
-    &:extend(.table);
-  }
-}
-
-// ignore max width when used in the widget
-c8y-markdown-widget-view,
-c8y-widget-preview{
-  .markdown-content {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    p,
-    ul,
-    ol {
-      max-width: unset;
-    }
-  }
-}

package/styles/components/application-and-system/_c8y-cookie-banner.less

@@ -1,36 +0,0 @@
-
-
-/**
- * c8y cookie uanner - Component styles
- *
- * Note: Uses @size-* tokens for spacing where applicable.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions: Fixed sizes for component layout
- * - Off-grid spacing: Component-specific positioning
- * - Border widths (1px, 2px, 3px): Standard borders
- * - Font-sizes: Typography
- * - Percentages: Layout
- */
-.c8y-cookie-banner {
-  position: fixed;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @zindex-modal - 3;
-  background-color: rgba(@black, 0.8);
-  color: white;
-}
-
-.cookie-banner-content {
-  column-width: 26rem;
-
-  a{
-    color: inherit;
-    text-decoration: underline;
-    &:hover {
-      color: inherit;
-    }
-  }
-}

package/styles/components/data-display-and-visualization/_boxed-label.less

@@ -1,45 +0,0 @@
-
-
-/**
- * Boxed Label - Component styles for creating dashed border containers with optional floating labels
- *
- * Usage:
- * - Single location: dashboard-details-advanced-tab/assign-widget-assets/assign-widget-asset-modal.component.html
- * - 6 instances in the assign widget assets modal
- * - Used for: widget titles, source sections, device displays, empty states, and action containers
- *
- * Features:
- * - Creates a dashed border box with padding
- * - Supports [data-label] attribute to show a floating label (like fieldset legend)
- * - Label appears as italic text at the top-left of the box
- *
- * Note: Uses @size-* tokens for spacing where applicable.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions: Fixed sizes for component layout
- * - Off-grid spacing: Component-specific positioning (-6px top, 8px left for label)
- * - Border widths (1px): Standard dashed border
- * - Font-sizes: Typography (xs for label)
- * - Border-radius (2px): Subtle rounding
- */
-.boxed-label {
-  border: dashed 1px transparent;
-  padding: @size-8 @size-8 @size-4;
-  border-radius: 2px;
-  position: relative;
-  &[data-label] {
-    border-color: var(--c8y-palette-gray-60);
-    &:before{
-      content: attr(data-label);
-      position: absolute;
-      top: -6px;
-      left: 8px;
-      font-size: var(--c8y-font-size-xs);
-      background-color: var(--c8y-root-component-background-default);
-      color: var(--c8y-root-component-color-text-muted);
-      padding: 0 4px;
-      font-style: italic;
-      border-radius: 2px;
-    }
-  }
-}

package/styles/components/data-display-and-visualization/_c8y-datapoint-pill.less

@@ -1,104 +0,0 @@
-
-@import "../../core/buttons/_buttons.less";
-
-
-/**
- * c8y datapoint pill - Component styles
- *
- * Note: Uses @size-* tokens for spacing where applicable.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions: Fixed sizes for component layout
- * - Off-grid spacing: Component-specific positioning
- * - Border widths (1px, 2px, 3px): Standard borders
- * - Font-sizes: Typography
- * - Percentages: Layout
- */
-.c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill {
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  min-height: @size-24;
-  max-width: 100%;
-  border-radius: @size-16;
-  background-color: @component-background-default;
-  box-shadow: none;
-  border: 1px solid @component-color-text-muted;
-  font-size: @font-size-small;
-  line-height: 1;
-  &__btn {
-    .btn-clean();
-    align-self: stretch;
-    padding: @size-4 @size-4 @size-4 @size-base;
-    border-right: 1px solid @component-color-text-muted;
-    color: @text-muted;
-    line-height: 1;
-  }
-  &__label {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    padding: @size-4 calc(@size-base + @size-4) @size-4 @size-4;
-    line-height: 1;
-  }
-}
-
-.c8y-datapoint-pill{
-  &__btn {
-    &, &:not(.btn){
-      padding: @size-4;
-      &:first-child{
-        border-bottom-left-radius: @size-16!important;
-        border-top-left-radius: @size-16!important;
-      }
-      + .c8y-datapoint-pill__btn{
-        border-right: 0;
-        padding-right: @size-base;
-      }
-    }
-  }
-}
-
-.c8y-alarm-pill {
-  border-radius: @size-4;
-  &__btn {
-    &, &:not(.btn){
-      padding: @size-4!important;
-      + .c8y-alarm-pill__btn{
-        border-right: 0;
-      }
-    }
-  }
-}
-
-.c8y-event-pill {
-  border-radius: 2px;
-  border: 1px dotted @component-color-text-muted;
-  &__btn {
-    &, &:not(.btn){
-      border-right: 1px dotted @component-color-text-muted;
-      padding: @size-4 !important;
-      + .c8y-event-pill__btn{
-        border-right: 0;
-      }
-    }
-  }
-}
-.c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill{
-  &.pill--sm{
-    .c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill {
-      &__btn {
-        &, &:not(.btn){
-          font-size: 11px;
-          padding: 1px @size-8 1px @size-4!important;
-          + .c8y-datapoint-pill__btn,
-          + .c8y-alarm-pill__btn,
-          + .c8y-event-pill__btn {
-            border-right: 0;
-            padding-right: @size-base;
-          }
-        }
-      }
-    }
-  }
-}

package/styles/components/data-display-and-visualization/_status.less

@@ -1,105 +0,0 @@
-
-
-/**
- * status - Component styles
- *
- * Note: Uses @size-* tokens for spacing where applicable.
- *
- * Intentionally hardcoded values:
- * - Component-specific dimensions: Fixed sizes for component layout
- * - Off-grid spacing: Component-specific positioning
- * - Border widths (1px, 2px, 3px): Standard borders
- * - Font-sizes: Typography
- * - Percentages: Layout
- */
-.statusOk {
-  color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
-}
-
-.statusNok {
-  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
-}
-
-.statusAlert {
-  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
-}
-
-.statusUnknown {
-  color: @gray-40;
-}
-
-.sendStatus,
-.pushStatus {
-  fill: url(#smallGradient);
-}
-
-.status.warning {
-  color: var(--palette-status-info, var(--c8y-palette-status-info));
-}
-.color.warning {
-  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
-}
-.color.minor {
-  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
-}
-.status.minor {
-  --c8y-icon-stroke-color: var(--c8y-palette-orange-10);
-  color: var(--palette-status-warning-high, var(--c8y-palette-status-warning-high));
-}
-
-.status.major {
-  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
-}
-.color.major {
-  color: var(--palette-status-warning, var(--c8y-palette-status-warning));
-}
-
-.status.critical {
-  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
-}
-
-.color.critical {
-  color: var(--palette-status-danger, var(--c8y-palette-status-danger));
-}
-
-// for svg
-path.statusUnknown {
-  fill: @gray-50;
-  &.pushStatus {
-    fill: @gray-40;
-  }
-}
-
-path.statusOk {
-  fill: @status-success;
-  &.pushStatus {
-    fill: @status-success-dark;
-  }
-}
-
-path.statusNok {
-  fill: @status-danger;
-  &.pushStatus {
-    fill: @status-danger-dark;
-  }
-}
-
-.fill-warning {
-  fill: @status-warning;
-}
-
-.alarm-icons {
-  position: relative;
-  font-size: @size-20;
-  width: 28px;
-  .btn-clean.severity {
-    position: absolute !important;
-    top: 0;
-    left: 50%;
-    z-index: 10;
-  }
-  .btn-clean.status {
-    margin-top: 8px;
-    font-size: @size-24;
-  }
-}

package/styles/components/data-display-and-visualization/lists/_c8y-data-point-list.less

@@ -1,31 +0,0 @@
-
-/**
- * C8Y Data Point List - Data point selection list component
- *
- * Note: Uses @size-* tokens for spacing and @component-padding.
- *
- * Intentionally hardcoded values:
- * - None - all values use design tokens
- */
-
-// Removed unused deprecated component class - verified 0 usages: .c8y-data-point-list
-
-c8y-datapoint-selection-list,
-c8y-alarm-event-selection-list {
-
-  .c8y-list__item__actions {
-    align-self: center;
-  }
-
-  .c8y-list__item__collapse--container {
-    padding: @component-padding;
-  }
-}
-
-// Removed modal selector for .c8y-data-point-list (class is unused)
-
-// c8y-datapoint-selector-list-item {
-//   .c8y-list__item__actions{
-//     padding-top: 10px!important;
-//   }
-// }

package/styles/components/data-display-and-visualization/tables/_responsive-grid-table.less

@@ -1,189 +0,0 @@
-// Base grid + column span utilities
-.responsive-grid-table {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- background: inherit;
-
- &-wrapper--striped{
-  .responsive-grid-table:nth-child(even) {
-    background: @component-background-odd;
-  }
- }
-
- &__header{
-  box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
-
-  > [class^="col-"],
-  > [class*=" col-"] {
-      padding: calc(@size-base + @size-10) @component-padding;
-      color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
-      vertical-align: bottom;
-      text-transform: uppercase;
-      font-size: var(--c8y-font-size-small);
-      font-weight: bold;
-      line-height: calc(var(--c8y-unit-base) * 2.5);
-    }
-    .inner-scroll &{
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      background: var(--c8y-page-sticky-header-background-default);
-    }
-  }
-  &__body{
-    > [class^="col-"],
-    > [class*=" col-"] {
-        display: flex;
-        align-items: center;
-        padding-top: calc(@size-base + @size-10);
-        padding-bottom: calc(@size-base + @size-10);
-        &.align-right {
-          justify-content: flex-end;
-          text-align: right;
-        }
-      }
-  }
-  &--separator{
-    box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
-    &:last-child {
-      box-shadow: none;
-    }
-  }
-  // Padding modifiers — -x (horizontal), -y (vertical), shorthand (both)
-  &--padded-x {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"],
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-left: @component-padding;
-      padding-right: @component-padding;
-    }
-  }
-  &--padded-y {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"],
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-top: @component-padding;
-      padding-bottom: @component-padding;
-    }
-  }
-  &--padded {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"],
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-left: @component-padding;
-      padding-right: @component-padding;
-      padding-top: @component-padding;
-      padding-bottom: @component-padding;
-    }
-  }
-
-  // Condensed modifiers — -x (horizontal), -y (vertical + font-size), shorthand (both)
-  &--condensed-x {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"],
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-left: var(--c8y-table-cell-padding-condensed);
-      padding-right: var(--c8y-table-cell-padding-condensed);
-    }
-  }
-  &--condensed-y {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"] {
-      padding-top: var(--c8y-table-cell-padding-condensed);
-      padding-bottom: var(--c8y-table-cell-padding-condensed);
-      font-size: calc(var(--c8y-unit-base) * 1.25);
-    }
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
-      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
-      font-size: var(--c8y-font-size-small);
-    }
-  }
-  &--condensed {
-    &.responsive-grid-table__header > [class^="col-"],
-    &.responsive-grid-table__header > [class*=" col-"] {
-      padding-top: var(--c8y-table-cell-padding-condensed);
-      padding-bottom: var(--c8y-table-cell-padding-condensed);
-      padding-left: var(--c8y-table-cell-padding-condensed);
-      padding-right: var(--c8y-table-cell-padding-condensed);
-      font-size: calc(var(--c8y-unit-base) * 1.25);
-    }
-    &.responsive-grid-table__body > [class^="col-"],
-    &.responsive-grid-table__body > [class*=" col-"] {
-      padding-top: calc(var(--c8y-table-cell-padding-condensed) - 1px);
-      padding-bottom: calc(var(--c8y-table-cell-padding-condensed) - 1px);
-      padding-left: var(--c8y-table-cell-padding-condensed);
-      padding-right: var(--c8y-table-cell-padding-condensed);
-      font-size: var(--c8y-font-size-small);
-    }
-  }
-
-  .col-actions{
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-}
-
-// Replaces SCSS: @for $i from 1 through 12
-.generate-col-spans(@i) when (@i > 0) {
-  .col-@{i} {
-    grid-column: span @i;
-  }
-  .generate-col-spans((@i - 1));
-}
-.generate-col-spans(12);
-
-// Mixin to create a wrapper + container query pair
-// @name  -> suffix for class/container name and width
-.responsive-grid-table-wrapper(@name) {
-  @cq-name: ~"responsive-grid-table-wrapper--@{name}";
-
-  .responsive-grid-table-wrapper--@{name} {
-    container-type: inline-size;
-    container-name: @cq-name;
-    width: 100%;
-
-    // When a header is present, inline labels are redundant — hide them
-    &:has(.responsive-grid-table__header) .text-label-small {
-      display: none;
-    }
-  }
-
-  @container @cq-name (max-width: unit(@name, px)) {
-    .responsive-grid-table {
-      grid-template-columns: 1fr; // stack
-      &__header {
-        display: none;
-      }
-      .col-actions {
-        justify-content: flex-start;
-      }
-    }
-    // Header is hidden when stacked — show inline labels so values stay identifiable
-    .text-label-small {
-      display: block !important;
-    }
-    // hover-only element that becomes visible when stacked
-    .showOnHover {
-      opacity: 1 !important;
-    }
-    // Any class that contains "col-" becomes full-width when stacked
-    .responsive-grid-table > [class^="col-"],
-    .responsive-grid-table > [class*=" col-"] {
-      grid-column: span 1;
-    }
-  }
-}
-
-// Replaces SCSS: @for $w from 600 through 200 (step -50)
-.generate-wrappers(@w) when (@w >= 200) {
-  .responsive-grid-table-wrapper(@w);
-  .generate-wrappers((@w - 50));
-}
-.generate-wrappers(600);