@c8y/style 1023.17.19 → 1023.22.2

package/styles/components/navigation-and-layout/navigation/_steps-navbar.scss

@@ -0,0 +1,101 @@
+@use "sass:math";
+@use "../../../../variables/index" as *;
+
+// DEPRECATED: Remove when wizard.html is migrated from AngularJS to Angular.
+// Used in: 8 wizard-related files (modules/core/ui/containers/wizard.html, app wizard steps, etc.)
+.steps-navbar {
+  &.c8y-wizard-nav {
+    padding: 0;
+    min-width: 600px;
+    .register-devices & {
+      min-width: 300px;
+      @media (min-width: $screen-sm-min) {
+        min-width: 420px;
+      }
+    }
+  }
+  .nav-tabs.nav-justified {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    border-bottom: 1px solid rgba($black, math.div(10, 100));
+    > li {
+      position: relative;
+      display: block;
+      flex: 1 1 auto;
+      max-width: 50%;
+
+      a {
+        margin: 0;
+        padding: $size-8 calc($size-8 + $size-4);
+        border: 0;
+        background-color: $component-background-default;
+        color: $gray-30;
+        font-size: calc($size-base * 1.5);
+        @media (min-width: $screen-sm-min) {
+          font-size: inherit;
+        }
+        &:focus {
+          outline: none;
+          border: 0;
+          background-color: inherit;
+        }
+        &:hover {
+          border: 0;
+          background-color: inherit;
+        }
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 100%;
+          z-index: 10;
+          margin-left: 1px;
+          width: 0;
+          height: 0;
+          border-width: 18px 0 18px $size-10;
+          border-style: solid;
+          border-color: transparent transparent transparent rgba($black, math.div(10, 100));
+          content: '';
+        }
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 100%;
+          z-index: 10;
+          width: 0;
+          height: 0;
+          border-width: 18px 0 18px $size-10;
+          border-style: solid;
+          border-color: transparent transparent transparent $component-background-default;
+          content: '';
+        }
+      }
+      &:last-child > a {
+        &:after,
+        &:before {
+          display: none;
+        }
+      }
+      &.active {
+        > a {
+          border: 0;
+          background-color: $gray-30;
+          color: $component-background-default;
+          &:after {
+            border-color: transparent transparent transparent $gray-30;
+          }
+        }
+      }
+      &.completed {
+        > a {
+          border: 0;
+          background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+          color: $component-background-default;
+          &:after {
+            border-color: transparent transparent transparent var(--palette-status-success, var(--c8y-palette-status-success));
+          }
+        }
+      }
+    }
+  }
+}

package/styles/{_tabs.less → components/navigation-and-layout/navigation/_tabs.less}

@@ -146,7 +146,7 @@
   margin: 0;
   padding: @margin-4 @margin-base;
   min-height: calc(@margin-base * 6);
-  background-color: @brand-primary;
+  background-color: var(--brand-primary, var(--c8y-brand-primary));
   color: @palette-high;
   .c8y-select-wrapper {
     border-color: transparent;

package/styles/components/navigation-and-layout/navigation/_tabs.scss

@@ -0,0 +1,254 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/border-radius";
+@use "../../../mixins/tab-focus";
+
+.nav-tabs {
+  display: flex;
+  background-color: $nav-tabs-background-default;
+  box-shadow: inset 0 -1px 0 0 $nav-tabs-border-color-default;
+  color: $nav-tabs-color-default;
+
+  > div,
+  li {
+    flex: 0 0 auto;
+    > a,
+    > button:not(.btn-clean) {
+      padding: $nav-tabs-padding;
+      height: $size-64;
+      border: none;
+      background-color: transparent;
+      color: $nav-tabs-color-default;
+      line-height: $line-height-base;
+      display: flex;
+      flex-direction: column;
+      transition: all 0.15s ease;
+      position: relative;
+      text-decoration: none;
+      .label {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      @media (min-width: $grid-float-breakpoint) {
+        flex-direction: row;
+        height: $size-48;
+      }
+
+      > [class^='dlt-c8y-icon-'],
+      > [class*=' dlt-c8y-icon-'],
+      > .c8y-icon {
+        display: block;
+        margin: 0 auto;
+        margin-top: -2px;
+        width: 1em;
+        height: 18px;
+        color: $nav-tabs-icon-color-default;
+        font-size: $nav-tabs-icon-size;
+        @media (min-width: $grid-float-breakpoint) {
+          display: inline-block;
+          margin-top: 0;
+          margin-right: $size-8;
+          vertical-align: text-top;
+        }
+      }
+      &:hover:not([disabled]) {
+        outline: 2px solid $component-color-focus;
+        outline-offset: -2px;
+        background-color: $nav-tabs-background-hover;
+        text-decoration: none;
+        // border-radius: $component-border-radius-focus;
+        > [class^='dlt-c8y-icon-'],
+        > [class*=' dlt-c8y-icon-'],
+        > .c8y-icon {
+          color: $nav-tabs-icon-color-hover;
+        }
+      }
+      &:focus {
+        @include tab-focus.c8y-focus-inset();
+      }
+      &[disabled] {
+        opacity: $component-disabled-opacity !important;
+        cursor: $cursor-disabled !important;
+      }
+    }
+    // Active state, and its :hover to override normal :hover
+
+    &.active{
+      background-color: $nav-tabs-background-active;
+    }
+    &.active > a,
+    &.active > button:not([disabled]) {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $nav-tabs-background-active;
+        box-shadow:
+          inset 0 $nav-tabs-border-width-active 0 0 $nav-tabs-border-color-active,
+          inset 1px 0 0 0 $component-border-color,
+          inset -1px 0 0 0 $component-border-color;
+        font-weight: 500;
+        cursor: default;
+        outline: none;
+        border-radius: 0 !important;
+        pointer-events: none;
+      }
+      > [class^='dlt-c8y-icon-'],
+      > [class*=' dlt-c8y-icon-'],
+      > .c8y-icon {
+        color: $nav-tabs-icon-color-active;
+        opacity: 1;
+      }
+    }
+  } 
+  &.nav-justified {
+    // Note: nav-justified() and nav-tabs-justified() mixins don't exist, styles removed during LESS to SCSS migration
+    // TODO: May need to restore justified nav styles if needed
+  }
+  .dashboard-template-marker {
+    position: absolute;
+    right: 6px;
+    top: 9px;
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+.nav-tabs-justified {
+  > li > a {
+    margin-right: 0;
+    border-radius: $component-border-radius-base;
+  }
+  @media (min-width: $screen-sm-min) {
+    > li > a {
+      border-radius: $component-border-radius-base $component-border-radius-base 0 0;
+    }
+  }
+}
+
+// Tabbable tabs
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
+  }
+}
+
+// Dropdowns
+// Specific dropdowns
+.nav-tabs .dropdown-menu {
+  // make dropdown border overlap tab border
+  margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu
+
+  @include border-radius.border-top-radius(0);
+}
+
+.mobile-tabs {
+  margin: 0;
+  padding: $size-4 $size-base;
+  min-height: calc($size-base * 6);
+  background-color: var(--brand-primary, var(--c8y-brand-primary));
+  color: $palette-high;
+  .c8y-select-wrapper {
+    border-color: transparent;
+    background-color: transparent;
+    color: inherit;
+    font-size: 18px;
+    &:after {
+      color: inherit;
+    }
+    select {
+      height: calc($size-base * 5);
+      background-color: transparent;
+      box-shadow: none;
+      color: inherit;
+      option {
+        color: var(--gray-text, $text-color);
+      }
+    }
+  }
+  .btn-dot {
+    color: $palette-high;
+  }
+}
+
+.nav-tabs-vertical {
+  display: block;
+  &:not(.component-tabs) {
+    padding-top: $size-48;
+  }
+  width: $nav-tabs-vertical-width;
+  border: 0;
+  box-shadow: none;
+  &.nav-tabs-vertical--wide {
+    width:unset;
+  }
+  > div,
+  li {
+    > a, > button {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      margin: 0;
+      padding: $nav-tabs-vertical-padding;
+      height: auto;
+      border: 0;
+      box-shadow: inset 0 -1px 0 $nav-tabs-border-color-default;
+      text-transform: none;
+      font-size: inherit;
+      transition: all 0.25s ease;
+
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'],
+      .c8y-icon {
+        margin: 0 $size-8 0 0;
+        width: 1.25em;
+        ~ span {
+          display: inline-block;
+          overflow: hidden;
+          max-width: 100%;
+          vertical-align: middle;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    &.active {
+      > a, > button{
+        &, &:hover{
+          border-left: $size-4 solid $nav-tabs-color-active;
+          background-color: $nav-tabs-background-active;
+          box-shadow: inset 0 -1px 0 $nav-tabs-border-color-default !important;
+          border-radius: 0 !important;
+          pointer-events: none;
+          &::before {
+            width: 100%;
+          }
+          &::after {
+            left: 100%;
+            height: 100%;
+            border-width: calc($size-16 + $size-4) 0 calc($size-16 + $size-4) $size-base;
+          }
+        }
+      }
+    }
+  }
+}
+
+.tabs_ctrl + .container-fluid .tab-content-spacer {
+  margin: 0 -30px 0;
+  padding-bottom: $size-20;
+  border: 0;
+}
+
+c8y-roles-overview > .page-tabs {
+  margin-top: -30px;
+}
+
+.page-tabs .tab-content {
+  padding-top: calc($headerHeight + 3);
+}

package/styles/components/navigation-and-layout/navigation/steps-navbar.less

@@ -0,0 +1,98 @@
+// DEPRECATED: Remove when wizard.html is migrated from AngularJS to Angular.
+// Used in: 8 wizard-related files (modules/core/ui/containers/wizard.html, app wizard steps, etc.)
+.steps-navbar {
+  &.c8y-wizard-nav {
+    padding: 0;
+    min-width: 600px;
+    .register-devices & {
+      min-width: 300px;
+      @media (min-width: @screen-sm-min) {
+        min-width: 420px;
+      }
+    }
+  }
+  .nav-tabs.nav-justified {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row nowrap;
+    border-bottom: 1px solid fade(@black, 10%);
+    > li {
+      position: relative;
+      display: block;
+      flex: 1 1 auto;
+      max-width: 50%;
+
+      a {
+        margin: 0;
+        padding: @margin-8 calc(@margin-8 + @margin-4);
+        border: 0;
+        background-color: @component-background-default;
+        color: @gray-30;
+        font-size: 12px;
+        @media (min-width: @screen-sm-min) {
+          font-size: inherit;
+        }
+        &:focus {
+          outline: none;
+          border: 0;
+          background-color: inherit;
+        }
+        &:hover {
+          border: 0;
+          background-color: inherit;
+        }
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 100%;
+          z-index: 10;
+          margin-left: 1px;
+          width: 0;
+          height: 0;
+          border-width: 18px 0 18px 10px;
+          border-style: solid;
+          border-color: transparent transparent transparent fade(@black, 10%);
+          content: '';
+        }
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 100%;
+          z-index: 10;
+          width: 0;
+          height: 0;
+          border-width: 18px 0 18px 10px;
+          border-style: solid;
+          border-color: transparent transparent transparent @component-background-default;
+          content: '';
+        }
+      }
+      &:last-child > a {
+        &:after,
+        &:before {
+          display: none;
+        }
+      }
+      &.active {
+        > a {
+          border: 0;
+          background-color: @gray-30;
+          color: @component-background-default;
+          &:after {
+            border-color: transparent transparent transparent @gray-30;
+          }
+        }
+      }
+      &.completed {
+        > a {
+          border: 0;
+          background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+          color: @component-background-default;
+          &:after {
+            border-color: transparent transparent transparent var(--palette-status-success, var(--c8y-palette-status-success));
+          }
+        }
+      }
+    }
+  }
+}

package/styles/components/specialized/_boxed-label.scss

@@ -0,0 +1,36 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * uoxed lauel - 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
+ */
+.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/specialized/_c8y-cookie-banner.scss

@@ -0,0 +1,37 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * 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/{_c8y-countdown-interval.less → components/specialized/_c8y-countdown-interval.less}

@@ -56,7 +56,7 @@ c8y-countdown-interval {
 
 .toggle-countdown {
   position: relative;
-  margin: 0 !important;
+  margin: 0;
   border: 1px solid var(--c8y-form-control-border-color-default);
   display: flex !important;
   align-items: center;

package/styles/components/specialized/_c8y-countdown-interval.scss

@@ -0,0 +1,126 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y countdown interval - 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-countdown-interval {
+  display: contents;
+}
+
+@keyframes ellapsed {
+  from {
+    stroke-dashoffset: 100;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.time-elapsed {
+  position: relative;
+  line-height: 25px !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  background: $form-control-background-default;
+  min-width: 30px;
+  min-height: 30px;
+  svg {
+    transform: rotate(-90deg);
+    max-height: 10rem;
+    stroke-dasharray: 100;
+    stroke-dashoffset: 0;
+    position: absolute;
+    inset: 0;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  span {
+    font-size: $font-size-xs;
+    line-height: inherit;
+  }
+}
+
+.time-on {
+  transition: none !important;
+  animation-name: ellapsed;
+  animation-duration: var(--timescope);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.toggle-countdown {
+  position: relative;
+  margin: 0;
+  border: 1px solid var(--c8y-form-control-border-color-default);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  min-height: $form-control-height-base;
+  min-width: calc($form-control-height-base + $size-base);
+  padding: 0 4px;
+  background: $form-control-background-default;
+  cursor: pointer;
+  transition: var(--c8y-btn-transition-default);
+  .time-elapsed {
+    background-color: transparent;
+  }
+  &.vertical {
+    padding: 0;
+    min-width: revert;
+    border: none;
+    &:hover {
+      box-shadow: revert;
+      background-color: $gray-90;
+    }
+    &:focus-within {
+      border-color: revert;
+      outline: revert;
+      outline-offset: revert;
+    }
+  }
+  &:hover {
+    box-shadow: inset 0 0 0 1px $component-color-focus;
+  }
+  &:focus-within {
+    border-color: $component-color-focus;
+    outline: 2px solid $component-color-focus;
+    outline-offset: -2px;
+    // border-radius: $component-border-radius-focus !important;
+  }
+  input[type='checkbox'] {
+    position: absolute;
+    z-index: 0;
+    opacity: 0;
+  }
+}
+
+.toggle-countdown-disabled {
+  outline: none !important;
+  border-color: var(--c8y-form-control-border-color-default) !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  outline-offset: 0 !important;
+  i {
+    opacity: var(--c8y-action-bar-opacity-disabled) !important;
+    cursor: not-allowed !important;
+  }
+}
+
+.input-group:has(.c8y-select-wrapper) {
+  .toggle-countdown {
+    border-right: 0;
+  }
+}