@c8y/style 1023.17.20 → 1023.22.2

package/styles/index.scss

@@ -0,0 +1,240 @@
+/**
+ * $c8y/style - Main Entry Point
+ *
+ * This file imports all styles in the correct order.
+ * Files are now organized into logical subdirectories.
+ * See REORGANIZATION_PLAN.md for details.
+ */
+
+// ====================
+// VARIABLES & MIXINS
+// ====================
+@use 'mixins';
+
+// ====================
+// BASE / FOUNDATION
+// ====================
+@use 'base/_normalize';
+@use 'base/_scaffolding';
+@use 'base/_type';
+@use 'base/_print';
+
+// ====================
+// ANIMATIONS
+// ====================
+@use 'animations/_component-animations';
+@use 'animations/_animate';
+@use 'animations/_spinner-snake';
+@use 'animations/_realtime-animation-list';
+@use 'animations/_spinner';
+
+// ====================
+// CORE - Forms
+// ====================
+@use 'core/forms/_forms';
+@use 'core/forms/_input-groups';
+@use 'core/forms/_c8y-switch';
+@use 'core/forms/_file-picker';
+
+// ====================
+// CORE - Buttons
+// ====================
+@use 'core/buttons/_buttons';
+@use 'core/buttons/_button-groups';
+
+// ====================
+// CORE - Feedback
+// ====================
+@use 'core/feedback/_alerts';
+@use 'core/feedback/_badges';
+/* Deprecated: To be replaced by Tag component. Still used in 572 places. */
+@use 'core/feedback/_labels';
+@use 'core/feedback/_tag';
+@use 'core/feedback/_tooltip';
+@use 'core/feedback/_close';
+@use 'core/feedback/_progress-bars';
+
+// ====================
+// CORE - Overlays
+// ====================
+@use 'core/overlays/_modals';
+@use 'core/overlays/_dropdowns';
+@use 'core/overlays/_popovers';
+@use 'core/overlays/_c8y-wizard';
+@use 'core/overlays/_c8y-dashboard-modal';
+
+// ====================
+// COMPONENTS - Data Display & Visualization
+// ====================
+// Lists
+@use 'components/data-display-and-visualization/lists/_list-group';
+@use 'components/data-display-and-visualization/lists/_c8y-list-group';
+// Deprecated: Migrate to c8y-list-group. Still used in 2 files (AngularJS).
+@use 'components/data-display-and-visualization/lists/timeline-list';
+@use 'components/data-display-and-visualization/lists/_c8y-empty-state';
+@use 'components/data-display-and-visualization/lists/_cards-layout';
+@use 'components/data-display-and-visualization/lists/_c8y-data-point-list';
+@use 'components/data-display-and-visualization/lists/_smart-rules-template-list';
+// Tables
+@use 'components/data-display-and-visualization/tables/_tables';
+@use 'components/data-display-and-visualization/tables/_data-grid';
+@use 'components/data-display-and-visualization/tables/_resizable-grid';
+// Ranges & Timelines
+@use 'components/data-display-and-visualization/_range-display';
+@use 'components/data-display-and-visualization/_timelines-chart';
+
+// ====================
+// COMPONENTS - Data Input
+// ====================
+// Assets
+@use 'components/data-input/assets/_c8y-asset-selector';
+@use 'components/data-input/assets/_c8y-asset-selector-miller';
+@use 'components/data-input/assets/_c8y-asset-notes';
+@use 'components/data-input/assets/_asset-property-list';
+@use 'components/data-input/assets/_asset-table';
+@use 'components/data-input/assets/_c8y-child-assets-selector';
+// Chat
+@use 'components/data-input/_c8y-ai-chat';
+
+// ====================
+// COMPONENTS - Navigation & Layout
+// ====================
+// Action Bars
+@use 'components/navigation-and-layout/action-bars/_c8y-action-bar';
+@use 'components/navigation-and-layout/action-bars/_app-switcher';
+// Cards
+@use 'components/navigation-and-layout/cards/_card';
+@use 'components/navigation-and-layout/cards/_panels';
+@use 'components/navigation-and-layout/cards/_card-grid';
+@use 'components/navigation-and-layout/cards/_card-flip';
+@use 'components/navigation-and-layout/cards/_card-dashboard';
+// Navigation
+@use 'components/navigation-and-layout/navigation/_navbar';
+@use 'components/navigation-and-layout/navigation/_main-header';
+@use 'components/navigation-and-layout/navigation/_breadcrumbs';
+@use 'components/navigation-and-layout/navigation/_tabs';
+@use 'components/navigation-and-layout/navigation/_pagination';
+@use 'components/navigation-and-layout/navigation/_c8y-nav-stacked';
+@use 'components/navigation-and-layout/navigation/_navigator';
+// Deprecated: Remove when wizard migrated. Used in 8 files.
+@use 'components/navigation-and-layout/navigation/steps-navbar';
+@use 'components/navigation-and-layout/navigation/_navs';
+
+// ====================
+// COMPONENTS - Specialized (Cumulocity-specific)
+// ====================
+@use 'components/specialized/_c8y-stepper';
+@use 'components/specialized/_c8y-countdown-interval';
+@use 'components/specialized/_c8y-datapoint-pill';
+@use 'components/specialized/_c8y-user-roles';
+@use 'components/specialized/_c8y-role-card';
+@use 'components/specialized/_c8y-schema-form';
+@use 'components/specialized/_device-software-tab';
+@use 'components/specialized/_c8y-message-banner';
+@use 'components/specialized/_c8y-cookie-banner';
+@use 'components/specialized/_c8y-scrollbar';
+@use 'components/specialized/_code';
+@use 'components/specialized/_boxed-label';
+@use 'components/specialized/_smart-list-icon-label';
+@use 'components/specialized/_c8y-data-explorer';
+@use 'components/specialized/_c8y-smart-rest-tab';
+@use 'components/specialized/_measurements-time-control';
+@use 'components/specialized/_c8y-range';
+@use 'components/specialized/_search-header';
+@use 'components/specialized/_static-assets-file-picker';
+@use 'components/specialized/_dtm-icon-selector';
+@use 'components/specialized/_c8y-pulse';
+@use 'components/specialized/_status';
+@use 'components/specialized/_statusContainer';
+@use 'components/specialized/_c8y-login';
+@use 'components/specialized/_c8y-utils';
+
+// ====================
+// COMPONENTS - Standalone
+// ====================
+@use 'components/_smartrules';
+@use 'components/_markdown-content';
+
+// ====================
+// LAYOUT
+// ====================
+@use 'layout/_grid';
+@use 'layout/_layouts';
+@use 'layout/_mcontainer';
+@use 'layout/_page-tabs';
+@use 'layout/_split-view';
+// Deprecated
+@use 'layout/_split-scroll';
+@use 'layout/_bottom-drawer';
+@use 'layout/_c8y-top-drawer';
+@use 'layout/_group-info';
+@use 'layout/_c8y-right-drawer';
+@use 'layout/_c8y-help-drawer';
+
+// ====================
+// ICONS
+// ====================
+@use 'icons/_c8y-icons';
+@use 'icons/_dlt-c8y-icons';
+@use 'icons/_dlt-c8y-icons-stroke';
+@use 'icons/_c8y-glyphs';
+@use 'icons/_marker-icons';
+
+// ====================
+// DASHBOARD
+// ====================
+@use 'dashboard/_c8y-dashboard-style';
+@use 'dashboard/_dashboard-widgets';
+@use 'dashboard/_quick-links-widget';
+@use 'dashboard/_c8y-gauges';
+@use 'dashboard/_info-gauge';
+@use 'dashboard/welcome';
+@use 'dashboard/welcome-widget';
+@use 'dashboard/_availability-pie';
+
+// ====================
+// VENDOR - Angular/AngularJS
+// ====================
+@use 'vendor/angular/_uib-accordion';
+@use 'vendor/angular/_loading-bar';
+@use 'vendor/angular/_ui-sortable';
+@use 'vendor/angular/angular-ui-select/select';
+
+// ====================
+// VENDOR - Maps
+// ====================
+@use 'vendor/leaflet/_leaflet';
+@use 'vendor/leaflet/_c8y-map-internal';
+
+// ====================
+// VENDOR - Date/Time
+// ====================
+@use 'vendor/datepicker/_uib-datepicker';
+@use 'vendor/datepicker/_bs-datepicker';
+
+// ====================
+// VENDOR - Form Enhancements
+// ====================
+@use 'vendor/selectize/_c8y-selectize';
+
+// ====================
+// VENDOR - Code Editor
+// ====================
+@use 'vendor/ace-editor/_ace-editor';
+
+// ====================
+// VENDOR - CDK
+// ====================
+@use 'vendor/cdk/_cdk-tree';
+@use 'vendor/cdk/_cdk-drag';
+@use 'vendor/cdk/_cdk-virtual-scroll-window';
+
+// ====================
+// VENDOR - Other
+// ====================
+@use 'vendor/other/_colorpicker';
+
+// ====================
+// UTILITIES
+// ====================
+@use 'utilities';

package/styles/layout/_bottom-drawer.scss

@@ -0,0 +1,59 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/shadows-helper";
+
+/**
+ * Bottom Drawer - Fixed bottom panel
+ *
+ * Note: Uses design tokens for spacing ($size-*) and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - 6px: Off-grid positioning offset
+ * - 100vh: Full viewport height for transform
+ * - Z-index calculations: Stacking order
+ */
+
+.bottom-drawer {
+  position: fixed;
+  top: calc($header-bar-height + 6px);
+  right: $size-10;
+  bottom: 0;
+  z-index: $zindex-navbar-fixed + 5;
+  overflow-y: auto;
+  width: calc(100vw - $size-20);
+  background-color: $component-background-default;
+  transition:
+    transform $open-menu-time-type,
+    width $open-menu-time-type;
+
+  transform: translate(0, 100vh);
+
+  .drawerOpen & {
+    transform: translate(0, 0);
+    @include shadows-helper.boxShadowHelper(md, top);
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    right: $size-24;
+    width: calc(100vw - $size-48);
+
+    .open & {
+      width: calc(100vw - $navigatorWidth - $size-48);
+    }
+  }
+}
+
+.drawerOpen {
+  &:has(.bottom-drawer.has-backdrop) {
+    &:before {
+      content: '';
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: $zindex-navbar-fixed + 4;
+      cursor: not-allowed;
+    }
+  }
+}

package/styles/layout/_c8y-help-drawer.scss

@@ -0,0 +1,104 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/c8y-scrollbar";
+@use "../mixins/shadows-helper";
+
+/**
+ * Help Drawer - Fixed help panel overlay
+ *
+ * Note: Uses design tokens for spacing ($size-*, $component-padding) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Layout calc expressions (28px, 140px, etc.): Height calculations
+ * - Column widths (130ch, 55ch): Character-based column sizing
+ * - 84px padding: Specific footer alignment
+ * - 600px height breakpoint: Media query
+ * - Orphans/widows: Typography print control
+ * - Transition durations (0.5s, 0.35s): Animation timing
+ * - Z-index calculations: Stacking order
+ * - 1px borders: Standard border widths
+ * - 10000px, 2000px: Large clip values
+ */
+
+.c8y-help-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: ($zindex-action-bar - 1);
+  margin: 0;
+  padding-top: $size-48;
+  min-height: calc($size-base * 4);
+  max-width: 100vw;
+  max-height: calc(100vh - 140px);
+  background-color: var(--c8y-helpdrawer-background-default, $component-background-default);
+  color: $component-color-default;
+  overflow: auto;
+  @include c8y-scrollbar.c8y-scrollbar();
+  @include shadows-helper.boxShadowHelper(md, bottom);
+
+  .help-content {
+    padding-bottom: $component-padding;
+    max-width: 130ch;
+    columns: auto 55ch;
+    orphans: 5;
+    widows: 2;
+    gap: $size-32;
+    text-wrap: balance;
+    p + p {
+      margin-top: $size-base;
+    }
+  }
+
+  @media (min-height: 600px) {
+    &-block {
+      height: 100%;
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    transition: top 0.5s ease;
+    .head-open & {
+      top: calc($headerHeight + 28);
+    }
+    .has-tabs & {
+      top: 0;
+      transition: top 0.35s ease;
+    }
+    .has-tabs .head-open & {
+      top: calc($headerHeight * 2 + calc($size-base * 1.5));
+    }
+  }
+  @media (min-width: $screen-sm-min) {
+    top: $headerHeight;
+    clip: rect(0, 10000px, 2000px, 0);
+    .horizontal-tabs.has-tabs & {
+      top: calc($headerHeight * 2);
+      border-top: 1px solid $action-bar-border-color;
+    }
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    transition: left $open-menu-time-type;
+    .open & {
+      left: $navigatorWidth;
+    }
+    .horizontal-tabs.has-tabs & {
+      top: calc($headerHeight * 2 - $size-16);
+    }
+  }
+  &-block {
+    padding: calc($component-padding * 1.5) calc($component-padding * 2) 0
+      calc($component-padding * 1.5);
+  }
+  &-footer {
+    position: sticky;
+    bottom: 0;
+    background: inherit;
+    padding: $component-padding calc($component-padding * 2) calc($component-padding * 1.5) 84px;
+  }
+  &:not(:has(.c8y-help-drawer-footer)) {
+    .c8y-help-drawer-block {
+      padding-bottom: calc($component-padding * 1.5);
+    }
+  }
+}

package/styles/layout/_c8y-right-drawer.scss

@@ -0,0 +1,150 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/shadows-helper";
+
+/**
+ * Right Drawer - Fixed side panel navigation
+ *
+ * Note: Uses design tokens for spacing ($size-*, $component-padding), colors ($drawer-*).
+ *
+ * Intentionally hardcoded values:
+ * - 6px padding: Off-grid fine-tuning
+ * - 2px/-2px outline: Focus indicator width and offset
+ * - Z-index values: Stacking order
+ * - Percentages: Transform values
+ */
+
+@mixin checkwhiteicon($icon) {
+  @if $icon == 'white' {
+    &:before {
+      color: $icon-white-color-dark;
+    }
+
+    &::after {
+      color: $icon-white-color-light;
+    }
+  }
+}
+
+@mixin checkdarkicon($icon) {
+  @if $icon == 'duo' {
+    &:before {
+      color: $icon-dark-color-dark;
+    }
+
+    &:after {
+      color: $icon-dark-color-light;
+    }
+  }
+}
+
+.c8y-right-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: $drawer-bg;
+  color: $drawer-color;
+  overflow-y: auto;
+  padding: 0;
+  z-index: $zindex-navbar-fixed + 1;
+  display: flex;
+  flex-direction: column;
+  transform: translate(100%, 0);
+  transition: transform $open-menu-time-type;
+  --sticky-top-margin: $size-80;
+
+  --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));
+
+  --c8y-form-label-color: #{$drawer-color};
+
+  --c8y-component-border-color: var(--right-drawer-separator-color, var(--c8y-right-drawer-separator-color, var(--navigator-separator-color, var(--c8y-root-component-border-color))));
+
+  --link-color: var(--right-drawer-link-color, var(--c8y-right-drawer-link-color, var(--c8y-right-drawer-link-color-default, var(--c8y-root-component-color-link))));
+
+  --c8y-component-color-link-hover: var(--right-drawer-link-color-hover, var(--c8y-right-drawer-link-color-hover, var(--c8y-root-component-color-link-hover)));
+
+  @media (min-width: $screen-sm-min) {
+    width: $navigatorWidth;
+    transform: translate($navigatorWidth, 0);
+  }
+  .drawerOpen & {
+    transform: translate(0, 0);
+    @include shadows-helper.boxShadowHelper(md, right);
+  }
+
+  .legend, .text-muted {
+    color: $drawer-legend;
+  }
+  .sticky-top {
+    top: var(--sticky-top-margin);
+    background-color: $drawer-bg !important;
+  }
+  &__header {
+    padding: $component-padding;
+    padding-top: $size-24;
+    position: sticky;
+    top: 0;
+    z-index: 11;
+    flex-shrink: 0;
+    background-color: inherit;
+    .user-dot {
+      margin-right: $size-base;
+    }
+
+    .close {
+      margin-top: calc($size-16 * -1);
+      text-shadow: none;
+      color: $drawer-color;
+      font-weight: lighter;
+      font-size: $size-20;
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+  }
+
+  .c8y-right-drawer__link,
+  .c8y-right-drawer__item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    color: inherit;
+    text-align: left;
+    padding: 6px $component-padding;
+    background-image: none;
+    background-color: transparent;
+    border: 0;
+    &.sticky-top {
+      background-color: inherit;
+    }
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'],
+    .c8y-icon {
+      font-size: $size-20;
+      margin: $size-4 $size-8 $size-4 0;
+    }
+  }
+
+  .c8y-right-drawer__link {
+    &:active {
+      background-color: $drawer-background-active;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      outline: 2px solid $drawer-border-selected;
+      outline-offset: -2px;
+      color: $drawer-color;
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'],
+      .c8y-icon {
+        color: $drawer-border-selected;
+      }
+    }
+  }
+}

package/styles/layout/_c8y-top-drawer.scss

@@ -0,0 +1,117 @@
+@use "../../variables/index" as *;
+
+/**
+ * Top Drawer - Collapsible top navigation panel
+ *
+ * Note: Uses design tokens for spacing ($size-*), colors, and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - Layout calc expressions (76px, 72px, 56px, etc.): Header height combinations
+ * - Specific widths (170px, 273px, 272px): Drawer panel widths
+ * - Heights (380px, 445px, 220px): Drawer content dimensions
+ * - 6px, 12px: Off-grid positioning adjustments
+ * - 10000px, 2000px: Large clip values for overflow management
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index calculations: Stacking order
+ * - 1px borders: Standard border widths
+ * - 100vw/100vh: Full viewport dimensions
+ */
+
+.c8y-top-drawer, .c8y-global-context {
+  position: sticky;
+  z-index: ($zindex-action-bar - 2);
+  margin: 0 calc($size-base * -1);
+  transform: translateY(calc($size-24 * -1));
+  max-width: 100vw;
+  background-color: $component-background-default;
+  color: $component-color-default;
+  top: $headerHeight;
+  box-shadow: var(--c8y-elevation-md-bottom), inset 0 0 0 1px $component-border-color;
+  --c8y-nav-tabs-background-default: var(--c8y-level-1);
+  --c8y-nav-tabs-background-active: var(--c8y-level-0);
+
+  @media (max-width: $screen-xs-max) {
+    .head-open & {
+      top: calc($headerHeight + 76);
+    }
+    .has-tabs & {
+      top: calc($headerHeight + 6px);
+      transition: top 0.35s ease;
+    }
+    .has-tabs .head-open & {
+      top: calc($headerHeight * 2 + calc($size-base * 1.5));
+    }
+  }
+  @media (min-width: $screen-sm-min) {
+    margin: 0 calc($size-base * -1);
+    top: calc($headerHeight + 72px);
+    clip: rect(0, 10000px, 2000px, 0);
+    .horizontal-tabs.has-tabs & {
+      top: calc($headerHeight * 2 + 72px);
+    }
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    transition: left $open-menu-time-type;
+    .horizontal-tabs.has-tabs & {
+      top: calc($headerHeight * 2 + 56px);
+    }
+  }
+  :fullscreen:not(:root) & {
+    top: 0;
+    margin: 0;
+    transform: translateY(calc($size-32 * -1));
+  }
+  .component-tabs.nav-tabs {
+    padding-top: 0;
+  }
+  &--tabs {
+    position: relative;
+    padding-right: 0;
+    background-color: var(--c8y-level-1);
+    &::before {
+      display: none;
+    }
+  }
+  &--footer {
+    padding: $size-24;
+    padding-left: var(--c8y-nav-tabs-vertical-width);
+    background-color: var(--c8y-level-1);
+  }
+  &__tabs-container {
+    border-bottom: 1px solid $component-border-color;
+    max-height: calc(100vh - 380px);
+    height: 445px;
+    min-height: 220px;
+  }
+}
+
+.c8y-global-context {
+  position: fixed;
+  z-index: ($zindex-action-bar - 2);
+  width: calc(100% - $size-32);
+  clip: rect(0, 10000px, 2000px, calc($size-16 * -1));
+  --c8y-nav-tabs-vertical-width: 170px;
+  transition: width $open-menu-time-type;
+  .page-tabs-vertical .nav-tabs > div > a {
+    align-items: flex-start;
+  }
+  .c8y-top-drawer--footer {
+    --c8y-nav-tabs-vertical-width: #{$size-24};
+  }
+}
+
+@media (min-width: $grid-float-breakpoint) {
+  .c8y-global-context {
+    --c8y-nav-tabs-vertical-width: 273px;
+    .c8y-top-drawer--footer {
+      --c8y-nav-tabs-vertical-width: 273px;
+    }
+  }
+}
+body:has(.mcontainer.open) {
+  @media (min-width: $grid-float-breakpoint) {
+    .c8y-global-context {
+      width: calc(100% - 272px);
+    }
+  }
+}