@c8y/style 1023.14.33 → 1023.14.36

package/styles/components/navigation-and-layout/action-bars/_c8y-action-bar.scss

@@ -0,0 +1,418 @@
+@use "../../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../../mixins/shadows-helper";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * C8Y Action Bar - Fixed action bar/toolbar component
+ *
+ * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $grid-gutter-width.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (140px, 280px, 330px, 400px): Input and dropdown widths
+ * - Off-token spacing (3px, 7px, 15px, 28px): Legacy padding not in token system
+ * - Negative positioning (-2px): Fine-tuning
+ * - Clip rect values (10000px, 2000px): Large clipping dimensions
+ * - Typography size (1.2em): Relative font size
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Transition durations (0.35s, 0.5s): Animation timing
+ * - Calc expressions: Complex computed values with $headerHeight
+ * - Box-shadow values: Elevation effects
+ * - Opacity values: Visual effects
+ */
+
+.c8y-ui-action-bar {
+  min-height: $size-48;
+  background-color: $action-bar-background-default;
+  color: $action-bar-color-default;
+  position: fixed;
+  top: calc(-1 * $size-4);
+  right: 0;
+  left: 0;
+  margin: 0;
+  z-index: $zindex-action-bar;
+  max-width: 100vw;
+  box-shadow: var(--c8y-elevation-md-bottom);
+
+  @media (max-width: $screen-xs-max) {
+    transition: top 0.5s ease;
+
+    .head-open & {
+      top: calc($headerHeight + 28px);
+    }
+
+    &.has-tabs {
+      top: -2px;
+      transition: top 0.35s ease;
+
+      .head-open & {
+        top: calc($headerHeight * 2 + ($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);
+    }
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    @include vendor-prefixes.transition(left $open-menu-time-type);
+
+    &.navigator-open {
+      left: $navigatorWidth;
+    }
+
+    &.horizontal-tabs.has-tabs {
+      top: calc($headerHeight * 2 - $size-16);
+    }
+  }
+}
+
+body:not(:has(.app-main-header)) {
+  .c8y-ui-action-bar {
+    top: 0;
+    &.has-tabs {
+      top: $size-48;
+    }
+    @media (max-width: $screen-xs-max) {
+      &.has-tabs {
+        display: none;
+      }
+      .navbar-header {
+        display: none;
+      }
+    }
+  }
+  &:has(.vertical-tabs) {
+    .c8y-ui-action-bar {
+      top: 0;
+    }
+  }
+}
+
+.c8y-ui-action-bar {
+  .navbar-toggle {
+    margin: 0;
+  }
+
+  .navbar-brand {
+    opacity: 1;
+  }
+
+  .navbar-collapse {
+    padding-right: calc($grid-gutter-width * 0.5);
+    padding-left: calc($grid-gutter-width * 0.5);
+    border: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.35s ease;
+
+    @media (min-width: $screen-sm-min) {
+      min-height: calc($size-base * 6);
+      overflow: visible !important;
+      display: flex;
+
+      &.collapse {
+        display: flex !important;
+
+        .navbar-right {
+          margin-left: auto;
+        }
+      }
+    }
+
+    @media (min-width: $screen-md-min) {
+      padding-right: $grid-gutter-width;
+      padding-left: $grid-gutter-width;
+    }
+
+    &.in,
+    .head-open & {
+      max-height: calc(string.unquote('100vh - 180px'));
+      overflow: auto;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    .navbar-header {
+      display: none;
+    }
+
+    .navbar-nav {
+      .dropdown-menu {
+        max-width: 330px;
+
+        &.uib-datepicker-popup {
+          width: 280px;
+        }
+        &.dropdown-menu-wide {
+          max-width: 400px;
+        }
+      }
+    }
+  }
+
+  // menu bar
+  .navbar-nav {
+    > .dropdown {
+      margin-top: $size-5;
+      vertical-align: top;
+    }
+
+    .dropdown-menu {
+      > li > * {
+        display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+      }
+    }
+
+    > .navbar-form,
+    > .btn-group {
+      display: block;
+      margin: 0;
+      padding: 3px $size-16;
+
+      @media (min-width: $screen-sm-min) {
+        display: flex;
+        margin: 0;
+        padding: 7px $size-8;
+
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+
+      > .btn {
+        float: none;
+      }
+    }
+
+    > .pull-right {
+      order: 100;
+    }
+
+    > li:not(.navbar-form) {
+      position: relative;
+
+      @media (max-width: $screen-xs-max) {
+        float: none !important;
+      }
+
+      @media (min-width: $screen-sm-min) {
+        z-index: 10;
+
+        &::after {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: $size-20;
+          content: '';
+
+          @include vendor-prefixes.translate(0, -50%);
+        }
+
+        &:last-child {
+          &::after {
+            background-color: transparent;
+          }
+        }
+      }
+
+      .btn-help {
+        font-size: 1.2em;
+        margin: calc($size-base * 1.5) 0;
+      }
+
+      > a,
+      .btn-link,
+      .c8y-dropdown {
+        padding: calc($size-16 - 2px) $size-base;
+        color: $action-bar-color-actions;
+        opacity: 1;
+        transition: $btn-transition;
+
+        @media (max-width: $screen-xs-max) {
+          display: block;
+          padding: $size-base $size-16;
+          width: 100%;
+          max-width: 100%;
+          text-align: left;
+        }
+
+        &:focus {
+          color: inherit;
+          text-decoration: none;
+          outline: 2px solid $action-bar-color-focus;
+          outline-offset: -2px;
+          border-radius: $component-border-radius-focus !important;
+        }
+
+        .c8y-icon,
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          color: $action-bar-icon-color;
+        }
+
+        &:hover,
+        &:active {
+          &:not([disabled]) {
+            color: $action-bar-color-actions-hover;
+            text-decoration: none;
+
+            .c8y-icon,
+            [class^='dlt-c8y-icon-'],
+            [class*=' dlt-c8y-icon-'] {
+              color: $action-bar-color-actions-hover;
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .dropdown.open .c8y-dropdown + .dropdown-menu,
+      [dropdown].open .c8y-dropdown + .dropdown-menu,
+      .btn-group.open .c8y-dropdown + .dropdown-menu {
+        @include shadows-helper.boxShadowHelper(md, right);
+      }
+
+      .dropdown.open .c8y-dropdown {
+        color: $action-bar-color-actions-hover;
+      }
+
+      > .navbar-info {
+        padding: 15px $size-10;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        .dropdown {
+          padding: 0;
+          width: 100%;
+          border-top: 1px solid $component-border-color;
+          .c8y-dropdown {
+            display: none !important;
+          }
+
+          .dropdown-menu {
+            position: static;
+            display: block;
+            margin-top: 0;
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+
+            li {
+              button:not(.btn) {
+                padding: $size-8 $size-16;
+              }
+            }
+          }
+        }
+        &.no-remove.more-wrapper {
+          height: 0;
+          .dropdown {
+            border-top: 0;
+          }
+        }
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+
+      > li:not(.more-wrapper) {
+        box-shadow: inset 0 1px 0 $action-bar-border-color;
+      }
+
+      > li.navbar-form {
+        display: block;
+        margin-top: 0;
+        padding: 2px $size-16;
+
+        > .c8y-select-wrapper {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .navbar-text {
+    margin-left: 0;
+    color: $action-bar-color-text-muted;
+  }
+
+  // forms in toolbar
+  .navbar-form {
+    margin-top: $size-8;
+
+    > .btn + .btn {
+      margin-left: 0;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      min-height: $size-48;
+      // min-width: 300px;
+      .datepicker > input {
+        width: 140px;
+        text-align: center;
+      }
+    }
+
+    label:not(.c8y-switch) {
+      display: inline-block;
+      align-self: center;
+      margin-right: $size-4;
+      margin-bottom: 0;
+      color: $action-bar-color-text-muted;
+      vertical-align: middle;
+      text-transform: none;
+      font-weight: normal;
+      font-size: inherit;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      margin-top: 0;
+      padding: 0;
+
+      .form-group:not(.datepicker) {
+        display: block;
+        padding: $size-5 0;
+      }
+
+      .datepicker > input {
+        width: 100%;
+        text-align: left;
+      }
+    }
+
+    .btn[uib-btn-checkbox] {
+      margin: 3px 0 0;
+    }
+  }
+
+  // MISC
+  .btn[disabled]:not(.btn-primary) {
+    pointer-events: auto !important;
+
+    &,
+    &:hover,
+    &:focus,
+    i {
+      opacity: $action-bar-disabled-opacity !important;
+      cursor: $cursor-disabled !important;
+    }
+  }
+}

package/styles/{_card-dashboard.less → components/navigation-and-layout/cards/_card-dashboard.less}

@@ -29,11 +29,8 @@
       background: @component-background-default;
     }
 
-    &.has-footer {
-      height: calc(~'100% - @{margin-48} - @{margin-16} - @{form-control-height-base} - @{margin-16}'
-      );
-    }
-    
+    // Removed unused state modifier class - verified 0 usages: .has-footer
+
     &:has(.inner-scroll) c8y-dynamic-component {
       display: flex;
       flex-direction: column;

package/styles/components/navigation-and-layout/cards/_card-dashboard.scss

@@ -0,0 +1,179 @@
+@use "../../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * Card Dashboard - Dashboard card component with widget containers
+ *
+ * Note: Uses $size-* tokens, $size-base, $component-padding, and $form-control-height-base.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (125px, 174px): Fixed header heights for specific layouts
+ * - Percentages (100%): Layout and positioning
+ * - Z-index values (9, 11): Stacking order
+ * - Opacity values (0, 1): Visual states
+ * - Calc expressions: Complex computed values with string.unquote for dynamic heights
+ */
+
+.card.card-dashboard {
+  fill: $component-color-default;
+
+  .card-title,
+  .card-title span {
+    // Inline .text-truncate styles (mixin not available in SCSS)
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+    color: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
+    pointer-events: none;
+  }
+
+  .card-title {
+    display: flex;
+  }
+
+  c8y-dashboard-child-title {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+
+  >.card-inner-scroll {
+    position: relative;
+    z-index: 9;
+    height: calc(string.unquote('100% - #{$size-48}'));
+    color: $component-color-default;
+    container-type: size;
+
+    &:before {
+      background: $component-background-default;
+    }
+
+    // Removed unused state modifier class - verified 0 usages: .has-footer
+
+    &:has(.inner-scroll) c8y-dynamic-component {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      c8y-alarm-list-widget,c8y-alarms-list{
+        display: contents;
+      }
+  }
+
+    >.component-map {
+      position: relative;
+      z-index: 11;
+      height: 100%;
+    }
+
+    c8y-map-widget{
+      flex-grow: 1;
+    }
+    c8y-kpi-widget-view{
+      display: contents;
+    }
+  }
+
+  >.fixed-header {
+    .table {
+      margin-bottom: 0;
+    }
+
+    +.card-inner-scroll {
+      height: calc(string.unquote('100% - 125px'));
+    }
+
+    &.datepicker {
+      padding-top: $size-5;
+
+      +.card-inner-scroll {
+        height: calc(string.unquote('100% - 174px'));
+      }
+    }
+  }
+
+  >.card-header-actions-no-title+.card-inner-scroll {
+    height: 100%;
+  }
+
+  .card {
+    margin-bottom: 0;
+
+    @include vendor-prefixes.box-shadow(none);
+
+    .card-inner-scroll {
+      overflow: visible;
+    }
+  }
+
+  .card-header-actions {
+    .card-title {
+      opacity: 1;
+    }
+
+    &.drag-handle:hover {
+      .header-actions {
+        .optionsBtn {
+          color: $component-color-actions;
+          opacity: 1;
+        }
+
+        .drag-handle {
+          opacity: 1;
+        }
+      }
+
+      .card-title,
+      .card-title span {
+        opacity: 1;
+      }
+    }
+  }
+
+  .card-inner-scroll {
+    >* {
+      padding-top: 0;
+    }
+
+    >[c8y-html-widget]>table,
+    .table {
+      margin: 0;
+
+      td:first-child,
+      th:first-child {
+        padding-left: $component-padding;
+      }
+
+      td:last-child,
+      th:last-child {
+        padding-right: $component-padding;
+      }
+    }
+  }
+
+  group-assignment,
+  c8y-device-status {
+    display: block;
+    height: 100%;
+  }
+}
+
+.grid-stack-item .card+.ui-resizable-handle {
+  margin-bottom: calc($size-base * -1);
+}
+
+.grid-stack>.grid-stack-item>.grid-stack-item-content {
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  overflow: visible !important;
+}
+
+@media (max-width: $screen-sm-min) {
+  .grid-stack-item {
+    margin-bottom: 0 !important;
+  }
+}

package/styles/components/navigation-and-layout/cards/_card-flip.scss

@@ -0,0 +1,104 @@
+@use "sass:math";
+@use "../../../../variables/index" as *;
+
+/**
+ * Card Flip - Flip animation container for cards
+ *
+ * Note: Uses $component-background-default for backgrounds.
+ *
+ * Intentionally hardcoded values:
+ * - Transition durations (0.6s): Animation timing for flip effect
+ * - Transform values (180deg, -180deg, 800px): 3D perspective and rotation angles
+ * - Percentages (100%): Layout
+ * - Z-index values (1, 3): Stacking order
+ * - Box-shadow values: Shadow effects for 3D appearance
+ * - RGBA values: Transparency in shadows
+ */
+
+.card-flip-container {
+  display: flex;
+  width: 100%;
+  transition: transform 0.6s;
+  &.ng-animate {
+    z-index: 3;
+  }
+  > .card-flip {
+    position: relative;
+    width: 100%;
+    transition: transform 0.6s;
+    .card-front,
+    .card-back {
+      position: absolute;
+      width: 100%;
+      background-color: $component-background-default;
+      transition: transform 0.6s;
+
+      backface-visibility: hidden;
+    }
+    .card-front {
+      position: relative;
+      text-align: center;
+    }
+    .card-back {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+      display: none;
+      transform: rotateY(180deg);
+    }
+    &.flipped-add,
+    &.flipped-remove {
+      perspective: 800px;
+      .card-front,
+      .card-back {
+        box-shadow: 0 2px 4px 1px rgba($black, math.div(10, 100));
+
+        transform-style: preserve-3d;
+        .card-inner-scroll {
+          overflow-y: hidden;
+        }
+      }
+      .card-front {
+        position: relative;
+      }
+      .card-back {
+        display: block;
+      }
+    }
+  }
+}
+
+.interact-grid .card-flip-container {
+  > .card-flip {
+    perspective: 800px;
+
+    .card-front,
+    .card-back {
+      transform-style: preserve-3d;
+    }
+
+    .card-back {
+      display: block;
+    }
+
+    &.flipped {
+      .card-front {
+        position: relative;
+        transform: rotateY(-180deg);
+      }
+      .card-back {
+        transform: rotateY(0);
+        [class^='col-sm-'],
+        [class*=' col-sm'],
+        [class^='col-md-'],
+        [class*=' col-md'],
+        [class^='col-lg-'],
+        [class*=' col-lg'] {
+          float: none;
+          width: 100%;
+        }
+      }
+    }
+  }
+}