@c8y/style 1023.17.19 → 1023.22.2

package/styles/{_grid.less → layout/_grid.less}

@@ -54,12 +54,7 @@
     padding-right: 0;
     padding-left: 0;
   }
-  .no-gutter-sm-r {
-    padding-right: 0;
-  }
-  .no-gutter-sm-l {
-    padding-left: 0;
-  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-sm-r, .no-gutter-sm-l
 }
 
 // Medium grid
@@ -70,12 +65,7 @@
     padding-right: 0;
     padding-left: 0;
   }
-  .no-gutter-md-r {
-    padding-right: 0;
-  }
-  .no-gutter-md-l {
-    padding-left: 0;
-  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-md-r, .no-gutter-md-l
 }
 
 // Large grid
@@ -86,12 +76,7 @@
     padding-right: 0;
     padding-left: 0;
   }
-  .no-gutter-lg-r {
-    padding-right: 0;
-  }
-  .no-gutter-lg-l {
-    padding-left: 0;
-  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-lg-r, .no-gutter-lg-l
 }
 
 // max-with for full width layouts which are not listings

package/styles/layout/_grid.scss

@@ -0,0 +1,114 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/grid";
+@use "../mixins/grid-framework";
+
+/**
+ * Grid System - Bootstrap-based responsive grid
+ *
+ * Note: Uses design tokens for responsive breakpoints ($screen-*), container widths
+ * ($container-*), and spacing ($size-4).
+ *
+ * Intentionally hardcoded values:
+ * - 0 padding: Gutter removal utilities, not spacing
+ */
+
+// Container widths
+// Set the container width, and override it for fixed navbars in media queries.
+.container {
+  @include grid.container-fixed();
+  @media (min-width: $screen-sm-min) {
+    width: $container-sm;
+  }
+  @media (min-width: $screen-md-min) {
+    width: $container-md;
+  }
+  @media (min-width: $screen-lg-min) {
+    width: $container-lg;
+  }
+}
+
+// Fluid container
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+.container-fluid {
+  @include grid.container-fixed();
+}
+
+// Row
+// Rows contain and clear the floats of your columns.
+.row {
+  @include grid.make-row();
+}
+
+// Columns
+// Common styles for small and large grid columns
+@include grid-framework.make-grid-columns();
+// Extra small grid
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+@include grid-framework.make-grid(xs);
+// Small grid
+
+.no-gutter {
+  padding-right: 0;
+  padding-left: 0;
+}
+.no-gutter-r {
+  padding-right: 0;
+}
+.no-gutter-l {
+  padding-left: 0;
+}
+
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+@media (min-width: $screen-sm-min) {
+  @include grid-framework.make-grid(sm);
+  .no-gutter-sm {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-sm-r, .no-gutter-sm-l
+}
+
+// Medium grid
+// Columns, offsets, pushes, and pulls for the desktop device range.
+@media (min-width: $screen-md-min) {
+  @include grid-framework.make-grid(md);
+  .no-gutter-md {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-md-r, .no-gutter-md-l
+}
+
+// Large grid
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media (min-width: $screen-lg-min) {
+  @include grid-framework.make-grid(lg);
+  .no-gutter-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  // Removed unused no-gutter variants - verified 0 usages: .no-gutter-lg-r, .no-gutter-lg-l
+}
+
+// max-with for full width layouts which are not listings
+.col-lg-max {
+  max-width: $screen-max-width;
+}
+
+.tight-grid {
+  margin-right: calc($size-4 * -1) !important;
+  margin-left: calc($size-4 * -1) !important;
+
+  @include grid.make-row();
+  [class*='col-xs-'],
+  [class*='col-sm-'],
+  [class*='col-md-'],
+  [class*='col-lg-'] {
+    padding-right: $size-4 !important;
+    padding-left: $size-4 !important;
+  }
+}

package/styles/layout/_group-info.scss

@@ -0,0 +1,27 @@
+@use "../../variables/index" as *;
+
+/**
+ * Group Info - Information display component
+ *
+ * Note: Uses $size-20 for padding.
+ *
+ * Intentionally hardcoded values:
+ * - 30px/-30px: Specific horizontal spacing for layout
+ * - Transition duration (0.25s): Animation timing
+ * - Z-index: Stacking order
+ */
+
+.group-info {
+  margin: 0 -30px 0;
+  padding: 0 30px $size-20;
+
+  transition: all 0.25s ease;
+  .form-editable {
+    z-index: 999;
+    align-self: flex-start;
+    padding-top: 0;
+    &.form-read-only {
+      padding-top: 0;
+    }
+  }
+}

package/styles/{_layouts.less → layout/_layouts.less}

@@ -164,9 +164,7 @@ pre.inner-scroll{
   top: 0;
   z-index: 10;
   background-color: inherit;
-  &.has-sticky-card-header {
-    top: 48px;
-  }
+  // Removed unused state modifier class - verified 0 usages: .has-sticky-card-header
 }
 
 .sticky-bottom {

package/styles/layout/_layouts.scss

@@ -0,0 +1,375 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/c8y-scrollbar";
+@use "../mixins/create-grid";
+
+/**
+ * Layout Utilities - Grid, scrolling containers, and sticky positioning
+ *
+ * Note: Uses $size-* tokens for spacing and design tokens for colors/fonts.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (64px, 112px, 160px, 208px, 365px, etc.): Header/tab/actionbar heights
+ * - Grid fractions (4fr, 8fr, etc.): CSS grid fractional units
+ * - Specific widths (300px, 360px, 500px, 560px): Breakpoint-specific column widths
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values: Stacking order
+ * - Percentages: Relative sizing
+ * - 12px margin: Off-grid legacy value for card-group spacing
+ * - -2px box-shadow: Border effect
+ */
+
+body {
+  @include c8y-scrollbar.c8y-scrollbar();
+}
+
+// unset overflow to ensure position sticky works
+.mcontainer {
+  overflow: unset;
+}
+
+.inner-scroll {
+  overflow: auto;
+  height: 100%;
+  background-color: inherit;
+  overscroll-behavior: contain;
+  @include c8y-scrollbar.c8y-scrollbar();
+  > .list-group:last-child {
+    margin-bottom: 0;
+  }
+}
+pre.inner-scroll {
+  background-color: var(--c8y-pre-background);
+}
+
+/* Mixin that generate classes for setting two columns on a 12 column grid
+ * example:
+ * `grid__col-4-6`
+ * sets two columns with 40% and 60% of the available width
+ */
+@include create-grid.createGridCols(11);
+
+// spans all columns
+.grid__col--fullspan {
+  grid-column-start: 1;
+  grid-column-end: -1;
+}
+
+@media screen and (min-width: $screen-sm-min) {
+  .grid__col--auto-360 {
+    grid-template-columns: minmax(0, 9fr) 360px;
+  }
+  .grid__col--360-auto {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+}
+
+@media screen and (min-width: $screen-md-min) {
+  .grid__col--500-auto {
+    grid-template-columns: 500px minmax(0, 1fr);
+  }
+}
+@media screen and (min-width: $screen-md-min) {
+  .grid__col--560-auto {
+    grid-template-columns: minmax(560px, 4fr) minmax(0, 8fr);
+  }
+}
+
+.grid__col--auto-300 {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+/* Mixin that generate classes for setting three columns on a 12 column grid
+ * example:
+ * `grid__col-3-6-3`
+ * sets three columns with 33% and 66% and 33% of the available width
+ */
+@include create-grid.createGridCols3(5);
+
+// grid with 3 columns collapsed with the last column collapsed
+.grid__col--8-4-0 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 8fr 4fr 0fr;
+  }
+}
+
+.grid__col--5-7-0 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 5fr 7fr 0fr;
+  }
+}
+
+.grid__col--6-6-0 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 6fr 6fr 0fr;
+  }
+}
+// grid with 3 columns collapsed with the first column collapsed
+.grid__col--0-4-8 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 0fr 4fr 8fr;
+  }
+}
+
+.grid__col--0-7-5 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 0fr 7fr 5fr;
+  }
+}
+
+.grid__col--0-6-6 {
+  @media (min-width: $screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 0fr 6fr 6fr;
+  }
+}
+
+/* Mixin that generate classes for setting two rows on a 12 rows grid
+ * example:
+ * `grid__row-4-6`
+ * sets two rows with 40% and 60% of the available height
+ */
+@include create-grid.createGridRows(11);
+
+// create Gaps for grid and flex containers
+.gap-4 {
+  gap: $size-4;
+}
+@include create-grid.createGapClasses(5);
+
+// Auto rows except the first row
+.grid__row--fit-auto {
+  grid-auto-rows: min-content auto min-content !important;
+}
+// expands the first row, keeps 2nd row fit
+.grid__row--auto-min-content {
+  grid-auto-rows: auto min-content;
+}
+
+// single row
+.grid__row--1 {
+  grid-template-rows: minmax(0, auto) !important;
+}
+
+//CONTAINERS
+.content-fullpage,
+.content-fullpage--md,
+.content-fullpage--sm {
+  margin-bottom: 0;
+}
+
+.card--grid,
+.card.card--grid {
+  display: grid;
+}
+
+// STICKY HEADERS
+// for tables
+.table-responsive.full-page thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: $component-background-default;
+}
+
+// generic
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: inherit;
+  // Removed unused state modifier class - verified 0 usages: .has-sticky-card-header
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  background-color: inherit;
+}
+
+// SMALL SCREENS
+@media screen and (min-width: $screen-sm-min) {
+  .inner-scroll--sm {
+    overflow: auto;
+    overscroll-behavior: contain;
+    height: 100%;
+    background-color: inherit;
+
+    @include c8y-scrollbar.c8y-scrollbar();
+    > .list-group:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .page-sticky-header,
+  .page-sticky-header.c8y-list__item {
+    position: sticky !important;
+    top: 64px;
+    z-index: 20;
+    min-height: $page-sticky-header-height !important;
+    width: 100%;
+    background: $page-sticky-header-background-default !important;
+    box-shadow: inset 0 -2px 0 $component-border-color !important;
+    color: $page-sticky-header-color-default;
+    text-transform: $form-label-text-transform;
+    font-weight: $form-label-font-weight;
+    font-size: $form-label-font-size;
+
+    &.c8y-list--timeline {
+      margin-bottom: $size-base !important;
+    }
+    .c8y-list--timeline__item__date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $page-sticky-header-color-default;
+      font-size: $font-size-base;
+    }
+    // for hidding when inside collapsible containers
+    .collapse &,
+    .collapsible &,
+    .card & {
+      display: none !important;
+    }
+
+    &.c8y-list--timeline {
+      margin-bottom: $size-8;
+    }
+    label,
+    p {
+      margin: 0;
+    }
+    .card-group.interact-grid & {
+      display: none !important;
+    }
+    .card-group.interact-list & {
+      margin: 0 calc($size-base * 1.5);
+      background-color: $component-background-default;
+    }
+
+    .has-tabs.horizontal-tabs & {
+      top: 127px;
+    }
+    .has-action-bar & {
+      top: 110px;
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      top: 176px;
+    }
+  }
+
+  .content-fullpage--sm,
+  .content-fullpage--md {
+    margin-bottom: 0 !important;
+    height: calc(100vh - 112px);
+    .has-tabs.horizontal-tabs & {
+      height: calc(100vh - 160px);
+    }
+    .has-action-bar & {
+      height: calc(100vh - 160px);
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      height: calc(100vh - 208px);
+    }
+  }
+
+  .card.card--fullpage {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 112px);
+
+    > .card-header,
+    > .card-block,
+    > .inner-scroll > .card-block,
+    > .card-footer {
+      padding-right: $size-24;
+      padding-left: $size-24;
+    }
+    @include c8y-scrollbar.c8y-scrollbar();
+
+    .has-tabs.horizontal-tabs & {
+      max-height: calc(100vh - 160px);
+    }
+    .has-action-bar & {
+      max-height: calc(100vh - 160px);
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      max-height: calc(100vh - 208px);
+    }
+  }
+}
+
+@media screen and (min-width: $screen-md-min) {
+  .content-fullpage,
+  .content-fullpage--md {
+    margin-bottom: 0 !important;
+    height: calc(100vh - 112px);
+    .has-tabs.horizontal-tabs & {
+      height: calc(100vh - 160px);
+    }
+    .has-action-bar & {
+      height: calc(100vh - 160px);
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      height: calc(100vh - 208px);
+    }
+  }
+  .inner-scroll--md {
+    &,
+    &.overflow-visible-sm {
+      overflow: auto !important;
+      overscroll-behavior: contain;
+      height: 100%;
+      background-color: inherit;
+
+      @include c8y-scrollbar.c8y-scrollbar();
+      > .list-group:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+/* LARGE SCREENS */
+@media screen and (min-width: $screen-lg-min) {
+  .page-sticky-header,
+  .page-sticky-header.c8y-list__item {
+    position: sticky !important;
+    top: 64px;
+    .has-tabs.horizontal-tabs & {
+      top: 112px;
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      top: 160px;
+    }
+  }
+
+  .content-fullpage,
+  .content-fullpage--sm,
+  .content-fullpage--md {
+    margin-bottom: 0 !important;
+    height: calc(100vh - 112px);
+    .has-tabs.horizontal-tabs & {
+      height: calc(100vh - 160px);
+    }
+    .has-action-bar & {
+      height: calc(100vh - 160px);
+    }
+    .has-tabs.horizontal-tabs.has-action-bar & {
+      height: calc(100vh - 208px);
+    }
+  }
+}
+
+// for the application setup
+c8y-plugin-setup-stepper {
+  .content-fullpage {
+    height: calc(100vh - 365px);
+  }
+}

package/styles/layout/_mcontainer.scss

@@ -0,0 +1,136 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+
+/**
+ * Main Container (mcontainer) - Primary application content container
+ *
+ * Note: Uses design tokens for spacing ($size-*, $grid-gutter-width, etc.) and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - Layout padding-tops (70px, 88px, 136px, 152px, 200px, etc.): Header/tab/actionbar heights
+ * - Min-height calc expressions (58px, 112px, 176px, 160px): Layout-specific heights
+ * - 16.6666666667%: 1/6 of grid (CSS grid calculation)
+ * - 12px: Off-grid padding for specific dashboard layout
+ * - 100vw/100vh: Full viewport dimensions
+ */
+
+.mcontainer {
+  margin: 0;
+  padding-top: 70px;
+  min-height: calc(100vh - $size-16);
+
+  transition: margin-left $open-menu-time-type;
+  @media (min-width: $screen-sm-min) {
+    padding-top: 88px;
+    padding-right: $grid-gutter-width;
+    padding-left: $grid-gutter-width;
+    &.has-action-bar {
+      padding-top: 136px;
+    }
+    &.has-tabs.horizontal-tabs {
+      padding-top: 152px;
+      &.has-action-bar {
+        padding-top: 200px;
+      }
+    }
+    &.has-tabs.vertical-tabs {
+      padding-top: 88px;
+      padding-left: calc($nav-tabs-vertical-width + $grid-gutter-width);
+      &.has-action-bar {
+        padding-top: 136px;
+      }
+    }
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    &.has-tabs.horizontal-tabs {
+      padding-top: 136px;
+      &.has-action-bar {
+        padding-top: 184px;
+      }
+    }
+  }
+
+  &.open {
+    @media (min-width: $grid-float-breakpoint) {
+      margin-left: $navigatorWidth;
+    }
+  }
+
+  > .container-fluid {
+    @media (min-width: $screen-sm-min) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+    .grid-stack > .grid-stack-item {
+      min-width: 16.6666666667%;
+      > .grid-stack-item-content {
+        right: calc($grid-gutter-width / 2);
+        bottom: calc($grid-gutter-width / 2);
+        left: calc($grid-gutter-width / 2);
+      }
+    }
+    .dashboard {
+      margin: calc($size-24 * -1) calc($size-16 * -1) 0;
+      padding: $size-24 calc($size-base * 2) calc($size-base * 1.5);
+      min-height: calc(string.unquote('100vh - 58px'));
+      max-width: 100vw;
+    }
+    @media (min-width: $screen-sm-min) {
+      .dashboard {
+        margin: calc($size-24 * -1) calc($size-base * -3);
+        padding: $size-24 calc($size-base * 3);
+        min-height: calc(string.unquote('100vh - 112px'));
+      }
+    }
+    @media (min-width: $screen-lg) {
+      .dashboard {
+        margin-top: calc($size-24 * -1);
+        margin-bottom: calc($size-24 * -1);
+        padding-top: $size-24;
+        min-height: calc(string.unquote('100vh - 112px'));
+      }
+    }
+  }
+
+  &.has-tabs > .container-fluid .dashboard {
+    @media (min-width: $screen-sm-min) {
+      min-height: calc(string.unquote('100vh - 176px'));
+    }
+    @media (min-width: $screen-lg) {
+      min-height: calc(string.unquote('100vh - 160px'));
+    }
+  }
+
+  &.no-apps-margin {
+    margin-left: 0;
+  }
+}
+
+body:not(:has(.app-main-header)) {
+  .mcontainer {
+    padding-top: $size-16;
+    @media (max-width: $screen-xs-max) {
+      &.has-tabs {
+        padding-top: 56px;
+      }
+    }
+    @media (min-width: $screen-sm-min) {
+      &.has-action-bar {
+        padding-top: 66px;
+      }
+      &.has-tabs.horizontal-tabs {
+        padding-top: 66px;
+        &.has-action-bar {
+          padding-top: 114px;
+        }
+      }
+      &.has-tabs.vertical-tabs {
+        padding-top: $size-16;
+        &.has-action-bar {
+          padding-top: 66px;
+        }
+      }
+    }
+  }
+}